onhover-syncbases.html (1357B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Check if onhover events reset correctly when triggered multiple times</title> 6 <link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#interact-EventAttributes"> 7 <link rel="author" title="Edvard Thörnros" href="mailto:edvardt@opera.com"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <svg> 13 <circle id="circle" cx="150" cy="75" r="50" fill="#F00"> 14 <set attributeName="fill" to="#0F0" begin="mouseover"/> 15 <set attributeName="fill" to="#F00" begin="mouseout"/> 16 </circle> 17 </svg> 18 <script> 19 async_test(t => { 20 let rounds = 5; // How many times the cursor is moved in and out 21 let circle = document.querySelector("#circle"); 22 let delay = 20; 23 function f() { 24 assert_equals(window.getComputedStyle(circle, null).fill, 25 "rgb(255, 0, 0)") 26 if (rounds-- == 0) { 27 t.done(); 28 return; 29 } 30 31 circle.dispatchEvent(new Event("mouseover")); 32 t.step_timeout(function() { 33 assert_equals(window.getComputedStyle(circle, null).fill, 34 "rgb(0, 255, 0)") 35 circle.dispatchEvent(new Event("mouseout")) 36 t.step_timeout(f, delay); 37 }, delay); 38 } 39 t.step_timeout(f, 0); 40 }); 41 </script> 42 </body> 43 </html>