auto-003.html (1695B)
1 <!DOCTYPE html> 2 <title>contain-intrinsic-size: auto with various dynamic changes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <div id="log"></div> 8 9 <div style="height: 2000px;"></div> 10 11 <div style="contain-intrinsic-size: auto 1px; contain: size;" id="test"> 12 <div style="height: 50px;" id="child"></div> <!-- make 'test' have a 50px height --> 13 </div> 14 15 <script> 16 var next_func; 17 18 var t = async_test("contain-intrinsic-size: auto"); 19 20 var log = document.getElementById("log"); 21 var el = document.getElementById("test"); 22 var child = document.getElementById("child"); 23 var observer = new ResizeObserver(function() { 24 requestAnimationFrame(next_func); 25 observer.unobserve(el); 26 }); 27 28 function step2() { 29 el.style.contentVisibility = "auto"; 30 el.style.contain = "size"; 31 assert_equals(el.offsetHeight, 50); 32 child.style.height = "30px"; 33 // We should still use the old saved size. 34 assert_equals(el.offsetHeight, 50); 35 36 el.style.contentVisibility = ""; 37 el.style.contain = ""; 38 assert_equals(el.offsetHeight, 30); 39 40 // Need to let resize observer run again to update the size. 41 next_func = t.step_func_done(finalize); 42 observer.observe(el); 43 } 44 45 function finalize() { 46 el.style.contentVisibility = "auto"; 47 el.style.contain = "size"; 48 assert_equals(el.offsetHeight, 30); 49 } 50 51 52 el.offsetWidth; 53 t.step(function() { 54 assert_equals(el.offsetHeight, 1); 55 el.style.contain = ""; 56 assert_equals(el.offsetHeight, 50); 57 58 // Let ResizeObserver run so that the size gets saved. 59 next_func = t.step_func(step2); 60 observer.observe(el); 61 }); 62 63 </script>