ineligible-containment.html (1473B)
1 <!doctype html> 2 <title>Containers ineligible for containment</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <style> 9 #outer, #inner1, #inner2 { 10 width: 200px; 11 container-type: inline-size; 12 } 13 #inner1 { 14 display: table; 15 } 16 p { 17 color: green; 18 } 19 @container (min-width: 1px) { 20 p { color: red; } 21 } 22 </style> 23 <div id=outer> 24 <div id=inner1> 25 <p id=p1>Test1</p> 26 </div> 27 <div id=inner2> 28 <p id=p2>Test1</p> 29 </div> 30 </main> 31 <script> 32 setup(() => assert_implements_size_container_queries()); 33 34 test(function(t) { 35 // #inner1 is the container, but it does not satisfy the containment 36 // requirements, hence the query should fail. 37 assert_equals(getComputedStyle(p1).color, 'rgb(0, 128, 0)'); 38 }, 'Container ineligible for containment'); 39 40 test(function(t) { 41 t.add_cleanup(() => { inner2.style = ''; }); 42 43 assert_equals(getComputedStyle(p2).color, 'rgb(255, 0, 0)'); 44 45 inner2.style = 'display:table'; 46 47 // #inner2 is still the container, but it no longer satisfies the 48 // containment requirements. 49 assert_equals(getComputedStyle(p2).color, 'rgb(0, 128, 0)'); 50 }, 'Changing containment eligibility invalidates style'); 51 </script>