content-visibility-auto-first-observation-immediate.html (1509B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>Content Visibility: first visibility determination happens before resize observer.</title> 5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <meta name="assert" content="first visibility determination happens before resize observer"> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <style> 13 #target { 14 content-visibility: auto; 15 contain-intrinsic-size: 10px; 16 } 17 #child { 18 height: 100px; 19 } 20 </style> 21 22 <div id=container></div> 23 24 <script> 25 promise_test(t => new Promise(async (resolve, reject) => { 26 requestAnimationFrame(() => { 27 let target = document.createElement("div"); 28 target.id = "target"; 29 30 let child = document.createElement("div"); 31 child.id = "child"; 32 target.appendChild(child); 33 34 const resizeObserver = new ResizeObserver((entries) => { 35 for (const entry of entries) { 36 if (entry.contentBoxSize) { 37 if (entry.contentBoxSize[0].blockSize == 100) { 38 resolve(); 39 return; 40 } else { 41 reject(`unexpected size ${entry.contentBoxSize[0].blockSize}`); 42 return; 43 } 44 } 45 } 46 reject("no content boxes or no entries"); 47 }); 48 49 container.appendChild(target); 50 resizeObserver.observe(target); 51 }); 52 }), "Target is sized and laid out before resize observer"); 53 </script>