contain-size-dynamic-001.html (2724B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Dynamic change to size containment</title> 4 <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1765615"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <meta name="assert" content="Verify size containment is properly updated after dynamic change to the contain property."> 10 <style> 11 /* Selectors for contain */ 12 #none .wrapper { 13 containt: none; 14 } 15 #size .wrapper { 16 contain: size; 17 } 18 #none_to_size .wrapper { 19 containt: none; 20 } 21 #size_to_none .wrapper { 22 contain: size; 23 } 24 25 /* Selectors for testing sizing as empty */ 26 .wrapper { 27 display: inline-block; 28 } 29 .box { 30 display: inline-block; 31 width: 50px; 32 height: 5px; 33 background: black; 34 } 35 </style> 36 <body> 37 <div id="log"></div> 38 39 <div id="none"> 40 <div class="wrapper"><div class="box"></div></div> 41 </div> 42 43 <div id="size"> 44 <div class="wrapper"><div class="box"></div></div> 45 </div> 46 47 <div id="none_to_size"> 48 <div class="wrapper"><div class="box"></div></div> 49 </div> 50 51 <div id="size_to_none"> 52 <div class="wrapper"><div class="box"></div></div> 53 </div> 54 55 <script> 56 function verifySizeContainment(id, applied) { 57 // To verify size containment applies, we test whether it is sized as 58 // if empty i.e. the size of its inner box is ignored. 59 let container = document.getElementById(id); 60 let wrapper = container.getElementsByClassName("wrapper")[0]; 61 let wrapperBox = wrapper.getBoundingClientRect(); 62 assert_equals(wrapperBox.width == 0, applied, "width is zero"); 63 assert_equals(wrapperBox.height == 0, applied, "height is zero"); 64 } 65 66 function setContain(id, value) { 67 let container = document.getElementById(id); 68 let wrapper = container.getElementsByClassName("wrapper")[0]; 69 wrapper.style.contain = value; 70 } 71 72 promise_test(async () => { 73 verifySizeContainment("none", /*applied=*/false); 74 }, "contain: none"); 75 76 promise_test(async () => { 77 verifySizeContainment("size", /*applied=*/true); 78 }, "contain: size"); 79 80 promise_test(async () => { 81 setContain("none_to_size", "size"); 82 verifySizeContainment("none_to_size", /*applied=*/true); 83 }, "switching contain from none to size"); 84 85 promise_test(async () => { 86 setContain("size_to_none", "none"); 87 verifySizeContainment("size_to_none", /*applied=*/false); 88 }, "switching contain from size to none"); 89 </script> 90 </body>