css/css-variables/variable-substitution-plus-box-shadow.html

<!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>