Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="author" href="" title="Emilio Cobos Álvarez">
<link rel="author" href="" title="Mozilla">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
block {
display: block;
width: 50vw;
height: 50vh;
background: green;
// 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(,, 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");