| <!DOCTYPE html> |
| <title>IntersectionObserver observing table with border and overflow scroll</title> |
| <link rel="author" href="mailto:steven.novaryo@gmail.com" title="Steven Novaryo"> |
| <link rel="help" href="https://w3c.github.io/IntersectionObserver/#intersectionobserver-root-intersection-rectangle"> |
| <link rel="help" href="https://drafts.csswg.org/css-tables/#global-style-overrides"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="./resources/intersection-observer-test-utils.js"></script> |
| |
| <style> |
| #root { |
| box-sizing: border-box; |
| overflow: scroll; |
| border: 50px solid black; |
| will-change: transform; |
| } |
| #target { |
| display: inline-block; |
| width: 50px; |
| height: 50px; |
| position: absolute; |
| top: 300px; |
| left: 300px; |
| background-color: green; |
| } |
| </style> |
| <table id="root"> |
| <tr> |
| <td> |
| <span id="target"></span> |
| </td> |
| </tr> |
| </table> |
| <script> |
| var entries = []; |
| var rootRect = root.getBoundingClientRect(); |
| |
| runTestCycle(function() { |
| assert_true(!!target, "target exists"); |
| var observer = new IntersectionObserver(function(changes) { |
| entries = entries.concat(changes) |
| }, { root: root }); |
| observer.observe(target); |
| entries = entries.concat(observer.takeRecords()); |
| assert_equals(entries.length, 0, "No initial notifications."); |
| runTestCycle(step0, "First rAF."); |
| }, "IntersectionObserver observing an element inside a root table."); |
| |
| function step0() { |
| // To reduce the inconsistencies of the layout within different UAs we are calculating the offset dynamically. |
| var targetRect = target.getBoundingClientRect(); |
| target.style.top = `${300 - (targetRect.top - rootRect.bottom + 50)}px`; |
| target.style.left = `${300 - (targetRect.left - rootRect.right + 50)}px`; |
| runTestCycle(step1, "Moving the target to the right bottom corner of the table."); |
| checkLastEntry(entries, 0, [ |
| targetRect.left, targetRect.right, targetRect.top, targetRect.bottom, |
| 0, 0, 0, 0, |
| rootRect.left, rootRect.right, rootRect.top, rootRect.bottom, |
| false |
| ]); |
| } |
| |
| function step1() { |
| var targetRect = target.getBoundingClientRect(); |
| checkLastEntry(entries, 1, [ |
| targetRect.left, targetRect.right, targetRect.top, targetRect.bottom, |
| targetRect.left, targetRect.right, targetRect.top, targetRect.bottom, |
| rootRect.left, rootRect.right, rootRect.top, rootRect.bottom, |
| true |
| ]); |
| } |
| |
| </script> |
