| <!DOCTYPE html> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="./resources/intersection-observer-test-utils.js"></script> |
| |
| <style> |
| pre, #log { |
| position: absolute; |
| top: 120px; |
| left: 0; |
| } |
| #scroller { |
| width: 250px; |
| overflow: auto; |
| } |
| #overflow { |
| width: 1000px; |
| } |
| .content { |
| width: 100px; |
| height: 20px; |
| padding: 40px 0; |
| text-align: center; |
| background-color: grey; |
| display: inline-block; |
| } |
| </style> |
| |
| <div id="scroller"> |
| <div id="overflow"> |
| <span><div class="content">1</div></span> |
| <span><div class="content">2</div></span> |
| <span><div class="content">3</div></span> |
| <span id="target"><div class="content">4</div></span> |
| <span><div class="content">5</div></span> |
| </div> |
| </div> |
| |
| <script> |
| var vw = document.documentElement.clientWidth; |
| var vh = document.documentElement.clientHeight; |
| |
| var entries = []; |
| var scroller, target, spaceWidth, targetOffsetLeft, targetOffsetTop; |
| |
| runTestCycle(function() { |
| scroller = document.getElementById("scroller"); |
| assert_true(!!scroller, "scroller exists"); |
| target = document.getElementById("target"); |
| assert_true(!!target, "target exists"); |
| var observer = new IntersectionObserver(function(changes) { |
| entries = entries.concat(changes) |
| }); |
| observer.observe(target); |
| entries = entries.concat(observer.takeRecords()); |
| assert_equals(entries.length, 0, "No initial notifications."); |
| runTestCycle(step0, "First rAF"); |
| }, "Inline target"); |
| |
| function step0() { |
| // Measure space width between two adjacent inlines. |
| let nextEl = target.nextElementSibling; |
| spaceWidth = nextEl.offsetLeft - target.offsetLeft - target.offsetWidth; |
| // 8px body margin + 3 preceding siblings @ (100px width + spaceWidth) each |
| targetOffsetLeft = 8 + 300 + (spaceWidth * 3); |
| // 8px body margin + 40px top padding |
| targetOffsetTop = 48; |
| let left = targetOffsetLeft; |
| let right = left + 100; |
| let top = targetOffsetTop; |
| let bottom = top + target.offsetHeight; |
| |
| scroller.scrollLeft = 90; |
| runTestCycle(step1, "scroller.scrollLeft = 90"); |
| |
| checkLastEntry(entries, 0, [left, right, top, bottom, |
| 0, 0, 0, 0, 0, vw, 0, vh, false]); |
| } |
| |
| function step1() { |
| // -90px for scroll offset |
| let left = targetOffsetLeft - 90; |
| let right = left + 100; |
| let top = targetOffsetTop; |
| let bottom = top + target.offsetHeight; |
| // 8px body margin + 250px client width of scroller |
| let scrollerRight = 258; |
| checkLastEntry(entries, 1, [left, right, top, bottom, |
| left, scrollerRight, top, bottom, |
| 0, vw, 0, vh, true]); |
| } |
| </script> |
