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

Status: PASS | Duration: 76ms | Subtests: 34/34 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (34/34)

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

SubtestStatusMessage
A1 Anonymous layersPASS
A2 Anonymous layersPASS
A3 Anonymous layersPASS
A4 Anonymous layersPASS
A5 Anonymous layersPASS
A6 Anonymous layersPASS
A7 Anonymous layersPASS
A8 Anonymous layersPASS
A9 Anonymous layersPASS
B1 Named layersPASS
B2 Named layersPASS
B3 Named layersPASS
B4 Named layersPASS
B5 Named layersPASS
B6 Named layersPASS
B7 Named layersPASS
B8 Named layersPASS
B9 Named layersPASS
B10 Named layersPASS
C1 Named layers shorthandPASS
C2 Named layers shorthandPASS
C3 Named layers shorthandPASS
C4 Named layers shorthandPASS
C5 Named layers shorthandPASS
D1 Mixed named and anonymous layersPASS
D2 Mixed named and anonymous layersPASS
D3 Mixed named and anonymous layersPASS
D4 Mixed named and anonymous layersPASS
D5 Mixed named and anonymous layersPASS
E1 Statement syntaxPASS
E2 Statement syntaxPASS
E3 Statement syntaxPASS
E4 Statement syntaxPASS
E5 Statement syntaxPASS

/css/css-cascade/layer-basic.html

