style-container-invalidation-inheritance.html (1527B)
1 <!DOCTYPE html> 2 <title>CSS Container Query Test: named style container query change with inherited custom property</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 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-name: container; 10 } 11 .match { 12 --match: true; 13 } 14 #inner { 15 color: red; 16 } 17 @container container style(--match: true) { 18 #inner { 19 color: green; 20 } 21 } 22 </style> 23 <div id="container"> 24 <div id="outer"> 25 <div id="inner"></div> 26 </div> 27 </div> 28 <script> 29 setup(() => assert_implements_style_container_queries()); 30 31 test(() => { 32 assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)"); 33 assert_equals(getComputedStyle(inner).getPropertyValue("--match"), ""); 34 assert_equals(getComputedStyle(outer).getPropertyValue("--match"), ""); 35 assert_equals(getComputedStyle(container).getPropertyValue("--match"), ""); 36 }, "Pre-conditions"); 37 38 test(() => { 39 container.className = "match"; 40 assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)"); 41 assert_equals(getComputedStyle(inner).getPropertyValue("--match"), "true"); 42 assert_equals(getComputedStyle(outer).getPropertyValue("--match"), "true"); 43 assert_equals(getComputedStyle(container).getPropertyValue("--match"), "true"); 44 }, "Changed --match inherits down descendants and affects container query"); 45 </script>