display-none.html (1413B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/intersection-observer-test-utils.js"></script> 6 7 <style> 8 pre, #log { 9 position: absolute; 10 top: 0; 11 left: 200px; 12 } 13 #target { 14 background-color: green; 15 width: 100px; 16 height: 100px; 17 } 18 </style> 19 20 <div id="target"></div> 21 22 <script> 23 var vw = document.documentElement.clientWidth; 24 var vh = document.documentElement.clientHeight; 25 26 var entries = []; 27 28 promise_test(async function(t) { 29 var target = document.getElementById("target"); 30 var root = document.getElementById("root"); 31 var observer = new IntersectionObserver(function(changes) { 32 entries = entries.concat(changes) 33 }); 34 observer.observe(target); 35 entries = entries.concat(observer.takeRecords()); 36 assert_equals(entries.length, 0, "No initial notifications."); 37 38 await waitForNotification(); 39 40 checkLastEntry( 41 entries, 42 0, 43 [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true], 44 ); 45 target.style.display = "none"; 46 47 await waitForNotification(); 48 49 checkLastEntry( 50 entries, 51 1, 52 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, false], 53 ); 54 55 target.style.display = ""; 56 57 await waitForNotification(); 58 59 checkLastEntry( 60 entries, 61 2, 62 [8, 108, 8, 108, 8, 108, 8, 108, 0, vw, 0, vh, true], 63 ); 64 }); 65 </script>