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

Status: FAIL | Duration: 101ms | Subtests: 58/73 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (58/73)

Data from commit:
1884860 Copy-on-write style attribute blocks that are in the rule tree (#831) (2026-09-02)

SubtestStatusMessage
no variablePASS
variablePASS
single char variablePASS
single char '-' variablePASS
no char variablePASS
white space value (single space)FAILassert_equals: Expected Value should match actual value expected " " but got ""
white space value (double space)FAILassert_equals: Expected Value should match actual value expected " " but got ""
overwritePASS
can overwrite with no valueFAILassert_equals: Expected Value should match actual value expected " " but got ""
can overwrite with space valueFAILassert_equals: Expected Value should match actual value expected " " but got ""
case sensetivityPASS
case sensetivity2PASS
parsing three dashes at start of variablePASS
parsing multiple dashes with one dash at start of variablePASS
leading white space (single space)PASS
middle white space (single space)PASS
trailing white space (single space)PASS
leading white space (double space) 2PASS
middle white space (double space) 2PASS
trailing white space (double space) 2PASS
!importantPASS
!important 2PASS
!important (with space)PASS
no variable (Computed Style)PASS
variable (Computed Style)PASS
single char variable (Computed Style)PASS
single char '-' variable (Computed Style)PASS
no char variable (Computed Style)PASS
white space value (single space) (Computed Style)FAILassert_equals: Expected Value should match actual value expected " " but got ""
white space value (double space) (Computed Style)FAILassert_equals: Expected Value should match actual value expected " " but got ""
overwrite (Computed Style)PASS
can overwrite with no value (Computed Style)FAILassert_equals: Expected Value should match actual value expected " " but got ""
can overwrite with space value (Computed Style)FAILassert_equals: Expected Value should match actual value expected " " but got ""
case sensetivity (Computed Style)PASS
case sensetivity2 (Computed Style)FAILassert_equals: Expected Value should match actual value expected "value2" but got "value1"
parsing three dashes at start of variable (Computed Style)PASS
parsing multiple dashes with one dash at start of variable (Computed Style)PASS
leading white space (single space) (Computed Style)PASS
middle white space (single space) (Computed Style)PASS
trailing white space (single space) (Computed Style)PASS
leading white space (double space) 2 (Computed Style)PASS
middle white space (double space) 2 (Computed Style)PASS
trailing white space (double space) 2 (Computed Style)PASS
!important (Computed Style)PASS
!important 2 (Computed Style)PASS
!important (with space) (Computed Style)PASS
no variable (Cascading)PASS
variable (Cascading)PASS
single char variable (Cascading)PASS
single char '-' variable (Cascading)PASS
no char variable (Cascading)PASS
white space value (single space) (Cascading)FAILassert_equals: Expected Value should match actual value expected " " but got ""
white space value (double space) (Cascading)FAILassert_equals: Expected Value should match actual value expected " " but got ""
overwrite (Cascading)PASS
can overwrite with no value (Cascading)FAILassert_equals: Expected Value should match actual value expected " " but got ""
can overwrite with space value (Cascading)FAILassert_equals: Expected Value should match actual value expected " " but got ""
case sensetivity (Cascading)PASS
case sensetivity2 (Cascading)FAILassert_equals: Expected Value should match actual value expected "value2" but got "value1"
parsing three dashes at start of variable (Cascading)PASS
parsing multiple dashes with one dash at start of variable (Cascading)PASS
leading white space (single space) (Cascading)PASS
middle white space (single space) (Cascading)PASS
trailing white space (single space) (Cascading)PASS
leading white space (double space) 2 (Cascading)PASS
middle white space (double space) 2 (Cascading)PASS
trailing white space (double space) 2 (Cascading)PASS
!important (Cascading)PASS
!important 2 (Cascading)PASS
!important (with space) (Cascading)PASS
basic CSSOM.setPropertyFAILassert_equals: Expected Value should match actual value expected "green" but got ""
CSSOM.setProperty with space 1PASS
CSSOM.setProperty with space 2PASS
CSSOM.setProperty with space 3PASS

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

<!DOCTYPE html>
<html>
<head>
    <title>variable-definition: get variable value using getPropertyValue</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>
</head>
<body>
    <div id="log"></div>

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

    let templates = [
        { varName:"--var",     expectedValue:"",        style:"",                           testName:"no variable"},
        { varName:"--var",     expectedValue:"value",   style:"--var:value",                testName:"variable"},
        { varName:"--v",       expectedValue:"value",   style:"--v:value",                  testName:"single char variable"},
        { varName:"---",       expectedValue:"value",   style:"---:value",                  testName:"single char '-' variable"},
        { varName:"--",        expectedValue:"",        style:"--:value",                   testName:"no char variable"},
        { varName:"--var",     expectedValue:" ",       style:"--var: ",                    testName:"white space value (single space)"},
        { varName:"--var",     expectedValue:" ",      style:"--var:  ",                   testName:"white space value (double space)"},
        { varName:"--var",     expectedValue:"value2",  style:"--var:value1; --var:value2", testName:"overwrite"},
        { varName:"--var",     expectedValue:" ",   style:"--var:value;--var:;",        testName:"can overwrite with no value"},
        { varName:"--var",     expectedValue:" ",       style:"--var:value;--var: ;",       testName:"can overwrite with space value"},
        { varName:"--var",     expectedValue:"value1",  style:"--var:value1; --Var:value2", testName:"case sensetivity"},
        { varName:"--Var",     expectedValue:"value2",  style:"--var:value1; --Var:value2", testName:"case sensetivity2"},
        { varName:"---var",    expectedValue:"value",  style:"---var:value;",               testName:"parsing three dashes at start of variable"},
        { varName:"-var4" ,    expectedValue:"",        style:"-var4:value3",               testName:"parsing multiple dashes with one dash at start of variable"},
        { varName:"--var",     expectedValue:"value",  style:"--var: value",               testName:" leading white space (single space)"},
        { varName:"--var",     expectedValue:"value1 value2", style:"--var:value1 value2",  testName:" middle white space (single space)"},
        { varName:"--var",     expectedValue:"value",  style:"--var:value ",               testName:" trailing white space (single space)"},
        { varName:"--var",     expectedValue:"value", style:"--var:  value",              testName:" leading white space (double space) 2"},
        { varName:"--var",     expectedValue:"value1  value2", style:"--var:value1  value2",testName:" middle white space (double space) 2"},
        { varName:"--var",     expectedValue:"value", style:"--var:value  ",              testName:" trailing white space (double space) 2"},
        { varName:"--var",     expectedValue:"value1",  style:"--var:value1 !important;", testName:"!important"},
        { varName:"--var",     expectedValue:"value1",  style:"--var:value1!important;--var:value2;", testName:"!important 2"},
        { varName:"--var",     expectedValue:"value1", style:"--var:value1 !important;--var:value2;", testName:"!important (with space)"}
    ];

    templates.forEach(function (template) {
        test( function () {
            let div = document.createElement("div");
            div.style.cssText = template.style;
            document.body.appendChild(div);
            let value = div.style.getPropertyValue(template.varName);
            assert_equals(value, template.expectedValue, "Expected Value should match actual value");
            document.body.removeChild(div);
        }, template.testName);
    });

    templates.forEach(function (template) {
        test( function () {
            let div = document.createElement("div");
            div.style.cssText = template.style;
            document.body.appendChild(div);
            let computedStyle = window.getComputedStyle(div);
            let value = computedStyle.getPropertyValue(template.varName);
            assert_equals(value, template.expectedValue, "Expected Value should match actual value");
            document.body.removeChild(div);
        }, template.testName +" (Computed Style)");
    });

    templates.forEach(function (template) {
        test( function () {
            let div = document.createElement("div");
            div.style.cssText = template.style;
            document.body.appendChild(div);
            let divChild = document.createElement("div");
            div.appendChild(divChild);
            let computedStyle = window.getComputedStyle(divChild);
            let value = computedStyle.getPropertyValue(template.varName);
            assert_equals(value, template.expectedValue, "Expected Value should match actual value");
            document.body.removeChild(div);
        }, template.testName +" (Cascading)");
    });

    let template2 = [
        { varToSet:"--varUnique",       setValue:"green", varNameForRetrieval:"--varUnique",        expectedValue:"green",  testName:"basic CSSOM.setProperty"},
        { varToSet:"--varUnique2 ",     setValue:"green", varNameForRetrieval:"--varUnique2 ",      expectedValue:"",       testName:"CSSOM.setProperty with space 1"},
        { varToSet:"--varUnique3 name", setValue:"green", varNameForRetrieval:"--varUnique3 name",  expectedValue:"",       testName:"CSSOM.setProperty with space 2"},
        { varToSet:"--varUnique4 name", setValue:"green", varNameForRetrieval:"--varUnique4",       expectedValue:"",       testName:"CSSOM.setProperty with space 3"},
    ];

    template2.forEach(function (template) {
        test( function () {
            let div = document.createElement("div");
            div.style.setProperty(template.varToSet, template.setValue);
            document.body.appendChild(div);
            let computedStyle = window.getComputedStyle(div);
            let value = computedStyle.getPropertyValue(template.varNameForRetrieval);
            assert_equals(value, template.expectedValue, "Expected Value should match actual value");
            document.body.removeChild(div);
        }, template.testName);
    });
</script>

</body>
</html>