| <!DOCTYPE html> |
| <script src="helper-functions.js"></script> |
| <div style="height: 200px; width: 100px;"></div> |
| <div id="target" style="background-color: green; width:100px; height:100px"></div> |
| <div style="height: 200px; width: 100px;"></div> |
| <script> |
| var port; |
| var entries = []; |
| var target = document.getElementById('target'); |
| var scroller = document.scrollingElement; |
| var nextStep; |
| |
| // Note that we never use RAF in this code, because this frame might get render-throttled. |
| // Instead of RAF-ing, we just post an empty message to the parent window, which will |
| // RAF when it is received, and then send us a message to cause the next step to run. |
| |
| function observer_callback(changes) { |
| for (var i in changes) |
| entries.push(changes[i]); |
| } |
| var observer = new IntersectionObserver(observer_callback, {}); |
| observer.observe(target); |
| |
| function step0() { |
| setTimeout(function() { |
| nextStep = step1; |
| port.postMessage({actual: entries.map(entryToJson), expected: []}, "*"); |
| entries = []; |
| port.postMessage({scrollTo: 200}, "*"); |
| }); |
| } |
| |
| function step1() { |
| setTimeout(function() { |
| port.postMessage({actual: entries.map(entryToJson), expected: []}, "*"); |
| entries = []; |
| scroller.scrollTop = 250; |
| nextStep = step2; |
| port.postMessage({}, "*"); |
| }); |
| } |
| |
| function step2() { |
| setTimeout(function() { |
| var expected = [{ |
| boundingClientRect: coordinatesToClientRectJson(468, 118, 568, 18), |
| intersectionRect: coordinatesToClientRectJson(510, 118, 568, 18), |
| rootBounds: "null", |
| target: target.id |
| }]; |
| port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*"); |
| entries = []; |
| nextStep = step3; |
| port.postMessage({scrollTo: 100}, "*"); |
| }); |
| } |
| |
| function step3() { |
| setTimeout(function() { |
| var expected = [{ |
| boundingClientRect: coordinatesToClientRectJson(568, 118, 668, 18), |
| intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0), |
| rootBounds: "null", |
| target: target.id |
| }]; |
| port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*"); |
| port.postMessage({DONE: 1}, "*"); |
| }); |
| } |
| |
| function handleMessage(event) |
| { |
| port = event.source; |
| nextStep(); |
| } |
| |
| nextStep = step0; |
| window.addEventListener("message", handleMessage); |
| </script> |