variable-substitution-replaced-size.html (1432B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>variable substitution into size properties on certain replaced elements</title> 5 6 <meta rel="author" title="Kevin Babbitt"> 7 <meta rel="author" title="Greg Whitworth"> 8 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 9 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <style> 14 .testcases > * 15 { 16 border: none; 17 --w: 10px; 18 --h: 10px; 19 width: calc(var(--w) + 20px); 20 height: calc(var(--h) + 20px); 21 } 22 </style> 23 </head> 24 <body> 25 <div class="testcases"> 26 <iframe></iframe> 27 <input type="text"> 28 <canvas></canvas> 29 </div> 30 31 <script type="text/javascript"> 32 "use strict"; 33 34 var testcases = document.querySelectorAll(".testcases > *"); 35 for (var i = 0; i < testcases.length; i++) 36 { 37 test(function() { 38 assert_equals(window.getComputedStyle(testcases[i]).width, "30px"); 39 }, "width on " + testcases[i].tagName); 40 test(function() { 41 assert_equals(window.getComputedStyle(testcases[i]).height, "30px"); 42 }, "height on " + testcases[i].tagName); 43 } 44 </script> 45 </body> 46 </html>