| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <script src="helper-functions.js"></script> |
| <div id="beforeFrame" style="width:100%; height:700px;"></div> |
| <div id="afterFrame" style="width:100%; height:700px;"></div> |
| |
| <script> |
| description("Test that intersection observer time is relative to time in the callback context."); |
| var topWindowEntries = []; |
| var iframeWindowEntries = []; |
| var topWindowObserver; |
| var iframeWindowObserver; |
| var targetIframe; |
| var iframeScroller; |
| var topWindowTime; |
| var iframeWindowTime; |
| var timestampTolerance = 24; // 1.5 times frame duration. |
| |
| function step0() { |
| // Test results are only significant if there's a sufficient gap between |
| // top window time and iframe window time. |
| topWindowTime = performance.now(); |
| iframeWindowTime = targetIframe.contentWindow.performance.now(); |
| shouldBeGreaterThan("topWindowTime - iframeWindowTime", "2 * timestampTolerance"); |
| |
| topWindowEntries = topWindowEntries.concat(topWindowObserver.takeRecords()); |
| iframeWindowEntries = iframeWindowEntries.concat(iframeWindowObserver.takeRecords()); |
| shouldBeEqualToNumber("topWindowEntries.length", 0); |
| shouldBeEqualToNumber("iframeWindowEntries.length", 0); |
| document.scrollingElement.scrollTop = 200; |
| iframeScroller.scrollTop = 250; |
| requestAnimationFrame(step1); |
| } |
| |
| function step1() { |
| topWindowEntries = topWindowEntries.concat(topWindowObserver.takeRecords()); |
| iframeWindowEntries = iframeWindowEntries.concat(iframeWindowObserver.takeRecords()); |
| topWindowTime = performance.now(); |
| iframeWindowTime = targetIframe.contentWindow.performance.now(); |
| shouldBeEqualToNumber("topWindowEntries.length", 1); |
| if (topWindowEntries.length) { |
| shouldBeCloseTo("topWindowEntries[0].time", "topWindowTime", timestampTolerance); |
| } |
| shouldBeEqualToNumber("iframeWindowEntries.length", 1); |
| if (iframeWindowEntries.length) { |
| shouldBeCloseTo("iframeWindowEntries[0].time", "iframeWindowTime", timestampTolerance); |
| } |
| finishJSTest(); |
| document.scrollingElement.scrollTop = 0; |
| } |
| |
| function runTest() { |
| var target = targetIframe.contentDocument.getElementById("target"); |
| iframeScroller = targetIframe.contentDocument.scrollingElement; |
| |
| // Observer created here, callback created in iframe context. Timestamps should be |
| // from this window. |
| topWindowObserver = new IntersectionObserver(targetIframe.contentDocument.createObserverCallback(topWindowEntries), {}); |
| topWindowObserver.observe(target); |
| |
| // Callback created here, observer created in iframe. Timestamps should be |
| // from iframe window. |
| iframeWindowObserver = targetIframe.contentDocument.createObserver(function(newEntries) { |
| for (var i = 0; i < newEntries.length; i++) |
| iframeWindowEntries.push(newEntries[i]); |
| }); |
| iframeWindowObserver.observe(target); |
| |
| // See README for explanation of double RAF. |
| requestAnimationFrame(() => { requestAnimationFrame(step0) }); |
| } |
| |
| window.onload = function() { |
| setTimeout(function() { |
| targetIframe = document.createElement("iframe"); |
| targetIframe.src = "../resources/intersection-observer-timestamp-subframe.html"; |
| targetIframe.style = "height: 100px; overflow-y: scroll"; |
| var afterFrame = document.getElementById("afterFrame"); |
| afterFrame.parentNode.insertBefore(targetIframe, afterFrame); |
| targetIframe.onload = runTest; |
| }, 100); |
| }; |
| |
| </script> |
