container-size-nested-invalidation.html (1835B)
1 <!doctype html> 2 <title>Nested @container-dependent elements respond to outer 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 #outer { 9 container-type: size; 10 container-name: outer; 11 width: 100px; 12 height: 100px; 13 } 14 15 /* Note that it's intentional that nothing queries this container. */ 16 #inner { 17 container-type: size; 18 width: 42px; 19 height: 42px; 20 } 21 22 @container (width > 90px) { 23 #outer_child { 24 --outer:true; 25 } 26 } 27 28 @container outer (width > 70px) { 29 #inner_child { 30 --inner:true; 31 } 32 } 33 </style> 34 <div id=outer> 35 <div id=outer_child></div> 36 <div id=inner> 37 <div id=inner_child></div> 38 </div> 39 </div> 40 <script> 41 setup(() => assert_implements_size_container_queries()); 42 43 test(function() { 44 assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), 'true'); 45 assert_equals(getComputedStyle(inner_child).getPropertyValue('--inner'), 'true'); 46 47 outer.style.width = '80px'; 48 49 assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), ''); 50 assert_equals(getComputedStyle(inner_child).getPropertyValue('--inner'), 'true'); 51 52 outer.style.width = '60px'; 53 54 assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), ''); 55 assert_equals(getComputedStyle(inner_child).getPropertyValue('--inner'), ''); 56 57 outer.style.width = '100px'; 58 59 assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), 'true'); 60 assert_equals(getComputedStyle(inner_child).getPropertyValue('--inner'), 'true'); 61 }, 'Queries that skip a container are invalidated correctly'); 62 </script>