content-visibility-030.html (4807B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>Content Visibility: intersection observer interactions</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="content-visibility hidden is not intersecting from IO perspective"> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <style> 13 div { 14 width: 100px; 15 height: 100px; 16 } 17 #spacer { 18 height: 3000px; 19 } 20 .hidden { 21 content-visibility: hidden; 22 } 23 </style> 24 25 <div id="target1"> 26 <div id="target2"></div> 27 </div> 28 <div id="target3"> 29 <div id="target4"></div> 30 </div> 31 <div id="spacer"></div> 32 <div id="find_me"></div> 33 34 <script> 35 async_test((t) => { 36 let target1, target2, target3, target4; 37 let observer; 38 let entries = []; 39 40 // Set everything up. 41 function enqueueStep1() { 42 target1 = document.getElementById("target1"); 43 target2 = document.getElementById("target2"); 44 target3 = document.getElementById("target3"); 45 target4 = document.getElementById("target4"); 46 47 observer = new IntersectionObserver((new_entries) => { 48 entries = entries.concat(new_entries); 49 }); 50 observer.observe(target1); 51 observer.observe(target2); 52 observer.observe(target3); 53 observer.observe(target4); 54 55 entries = entries.concat(observer.takeRecords()); 56 t.step(() => { assert_equals(entries.length, 0, "No initial notifications") }); 57 requestAnimationFrame(() => { 58 requestAnimationFrame(() => { 59 runStep1(); 60 }); 61 }); 62 } 63 64 // Verify that all elements are visible at the start, with intersection events. 65 function runStep1() { 66 const step = arguments.callee.name; 67 t.step(() => { 68 assert_equals(entries.length, 4, step); 69 // Clear the observed visible targets. 70 for (let i = 0; i < entries.length; ++i) { 71 assert_true(entries[i].isIntersecting); 72 assert_true(entries[i].target === target1 || 73 entries[i].target === target2 || 74 entries[i].target === target3 || 75 entries[i].target === target4, step); 76 } 77 }); 78 79 entries = []; 80 enqueueStep2(); 81 } 82 83 // Lock target3. 84 async function enqueueStep2() { 85 target3.classList.add("hidden"); 86 requestAnimationFrame(() => { 87 requestAnimationFrame(() => { 88 runStep2(); 89 }); 90 }); 91 } 92 93 // Verify that the hidden element received a not-intersecting event. 94 function runStep2() { 95 const step = arguments.callee.name; 96 t.step(() => { 97 assert_equals(entries.length, 1, step); 98 assert_false(entries[0].isIntersecting, step); 99 assert_equals(entries[0].target, target4, step); 100 }); 101 102 entries = []; 103 enqueueStep3(); 104 } 105 106 // Scroll all elements off screen. 107 function enqueueStep3() { 108 document.getElementById("find_me").scrollIntoView(); 109 requestAnimationFrame(() => { 110 requestAnimationFrame(() => { 111 runStep3(); 112 }); 113 }); 114 } 115 116 // Verify that all elements received not intersecting event, except 117 // target4, which was already not intersecting due to being hidden. 118 function runStep3() { 119 const step = arguments.callee.name; 120 t.step(() => { 121 assert_equals(entries.length, 3, step); 122 for (let i = 0; i < entries.length; ++i) { 123 assert_false(entries[i].isIntersecting, step); 124 assert_not_equals(entries[i].target, target4, step); 125 } 126 }); 127 128 entries = []; 129 enqueueStep4(); 130 } 131 132 // Scroll the elements back on screen. 133 function enqueueStep4() { 134 target1.scrollIntoView(); 135 requestAnimationFrame(() => { 136 requestAnimationFrame(() => { 137 runStep4(); 138 }); 139 }); 140 } 141 142 // Verify that all elements received not intersecting event, except 143 // target4, which remains not intersecting. 144 function runStep4() { 145 const step = arguments.callee.name; 146 t.step(() => { 147 assert_equals(entries.length, 3, step); 148 for (let i = 0; i < entries.length; ++i) { 149 assert_true(entries[i].isIntersecting); 150 assert_not_equals(entries[i].target, target4, step); 151 } 152 }); 153 154 entries = []; 155 enqueueStep5(); 156 } 157 158 // Unlock target3. 159 async function enqueueStep5() { 160 target3.classList.remove("hidden"); 161 requestAnimationFrame(() => { 162 requestAnimationFrame(() => { 163 runStep5(); 164 }); 165 }); 166 } 167 168 function runStep5() { 169 const step = arguments.callee.name; 170 t.step(() => { 171 assert_equals(entries.length, 1, step); 172 assert_true(entries[0].isIntersecting, step); 173 assert_equals(entries[0].target, target4, step); 174 }); 175 t.done(); 176 } 177 178 179 window.onload = () => { 180 requestAnimationFrame(enqueueStep1); 181 }; 182 }, "IntersectionObserver interactions"); 183 </script>