content-visibility-auto-state-changed-first-observation.html (2058B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>Content Visibility: ContentVisibilityAutoStateChange event.</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="ContentVisibilityAutoStateChange fires once when element is inserted"> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <style> 13 .spacer { 14 height: 10000px; 15 } 16 </style> 17 18 <div id=topdiv></div> 19 <div class=spacer></div> 20 <div id=bottomdiv></div> 21 22 <script> 23 promise_test(t => new Promise(async (resolve, reject) => { 24 await new Promise((waited, _) => { 25 requestAnimationFrame(() => requestAnimationFrame(waited)); 26 }); 27 28 let observed = false; 29 let div = document.createElement("div"); 30 div.addEventListener("contentvisibilityautostatechange", (e) => { 31 if (observed) 32 reject("already observed"); 33 if (e.skipped) 34 reject("unexpected skipped"); 35 observed = true; 36 // Wait a couple of frames to ensure no other signal comes in 37 requestAnimationFrame(() => requestAnimationFrame(resolve)); 38 }); 39 40 div.style.contentVisibility = "auto"; 41 topdiv.appendChild(div); 42 }), "ContentVisibilityAutoStateChange fires once when added (not skipped)"); 43 44 promise_test(t => new Promise(async (resolve, reject) => { 45 await new Promise((waited, _) => { 46 requestAnimationFrame(() => requestAnimationFrame(waited)); 47 }); 48 49 let observed = false; 50 let div = document.createElement("div"); 51 div.addEventListener("contentvisibilityautostatechange", (e) => { 52 if (observed) 53 reject("already observed"); 54 if (!e.skipped) 55 reject("unexpected not skipped"); 56 observed = true; 57 // Wait a couple of frames to ensure no other signal comes in 58 requestAnimationFrame(() => requestAnimationFrame(resolve)); 59 }); 60 61 div.style.contentVisibility = "auto"; 62 bottomdiv.appendChild(div); 63 }), "ContentVisibilityAutoStateChange fires once when added (skipped)"); 64 </script>