translate-parsing-computed.html (1744B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transform Module Level 2: translate computed values.</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> 7 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 8 <meta name="assert" content="translate supports the full grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'."> 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 test_computed_value("translate", "none"); 17 18 test_computed_value("translate", "0px"); 19 test_computed_value("translate", "100%"); 20 21 test_computed_value("translate", "100px 0px", "100px"); 22 test_computed_value("translate", "100px 0.1px", "100px 0.1px"); 23 test_computed_value("translate", "100px 0%"); 24 test_computed_value("translate", "100px calc(10px - 10%)", "100px calc(-10% + 10px)"); 25 test_computed_value("translate", "100px 200%"); 26 test_computed_value("translate", "100% 200px"); 27 28 test_computed_value("translate", "100px 200px 0px", "100px 200px"); 29 test_computed_value("translate", "100px 0px 300px", "100px 0px 300px"); 30 test_computed_value("translate", "100px 0px 0px", "100px"); 31 test_computed_value("translate", "100px 200px 300px"); 32 test_computed_value("translate", "100% 200% 300px"); 33 34 test_computed_value("translate", "100% 0% 200px", "100% 0% 200px"); 35 test_computed_value("translate", "0% 0% 100px", "0% 0% 100px"); 36 test_computed_value("translate", "0em 0em 100px", "0px 0px 100px"); 37 38 test_computed_value("translate", "0", "0px"); 39 test_computed_value("translate", "1px 2px 0", "1px 2px"); 40 </script> 41 </body> 42 </html>