<!doctype html> <meta charset="utf-8"> <title>Overflow: intersection observer with overflow-clip-margin</title> <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> <link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #clipped_container { overflow: clip; width: 100px; height: 100px; border: solid; overflow-clip-margin: 50px; } #big_green_div { position: relative; width: 1000px; height: 1000px; background: green; left: -200px; top: -200px; } /* These values ensure the element is vertically offscreen. */ .spacer { width: 150px; height: calc(100vh + 10px); } </style> <div class="spacer"></div> <div id="clipped_container"> <div id="big_green_div"></div> </div> <script> let t = async_test("ParentWithOverflowClipMargin"); let options = { threshold: 0, rootMargin: '0px' } // The 'big_green_div' is initially on screen due to // overflow-clip-margin of the parent. Once the observer is notified, the // overflow-clip-margin is reduced so that 'big_green_div' is no longer // on screen, and the observer should again be notified. let gotIntersects = false; let intersectionObserver = new IntersectionObserver((entries, observer) => { t.step(function() { assert_equals(1, entries.length); }); let entry = entries[0]; if (!gotIntersects) { t.step(function() { assert_true(entry.isIntersecting); }); gotIntersects = true; document.getElementById('clipped_container').style.overflowClipMargin = "0px"; } else { t.step(function() { assert_false(entry.isIntersecting); }); t.done(); }}, options); intersectionObserver.observe(document.getElementById('big_green_div')); </script>