rotate-parsing-computed.html (2569B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transform Module Level 2: rotate computed values.</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> 7 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 8 <meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/computed-testcommon.js"></script> 12 </head> 13 <body> 14 <div id="target"></div> 15 <script> 16 // https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization 17 18 // Serialize as the keyword none if and only if none was originally specified. 19 test_computed_value("rotate", "none"); 20 21 // If a 2d rotation is specified, the property must serialize as just an <angle>. 22 test_computed_value("rotate", "0deg"); 23 24 // If a 3d rotation is specified, the property must serialize with an axis specified. 25 test_computed_value("rotate", "100 200 300 400grad", "100 200 300 360deg"); 26 test_computed_value("rotate", "400grad 100 200 300", "100 200 300 360deg"); 27 test_computed_value("rotate", "0 0 0 400grad", "0 0 0 360deg"); 28 29 // If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword. 30 test_computed_value("rotate", "x 400grad", "x 360deg"); 31 test_computed_value("rotate", "400grad x", "x 360deg"); 32 test_computed_value("rotate", "0.5 0 0 400grad", "x 360deg"); 33 test_computed_value("rotate", "1 0 0 400grad", "x 360deg"); 34 35 test_computed_value("rotate", "y 400grad", "y 360deg"); 36 test_computed_value("rotate", "400grad y", "y 360deg"); 37 test_computed_value("rotate", "0 0.5 0 400grad", "y 360deg"); 38 test_computed_value("rotate", "0 1 0 400grad", "y 360deg"); 39 40 // ...though if the axis is in the reverse direction, the angle is negated. 41 test_computed_value("rotate", "-0.5 0 0 400grad", "x -360deg"); 42 test_computed_value("rotate", "-1 0 0 400grad", "x -360deg"); 43 44 test_computed_value("rotate", "0 -0.5 0 400grad", "y -360deg"); 45 test_computed_value("rotate", "0 -1 0 400grad", "y -360deg"); 46 47 // If the axis is parallel with the z axis the property must serialize as just an <angle>. 48 test_computed_value("rotate", "400grad", "360deg"); 49 test_computed_value("rotate", "400grad z", "360deg"); 50 test_computed_value("rotate", "0 0 0.5 400grad", "360deg"); 51 test_computed_value("rotate", "0 0 1 400grad", "360deg"); 52 53 test_computed_value("rotate", "0 0 -0.5 400grad", "-360deg"); 54 test_computed_value("rotate", "0 0 -1 400grad", "-360deg"); 55 </script> 56 </body> 57 </html>