inline-occlusion.html (1766B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="../resources/intersection-observer-test-utils.js"></script> 5 6 <style> 7 body, html { 8 margin: 0; 9 } 10 pre, #log { 11 position: absolute; 12 top: 0; 13 left: 200px; 14 } 15 .testdiv { 16 font-size: 24px; 17 } 18 </style> 19 20 <div class="testdiv">This is the <span id="target">target</span>.</div> 21 <div class="testdiv" id="occluder">This is the occluder.</div> 22 23 <script> 24 var delay = 100; 25 var entries = []; 26 var target; 27 var occluder; 28 29 runTestCycle(function() { 30 target = document.getElementById("target"); 31 occluder = document.getElementById("occluder"); 32 assert_true(!!target, "target exists"); 33 assert_true(!!occluder, "occluder exists"); 34 var observer = new IntersectionObserver(function(changes) { 35 entries = entries.concat(changes) 36 }, {trackVisibility: true, delay: delay}); 37 observer.observe(target); 38 entries = entries.concat(observer.takeRecords()); 39 assert_equals(entries.length, 0, "No initial notifications."); 40 runTestCycle(step0, "First rAF.", delay); 41 }, "IntersectionObserverV2 in a single document using the implicit root, with an occluding element.", delay); 42 43 function step0() { 44 occluder.style.marginTop = "-10px"; 45 runTestCycle(step1, "occluder.style.marginTop = '-10px'", delay); 46 assert_equals(entries.length, 1); 47 assert_true(entries[0].isVisible); 48 } 49 50 function step1() { 51 // Occluding elements with opacity=0 should not affect target visibility. 52 occluder.style.opacity = "0"; 53 runTestCycle(step2, "occluder.style.opacity = 0", delay); 54 assert_equals(entries.length, 2); 55 assert_false(entries[1].isVisible); 56 } 57 58 function step2() { 59 assert_equals(entries.length, 3); 60 assert_true(entries[2].isVisible); 61 } 62 </script>