Blitz - WPT: variable-definition-cascading.html

wpt / css / css-variables / variable-definition-cascading.html

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

Subtest	Status	Message
testing cascaded CSS Variables on div 't0'	PASS
testing cascaded CSS Variables on div 't1a'	PASS
testing cascaded CSS Variables on div 't1b'	PASS
testing cascaded CSS Variables on div 't1c'	PASS
testing cascaded CSS Variables on div 't1d'	PASS
testing cascaded CSS Variables on div 't2a'	PASS
testing cascaded CSS Variables on div 't2b'	PASS
testing cascaded CSS Variables on div 't2c'	PASS
testing cascaded CSS Variables on div 't2d'	PASS

Enable JavaScript in test iframe

/css/css-variables/variable-definition-cascading.html

<!DOCTYPE html>
<html>
<head>
    <title>variable definition cascading tests</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/#using-variables">

    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style>
        * {
            --var0:x;
        }
    </style>
</head>
<body>
    <!-- test global selector -->
    <div id="t0"></div>

    <!-- multiple unique variables cascading together -->
    <div id="t1a" style="--var1:a">
        <div id="t1b" style="--var2:b">
            <div id="t1c" style="--var3:c"></div>
            <div id="t1d" style="--var4:d"></div>
        </div>
    </div>

    <!-- testing overwriting -->
    <div id="t2a" style="--var0:a">
        <div id="t2b" style="--var0:b;--var1:c">
            <div id="t2c" style="--var0:d;--var1:e"></div>
            <div id="t2d" style="--var2:f"></div>
        </div>
    </div>

    <script type="text/javascript">
        "use strict";

        var tests = [
            {"divid": "t0",     "expectedValues":["x"]},
            {"divid": "t1a",    "expectedValues":["x","a"]},
            {"divid": "t1b",    "expectedValues":["x","a","b"]},
            {"divid": "t1c",    "expectedValues":["x","a","b","c"]},
            {"divid": "t1d",    "expectedValues":["x","a","b","","d"]},
            {"divid": "t2a",    "expectedValues":["a"]},
            {"divid": "t2b",    "expectedValues":["b","c"]},
            {"divid": "t2c",    "expectedValues":["d","e"]},
            {"divid": "t2d",    "expectedValues":["x","c","f"]}
        ];

        let maxVariables = 5;

        tests.forEach(function (testCase) {
            test( function () {
                let div = document.getElementById(testCase.divid);
                let computedStyle = window.getComputedStyle(div);
                for (var i = 0; i < maxVariables; ++i) {
                    let testVar = "--var" + i;
                    let actualValue = computedStyle.getPropertyValue(testVar);
                    let expectedValue = testCase.expectedValues[i];
                    if (expectedValue === undefined){
                        expectedValue = "";
                    }
                    assert_equals(actualValue, expectedValue, "Actual Value for '" + testVar + "' should match expected value");

                }
            }, "testing cascaded CSS Variables on div '" + testCase.divid + "'");
        });
    </script>
</body>
</html>