container-inner-at-rules.html (4497B)
1 <!doctype html> 2 <title>@container: inner at-rules</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 #container { 9 container-type: size; 10 width: 100px; 11 height: 100px; 12 } 13 14 </style> 15 <div id=container> 16 <div id=child></div> 17 </div> 18 19 <script> 20 setup(() => assert_implements_size_container_queries()); 21 </script> 22 23 <style> 24 @container (width: 100px) { 25 @keyframes anim1 { 26 from { --anim1:true; } 27 to { --anim1:true; } 28 } 29 } 30 31 @container (width: 200px) { 32 @keyframes anim2 { 33 from { --anim2:true; } 34 to { --anim2:true; } 35 } 36 } 37 38 #child { animation: anim1 10s paused, anim2 10s paused; } 39 </style> 40 <script> 41 test(() => { 42 assert_equals(getComputedStyle(child).getPropertyValue('--anim1'), 'true'); 43 assert_equals(getComputedStyle(child).getPropertyValue('--anim2'), 'true'); 44 }, '@keyframes is defined regardless of evaluation'); 45 </script> 46 47 48 <style> 49 @container (width: 100px) { 50 @property --prop1 { 51 syntax: "<length>"; 52 inherits: false; 53 initial-value: 0px; 54 } 55 } 56 57 @container (width: 200px) { 58 @property --prop2 { 59 syntax: "<length>"; 60 inherits: false; 61 initial-value: 0px; 62 } 63 } 64 65 #child { 66 font-size: 20px; 67 --prop1:1em; 68 --prop2:2em; 69 } 70 </style> 71 <script> 72 test(() => { 73 assert_equals(getComputedStyle(child).getPropertyValue('--prop1'), '20px'); 74 assert_equals(getComputedStyle(child).getPropertyValue('--prop2'), '40px'); 75 }, '@property is defined regardless of evaluation'); 76 </script> 77 78 79 <style> 80 @container (width: 100px) { 81 @layer a; 82 } 83 84 @container (width: 200px) { 85 @layer b; 86 } 87 88 @layer b { 89 #child { --layer:b; } 90 } 91 92 @layer a { 93 #child { --layer:a; } 94 } 95 96 </style> 97 <script> 98 test(() => { 99 assert_equals(getComputedStyle(child).getPropertyValue('--layer'), 'b'); 100 }, '@layer order respected regardless of evaluation'); 101 </script> 102 103 104 <style> 105 @container (width: 100px) { 106 @font-face { 107 font-family: Font1; 108 font-stretch: 50% 200%; 109 src: url(/fonts/Ahem.ttf); 110 } 111 } 112 113 @container (width: 200px) { 114 @font-face { 115 font-family: Font2; 116 font-stretch: 40% 190%; 117 src: url(/fonts/Ahem.ttf); 118 } 119 } 120 121 </style> 122 <script> 123 promise_test(async (t) => { 124 const fonts1 = await document.fonts.load("20px Font1"); 125 assert_not_equals(fonts1[0], undefined); 126 assert_equals(fonts1[0].stretch, "50% 200%"); 127 128 const fonts2 = await document.fonts.load("20px Font2"); 129 assert_not_equals(fonts2[0], undefined); 130 assert_equals(fonts2[0].stretch, "40% 190%"); 131 }, '@font-face is defined regardless of evaluation'); 132 </script> 133 134 135 <style> 136 @container (width: 100px) { 137 /* Assumed to be false */ 138 @media (width: 0px) { 139 #child { --media1:true; } 140 } 141 /* Assumed to be true */ 142 @media (min-width: 0px) { 143 #child { --media2:true; } 144 } 145 } 146 147 /* Same again, but with failing container query. */ 148 @container (width: 200px) { 149 @media (width: 0px) { 150 #child { --media3:true; } 151 } 152 @media (min-width: 0px) { 153 #child { --media4:true; } 154 } 155 } 156 157 </style> 158 <script> 159 test(() => { 160 assert_equals(getComputedStyle(child).getPropertyValue('--media1'), ''); 161 assert_equals(getComputedStyle(child).getPropertyValue('--media2'), 'true'); 162 assert_equals(getComputedStyle(child).getPropertyValue('--media3'), ''); 163 assert_equals(getComputedStyle(child).getPropertyValue('--media4'), ''); 164 }, '@media works inside @container'); 165 </script> 166 167 168 <style> 169 @container (width: 100px) { 170 @supports (width: 500kg) { 171 #child { --supports1:true; } 172 } 173 @supports (width: 500px) { 174 #child { --supports2:true; } 175 } 176 } 177 178 /* Same again, but with failing container query. */ 179 @container (width: 200px) { 180 @supports (width: 500kg) { 181 #child { --supports3:true; } 182 } 183 @supports (width: 500px) { 184 #child { --supports4:true; } 185 } 186 } 187 188 </style> 189 <script> 190 test(() => { 191 assert_equals(getComputedStyle(child).getPropertyValue('--supports1'), ''); 192 assert_equals(getComputedStyle(child).getPropertyValue('--supports2'), 'true'); 193 assert_equals(getComputedStyle(child).getPropertyValue('--supports3'), ''); 194 assert_equals(getComputedStyle(child).getPropertyValue('--supports4'), ''); 195 }, '@supports works inside @container'); 196 </script>