nested-size-style-container-invalidation.html (1118B)
1 <!DOCTYPE html> 2 <title>Nested size/style @container-dependent elements respond to container size changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 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: 1000px; 11 } 12 #container.narrow { 13 width: 600px; 14 } 15 #target { 16 color: red; 17 } 18 @container (width < 800px) { 19 @container style(--foo: bar) { 20 #target { color: green; } 21 } 22 } 23 </style> 24 <div id="container"> 25 <div style="--foo: bar"> 26 <div id="target">Green?</div> 27 </div> 28 </div> 29 <script> 30 setup(() => { 31 assert_implements_size_container_queries(); 32 assert_implements_style_container_queries(); 33 }); 34 35 test(() => { 36 assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)"); 37 }, "Initially red"); 38 39 test(() => { 40 container.className = "narrow"; 41 assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)"); 42 }, "Green after reducing width"); 43 </script>