wpt / css / css-cascade / layer-important.html

Status: PASS | Duration: 51ms | Subtests: 9/9 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (9/9)

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

SubtestStatusMessage
A1 Unlayered !important stylePASS
B1 Same specificity, layered !important firstPASS
C1 Same specificity, layered !important secondPASS
D1 Same specificity, all !importantPASS
D2 Same specificity, all !importantPASS
D3 Same specificity, all !importantPASS
D4 Same specificity, all !importantPASS
E1 Different specificity, all !importantPASS
E2 Different specificity, all !importantPASS

/css/css-cascade/layer-important.html

<!DOCTYPE html>
<html>
<head>
<title>CSS Cascade Layers: !important </title>
<meta name="assert" content="!important functionality of CSS Cascade Layers">
<link rel="author" title="Romain Menke" href="mailto:romainmenke@gmail.com">
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#cascade-layering">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<target class="first"></target>
<target class="second"></target>
<div id="log"></div>
<script>

// In all test cases, the rule specified as "color: green" should win.
var testCases = [
    {
        title: 'A1 Unlayered !important style',
        style: `
            target { color: green !important; }
            target { color: red; }
        `
    },
    {
        title: 'B1 Same specificity, layered !important first',
        style: `
            @layer { target { color: green !important; } }
            target { color: red; }
        `,
    },
    {
        title: 'C1 Same specificity, layered !important second',
        style: `
            target { color: red; }
            @layer { target { color: green !important; } }
        `,
    },
    {
        title: 'D1 Same specificity, all !important',
        style: `
            @layer { target { color: green !important; } }
            @layer { target { color: red !important; } }
            target { color: red !important; }
        `,
    },
    {
        title: 'D2 Same specificity, all !important',
        style: `
            @layer { target { color: green !important; } }
            target { color: red !important; }
            @layer { target { color: red !important; } }
        `,
    },
    {
        title: 'D3 Same specificity, all !important',
        style: `
            target { color: red !important; }
            @layer { target { color: green !important; } }
            @layer { target { color: red !important; } }
        `,
    },
    {
        title: 'D4 Same specificity, all !important',
        style: `
            @layer A, B;
            @layer B { target { color: red !important; } }
            @layer A { target { color: green !important; } }
            target { color: red !important; }
        `,
    },
    {
        title: 'E1 Different specificity, all !important',
        style: `
            @layer { target { color: green !important; } }
            @layer { target { color: red !important; } }
            target.first { color: red !important; }
        `,
    },
    {
        title: 'E2 Different specificity, all !important',
        style: `
            @layer { target { color: green !important; } }
            @layer { target.first { color: red !important; } }
            target { color: red !important; }
        `,
    },
];

for (let testCase of testCases) {
    const styleElement = document.createElement('style');
    styleElement.textContent = testCase['style'];
    document.head.append(styleElement);

    test(function () {
        var targets = document.querySelectorAll('target');
        for (target of targets)
            assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)',
                      testCase['title'] + ", target '" + target.classList[0] + "'");
    }, testCase['title']);

    styleElement.remove();
}
</script>
</body>
</html>