css/css-cascade/layer-media-query.html

<!DOCTYPE html>
<html>
<head>
<title>CSS Cascade Layers: Media queries</title>
<meta name="assert" content="CSS Cascade Layers nested in Media Queries">
<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>
<iframe width=300 height=300 frameborder=0></iframe>
<div id="log"></div>
<script>

const imports = {
    "basic-green.css": `
        target { color: green; }
    `,
    "basic-red.css": `
        target { color: red; }
    `,
    "empty.css": "",
};

// For 300px wide iframe the target should be red and for 500px green.
const testCases = [
    {
        title: 'A1 Basic',
        style: `
            @layer { target { color: red } }
            @media (min-width: 500px) {
                @layer {
                    target { color: green; }
                }
            }
        `
    },
    {
        title: 'A2 Basic',
        style: `
            @media (min-width: 500px) {
                @layer {
                    target { color: green; }
                }
            }
            @media (max-width: 300px) {
                @layer {
                    target { color: red; }
                }
            }
        `
    },
    {
        title: 'B1 Basic import',
        style: `
            @import url(basic-red.css) layer;
            @import url(basic-green.css) layer (min-width: 500px);
        `
    },
    {
        title: 'B2 Basic import',
        style: `
            @import url(basic-green.css) layer (min-width: 500px);
            @import url(basic-red.css) layer (max-width: 300px);
        `
    },
    {
        title: 'C1 Reordering',
        style: `
            @media (max-width: 300px) {
                @layer B {
                    target { color: green; }
                }
                @layer A {
                    target { color: red; }
                }
            }
            @media (min-width: 500px) {
                @layer A {
                    target { color: red; }
                }
                @layer B {
                    target { color: green; }
                }
            }
        `
    },
    {
        title: 'C2 Reordering',
        style: `
            @media (max-width: 300px) {
                @layer B { }
                @layer A { target { color: red; } }
            }
            @media (min-width: 500px) {
                @layer A { target { color: red; } }
                @layer B { }
            }
            @layer B {
                target { color: green; }
            }
        `
    },
    {
        title: 'C3 Reordering',
        style: `
            @media (max-width: 300px) {
                @layer B, A;
            }
            @media (min-width: 500px) {
                @layer A, B;
            }
            @layer A {
                target { color: red; }
            }
            @layer B {
                target { color: green; }
            }
        `
    },
    {
        title: 'C4 Reordering',
        style: `
            @import url(empty.css) layer(B) (max-width: 300px);
            @import url(empty.css) layer(A) (max-width: 300px);
            @import url(empty.css) layer(A) (min-width: 500px);
            @import url(empty.css) layer(B) (min-width: 500px);
            @layer A {
                target { color: red; }
            }
            @layer B {
                target { color: green; }
            }
        `
    },
];

let iframe = document.querySelector("iframe");

for (let testCase of testCases) {
    promise_test(async t => {
        const styleText = testCase['style'].replaceAll(/url\((.+?)\)/g, (match, p1) => {
            return `url(data:text/css,${ encodeURI(imports[p1]) })`;
        });

        iframe.width = 300;

        await new Promise(resolve => {
            iframe.onload = resolve;
            iframe.srcdoc = `
                <style>
                ${styleText}
                </style>
                <target></target>
            `;
        });

        const target = iframe.contentDocument.querySelector('target');
        assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)', testCase['title']);

        iframe.width = 500;

        assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)', testCase['title']);
    }, testCase['title']);
}
</script>
</body>
</html>