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