transform-animation.html (922B)
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 6 <style> 7 8 #container { 9 width: 200px; 10 height: 200px; 11 background-color: black; 12 } 13 14 #target { 15 position: relative; 16 top: 100px; 17 width: 100%; 18 height: 1px; 19 background-color: gray; 20 } 21 22 </style> 23 24 <div id="container"><div id="target"></div></div> 25 26 <script> 27 28 promise_test(async function(t) { 29 let intersections = 0; 30 31 const observer = new IntersectionObserver(entries => ++intersections); 32 observer.observe(document.getElementById("target")); 33 34 await document.getElementById("container").animate({ transform: 'translate(0, 100px)' }, 1000).finished; 35 assert_equals(intersections, 1); 36 }, "An element that already intersects with the viewport does not trigger the observer callback when animating its transform."); 37 38 </script>