intersection-ratio-ib-split.html (2114B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-intersectionratio"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1581876"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 block { 11 display: block; 12 width: 50vw; 13 height: 50vh; 14 background: green; 15 } 16 </style> 17 <inline> 18 <block></block> 19 </inline> 20 <script> 21 22 // Account for rounding differences when viewport sizes can't cleanly divide. 23 const epsilon = 1; 24 25 for (let element of document.querySelectorAll("inline, block")) { 26 promise_test(async function() { 27 let entries = await new Promise(resolve => { 28 new IntersectionObserver(resolve).observe(element); 29 }); 30 assert_equals(entries.length, 1, element.nodeName + ": Should get an entry"); 31 assert_true(entries[0].isIntersecting, element.nodeName + ": Should be intersecting"); 32 assert_equals(entries[0].intersectionRatio, 1, element.nodeName + ": Should be fully intersecting"); 33 34 function assert_rects_equal(r1, r2, label) { 35 assert_approx_equals(r1.top, r2.top, epsilon, label + ": top should be equal"); 36 assert_approx_equals(r1.right, r2.right, epsilon, label + ": right should be equal"); 37 assert_approx_equals(r1.bottom, r2.bottom, epsilon, label + ": bottom should be equal"); 38 assert_approx_equals(r1.left, r2.left, epsilon, label + ": left should be equal"); 39 } 40 41 assert_rects_equal(entries[0].boundingClientRect, element.getBoundingClientRect(), element.nodeName + ": boundingClientRect should match"); 42 assert_rects_equal(entries[0].intersectionRect, entries[0].boundingClientRect, element.nodeName + ": intersectionRect should match entry.boundingClientRect"); 43 }, "IntersectionObserver on an IB split gets the right intersection ratio - " + element.tagName); 44 } 45 </script>