<!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:[email protected]">
<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>
Codebase Browser
chromium