transform-origin-valid.html (1986B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transform Module Level 1: parsing transform-origin with valid values</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> 7 <meta name="assert" content="transform-origin supports the full grammar from spec."> 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-origin", "left", ["left center 0px", "left 50% 0px", "left center"]); 15 test_valid_value("transform-origin", "center", ["center center 0px", "center 50% 0px", "center center"]); 16 test_valid_value("transform-origin", "right", ["right center 0px", "right 50% 0px", "right center"]); 17 test_valid_value("transform-origin", "top", ["center top 0px", "50% top 0px", "center top"]); 18 test_valid_value("transform-origin", "bottom", ["center bottom 0px", "50% bottom 0px", "center bottom"]); 19 test_valid_value("transform-origin", "-1px", ["-1px center 0px", "-1px 50% 0px", "-1px center"]); 20 test_valid_value("transform-origin", "calc(2em + 3ex)", ["calc(2em + 3ex) center 0px", "calc(2em + 3ex) 50% 0px", "calc(2em + 3ex) center"]); 21 test_valid_value("transform-origin", "-4%", ["-4% center 0px", "-4% 50% 0px", "-4% center"]); 22 23 test_valid_value("transform-origin", "left center", ["left center 0px", "left center"]); 24 test_valid_value("transform-origin", "center top", ["center top 0px", "center top"]); 25 test_valid_value("transform-origin", "right -4%", ["right -4% 0px", "right -4%"]); 26 test_valid_value("transform-origin", "-1px bottom 5px"); 27 28 test_valid_value("transform-origin", "center left 6px", "left center 6px"); 29 test_valid_value("transform-origin", "top center", ["center top 0px", "center top"]); 30 test_valid_value("transform-origin", "bottom right 7px", "right bottom 7px"); 31 test_valid_value("transform-origin", "-1px -2px -3px"); 32 </script> 33 </body> 34 </html>