animated-opacity.html (1691B)
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 pre, #log { 9 position: absolute; 10 top: 0; 11 left: 200px; 12 } 13 #target { 14 background-color: lightblue; 15 } 16 #occluder { 17 margin-top: -1rem; 18 opacity: 0; 19 will-change: opacity; 20 width: 100px; 21 height: 100px; 22 background-color: pink; 23 } 24 @keyframes fadein { 25 0% { opacity: 0 } 26 30% { opacity: 0 } 27 31% { opacity: 0.5 } 28 100% { opacity: 0.5 } 29 } 30 </style> 31 32 <div id="target">Hello, world!</div> 33 <div id="occluder"></div> 34 35 <script> 36 promise_test(t => { 37 return new Promise(async function(resolve, reject) { 38 let entries = []; 39 let target = document.getElementById("target"); 40 let observer = new IntersectionObserver(function(changes) { 41 entries = entries.concat(changes); 42 changes.forEach(entry => { 43 if (!entry.isVisible) { 44 resolve("Received not-visible notification before animationend."); 45 } 46 }); 47 }, { trackVisibility: true, delay: 100 }); 48 assert_true(observer.trackVisibility); 49 observer.observe(target); 50 await waitForNotification(); 51 assert_equals(entries.length, 1); 52 assert_true(entries[0].isVisible); 53 let occluder = document.getElementById("occluder"); 54 occluder.style.animation = "3s linear fadein"; 55 setTimeout(() => { 56 reject("Did not get a not-visible notification within 2 seconds."); 57 }, 2000); 58 }); 59 }, "IntersectionObserver generates notifications when " 60 + "an opacity animation changes occlusion state."); 61 </script>