root-margin-rounding.html (1324B)
1 <!doctype html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 6 <link rel="author" title="Mozilla" href="https://mozilla.org"> 7 <link rel="help" href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-rootmargin"> 8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1553673"> 9 <style> 10 html { width: 100vw; height: 100vh } 11 </style> 12 <script> 13 const t = async_test("IntersectionObserver root margin cannot end up with negative rect (and thus non-intersecting) due to rounding"); 14 15 let remainingTests = 100; 16 17 // This is just a best-effort test to catch issues. 18 for (let i = 0; i < 100; ++i) { 19 let offset = i / 100; 20 let observer; 21 observer = new IntersectionObserver(t.step_func(function(entries) { 22 assert_equals(entries.length, 1); 23 assert_equals(entries[0].target, document.documentElement); 24 assert_true(entries[0].isIntersecting, "should be intersecting at " + offset); 25 if (!--remainingTests) 26 t.done(); 27 observer.disconnect(); 28 }), { rootMargin: `${-100 * (1 - offset)}% 0px ${-100 * offset}%` }); 29 observer.observe(document.documentElement); 30 } 31 </script>