-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add WPT platform test for mouse events after layout.
Chrome implementation: https://chromium-review.googlesource.com/c/615424 W3C UIEvents issue: w3c/uievents#154 BUG=488886 Change-Id: I732ef83ea7ca916d564d3af0419f4da0e3db1d45 Reviewed-on: https://chromium-review.googlesource.com/615146 Commit-Queue: Dave Tapuska <dtapuska@chromium.org> Reviewed-by: Mustaq Ahmed <mustaq@chromium.org> Cr-Commit-Position: refs/heads/master@{#526684}
- Loading branch information
1 parent
e830422
commit bee8357
Showing
1 changed file
with
83 additions
and
0 deletions.
There are no files selected for viewing
83 changes: 83 additions & 0 deletions
83
uievents/mouse/layout_change_should_fire_mouseover-manual.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<title>Mouseover/enter is sent on layout change</title> | ||
<meta name="viewport" content="width=device-width"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<style> | ||
#spacer { | ||
height: 100px; | ||
width: 100px; | ||
} | ||
#red { | ||
background-color: rgb(255, 0, 0); | ||
position: absolute; | ||
z-index: 0; | ||
left: 0px; | ||
top: 0px; | ||
height: 100px; | ||
width: 100px; | ||
} | ||
#blue { | ||
background-color: rgb(0, 0, 255); | ||
position: absolute; | ||
z-index: 1; | ||
left: 0px; | ||
top: 0px; | ||
height: 100px; | ||
width: 100px; | ||
} | ||
#blue:hover { | ||
background-color: rgb(255, 255, 0); | ||
} | ||
</style> | ||
</head> | ||
<body onload="run();"> | ||
<div id="spacer"></div> | ||
<div id="red"></div> | ||
<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. | ||
<ol> | ||
<li>Put your mouse over the red rectangle</li> | ||
<li>Click the primary mouse button</li> | ||
</ol> | ||
</h4> | ||
<script type="text/javascript"> | ||
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.'); | ||
|
||
var eventList = []; | ||
function addBlue() { | ||
document.body.innerHTML += '<div id="blue"></div>'; | ||
var blue = document.getElementById("blue"); | ||
var events = ['mouseover', 'mousemove', 'mouseout', 'mouseenter', 'mouseleave']; | ||
events.forEach(function (event) { | ||
blue.addEventListener(event, checkHoverEffect); | ||
}); | ||
testMouseOver.step_timeout(function () { | ||
checkEventSequence(); | ||
}, 2500); | ||
} | ||
|
||
function checkEventSequence() { | ||
var result = eventList.join(); | ||
assert_true(result == 'mouseover,mouseenter'); | ||
testMouseOver.done(); | ||
} | ||
|
||
function run() { | ||
document.addEventListener('click', addBlue); | ||
} | ||
|
||
function checkHoverEffect(event) { | ||
eventList.push(event.type); | ||
testMouseOver.step(function () { | ||
assert_equals(event.target.id, "blue"); | ||
assert_equals(getComputedStyle(event.target).backgroundColor, "rgb(255, 255, 0)"); | ||
if (event.type == "mouseenter") { | ||
checkEventSequence(); | ||
} | ||
}); | ||
} | ||
</script> | ||
</body> | ||
</html> |