layer-media-query.html (4490B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Cascade Layers: Media queries</title> 5 <meta name="assert" content="CSS Cascade Layers nested in Media Queries"> 6 <link rel="author" title="Antti Koivisto" href="mailto:antti@apple.com"> 7 <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <iframe width=300 height=300 frameborder=0></iframe> 13 <div id="log"></div> 14 <script> 15 16 const imports = { 17 "basic-green.css": ` 18 target { color: green; } 19 `, 20 "basic-red.css": ` 21 target { color: red; } 22 `, 23 "empty.css": "", 24 }; 25 26 // For 300px wide iframe the target should be red and for 500px green. 27 const testCases = [ 28 { 29 title: 'A1 Basic', 30 style: ` 31 @layer { target { color: red } } 32 @media (min-width: 500px) { 33 @layer { 34 target { color: green; } 35 } 36 } 37 ` 38 }, 39 { 40 title: 'A2 Basic', 41 style: ` 42 @media (min-width: 500px) { 43 @layer { 44 target { color: green; } 45 } 46 } 47 @media (max-width: 300px) { 48 @layer { 49 target { color: red; } 50 } 51 } 52 ` 53 }, 54 { 55 title: 'B1 Basic import', 56 style: ` 57 @import url(basic-red.css) layer; 58 @import url(basic-green.css) layer (min-width: 500px); 59 ` 60 }, 61 { 62 title: 'B2 Basic import', 63 style: ` 64 @import url(basic-green.css) layer (min-width: 500px); 65 @import url(basic-red.css) layer (max-width: 300px); 66 ` 67 }, 68 { 69 title: 'C1 Reordering', 70 style: ` 71 @media (max-width: 300px) { 72 @layer B { 73 target { color: green; } 74 } 75 @layer A { 76 target { color: red; } 77 } 78 } 79 @media (min-width: 500px) { 80 @layer A { 81 target { color: red; } 82 } 83 @layer B { 84 target { color: green; } 85 } 86 } 87 ` 88 }, 89 { 90 title: 'C2 Reordering', 91 style: ` 92 @media (max-width: 300px) { 93 @layer B { } 94 @layer A { target { color: red; } } 95 } 96 @media (min-width: 500px) { 97 @layer A { target { color: red; } } 98 @layer B { } 99 } 100 @layer B { 101 target { color: green; } 102 } 103 ` 104 }, 105 { 106 title: 'C3 Reordering', 107 style: ` 108 @media (max-width: 300px) { 109 @layer B, A; 110 } 111 @media (min-width: 500px) { 112 @layer A, B; 113 } 114 @layer A { 115 target { color: red; } 116 } 117 @layer B { 118 target { color: green; } 119 } 120 ` 121 }, 122 { 123 title: 'C4 Reordering', 124 style: ` 125 @import url(empty.css) layer(B) (max-width: 300px); 126 @import url(empty.css) layer(A) (max-width: 300px); 127 @import url(empty.css) layer(A) (min-width: 500px); 128 @import url(empty.css) layer(B) (min-width: 500px); 129 @layer A { 130 target { color: red; } 131 } 132 @layer B { 133 target { color: green; } 134 } 135 ` 136 }, 137 ]; 138 139 let iframe = document.querySelector("iframe"); 140 141 for (let testCase of testCases) { 142 promise_test(async t => { 143 const styleText = testCase['style'].replaceAll(/url\((.+?)\)/g, (match, p1) => { 144 return `url(data:text/css,${ encodeURI(imports[p1]) })`; 145 }); 146 147 iframe.width = 300; 148 149 await new Promise(resolve => { 150 iframe.onload = resolve; 151 iframe.srcdoc = ` 152 <style> 153 ${styleText} 154 </style> 155 <target></target> 156 `; 157 }); 158 159 const target = iframe.contentDocument.querySelector('target'); 160 assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)', testCase['title']); 161 162 iframe.width = 500; 163 164 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)', testCase['title']); 165 }, testCase['title']); 166 } 167 </script> 168 </body> 169 </html>