| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Transform Module Level 2: parsing rotate with valid values</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> |
| <meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/parsing-testcommon.js"></script> |
| </head> |
| <body> |
| <script> |
| // https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization |
| |
| // Serialize as the keyword none if and only if none was originally specified. |
| test_valid_value("rotate", "none"); |
| |
| // If a 2d rotation is specified, the property must serialize as just an <angle>. |
| test_valid_value("rotate", "0deg"); |
| |
| // If a 3d rotation is specified, the property must serialize with an axis specified. |
| test_valid_value("rotate", "100 200 300 400grad"); |
| test_valid_value("rotate", "400grad 100 200 300", "100 200 300 400grad"); |
| test_valid_value("rotate", "0 0 0 400grad", "0 0 0 400grad"); |
| |
| // If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword. |
| test_valid_value("rotate", "x 400grad"); |
| test_valid_value("rotate", "400grad x", "x 400grad"); |
| test_valid_value("rotate", "0.5 0 0 400grad", "x 400grad"); |
| test_valid_value("rotate", "1 0 0 400grad", "x 400grad"); |
| |
| test_valid_value("rotate", "y 400grad"); |
| test_valid_value("rotate", "400grad y", "y 400grad"); |
| test_valid_value("rotate", "0 0.5 0 400grad", "y 400grad"); |
| test_valid_value("rotate", "0 1 0 400grad", "y 400grad"); |
| |
| // If the axis is parallel with the z axis the property must serialize as just an <angle>. |
| test_valid_value("rotate", "400grad"); |
| test_valid_value("rotate", "400grad z", "400grad"); |
| test_valid_value("rotate", "0 0 0.5 400grad", "400grad"); |
| test_valid_value("rotate", "0 0 1 400grad", "400grad"); |
| </script> |
| </body> |
| </html> |