multiple-targets.html (2758B)
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 .spacer { 14 height: calc(100vh + 100px); 15 } 16 .target { 17 width: 100px; 18 height: 100px; 19 margin: 10px; 20 background-color: green; 21 } 22 </style> 23 24 <div class="spacer"></div> 25 <div id="target1" class="target"></div> 26 <div id="target2" class="target"></div> 27 <div id="target3" class="target"></div> 28 29 <script> 30 var entries = []; 31 var target1, target2, target3; 32 33 runTestCycle(function() { 34 target1 = document.getElementById("target1"); 35 assert_true(!!target1, "target1 exists."); 36 target2 = document.getElementById("target2"); 37 assert_true(!!target2, "target2 exists."); 38 target3 = document.getElementById("target3"); 39 assert_true(!!target3, "target3 exists."); 40 var observer = new IntersectionObserver(function(changes) { 41 entries = entries.concat(changes) 42 }); 43 observer.observe(target1); 44 observer.observe(target2); 45 observer.observe(target3); 46 entries = entries.concat(observer.takeRecords()); 47 assert_equals(entries.length, 0, "No initial notifications."); 48 runTestCycle(step0, "First rAF."); 49 }, "One observer with multiple targets."); 50 51 function step0() { 52 document.scrollingElement.scrollTop = 150; 53 runTestCycle(step1, "document.scrollingElement.scrollTop = 150"); 54 assert_equals(entries.length, 3, "Three initial notifications."); 55 assert_equals(entries[0].target, target1, "entries[0].target === target1"); 56 assert_equals(entries[1].target, target2, "entries[1].target === target2"); 57 assert_equals(entries[2].target, target3, "entries[2].target === target3"); 58 } 59 60 function step1() { 61 document.scrollingElement.scrollTop = 10000; 62 runTestCycle(step2, "document.scrollingElement.scrollTop = 10000"); 63 assert_equals(entries.length, 4, "Four notifications."); 64 assert_equals(entries[3].target, target1, "entries[3].target === target1"); 65 } 66 67 function step2() { 68 document.scrollingElement.scrollTop = 0; 69 runTestCycle(step3, "document.scrollingElement.scrollTop = 0"); 70 assert_equals(entries.length, 6, "Six notifications."); 71 assert_equals(entries[4].target, target2, "entries[4].target === target2"); 72 assert_equals(entries[5].target, target3, "entries[5].target === target3"); 73 } 74 75 function step3() { 76 assert_equals(entries.length, 9, "Nine notifications."); 77 assert_equals(entries[6].target, target1, "entries[6].target === target1"); 78 assert_equals(entries[7].target, target2, "entries[7].target === target2"); 79 assert_equals(entries[8].target, target3, "entries[8].target === target3"); 80 } 81 </script>