container-size-shadow-invalidation.html (1596B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Container Queries Test: Invalidate size container query for Shadow DOM</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#query-container"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <style> 9 .container { 10 container-type: inline-size; 11 width: 100px; 12 } 13 @container (width = 200px) { 14 .target { color: green; } 15 } 16 </style> 17 <div id="host_container" class="container"> 18 <template shadowrootmode="open"> 19 <div class="container"> 20 <slot></slot> 21 </div> 22 </template> 23 <div class="target">Green</div> 24 </div> 25 <div id="non_host_container" class="container"> 26 <div> 27 <template shadowrootmode="open"> 28 <div class="container"> 29 <slot></slot> 30 </div> 31 </template> 32 <div class="target">Green</div> 33 </div> 34 </div> 35 <script> 36 setup(() => { 37 assert_implements_size_container_queries(); 38 }); 39 40 const green = "rgb(0, 128, 0)"; 41 42 test(() => { 43 document.body.offsetTop; 44 host_container.style.width = "200px"; 45 assert_equals(getComputedStyle(document.querySelector("#host_container .target")).color, green); 46 }, "Host container child invalidated with container in shadow tree"); 47 48 test(() => { 49 document.body.offsetTop; 50 non_host_container.style.width = "200px"; 51 assert_equals(getComputedStyle(document.querySelector("#non_host_container .target")).color, green); 52 }, "Non-host container child invalidated with container in shadow tree"); 53 </script>