use-event-handler-no-loss-of-events.html (1286B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"></html> 3 <meta charset="utf-8"> 4 <title>No loss of events when use instances copies event handlers</title> 5 <link rel="author" title="Divyansh Mangal" href="mailto:dmangal@microsoft.com"> 6 <link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseEventHandling"> 7 <link rel="match" href="reference/green-100x100.html"> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 12 <svg xmlns="http://www.w3.org/2000/svg"> 13 <defs> 14 <rect id="target" width="100" height="100" onclick="click()" onmouseover="handleMouseOver()"/> 15 </defs> 16 <use id="use" href="#target"/> 17 </svg> 18 19 <script> 20 const use = document.getElementById("use"); 21 function click() { 22 document.getElementById("target").setAttribute("fill", "green"); 23 } 24 25 function handleMouseOver() { 26 document.getElementById("target").setAttribute("fill", "red"); 27 } 28 29 requestAnimationFrame(() => requestAnimationFrame(() => { 30 new test_driver.Actions() 31 .pointerMove(50, 50, { origin: use }) 32 .pointerDown() 33 .pointerUp() 34 .send() 35 .then(() => document.documentElement.classList.remove('reftest-wait')); 36 })); 37 </script> 38 </html>