45 lines
2 KiB
HTML
45 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
|
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
|
<link rel="help" href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-intersectionratio">
|
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1581876">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
block {
|
|
display: block;
|
|
width: 50vw;
|
|
height: 50vh;
|
|
background: green;
|
|
}
|
|
</style>
|
|
<inline>
|
|
<block></block>
|
|
</inline>
|
|
<script>
|
|
|
|
// Account for rounding differences when viewport sizes can't cleanly divide.
|
|
const epsilon = 1;
|
|
|
|
promise_test(async function() {
|
|
for (let element of document.querySelectorAll("inline, block")) {
|
|
let entries = await new Promise(resolve => {
|
|
new IntersectionObserver(resolve).observe(element);
|
|
});
|
|
assert_equals(entries.length, 1, element.nodeName + ": Should get an entry");
|
|
assert_true(entries[0].isIntersecting, element.nodeName + ": Should be intersecting");
|
|
assert_equals(entries[0].intersectionRatio, 1, element.nodeName + ": Should be fully intersecting");
|
|
|
|
function assert_rects_equal(r1, r2, label) {
|
|
assert_approx_equals(r1.top, r2.top, epsilon, label + ": top should be equal");
|
|
assert_approx_equals(r1.right, r2.right, epsilon, label + ": right should be equal");
|
|
assert_approx_equals(r1.bottom, r2.bottom, epsilon, label + ": bottom should be equal");
|
|
assert_approx_equals(r1.left, r2.left, epsilon, label + ": left should be equal");
|
|
}
|
|
|
|
assert_rects_equal(entries[0].boundingClientRect, element.getBoundingClientRect(), element.nodeName + ": boundingClientRect should match");
|
|
assert_rects_equal(entries[0].intersectionRect, entries[0].boundingClientRect, element.nodeName + ": intersectionRect should match entry.boundingClientRect");
|
|
}
|
|
}, "IntersectionObserver on an IB split gets the right intersection ratio");
|
|
</script>
|