| <!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> |