| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>box-shadow + variable substitution on same element</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> |
| </head> |
| <body> |
| <div id="target" style="box-shadow: 1px 1px 1px green; color: var(--alpha); --alpha: green;">This div should have green text and a green shadow.</div> |
| |
| <script type="text/javascript"> |
| "use strict"; |
| let target = document.getElementById('target'); |
| let computedStyle = window.getComputedStyle(target); |
| |
| let templates = [ |
| { |
| testName:"box-shadow", |
| value: computedStyle.boxShadow, |
| potentialValues: ["1px 1px 1px green", "rgb(0, 128, 0) 1px 1px 1px 0px"], |
| description: "Expected value should be 1px 1px 1px green or rgb(0, 128, 0) 1px 1px 1px 0px" |
| }, |
| { |
| testName:"--alpha", |
| value: computedStyle.getPropertyValue("--alpha").trim(), |
| potentialValues: ["green"], |
| description: "Expected value is green" |
| }, |
| { |
| testName:"color", |
| value: computedStyle.color, |
| potentialValues: ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"], |
| description: "Expected value to be rgb(0, 128, 0) or rgba(0, 128, 0, 1)" |
| } |
| ]; |
| |
| templates.forEach(function (template) { |
| test( function () { |
| assert_in_array(template.value, template.potentialValues, template.description); |
| }, template.testName); |
| }); |
| </script> |
| </body> |
| </html> |
| |
