layout_change_should_fire_mouseover.html (3646B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Mouseover/enter is sent on layout change</title> 5 <meta name="viewport" content="width=device-width"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <style> 12 #spacer { 13 height: 100px; 14 width: 100px; 15 } 16 #red { 17 background-color: rgb(255, 0, 0); 18 position: absolute; 19 z-index: 0; 20 left: 0px; 21 top: 0px; 22 height: 100px; 23 width: 100px; 24 } 25 #blue { 26 background-color: rgb(0, 0, 255); 27 position: absolute; 28 z-index: 1; 29 left: 0px; 30 top: 0px; 31 height: 100px; 32 width: 100px; 33 } 34 #blue:hover { 35 background-color: rgb(255, 255, 0); 36 } 37 </style> 38 </head> 39 <body onload="run();"> 40 <div id="spacer"></div> 41 <div id="red"></div> 42 <h4>Test Description: Tests that the mouseover event is fired and the element has a hover effect when the element underneath the mouse cursor is changed. 43 <ol> 44 <li>Put your mouse over the red rectangle</li> 45 <li>Click the primary mouse button</li> 46 </ol> 47 </h4> 48 <script type="text/javascript"> 49 var testMouseOver = async_test('Tests that the mouseover event is fired and the element has a hover effect when the element underneath the mouse cursor is changed.'); 50 var actions_promise; 51 52 var eventList = []; 53 function addBlue() { 54 document.body.innerHTML += '<div id="blue"></div>'; 55 var blue = document.getElementById("blue"); 56 var events = ['mouseover', 'mousemove', 'mouseout', 'mouseenter', 'mouseleave']; 57 events.forEach(function (event) { 58 blue.addEventListener(event, checkHoverEffect); 59 }); 60 testMouseOver.step_timeout(function () { 61 checkEventSequence(); 62 }, 2500); 63 } 64 65 function checkEventSequence() { 66 var result = eventList.join(); 67 assert_equals(result, 'mouseover,mouseenter'); 68 // Make sure the test finishes after all the input actions are completed. 69 actions_promise.then( () => { 70 testMouseOver.done(); 71 }); 72 } 73 74 function run() { 75 document.addEventListener('click', addBlue); 76 } 77 78 function checkHoverEffect(event) { 79 eventList.push(event.type); 80 testMouseOver.step(function () { 81 assert_equals(event.target.id, "blue"); 82 assert_equals(getComputedStyle(event.target).backgroundColor, "rgb(255, 255, 0)"); 83 if (event.type == "mouseenter") { 84 checkEventSequence(); 85 } 86 }); 87 } 88 89 // Inject mouse inputs. 90 actions_promise = new test_driver.Actions() 91 .pointerMove(0, 0, {origin: red}) 92 .pointerDown() 93 .pointerUp() 94 .send(); 95 </script> 96 </body> 97 </html>