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