box-shadow.html (2156B)
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 iframe { 17 width: 100px; 18 height: 100px; 19 border: 0; 20 } 21 #box-shadow { 22 display: inline-block; 23 box-shadow: -50px -50px 0 50px rgba(255, 0, 0, 0.7); 24 } 25 </style> 26 27 <iframe id=target srcdoc="<!DOCTYPE html><div>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</div>"></iframe><div id=box-shadow></div> 28 29 <script> 30 var delay = 100; 31 var entries = []; 32 var target; 33 var occluder; 34 35 runTestCycle(function() { 36 target = document.getElementById("target"); 37 occluder = document.getElementById("box-shadow"); 38 assert_true(!!target, "target exists"); 39 assert_true(!!occluder, "occluder exists"); 40 let observer = new IntersectionObserver(function(changes) { 41 entries = entries.concat(changes) 42 }, {trackVisibility: true, delay: delay}); 43 observer.observe(target); 44 entries = entries.concat(observer.takeRecords()); 45 assert_equals(entries.length, 0, "No initial notifications."); 46 runTestCycle(step0, "First rAF.", delay); 47 }, "IntersectionObserverV2 observing an iframe element.", delay); 48 49 function step0() { 50 occluder.style.boxShadow = "none"; 51 runTestCycle(step1, 'occluder.style.boxShadow = "none"', delay); 52 assert_equals(entries.length, 1, "Initial notification."); 53 assert_equals(entries[0].isVisible, false, "Initially occluded."); 54 } 55 56 function step1() { 57 occluder.style.boxShadow = ""; 58 runTestCycle(step2, 'occluder.style.boxShadow = ""', delay); 59 assert_equals(entries.length, 2, "Notification after removing box shadow."); 60 assert_equals(entries[1].isVisible, true, "Visible when box shadow removed."); 61 } 62 63 function step2() { 64 assert_equals(entries.length, 3, "Notification after re-adding box shadow."); 65 assert_equals(entries[2].isVisible, false, "Occluded when box shadow re-added."); 66 } 67 </script>