Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add tests for mousemove/mouseenter/mouseleave/mouseover/mouseout #3793

Closed
wants to merge 2 commits into from
Closed

Add tests for mousemove/mouseenter/mouseleave/mouseover/mouseout #3793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c015cf8
Add tests for mousemove/mouseenter/mouseleave/mouseover/mouseout
sunyunjia Sep 21, 2016
1be46be
Fix lint failure for trailing WS
sideshowbarker Sep 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
132 changes: 132 additions & 0 deletions uievents/order-of-events/mouse-events/mousemove-across-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!doctype html>
<meta charset="utf-8">
<title>Mousemove handling across elements</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/event_order.js"></script>
<style>
#a {
background: red;
height: 120px;
width: 200px;
}
#b {
margin: 100px;
height: 120px;
width: 200px;
background: green;
}
#c {
height: 120px;
width: 200px;
background: yellow;
}

#a1 {
background: blue;
height: 120px;
width: 200px;
}
#b1 {
padding: 1px;
margin: 100px;
height: 120px;
width: 200px;
background: green;
}
#c1 {
height: 120px;
width: 200px;
background: black;
}
</style>
<p>
Steps:
<ol>
<li>Move your mouse across the yellow/red <code>&lt;div&gt;</code> element quickly from right to left.
<li>Move your mouse across the black/blue <code>&lt;div&gt;</code> element quickly from right to left.
<li>If the test fails, redo it again and move faster on the black/blue <code>&lt;div&gt;</code> element next time.
</ol>
</p>

<div id="c">
<div id="b">
<div id="a" align="center"></div>
</div>
</div>
<br />
<div id="c1">
<div id="b1">
<div id="a1" align="center"></div>
</div>
</div>

<script>
setup({explicit_timeout: true});
var done = false;
var events = [];
var targets = [];
var events1 = [];
var targets1 = [];
var relevantEvents = [
"mousemove",
"mouseover",
"mouseenter",
"mouseout",
"mouseleave"
];

function record(e) {
event.stopPropagation();
events.push(e.type);
targets.push(e.target.id);
}

function record1(e) {
event.stopPropagation();
events1.push(e.type);
targets1.push(e.target.id);
}

window.onload = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var a1 = document.getElementById("a1");
var b1 = document.getElementById("b1");
var c1 = document.getElementById("c1");
var inputs = [a, b, c];
var inputs1 = [a1, b1, c1];
for (var i = 0; i < inputs.length; i++) {
for (var k = 0; k < relevantEvents.length; k++) {
inputs[i].addEventListener(relevantEvents[k], record, false);
}
}
for (var i = 0; i < inputs1.length; i++) {
for (var k = 0; k < relevantEvents.length; k++) {
inputs1[i].addEventListener(relevantEvents[k], record1, false);
}
}
var eventOrder = ["mouseover", "mouseenter", "mouseenter", "mouseenter",
"mousemove", "mouseout", "mouseleave", "mouseleave", "mouseover",
"mousemove", "mouseout", "mouseleave"];
var targetOrder = ["a", "c", "b", "a",
"a", "a", "a", "b", "c",
"c", "c", "c"];
var targetOrder1 = ["a1", "c1", "b1", "a1",
"a1", "a1", "a1", "b1", "c1",
"c1", "c1", "c1"];
var frequency = ["1", "1", "1", "1",
"+", "1", "1", "1", "1",
"+", "1", "1"];
async_test(function(t) {
a1.addEventListener("mousemove", function() {
t.step(function() {
assert_true(checkOrder(events, targets, eventOrder, targetOrder, frequency));
assert_true(checkOrder(events1, targets1, eventOrder, targetOrder1, frequency));
t.done();
});
}, false);
}, "Mousemove events across elements should fire in the correct order.")
};
</script>
94 changes: 94 additions & 0 deletions uievents/order-of-events/mouse-events/mousemove-between-manual.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!doctype html>
<meta charset="utf-8">
<title>Mousemove handling between elements</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/event_order.js"></script>
<style>
#a {
height: 120px;
width: 200px;
background: blue;
display: flex;
justify-content: center;
}
#b {
height: 60px;
width: 100px;
margin: auto;
background: green;
}
#c {
height: 120px;
width: 200px;
background: yellow;
}
</style>
<p>
Steps:

<ol>
<li>Move your mouse over the blue <code>&lt;div&gt;</code> element, later
over the green one, later back to the blue one.
<li>Move the mouse from the blue element to the yellow one, later to the
white background.
</ol>
</p>


<div id="a">
<div id="b" align="center"></div>
</div>
<div id="c"></div>

<script>
setup({explicit_timeout: true});
var done = false;
var events = [];
var targets = [];
var relevantEvents = [
"mousemove",
"mouseover",
"mouseenter",
"mouseout",
"mouseleave"
];

function record(e) {
if (e.type != "mouseenter" && e.type != "mouseleave")
assert_true(e.bubbles);
event.stopPropagation();
events.push(e.type);
targets.push(e.target.id);
}

window.onload = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var inputs = [a, b, c];
for (var i = 0; i < inputs.length; i++) {
for (var k = 0; k < relevantEvents.length; k++) {
inputs[i].addEventListener(relevantEvents[k], record, false);
}
}
var eventOrder = ["mouseover", "mouseenter", "mousemove", "mouseout", "mouseover",
"mouseenter", "mousemove", "mouseout", "mouseleave", "mouseover", "mousemove",
"mouseout", "mouseleave", "mouseover", "mouseenter", "mousemove", "mouseout",
"mouseleave"];
var targetOrder = ["a", "a", "a", "a", "b", "b", "b", "b", "b",
"a", "a", "a", "a", "c", "c", "c", "c", "c"];
var frequency = ["1", "1", "+", "1", "1",
"1", "+", "1", "1", "1", "+",
"1", "1", "1", "1", "+", "1",
"1"];
async_test(function(t) {
c.addEventListener("mouseleave", function() {
t.step(function() {
assert_true(checkOrder(events, targets, eventOrder, targetOrder, frequency));
t.done();
});
}, false);
}, "Mousemove events between elements should fire in the correct order.")
};
</script>