<!DOCTYPE html>
<html>
<head>
<title>CSS Cascade Layers: Basic functionality</title>
<meta name="assert" content="Basic functionality of CSS Cascade Layers">
<link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#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 Anonymous layers',
        style: `
            @layer { }
            target { color: green; }
        `,
    },
    {
        title: 'A2 Anonymous layers',
        style: `
            target { color: green; }
            @layer {
                target { color: red; }
            }
        `,
    },
    {
        title: 'A3 Anonymous layers',
        style: `
            @layer {
                target { color: red; }
            }
            target { color: green; }
        `,
    },
    {
        title: 'A4 Anonymous layers',
        style: `
            @layer {
                target { color: red; }
            }
            @layer {
                target { color: green; }
            }
        `,
    },
    {
        title: 'A5 Anonymous layers',
        style: `
            @layer {
                target { color: green; }
                @layer {
                    target { color: red; }
                }
            }
        `,
    },
    {
        title: 'A6 Anonymous layers',
        style: `
            @layer {
                @layer {
                    target { color: red; }
                }
                target { color: green; }
            }
        `,
    },
    {
        title: 'A7 Anonymous layers',
        style: `
            @layer {
                @layer {
                    target { color: red; }
                }
                target { color: red; }
            }
            @layer {
                @layer {
                    target { color: red; }
                }
                target { color: green; }
            }
        `,
    },
    {
        title: 'A8 Anonymous layers',
        style: `
            @layer {
                @layer {
                    @layer {
                        target { color: red; }
                    }
                }
                target { color: red; }
            }
            @layer {
                @layer {
                    target { color: red; }
                }
                target { color: green; }
            }
        `,
    },
    {
        title: 'A9 Anonymous layers',
        style: `
            @layer {
                @layer {
                    target { color: red; }
                }
                target { color: red; }
            }
            @layer {
                @layer {
                    @layer {
                        target { color: red; }
                    }
                }
                target { color: green; }
            }
        `,
    },
    {
        title: 'B1 Named layers',
        style: `
            @layer A {
            }
            target { color: green; }
        `,
    },
    {
        title: 'B2 Named layers',
        style: `
            @layer A {
                target { color: red; }
            }
            target { color: green; }
        `,
    },
    {
        title: 'B3 Named layers',
        style: `
            @layer A {
                target { color: red; }
            }
            @layer A {
                target { color: green; }
            }
        `,
    },
    {
        title: 'B4 Named layers',
        style: `
            @layer A {
                target { color: red; }
            }
            @layer B {
                target { color: green; }
            }
            @layer A {
                target { color: red; }
            }
        `,
    },
    {
        title: 'B5 Named layers',
        style: `
            @layer A {
                target { color: green; }
                @layer A {
                    target { color: red; }
                }
            }
        `,
    },
    {
        title: 'B6 Named layers',
        style: `
            @layer A {
                @layer A {
                    target { color: red; }
                }
            }
            @layer A {
                @layer A {
                    target { color: green; }
                }
            }
        `,
    },
    {
        title: 'B7 Named layers',
        style: `
            @layer A {
                target { color: red; }
                @layer A {
                    target { color: red; }
                }
            }
            @layer B {
                target { color: green; }
            }
            @layer A {
                @layer A {
                    target { color: red; }
                }
            }
        `,
    },
    {
        title: 'B8 Named layers',
        style: `
            @layer A {
                @layer A {
                    target { color: red; }
                }
            }
            @layer B {
                @layer A {
                    target { color: green; }
                }
            }
        `,
    },
    {
        title: 'B9 Named layers',
        style: `
            @layer A {
                @layer A {
                    target { color: red; }
                }
            }
            @layer B {
                @layer A {
                    target.first { color: green; }
                }
            }
           @layer A {
                @layer A {
                    target.first { color: red; }
                    target.second { color: green; }
                }
            }
        `,
    },
    {
        title: 'B10 Named layers',
        style: `
            @layer A {
                @layer A {
                    target { color: red; }
                }
            }
            @layer B {
                @layer A {
                    target.first { color: green; }
                }
            }
           @layer A {
                @layer B {
                    target.first { color: red; }
                    target.second { color: green; }
                }
            }
        `,
    },
    {
        title: 'C1 Named layers shorthand',
        style: `
            @layer A.A {
                target { color: red; }
            }
            @layer B.A {
                target { color: green; }
            }
        `,
    },
    {
        title: 'C2 Named layers shorthand',
        style: `
            @layer A.A {
                target { color: red; }
            }
            @layer B.A {
                target.first { color: green; }
            }
            @layer A.A {
                target.first { color: red; }
                target.second { color: green; }
            }
        `,
    },
    {
        title: 'C3 Named layers shorthand',
        style: `
            @layer A.A {
                target { color: red; }
            }
            @layer B.A {
                target.first { color: green; }
            }
            @layer A.B {
                target.first { color: red; }
                target.second { color: green; }
            }
        `,
    },
    {
        title: 'C4 Named layers shorthand',
        style: `
            @layer A {
                @layer A {
                    target { color: red; }
                }
            }
            @layer B.A {
                target { color: green; }
            }
            @layer A.A
                target { color: red; }
            }
        `,
    },
    {
        title: 'C5 Named layers shorthand',
        style: `
            @layer A {
                @layer A {
                    target { color: red; }
                }
            }
            @layer B.A {
                target { color: green; }
            }
            @layer A.B {
                target { color: red; }
            }
        `,
    },
    {
        title: 'D1 Mixed named and anonymous layers',
        style: `
            @layer A {
                target { color: red; }
            }
            @layer {
                target { color: green; }
            }
        `,
    },
    {
        title: 'D2 Mixed named and anonymous layers',
        style: `
            @layer A {
                @layer {
                    target { color: red; }
                }
            }
            @layer A {
                target { color: green; }
            }
        `,
    },
    {
        title: 'D3 Mixed named and anonymous layers',
        style: `
            @layer A {
                @layer {
                    target { color: red; }
                }
            }
            @layer A {
                @layer {
                    target { color: green; }
                }
            }
        `,
    },
    {
        title: 'D4 Mixed named and anonymous layers',
        style: `
            @layer A {
                @layer {
                    target { color: red; }
                }
            }
            @layer {
                target { color: green; }
            }
            @layer A {
                @layer {
                    target { color: red; }
                }
            }
        `,
    },
    {
        title: 'D5 Mixed named and anonymous layers',
        style: `
            @layer {
                @layer A {
                    target { color: red; }
                }
            }
            @layer {
                target { color: green; }
            }
        `,
    },
    {
        title: 'E1 Statement syntax',
        style: `
            @layer A, B, C;
            @layer A {
                target.first { color: red; }
                target.second { color: red; }
            }
            @layer B {
                target.first { color: red; }
            }
            @layer C {
                target.first { color: green; }
                target.second { color: green; }
            }
        `,
    },
    {
        title: 'E2 Statement syntax',
        style: `
            @layer A, C, B;
            @layer A {
                target.first { color: red; }
                target.second { color: red; }
            }
            @layer B {
                target.first { color: green; }
            }
            @layer C {
                target.first { color: red; }
                target.second { color: green; }
            }
        `,
    },
    {
        title: 'E3 Statement syntax',
        style: `
            @layer C, B, A;
            @layer A {
                target.first { color: green; }
                target.second { color: green; }
            }
            @layer B {
                target.first { color: red; }
            }
            @layer C {
                target.first { color: red; }
                target.second { color: red; }
            }
        `,
    },
    {
        title: 'E4 Statement syntax',
        style: `
            @layer B, A.B, A.A;
            @layer A {
                @layer A {
                    target.first { color: green; }
                }
                @layer B {
                    target.first { color: red; }
                    target.second { color: green; }
                }
            }
            @layer B {
                target { color: red; }
            }
        `,
    },
    {
        title: 'E5 Statement syntax',
        style: `
            @layer A.B, B, A.A;
            @layer A {
                @layer A {
                    target.first { color: red; }
                }
                @layer B {
                    target.first { color: red; }
                    target.second { color: red; }
                }
            }
            @layer B {
                target { color: green; }
            }
        `,
    },
];

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>