chrome-40925697.html (1527B)
1 <!DOCTYPE html> 2 <title>Chrome issue 40925697: animatestart / animateend incorrectly called on load</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#events"> 4 <link rel="help" href="https://crbug.com/40925697"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 @keyframes scale-up { 10 from { 11 scale: 0; 12 } 13 } 14 #target { 15 display: block; 16 width: 400px; 17 height: 400px; 18 margin: 150vh auto; 19 animation: scale-up linear forwards; 20 animation-timeline: view(); 21 animation-range: entry 0% cover 50%; 22 } 23 </style> 24 <img id="target" src="data:image/svg,"> 25 <script> 26 promise_test(async t => { 27 let start_count = 0; 28 let end_count = 0; 29 target.addEventListener("animationend", () => end_count++); 30 target.addEventListener("animationstart", () => start_count++); 31 32 const anim = target.getAnimations()[0]; 33 await anim.ready; 34 await waitForNextFrame(); 35 await waitForNextFrame(); 36 37 assert_equals(start_count, 0, "animationstart not triggered before scrolling"); 38 assert_equals(end_count, 0, "animationend not triggered before scrolling"); 39 40 target.scrollIntoView(); 41 await waitForNextFrame(); 42 await waitForNextFrame(); 43 assert_equals(start_count, 1, "animationstart triggered by scroll"); 44 assert_equals(end_count, 1, "animationend triggered after scroll"); 45 }, "Animation events triggered correctly"); 46 47 </script>