container-name-invalidation.html (1922B)
1 <!doctype html> 2 <title>container-name invalidation</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-name"> 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 div { 9 color: black; 10 } 11 #outer { 12 container-name: c1; 13 container-type: inline-size; 14 width: 300px; 15 } 16 17 #inner { 18 container-name: c2; 19 container-type: inline-size; 20 width: 200px; 21 } 22 23 #intermediate { 24 width: 250px; 25 } 26 27 @container c1 (width: 250px) { 28 #child { 29 color: green; 30 } 31 } 32 </style> 33 <div id=outer> 34 <div id=intermediate> 35 <div id=inner> 36 <div id=child>Test</div> 37 </div> 38 </div> 39 </div> 40 <script> 41 setup(() => assert_implements_size_container_queries()); 42 43 test(function(t) { 44 t.add_cleanup(() => { outer.style = ''; }); 45 46 assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)'); 47 48 outer.style.width = '250px'; 49 assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)'); 50 51 outer.style.width = '251px'; 52 assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)'); 53 }, 'Changing a named container invalidates relevant descendants'); 54 55 test(function(t) { 56 t.add_cleanup(() => { 57 outer.style = ''; 58 intermediate.style = ''; 59 }); 60 61 assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)'); 62 63 // #intermediate becomes the new container. 64 intermediate.style = 'container-name:c1; container-type:inline-size'; 65 assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)'); 66 67 // #outer becomes the container again. 68 intermediate.style = ''; 69 assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)'); 70 71 outer.style.width = '250px'; 72 assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)'); 73 }, 'Changing container-name invalidates relevant descendants'); 74 </script>