Blitz - WPT: variable-invalidation.html

wpt / css / css-variables / variable-invalidation.html
Data from commit:
1884860 Copy-on-write style attribute blocks that are in the rule tree (#831) (2026-09-02)
Subtest	Status	Message
css rule test	FAIL	cannot convert 'null' or 'undefined' to object
css rule test important	FAIL	cannot convert 'null' or 'undefined' to object
inline style test	FAIL	not a callable function
inline style test important	FAIL	not a callable function
Enable JavaScript in test iframe
/css/css-variables/variable-invalidation.html
<!DOCTYPE html>
<html>
<head>
    <title>Tests css variable invalidation</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 not directly specified in the spec but should work -->
    <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>
        #test1 {
            --var1:red;
        }
        #test2 {
            --var2:red!important;
        }
    </style>
</head>
<body>
    <div id="test1"><div><div><div class="testElem"></div></div></div></div>
    <div id="test2"><div><div><div class="testElem"></div></div></div></div>
    <div id="test3" style="--var3:red"><div><div><div class="testElem"></div></div></div></div>
    <div id="test4" style="--var4:red!important"><div><div><div class="testElem"></div></div></div></div>

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

        // This is a helper function to avoid repitition
        function testExpectations(testProperty, cssStyle, testElement, testDescription, expectedValue, expectedCssText, expectedPriority, expectedLength, expectedItem0) {
            assert_equals(cssStyle.cssText, expectedCssText, "cssText " + testDescription + ".");
            assert_equals(cssStyle.getPropertyValue(testProperty), expectedValue, "Value " + testDescription + ".");
            assert_equals(cssStyle.getPropertyPriority(testProperty), expectedPriority, "Priority " + testDescription + ".");
            assert_equals(cssStyle.length, expectedLength, "style length " + testDescription + ".");
            assert_equals(cssStyle.item(0), expectedItem0, "item(0) " + testDescription + ".");

            var computedStyle = window.getComputedStyle(testElement);
            assert_equals(computedStyle.getPropertyValue(testProperty), expectedValue, "Computed Style value " + testDescription + ".");
        }

        // This is a boilerplate to build a testcase and then test the expected outcome
        function testCase(cssStyle, testProperty, testElement, testImportant) {
            var initialCssText = testProperty + (testImportant ? ": red !important;" : ": red;");

            testExpectations(testProperty, cssStyle, testElement, "initial", "red", initialCssText, testImportant ? "important" : "", 1, testProperty);

            cssStyle.setProperty(testProperty, "blue");

            if (!testImportant) {
                testExpectations(testProperty, cssStyle, testElement, "after setProperty", "blue", testProperty + ": blue;", "", 1, testProperty);
            }

            if (testProperty) {
                cssStyle.setProperty(testProperty, "pink", 'important');
                testExpectations(testProperty, cssStyle, testElement, "after setProperty important", "pink", testProperty + ": pink !important;", "important", 1, testProperty);
            }

            cssStyle.removeProperty(testProperty);
            testExpectations(testProperty, cssStyle, testElement, "after removeProperty", "", "", "", 0, "");

            var cssText = testProperty + (testImportant ? ":green!important;" : ":green;");
            var expectedCssText = testProperty + (testImportant ? ": green !important;" : ": green;");
            cssStyle.cssText = cssText;
            testExpectations(testProperty, cssStyle, testElement, "after setting cssText", "green", expectedCssText, testImportant ? "important" : "", 1, testProperty);
        }

        // The actual tests that utilize the boilerplate & helper methods above
        test( function () {
            var cssStyle = document.styleSheets[0].cssRules[0].style;
            var testProperty = "--var1";
            var testElement = document.querySelectorAll("#test1 .testElem")[0];

            testCase(cssStyle, testProperty, testElement, false);
        }, "css rule test");

        test( function () {
            var cssStyle = document.styleSheets[0].cssRules[1].style;
            var testProperty = "--var2";
            var testElement = document.querySelectorAll("#test2 .testElem")[0];

            testCase(cssStyle, testProperty, testElement, true);
        }, "css rule test important");

        test( function () {
            var element = document.getElementById("test3");
            var cssStyle = element.style;
            var testProperty = "--var3";
            var testElement = document.querySelectorAll("#test3 .testElem")[0];

            testCase(cssStyle, testProperty, testElement, false);
        }, "inline style test");

        test( function () {
            var element = document.getElementById("test4");
            var cssStyle = element.style;
            var testProperty = "--var4";
            var testElement = document.querySelectorAll("#test4 .testElem")[0];

            testCase(cssStyle, testProperty, testElement, true);
        }, "inline style test important");
    </script>
</body>
</html>