variable-substitution-shadow-properties.html (2173B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test shadow property variable substitution</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 .testArea { 15 width: 100px; 16 height: 100px; 17 display: inline-block; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="log"></div> 23 <div class="testArea" id="box-shadow" style="--foo: rgb(0, 128, 0); box-shadow: 1px 1px 1px 1px var(--foo);">box-shadow</div> 24 <div class="testArea" id="box-shadow-with-comment" style="--foo: 1px /* hello */ rgb(0, 128, 0); box-shadow: 1px 1px 1px var(--foo);">box-shadow</div> 25 <div class="testArea" id="text-shadow" style="--foo: rgb(0, 128, 0); text-shadow: 1px 1px 1px var(--foo);">text-shadow</div> 26 <script type="text/javascript"> 27 "use strict"; 28 29 let templates = [ 30 { 31 testName:"box-shadow", 32 property:"box-shadow", 33 expectedValue:"rgb(0, 128, 0) 1px 1px 1px 1px", 34 }, 35 { 36 testName:"box-shadow-with-comment", 37 property:"box-shadow", 38 expectedValue:"rgb(0, 128, 0) 1px 1px 1px 1px", 39 }, 40 { 41 testName:"text-shadow", 42 property:"text-shadow", 43 expectedValue:"rgb(0, 128, 0) 1px 1px 1px", 44 }, 45 ]; 46 47 templates.forEach(function (template) { 48 test( function () { 49 let target = document.getElementById(template.testName); 50 let computedStyle = window.getComputedStyle(target); 51 let value = computedStyle.getPropertyValue(template.property); 52 assert_equals(value, template.expectedValue, "Expected Value should match actual value"); 53 }, template.testName); 54 }); 55 </script> 56 </body> 57 </html>