restart-never-and-begin-click.html (1727B)
1 <!doctype html> 2 <body> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <style> 8 9 svg { 10 position: absolute; 11 top: 0; 12 left: 0; 13 width: 100px; 14 height: 100px; 15 } 16 17 </style> 18 <svg> 19 <rect width="100" height="100" fill="black"> 20 <animate attributeName="opacity" to="0" dur="100ms" begin="click" restart="never"> 21 </rect> 22 </svg> 23 <script> 24 25 promise_test(async test => { 26 const target = document.querySelector("rect"); 27 const animation = document.querySelector("animate"); 28 29 // Wait a frame and click on the element to start the animation. 30 await new Promise(requestAnimationFrame); 31 32 // Ensure the animation runs once completely. 33 await Promise.all([ 34 new Promise(resolve => animation.addEventListener("beginEvent", resolve, { once: true })), 35 new Promise(resolve => animation.addEventListener("endEvent", resolve, { once: true })), 36 test_driver.click(target) 37 ]); 38 39 // Wait another frame. 40 await new Promise(requestAnimationFrame); 41 42 // Track whether the animation will start again. 43 let began = false; 44 animation.addEventListener("beginEvent", event => began = true, { once: true }); 45 46 // Click on the element, which should not trigger the animation. 47 await test_driver.click(target); 48 49 // Wait a couple of frames to give it time to run. 50 await new Promise(requestAnimationFrame); 51 await new Promise(requestAnimationFrame); 52 53 assert_false(began, "The animation must not restart"); 54 }, "Setting restart='never' prevents animation with begin='click' from restarting"); 55 56 </script> 57 </body>