Jo Steven Novaryo
01b4abfebd
Automatic update from web-platform-tests Add IntersectionObserver WPT and minor tidy up Signed-off-by: Jo Steven Novaryo <steven.novaryo@gmail.com> -- Apply suggestion Signed-off-by: Jo Steven Novaryo <steven.novaryo@gmail.com> -- wpt-commits: 11e47db3ae5ee123a1fb385ec4769160084c1934, 34cb8f326ccb0160666612b2a51999d32455160f wpt-pr: 57481
74 lines
2.4 KiB
HTML
74 lines
2.4 KiB
HTML
<!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>
|