transform-valid.html (3065B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transform Module Level 2: parsing transform with valid values</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-property"> 7 <meta name="assert" content="transform supports the full grammar 'none | <transform-list>'."> 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 test_valid_value("transform", "none"); 15 16 test_valid_value("transform", "matrix(1, 0, 0, 1, 0, 0)"); 17 test_valid_value("transform", "matrix(1, 2, 3, 4, 5, 6)"); 18 test_valid_value("transform", "matrix(-0.1, -0.2, -0.3, -0.4, -0.5, -0.6)"); 19 20 test_valid_value("transform", "translate(1px)"); 21 test_valid_value("transform", "translate(1px, 0%)"); 22 test_valid_value("transform", "translate(2%, -3%)"); 23 24 test_valid_value("transform", "translateX(-4px)"); 25 26 test_valid_value("transform", "translateY(5%)"); 27 28 test_valid_value("transform", "scale(2)"); 29 test_valid_value("transform", "scale(3, 4)"); 30 31 test_valid_value("transform", "scale(-2)"); 32 test_valid_value("transform", "scale(-5, -6)"); 33 34 test_valid_value("transform", "scale(250%)", "scale(2.5)"); 35 test_valid_value("transform", "scale(325%, 475%)", "scale(3.25, 4.75)"); 36 test_valid_value("transform", "scale(1, 200%)", "scale(1, 2)"); 37 38 test_valid_value("transform", "scale(-250%)", "scale(-2.5)"); 39 test_valid_value("transform", "scale(-500%, -620%)", "scale(-5, -6.2)"); 40 41 test_valid_value("transform", "scaleX(7)", "scalex(7)"); 42 test_valid_value("transform", "scaleX(720%)", "scalex(7.2)"); 43 44 test_valid_value("transform", "scaleY(-8)", "scaley(-8)"); 45 test_valid_value("transform", "scaleY(-85%)", "scaley(-0.85)"); 46 47 test_valid_value("transform", "scaleZ(4)", "scalez(4)"); 48 test_valid_value("transform", "scaleZ(25%)", "scalez(0.25)"); 49 50 test_valid_value("transform", "scale3d(0.5, 2.5, 3)"); 51 test_valid_value("transform", "scale3d(50%, 250%, 300%)", "scale3d(0.5, 2.5, 3)"); 52 53 test_valid_value("transform", "scale3d(-0.5, 2.5, -3)"); 54 test_valid_value("transform", "scale3d(-50%, 250%, -300%)", "scale3d(-0.5, 2.5, -3)"); 55 test_valid_value("transform", "scale3d(1, 200%, 3)", "scale3d(1, 2, 3)"); 56 57 test_valid_value("transform", "rotate(0)", "rotate(0deg)"); 58 test_valid_value("transform", "rotate(90deg)"); 59 60 test_valid_value("transform", "skew(0)", "skew(0deg)"); 61 test_valid_value("transform", "skew(90deg)"); 62 test_valid_value("transform", "skew(0, -90deg)", "skew(0deg, -90deg)"); 63 test_valid_value("transform", "skew(90deg, 0)", ["skew(90deg)", "skew(90deg, 0deg)"]); 64 65 test_valid_value("transform", "skewX(0)", "skewx(0deg)"); 66 test_valid_value("transform", "skewX(90deg)", "skewx(90deg)"); 67 68 test_valid_value("transform", "skewY(0)", "skewy(0deg)"); 69 test_valid_value("transform", "skewY(-90deg)", "skewy(-90deg)"); 70 71 test_valid_value("transform", "perspective(10px)"); 72 test_valid_value("transform", "perspective(none)"); 73 74 test_valid_value("transform", "translate(1px, 2%) scale(3, 4) rotate(-90deg)"); 75 </script> 76 </body> 77 </html>