overflow-clip-margin-intersection-observer.html (1852B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Overflow: intersection observer with overflow-clip-margin</title> 4 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> 5 <link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #clipped_container { 10 overflow: clip; 11 width: 100px; 12 height: 100px; 13 border: solid; 14 overflow-clip-margin: 50px; 15 } 16 #big_green_div { 17 position: relative; 18 width: 1000px; 19 height: 1000px; 20 background: green; 21 left: -200px; 22 top: -200px; 23 } 24 /* These values ensure the element is vertically offscreen. */ 25 .spacer { width: 150px; height: calc(100vh + 10px); } 26 </style> 27 <div class="spacer"></div> 28 <div id="clipped_container"> 29 <div id="big_green_div"></div> 30 </div> 31 32 <script> 33 let t = async_test("ParentWithOverflowClipMargin"); 34 let options = { 35 threshold: 0, 36 rootMargin: '0px' 37 } 38 // The 'big_green_div' is initially on screen due to 39 // overflow-clip-margin of the parent. Once the observer is notified, the 40 // overflow-clip-margin is reduced so that 'big_green_div' is no longer 41 // on screen, and the observer should again be notified. 42 let gotIntersects = false; 43 let intersectionObserver = new IntersectionObserver((entries, observer) => { 44 t.step(function() { assert_equals(1, entries.length); }); 45 let entry = entries[0]; 46 if (!gotIntersects) { 47 t.step(function() { assert_true(entry.isIntersecting); }); 48 gotIntersects = true; 49 document.getElementById('clipped_container').style.overflowClipMargin = "0px"; 50 } else { 51 t.step(function() { assert_false(entry.isIntersecting); }); 52 t.done(); 53 }}, options); 54 intersectionObserver.observe(document.getElementById('big_green_div')); 55 </script>