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
|
<!doctype html>
<head>
<meta charset=utf-8>
<title>MouseEvent - mousemove event order</title>
<style>
.testarea { margin: auto; width: 80%; height: 250px; border: 1px solid grey; position: relative; }
#start,#end { background-color: red; border: 1px solid black; margin: 0; padding: 0; }
/* start/end layout */
#start.green,#end.green { background-color: green; }
#start { position: absolute; left: 15%; top: 15%; width: 50%; height: 50%; }
#end { position: absolute; right: 15%; bottom: 15%; width: 50%; height: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
setup({explicit_timeout: true});
</script>
<script src="/uievents/resources/eventrecorder.js"></script>
</head>
<body>
<p><strong>Description</strong>: Verifies that mousemove events track the pointer position and transition from top-most
visible element to top-most visible element, changing targets
in the DOM along the way.</p>
<p><strong>Instructions</strong>: </p>
<ol>
<li>Move the pointer to the upper-left red box and then move it directly toward and into the lower-right red box.
</ol>
<p><strong>Test Passes</strong> if both boxes turn green and the word 'PASS' appears below</p>
<section class="testarea">
<div id="end"></div>
<div id="start"></div>
</section>
<script>
var start = document.getElementById("start");
var end = document.getElementById("end");
EventRecorder.configure({
mergeEventTypes: ["mousemove"],
objectMap: {
"div#start": start,
"div#end": end
}
});
start.addRecordedEventListener('mousemove', function (e) {
e.stopPropagation();
this.className = "green";
});
end.addRecordedEventListener('mousemove', function (e) {
e.stopPropagation();
this.className = "green";
endTest();
done();
});
function endTest() {
EventRecorder.stop();
var results = EventRecorder.getRecords();
// Check results:
assert_equals(results.length, 2, "Two mousemove events");
assert_equals(results[0].event.type, "mousemove", "First event is a mousemove event");
assert_equals(results[1].event.type, "mousemove", "Second event is a mousemove event");
assert_equals(results[0].event.target, "div#start", "First event targetted #start");
assert_equals(results[1].event.target, "div#end", "Second event targetted #end");
}
EventRecorder.start();
</script>
</body>
</html>
|
