translate-getComputedStyle.html (1336B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transform Module Level 2: translate getComputedStyle</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> 7 <meta name="assert" content="translate computed style does not resolve percentages."> 8 <style type="text/css"> 9 #container { 10 transform-style: preserve-3d;; 11 } 12 #first { 13 font-size: 10px; 14 translate: 10px 2em; 15 } 16 #second { 17 translate: 30% 40% 50px; 18 } 19 #third { 20 font-size: 10px; 21 width: 98px; 22 height: 76px; 23 translate: calc(7em + 80%) -9em; 24 } 25 </style> 26 <script src="/resources/testharness.js"></script> 27 <script src="/resources/testharnessreport.js"></script> 28 </head> 29 <body> 30 <div id="container"> 31 <div id="first"></div> 32 <div id="second"></div> 33 <div id="third"></div> 34 </div> 35 <script> 36 'use strict'; 37 function getTranslateFor(id) { 38 return window.getComputedStyle(document.getElementById(id)).getPropertyValue("translate"); 39 } 40 41 test(function() { 42 assert_equals(getTranslateFor("first"), "10px 20px"); 43 assert_equals(getTranslateFor("second"), "30% 40% 50px"); 44 assert_equals(getTranslateFor("third"), "calc(80% + 70px) -90px"); 45 }, "computed style for translate"); 46 </script> 47 </body> 48 </html>