display-none.html (10384B)
1 <!doctype html> 2 <title>@container in display:none</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <script> 9 setup(() => assert_implements_size_container_queries()); 10 </script> 11 <style> 12 .container { 13 container-type: size; 14 width: 30px; 15 height: 30px; 16 background: tomato; 17 } 18 .small { 19 width: 10px; 20 height: 10px; 21 } 22 .big { 23 width: 50px; 24 height: 50px; 25 background: skyblue; 26 } 27 .auto { 28 width: auto; 29 } 30 .none { 31 display: none; 32 } 33 .pseudo::before { 34 content: "foo"; 35 } 36 .pseudo_none::before { 37 content: "foo"; 38 display: none; 39 } 40 41 @container (width: 30px) { 42 .target { --x:30; } 43 } 44 45 @container (width: 50px) { 46 .target { --x:50; } 47 } 48 49 main { 50 display: flex; 51 flex-wrap: wrap; 52 } 53 54 </style> 55 56 <main> 57 <!-- Target element is display:none --> 58 <div class="container"> 59 <div> 60 <div> 61 <div class="target none" id=target1></div> 62 </div> 63 </div> 64 </div> 65 <script> 66 test(function() { 67 let s = getComputedStyle(target1); 68 assert_equals(s.getPropertyValue('--x'), '30'); 69 }, 'getComputedStyle when element is display:none'); 70 </script> 71 72 <!-- Parent is display:none --> 73 <div class="container"> 74 <div> 75 <div class="none"> 76 <div class="target" id=target2></div> 77 </div> 78 </div> 79 </div> 80 <script> 81 test(function() { 82 let s = getComputedStyle(target2); 83 assert_equals(s.getPropertyValue('--x'), '30'); 84 }, 'getComputedStyle when parent is display:none'); 85 </script> 86 87 <!-- Ancestor is display:none --> 88 <div class="container"> 89 <div class="none"> 90 <div> 91 <div class="target" id=target3></div> 92 </div> 93 </div> 94 </div> 95 <script> 96 test(function() { 97 let s = getComputedStyle(target3); 98 assert_equals(s.getPropertyValue('--x'), '30'); 99 }, 'getComputedStyle when ancestor is display:none'); 100 </script> 101 102 <!-- Container is display:none --> 103 <div class="container none"> 104 <div> 105 <div> 106 <div class="target" id=target4></div> 107 </div> 108 </div> 109 </div> 110 <script> 111 test(function() { 112 let s = getComputedStyle(target4); 113 assert_equals(s.getPropertyValue('--x'), ''); 114 }, 'getComputedStyle when container is display:none'); 115 </script> 116 117 <!-- Target element is display:none in nested container --> 118 <div class="container big"> 119 <div> 120 <div> 121 <div class="container"> 122 <div> 123 <div> 124 <div class="target none" id=target5></div> 125 </div> 126 </div> 127 </div> 128 </div> 129 </div> 130 </div> 131 <script> 132 test(function() { 133 let s = getComputedStyle(target5); 134 assert_equals(s.getPropertyValue('--x'), '30'); 135 }, 'getComputedStyle when element in nested container is display:none'); 136 </script> 137 138 <!-- Inner container is display:none --> 139 <div class="container big"> 140 <div> 141 <div> 142 <div class="container none"> 143 <div> 144 <div> 145 <div class="target" id=target6></div> 146 </div> 147 </div> 148 </div> 149 </div> 150 </div> 151 </div> 152 <script> 153 test(function() { 154 let s = getComputedStyle(target6); 155 assert_equals(s.getPropertyValue('--x'), ''); 156 }, 'getComputedStyle when inner container is display:none'); 157 </script> 158 159 <!-- Intermediate ancestor is display:none --> 160 <div class="container big"> 161 <div class="none"> 162 <div> 163 <div class="container"> 164 <div> 165 <div> 166 <div class="target" id=target7></div> 167 </div> 168 </div> 169 </div> 170 </div> 171 </div> 172 </div> 173 <script> 174 test(function() { 175 let s = getComputedStyle(target7); 176 assert_equals(s.getPropertyValue('--x'), ''); 177 }, 'getComputedStyle when intermediate ancestor is display:none'); 178 </script> 179 180 <!-- Outer container is display:none --> 181 <div class="container big none"> 182 <div> 183 <div> 184 <div class="container"> 185 <div> 186 <div> 187 <div class="target" id=target8></div> 188 </div> 189 </div> 190 </div> 191 </div> 192 </div> 193 </div> 194 <script> 195 test(function() { 196 let s = getComputedStyle(target8); 197 assert_equals(s.getPropertyValue('--x'), ''); 198 }, 'getComputedStyle when outer container is display:none'); 199 </script> 200 201 <!-- Nothing is display:none initially, but target becomes display:none --> 202 <div class="container"> 203 <div> 204 <div> 205 <div class="target" id=target9></div> 206 </div> 207 </div> 208 </div> 209 <script> 210 test(function() { 211 let s = getComputedStyle(target9); 212 assert_equals(s.getPropertyValue('--x'), '30'); 213 target9.classList.add('none'); 214 assert_equals(s.getPropertyValue('--x'), '30'); 215 }, 'getComputedStyle when element becomes display:none'); 216 </script> 217 218 <!-- Nothing is display:none initially, but parent becomes display:none --> 219 <div class="container"> 220 <div> 221 <div id=parent10> 222 <div class="target" id=target10></div> 223 </div> 224 </div> 225 </div> 226 <script> 227 test(function() { 228 let s = getComputedStyle(target10); 229 assert_equals(s.getPropertyValue('--x'), '30'); 230 parent10.classList.add('none'); 231 assert_equals(s.getPropertyValue('--x'), '30'); 232 }, 'getComputedStyle when parent becomes display:none'); 233 </script> 234 235 <!-- Nothing is display:none initially, but ancestor becomes display:none --> 236 <div class="container"> 237 <div id=ancestor11> 238 <div> 239 <div class="target" id=target11></div> 240 </div> 241 </div> 242 </div> 243 <script> 244 test(function() { 245 let s = getComputedStyle(target11); 246 assert_equals(s.getPropertyValue('--x'), '30'); 247 ancestor11.classList.add('none'); 248 assert_equals(s.getPropertyValue('--x'), '30'); 249 }, 'getComputedStyle when ancestor becomes display:none'); 250 </script> 251 252 <!-- Nothing is display:none initially, but container becomes display:none --> 253 <div class="container" id=container12> 254 <div> 255 <div> 256 <div class="target" id=target12></div> 257 </div> 258 </div> 259 </div> 260 <script> 261 test(function() { 262 let s = getComputedStyle(target12); 263 assert_equals(s.getPropertyValue('--x'), '30'); 264 container12.classList.add('none'); 265 assert_equals(s.getPropertyValue('--x'), ''); 266 }, 'getComputedStyle when container becomes display:none'); 267 </script> 268 269 <!-- Intermediate container becomes display:none --> 270 <div class="container big"> 271 <div> 272 <div> 273 <div class="container" id=container13> 274 <div> 275 <div> 276 <div class="target" id=target13></div> 277 </div> 278 </div> 279 </div> 280 </div> 281 </div> 282 </div> 283 <script> 284 test(function() { 285 let s = getComputedStyle(target13); 286 assert_equals(s.getPropertyValue('--x'), '30'); 287 container13.classList.add('none'); 288 assert_equals(s.getPropertyValue('--x'), ''); 289 }, 'getComputedStyle when intermediate container becomes display:none'); 290 </script> 291 292 <!-- Pseudo-element is display:none --> 293 <div class="container"> 294 <div> 295 <div> 296 <div class="target pseudo_none" id=target14></div> 297 </div> 298 </div> 299 </div> 300 <script> 301 test(function() { 302 let s = getComputedStyle(target14, '::before'); 303 assert_equals(s.getPropertyValue('content'), '"foo"'); 304 assert_equals(s.getPropertyValue('--x'), '30'); 305 }, 'getComputedStyle when ::before is display:none'); 306 </script> 307 308 <!-- Pseudo-element with display:none originating element --> 309 <div class="container"> 310 <div> 311 <div> 312 <div class="target pseudo none" id=target15></div> 313 </div> 314 </div> 315 </div> 316 <script> 317 test(function() { 318 let s = getComputedStyle(target15, '::before'); 319 assert_equals(s.getPropertyValue('content'), '"foo"'); 320 assert_equals(s.getPropertyValue('--x'), '30'); 321 }, 'getComputedStyle when originating element is display:none'); 322 </script> 323 324 <!-- Pseudo-element with display:none ancestor --> 325 <div class="container"> 326 <div class="none"> 327 <div> 328 <div class="target pseudo" id=target16></div> 329 </div> 330 </div> 331 </div> 332 <script> 333 test(function() { 334 let s = getComputedStyle(target16, '::before'); 335 assert_equals(s.getPropertyValue('content'), '"foo"'); 336 assert_equals(s.getPropertyValue('--x'), '30'); 337 }, 'getComputedStyle on ::before when ancestor element is display:none'); 338 </script> 339 340 <!-- Pseudo-element with in display:none container --> 341 <div class="container none"> 342 <div> 343 <div> 344 <div class="target pseudo" id=target17></div> 345 </div> 346 </div> 347 </div> 348 <script> 349 test(function() { 350 let s = getComputedStyle(target17, '::before'); 351 assert_equals(s.getPropertyValue('content'), '"foo"'); 352 assert_equals(s.getPropertyValue('--x'), ''); 353 }, 'getComputedStyle on ::before when container is display:none'); 354 </script> 355 356 <!-- Target in display:none with layout dirty outer element --> 357 <div class=small id="outer18"> 358 <div class="container auto"> 359 <div class="none"> 360 <div> 361 <div class="target" id=target18></div> 362 </div> 363 </div> 364 </div> 365 </div> 366 <script> 367 test(function() { 368 target18.offsetTop; 369 let s = getComputedStyle(target18); 370 assert_equals(s.getPropertyValue('--x'), ''); 371 372 outer18.classList.remove('small'); 373 outer18.classList.add('big'); 374 assert_equals(s.getPropertyValue('--x'), '50'); 375 }, 'getComputedStyle when in display:none with layout dirty outer element'); 376 </script> 377 378 <!-- Intermediate container has forced style --> 379 <div class="container"> 380 <div class="none"> 381 <div id="inner19" class="container"> 382 <div id="target19" class="target"></div> 383 </div> 384 </div> 385 </div> 386 <script> 387 test(function() { 388 getComputedStyle(inner19).getPropertyValue('--x'); 389 let s = getComputedStyle(target19); 390 assert_equals(s.getPropertyValue('--x'), ''); 391 }, 'getComputedStyle when display:none inner container has forced style'); 392 </script> 393 </main>