css/css-variables/variable-substitution-basic.html

<!DOCTYPE html>
<html>
<head>
    <title>test basic variable substitution</title>

    <meta rel="author" title="Kevin Babbitt">
    <meta rel="author" title="Greg Whitworth">
    <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
    <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>
        #testArea {
            color: orange;
        }
        #testArea  > div {
            width: 50px !important;
        }
    </style>
</head>
<body>
    <div id="log"></div>
    <div id="testArea"></div>
    <script type="text/javascript">
        "use strict";

        let templates = [
            {
                testName:"Simple substitution test",
                propertyName:"border-spacing",
                expectedValue:"20px",
                style:"--gap: 20px;border-spacing: var(--gap);"
            },
            {
                testName:"You can't build up a single token where part of it is provided by a variable",
                propertyName:"border-spacing",
                expectedValue:"0px",
                style:"--gap: 20;border-spacing: var(--gap)px;"
            },
            {
                testName:"You can't build up a single token where part of it is provided by a variable (percentages)",
                propertyName:"text-indent",
                expectedValue:"0px",
                style:"--v: 20;text-indent: var(--v)%;"
            },
            {
                testName:"Multiple variable references in a single property",
                propertyName:"border-spacing",
                expectedValue:"19px 47px",
                style:"--gap1: 19px;--gap2: 47px;border-spacing: var(--gap1) var(--gap2);"
            },
            {
                testName:"Multiple variable references in a single property (no spaces)",
                propertyName:"border-spacing",
                expectedValue:"23px 59px",
                style:"--gap1:23px;--gap2:59px;border-spacing:var(--gap1)var(--gap2);"
            },
            {
                testName:"Fallback value",
                propertyName:"border-spacing",
                expectedValue:"11px",
                style:"border-spacing:var(--gap,11px);"
            },
            {
                testName:"Fallback value which is also a variable reference",
                propertyName:"border-spacing",
                expectedValue:"27px",
                style:"--gap2: 27px; border-spacing:var(--gap,var(--gap2));"
            },
            {
                testName:"Multiple var references in fallback value",
                propertyName:"border-spacing",
                expectedValue:"66px 92px",
                style:"--gap2: 66px; --gap3: 92px; border-spacing:var(--gap,var(--gap2)var(--gap3));"
            },
            {
                testName:"Multiple nested fallbacks",
                propertyName:"border-spacing",
                expectedValue:"98px 18px",
                style:"--gap4: 98px 18px; border-spacing:var(--gap1,var(--gap2,var(--gap3,var(--gap4,var(--gap5)))));"
            },
            {
                testName:"Bad variable reference that should inherit by default",
                propertyName:"color",
                expectedValue:"rgb(255, 165, 0)",
                style:"color: var(--colorVar) pink;"
            },
            {
                testName:"Test that var reference doesn’t overwrite !important",
                propertyName:"width",
                expectedValue:"50px",
                style:"--varWidth: 28px; width: var(--varWidth);"
            },
            {
                testName:"Test that !important on a property that has a variable reference can overwrite !important",
                propertyName:"width",
                expectedValue:"28px",
                style:"--varWidth: 28px; width: var(--varWidth) !important;"
            },
            {
                testName:"Test that !important inside of var reference can't overwrite !important on property",
                propertyName:"width",
                expectedValue:"50px",
                style:"--varWidth: 28px !important; width: var(--varWidth);"
            },
        ];

        let testArea = document.getElementById("testArea");

        templates.forEach(function (template) {
            test( function () {
                let div = document.createElement("div");
                div.style.cssText = template.style;
                testArea.appendChild(div);
                let computedStyle = window.getComputedStyle(div);
                let value = computedStyle.getPropertyValue(template.propertyName);
                assert_equals(value, template.expectedValue, "Expected Value should match actual value");
                testArea.removeChild(div);
            }, template.testName);
        });
    </script>
</body>
</html>