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
133
134
135
136
137
138
139
140
141
|
<!doctype html>
<meta charset="utf-8">
<title>Mouseover/mouseout handling</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>
<style>
#outer,
#inner,
#released {
padding: 10px;
margin: 10px;
height: 15px;
}
#outer:hover,
#inner:hover,
#released:hover {
background: red;
}
#outer {
background: blue;
}
#inner {
background: green;
}
#released {
background: yellow;
}
</style>
<p>
Steps:
<ol>
<li>Move your mouse over the blue <code><div></code> element, later
over the green one, later over the yellow one.
<li>Move the mouse from the yellow element to the green one, later to the
blue one, and later over this paragraph.
</ol>
</p>
<div id="outer">
<div id="inner"></div>
</div>
<div id="released"></div>
<div id="log"></div>
<script>
var t = async_test("Mouseover/out events");
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
var actions_promise;
var inner_over = 0;
var inner_out = 0;
var outer_own_over = 0;
var outer_own_out = 0;
var outer_over = 0;
var outer_out = 0;
inner.addEventListener("mouseover", t.step_func(function(e) {
assert_equals(inner_over, inner_out, "mouseover is received before mouseout");
switch (inner_over) {
case 0:
assert_equals(outer_own_over, 1, "should have triggered a mouseover in the outer before");
break;
case 1:
assert_equals(outer_own_over, 1, "should have not triggered a mouseover in the outer before");
break;
default:
assert_true(false, "should not get more than two mouseovers");
}
inner_over++;
}), false);
inner.addEventListener("mouseout", t.step_func(function(e) {
assert_equals(inner_over, inner_out + 1, "mouseout is received after mouseover");
switch (inner_out) {
case 0:
assert_equals(outer_own_out, 1, "mouseout should have been received in the parent when hovering over this element");
break;
case 1:
break;
default:
assert_true(false, "should not get more than two mouseouts");
}
inner_out++;
}), false);
outer.addEventListener("mouseover", t.step_func(function(e) {
if (e.target == outer) {
assert_equals(outer_own_over, outer_own_out, "outer: mouseover is received before mouseout");
outer_own_over++;
} else {
assert_equals(outer_over - outer_own_over, inner_over - 1, "mouseover: should only receive this via bubbling");
}
outer_over++;
}), false);
outer.addEventListener('mouseout', t.step_func(function(e) {
if (e.target == outer) {
assert_equals(outer_own_over, outer_own_out + 1, "outer: mouseout is received after mouseover");
if (outer_own_out == 1) {
assert_equals(inner_out, 2, "inner should be done now");
// Make sure the test finishes after all the input actions are completed.
actions_promise.then( () => {
t.done();
});
}
outer_own_out++;
} else {
assert_equals(outer_out - outer_own_out, inner_out - 1, "mouseout: should only receive this via bubbling");
}
outer_out++;
}), false);
// Inject mouse inputs.
actions_promise = new test_driver.Actions()
.pointerMove(0, 0, {origin: outer})
.pointerMove(0, 0, {origin: inner})
.pointerMove(0, 0, {origin: released})
.pointerMove(0, 0, {origin: inner})
.pointerMove(0, 0, {origin: outer})
.pointerMove(0, 0)
.send();
</script>
|
