test_hover_mouseleave.html (1366B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Test :hover state on mouseleave.</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <script src="/tests/SimpleTest/EventUtils.js"></script> 6 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 } 12 </style> 13 <div id="target" style="background: green;"></div> 14 <div id="outside" style="background: blue;"></div> 15 <script> 16 SimpleTest.waitForExplicitFinish(); 17 let mouseLeaveCount = 0; 18 let mouseOutCount = 0; 19 20 target.addEventListener("mouseleave", () => { 21 if (mouseLeaveCount++ != 0) 22 return; 23 is(target.matches(":hover"), false, 24 "Should've been not hovered on mouseleave"); 25 is(outside.matches(":hover"), true, 26 "New target should be hovered on mouseleave"); 27 if (mouseOutCount) 28 SimpleTest.finish(); 29 }); 30 31 target.addEventListener("mouseout", () => { 32 if (mouseOutCount++ != 0) 33 return; 34 is(target.matches(":hover"), false, 35 "Should've been not hovered on mouseleave"); 36 is(outside.matches(":hover"), true, 37 "New target should be hovered on mouseleave"); 38 if (mouseLeaveCount) 39 SimpleTest.finish(); 40 }); 41 42 SimpleTest.waitForFocus(() => { 43 synthesizeMouseAtCenter(outside, { type: "mousemove" }); 44 synthesizeMouseAtCenter(target, { type: "mousemove" }); 45 synthesizeMouseAtCenter(outside, { type: "mousemove" }); 46 }); 47 </script>