1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
<!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/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/uievents/resources/eventrecorder.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><div></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 relevantEvents = [
"mousemove",
"mouseover",
"mouseenter",
"mouseout",
"mouseleave"
];
function stopPropagation(e) {
if (e.type != "mouseenter" && e.type != "mouseleave")
assert_true(e.bubbles);
event.stopPropagation();
}
window.onload = async function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var inputs = [a, b, c];
EventRecorder.configure({
mergeEventTypes: ["mousemove"],
objectMap: {
"a": a,
"b": b,
"c": c
}
});
EventRecorder.addEventListenersForNodes(relevantEvents, inputs, stopPropagation);
var expected = [
{type: "mouseover", target: "a"},
{type: "mouseenter", target: "a"},
{type: "mousemove", target: "a", optional: true},
{type: "mouseout", target: "a"},
{type: "mouseover", target: "b"},
{type: "mouseenter", target: "b"},
{type: "mousemove", target: "b", optional: true},
{type: "mouseout", target: "b"},
{type: "mouseleave", target: "b"},
{type: "mouseover", target: "a"},
{type: "mousemove", target: "a", optional: true},
{type: "mouseout", target: "a"},
{type: "mouseleave", target: "a"},
{type: "mouseover", target: "c"},
{type: "mouseenter", target: "c"},
{type: "mousemove", target: "c", optional: true},
{type: "mouseout", target: "c"},
{type: "mouseleave", target: "c"}
];
async_test(function(t) {
c.addEventListener("mouseleave", function() {
EventRecorder.stop();
t.step(function() {
assert_true(EventRecorder.checkRecords(expected));
t.done();
});
}, false);
}, "Mousemove events between elements should fire in the correct order.");
EventRecorder.start();
var a_rect = a.getClientRects()[0];
var b_rect = b.getClientRects()[0];
var c_rect = c.getClientRects()[0];
var center_b_y = Math.round((b_rect.top + b_rect.bottom) / 2);
var center_c_y = Math.round((c_rect.top + c_rect.bottom) / 2);
// Inject mouse inputs.
await new test_driver.Actions()
.pointerMove(b_rect.right + 10, center_b_y)
.pause(50)
.pointerMove(0, 0, {origin: b})
.pause(50)
.pointerMove(b_rect.right + 10, center_b_y)
.pause(50)
.pointerMove(a_rect.right + 10, center_b_y)
.pause(50)
.pointerMove(c_rect.right + 10, center_c_y)
.pause(50)
.pointerMove(0, 0, {origin: c})
.pause(50)
.pointerMove(c_rect.right + 20, c_rect.bottom + 20)
.send();
};
</script>
|
