| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/intersection-observer-helper-functions.js"></script> |
| <style> |
| .target { |
| width: 100px; |
| height: 100px; |
| margin: 10px; |
| background-color: green; |
| } |
| </style> |
| <div style="width:100%; height:700px;"></div> |
| <div id="target1" class="target"></div> |
| <div id="target2" class="target"></div> |
| <div id="target3" class="target"></div> |
| |
| <script> |
| description("Verify that notifications for multiple targets are sorted by the order in which observe() was called on each target."); |
| var target1 = document.getElementById("target1"); |
| var target2 = document.getElementById("target2"); |
| var target3 = document.getElementById("target3"); |
| var entries = []; |
| var observer = new IntersectionObserver( |
| changes => { entries.push(...changes); } |
| ); |
| |
| onload = function() { |
| observer.observe(target1); |
| observer.observe(target2); |
| observer.observe(target3); |
| entries = entries.concat(observer.takeRecords()); |
| shouldBeEqualToNumber("entries.length", 0); |
| document.scrollingElement.scrollTop = 150; |
| waitForNotification(step0); |
| } |
| |
| function step0() { |
| shouldBeEqualToNumber("entries.length", 1); |
| if (entries.length > 0) |
| shouldBeEqualToString("entries[0].target.id", "target1"); |
| document.scrollingElement.scrollTop = 10000; |
| waitForNotification(step1); |
| } |
| |
| function step1() { |
| shouldBeEqualToNumber("entries.length", 3); |
| if (entries.length > 1) |
| shouldBeEqualToString("entries[1].target.id", "target2"); |
| if (entries.length > 2) |
| shouldBeEqualToString("entries[2].target.id", "target3"); |
| document.scrollingElement.scrollTop = 0; |
| waitForNotification(step2); |
| } |
| |
| function step2() { |
| shouldBeEqualToNumber("entries.length", 6); |
| if (entries.length > 3) |
| shouldBeEqualToString("entries[3].target.id", "target1"); |
| if (entries.length > 4) |
| shouldBeEqualToString("entries[4].target.id", "target2"); |
| if (entries.length > 5) |
| shouldBeEqualToString("entries[5].target.id", "target3"); |
| finishJSTest(); |
| } |
| </script> |
