forget-on-disconnect-in-iframe.html (1774B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-sizing-4/#intrinsic-size-override"> 4 5 <iframe id="iframe" srcdoc=' 6 <div id="parent"> 7 <div id="target" style="contain-intrinsic-size:auto 1px auto 2px; width:max-content; height:max-content;"> 8 <div id="contents" style="width:100px; height:50px;"></div> 9 </div> 10 </div> 11 '></iframe> 12 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script> 16 function checkSize(elm, expectedWidth, expectedHeight, msg) { 17 assert_equals(elm.clientWidth, expectedWidth, msg + " - clientWidth"); 18 assert_equals(elm.clientHeight, expectedHeight, msg + " - clientHeight"); 19 } 20 21 function nextRendering() { 22 return new Promise(resolve => { 23 requestAnimationFrame(() => requestAnimationFrame(() => resolve())); 24 }); 25 } 26 27 // Make sure that the iframe is loaded: 28 onload = function() { 29 promise_test(async function() { 30 const doc = iframe.contentWindow.document; 31 const parent = doc.getElementById('parent'); 32 const target = doc.getElementById('target'); 33 const contents = doc.getElementById('contents'); 34 35 checkSize(target, 100, 50, "Sizing normally"); 36 37 await nextRendering(); 38 target.style.contentVisibility = "hidden"; 39 contents.style.width = "66px"; 40 contents.style.height = "66px"; 41 checkSize(target, 100, 50, "Using last remembered size"); 42 43 target.remove(); 44 checkSize(target, 0, 0, "No box"); 45 46 await nextRendering(); 47 parent.appendChild(target); 48 checkSize(target, 1, 2, "Size containment with no last remembered size"); 49 }, "Forget remembered size inside iframe"); 50 } 51 </script>