169 lines
4.4 KiB
HTML
169 lines
4.4 KiB
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>
|