inheritance-from-container.html (1261B)
1 <!doctype html> 2 <title>Containers and inheritance</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 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 visibility: hidden; 10 } 11 #outer.visible { 12 visibility: visible; 13 } 14 #container { 15 container-type: inline-size; 16 } 17 #container.visible { 18 visibility: visible; 19 } 20 </style> 21 <div id=outer><div id=container><span id=inner>PASS</span></div></div> 22 <script> 23 setup(() => assert_implements_size_container_queries()); 24 25 test((t) => { 26 assert_equals(getComputedStyle(inner).visibility, "hidden"); 27 }, "Initial state"); 28 29 test((t) => { 30 outer.classList.add("visible"); 31 assert_equals(getComputedStyle(inner).visibility, "visible"); 32 }, "Test that visibility inherits via container after mutation"); 33 34 test((t) => { 35 outer.classList.remove("visible"); 36 assert_equals(getComputedStyle(inner).visibility, "hidden"); 37 }, "Return to initial state"); 38 39 test((t) => { 40 container.classList.add("visible"); 41 assert_equals(getComputedStyle(inner).visibility, "visible"); 42 }, "Test that visibility inherits from container after mutation"); 43 </script>