| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>variable substitution into size properties on certain replaced elements</title> |
| |
| <meta rel="author" title="Kevin Babbitt"> |
| <meta rel="author" title="Greg Whitworth"> |
| <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> |
| <!-- This is testing filters functions with var() function --> |
| <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| .testcases > * |
| { |
| border: none; |
| --w: 10px; |
| --h: 10px; |
| width: calc(var(--w) + 20px); |
| height: calc(var(--h) + 20px); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="testcases"> |
| <iframe></iframe> |
| <input type="text"> |
| <canvas></canvas> |
| </div> |
| |
| <script type="text/javascript"> |
| "use strict"; |
| |
| var testcases = document.querySelectorAll(".testcases > *"); |
| for (var i = 0; i < testcases.length; i++) |
| { |
| test(function() { |
| assert_equals(window.getComputedStyle(testcases[i]).width, "30px"); |
| }, "width on " + testcases[i].tagName); |
| test(function() { |
| assert_equals(window.getComputedStyle(testcases[i]).height, "30px"); |
| }, "height on " + testcases[i].tagName); |
| } |
| </script> |
| </body> |
| </html> |
| |
