| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Dynamic change to size containment</title> |
| <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1765615"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <meta name="assert" content="Verify size containment is properly updated after dynamic change to the contain property."> |
| <style> |
| /* Selectors for contain */ |
| #none .wrapper { |
| containt: none; |
| } |
| #size .wrapper { |
| contain: size; |
| } |
| #none_to_size .wrapper { |
| containt: none; |
| } |
| #size_to_none .wrapper { |
| contain: size; |
| } |
| |
| /* Selectors for testing sizing as empty */ |
| .wrapper { |
| display: inline-block; |
| } |
| .box { |
| display: inline-block; |
| width: 50px; |
| height: 5px; |
| background: black; |
| } |
| </style> |
| <body> |
| <div id="log"></div> |
| |
| <div id="none"> |
| <div class="wrapper"><div class="box"></div></div> |
| </div> |
| |
| <div id="size"> |
| <div class="wrapper"><div class="box"></div></div> |
| </div> |
| |
| <div id="none_to_size"> |
| <div class="wrapper"><div class="box"></div></div> |
| </div> |
| |
| <div id="size_to_none"> |
| <div class="wrapper"><div class="box"></div></div> |
| </div> |
| |
| <script> |
| function verifySizeContainment(id, applied) { |
| // To verify size containment applies, we test whether it is sized as |
| // if empty i.e. the size of its inner box is ignored. |
| let container = document.getElementById(id); |
| let wrapper = container.getElementsByClassName("wrapper")[0]; |
| let wrapperBox = wrapper.getBoundingClientRect(); |
| assert_equals(wrapperBox.width == 0, applied, "width is zero"); |
| assert_equals(wrapperBox.height == 0, applied, "height is zero"); |
| } |
| |
| function setContain(id, value) { |
| let container = document.getElementById(id); |
| let wrapper = container.getElementsByClassName("wrapper")[0]; |
| wrapper.style.contain = value; |
| } |
| |
| promise_test(async () => { |
| verifySizeContainment("none", /*applied=*/false); |
| }, "contain: none"); |
| |
| promise_test(async () => { |
| verifySizeContainment("size", /*applied=*/true); |
| }, "contain: size"); |
| |
| promise_test(async () => { |
| setContain("none_to_size", "size"); |
| verifySizeContainment("none_to_size", /*applied=*/true); |
| }, "switching contain from none to size"); |
| |
| promise_test(async () => { |
| setContain("size_to_none", "none"); |
| verifySizeContainment("size_to_none", /*applied=*/false); |
| }, "switching contain from size to none"); |
| </script> |
| </body> |
