animating.html (1659B)
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 width: 100px; 15 height: 100px; 16 background-color: lightblue; 17 will-change: transform; 18 } 19 @keyframes slideup { 20 0% { transform: translateY(0) } 21 30% { transform: translateY(0) } 22 31% { transform: translateY(-2000px) } 23 100% { transform: translateY(-2000px) } 24 } 25 </style> 26 27 <div id="target"></div> 28 29 <script> 30 promise_test(t => { 31 return new Promise(async function(resolve, reject) { 32 let entries = []; 33 let target = document.getElementById("target"); 34 let observer = new IntersectionObserver(function(changes) { 35 entries = entries.concat(changes); 36 assert_true(entries[0].isIntersecting); 37 changes.forEach(entry => { 38 if (!entry.isIntersecting) { 39 resolve("Received not-intersecting notification before animationend."); 40 } 41 }); 42 }); 43 target.style.animation = "3s linear slideup"; 44 setTimeout(() => { 45 reject("Did not get a not-intersecting notification within 2 seconds."); 46 }, 2000); 47 target.addEventListener("animationend", evt => { 48 reject("animationend event fired before not-intersecting notification."); 49 }); 50 await new Promise(resolve => setTimeout(resolve, 500)); 51 observer.observe(target); 52 }); 53 }, "IntersectionObserver generates notifications when " 54 + "a transform animation changes intersection state"); 55 </script>