| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="../resources/js-test-pre.js"></script> |
| <style> |
| #scrollable { |
| width: 100px; |
| height: 100px; |
| border: 1px solid black; |
| overflow-y: auto; |
| } |
| #container { |
| width: 100px; |
| height: 200px; |
| } |
| #box { |
| position: relative; |
| top: 100px; |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="scrollable"> |
| <div id="container"> |
| <div id="box"></div> |
| </div> |
| </div> |
| <script> |
| var animateTimestamp = 0; |
| var intersectTimestamp = 0; |
| var MaxFrames = 2; |
| var currentFrame = 0; |
| |
| function scrollBox() |
| { |
| var scrollable = document.querySelector("#scrollable"); |
| var height = scrollable.clientHeight; |
| scrollable.scroll(0, (height / MaxFrames) * currentFrame); |
| document.body.offsetHeight; |
| } |
| |
| function handleAnimate(timestamp) |
| { |
| if (++currentFrame > MaxFrames) { |
| finishJSTest(); |
| return; |
| } |
| |
| animateTimestamp = timestamp; |
| scrollBox(); |
| requestAnimationFrame(handleAnimate); |
| } |
| |
| function handleIntersect(entries, observer) |
| { |
| entries.forEach((entry) => { |
| intersectTimestamp = entry.time; |
| shouldBe("Math.round(animateTimestamp)", "Math.round(intersectTimestamp)"); |
| }); |
| } |
| |
| function buildThresholdList() |
| { |
| let thresholds = []; |
| |
| for (let i = 1.0; i <= MaxFrames; i++) { |
| let ratio = i / MaxFrames; |
| thresholds.push(ratio); |
| } |
| |
| return thresholds; |
| } |
| |
| function createObserver() |
| { |
| let observer; |
| |
| let options = { |
| root: document.querySelector("#scrollable"), |
| rootMargin: "0px", |
| threshold: buildThresholdList() |
| }; |
| |
| observer = new IntersectionObserver(handleIntersect, options); |
| observer.observe(document.querySelector("#box")); |
| } |
| |
| window.jsTestIsAsync = true; |
| |
| description("Test the IntersectionObserver timestamp is the same as the timestamp of the rAF callback."); |
| createObserver(); |
| requestAnimationFrame(handleAnimate); |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
