position-relative.html (1289B)
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 <script src="../resources/intersection-observer-test-utils.js"></script> 6 7 <style> 8 body, html { 9 margin: 0; 10 } 11 pre, #log { 12 position: absolute; 13 top: 0; 14 left: 200px; 15 } 16 .relpos { 17 position: relative; 18 } 19 </style> 20 21 <div id="target" class="relpos"> 22 <div class="relpos"> 23 <img border="0" width="100" height="100" src=""/> 24 </div> 25 </div> 26 27 <script> 28 var delay = 100; 29 var entries = []; 30 var target; 31 32 runTestCycle(function() { 33 target = document.getElementById("target"); 34 assert_true(!!target, "target exists"); 35 var observer = new IntersectionObserver(function(changes) { 36 entries = entries.concat(changes) 37 }, {trackVisibility: true, delay: delay}); 38 observer.observe(target); 39 entries = entries.concat(observer.takeRecords()); 40 assert_equals(entries.length, 0, "No initial notifications."); 41 runTestCycle(step0, "First rAF.", delay); 42 }, "IntersectionObserverV2 observing a position:relative div containing a position:relative child"); 43 44 function step0() { 45 assert_equals(entries.length, 1, "First notification."); 46 assert_true(entries[0].isVisible, "Target is visible."); 47 } 48 </script>