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
|
<!DOCTYPE html>
<html>
<meta charset=utf-8 />
<title>Event Timing: Performance observers can observe long-latency events
</title>
<meta name="timeout" content="long">
<button id='button'>Generate a 'click' event</button>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script src=/resources/testdriver.js></script>
<script src=/resources/testdriver-vendor.js></script>
<script src=resources/event-timing-support.js></script>
<img src=resources/slow-image.py>
<script>
let timeBeforeFirstClick;
let timeAfterFirstClick;
let timeAfterSecondClick;
let onloadStart;
let observedEntries = [];
function verifyBuffer(bufferedEntries) {
assert_equals(bufferedEntries.length, 1,
"Only events before onload should be buffered.");
const entry = bufferedEntries[0];
assert_greater_than(onloadStart, entry.startTime,
"Onload should be later than entry's start time.");
assert_greater_than(entry.processingStart, timeBeforeFirstClick,
"The entry's processing start should be after timeBeforeFirstClick");
assert_less_than(entry.processingStart, timeAfterFirstClick,
"The entry's processing start should be before timeAfterFirstClick.");
verifyClickEvent(entry, true);
}
function verifyObserverEntries(observedEntries) {
const entriesAfterFirstClick = observedEntries.filter(
e => e.startTime > timeAfterFirstClick);
assert_equals(entriesAfterFirstClick.length, 1,
'There should be one event after timeAfterFirstClick.');
const entry1 = entriesAfterFirstClick[0];
verifyClickEvent(entry1);
assert_greater_than(entry1.processingStart, timeAfterFirstClick,
"entry1's processing start should be after timeAfterFirstClick");
assert_less_than(entry1.processingStart, timeAfterSecondClick,
"entry1's processing start should be before timeAfterSecondClick.");
assert_greater_than(entry1.startTime, onloadStart,
"entry1's start time should be later than onloadStart.");
const entriesBeforeFirstClick =
observedEntries.filter(e => e.startTime < timeAfterFirstClick);
assert_equals(entriesBeforeFirstClick.length, 1,
'There should be one event before timeAfterFirstClick.'
);
const entry2 = entriesBeforeFirstClick[0];
verifyClickEvent(entry2);
assert_greater_than(entry2.processingStart, timeBeforeFirstClick,
"entry2's processing start should be after timeBeforeFirstClick");
assert_less_than(entry2.processingStart, timeAfterFirstClick,
"entry2's processing start should be berfore timeAfterFirstClick.");
assert_greater_than(timeAfterFirstClick, entry2.startTime,
"timeAfterFirstClick should be later than entry2's start time.");
}
/* Timeline:
Observer starts
Begin Busy Loop
Click 1 arrives
End Busy Loop
(Dispatch and Process Click 1 (buffered, observed))
Onload Event Fires
Begin Busy Loop
Click 2 arrives
End Busy Loop
(Dispatch and Process Click 2 (buffered, observed))
observer callback start
*/
async_test(function(t) {
const observerPromise = new Promise((resolve, reject) => {
new PerformanceObserver(function(entryList) {
observedEntries = observedEntries.concat(entryList.getEntries().filter(
entry => entry.name === 'mousedown'));
if (observedEntries.length < 2) return;
resolve(observedEntries);
}).observe({ entryTypes: ['event'] });
});
timeBeforeFirstClick = performance.now();
clickAndBlockMain('button').then( () => {
timeAfterFirstClick = performance.now();
});
on_event(window, 'load', function(e) {
onloadStart = performance.now();
// After onload start and before registering observer.
const bufferPromise = clickAndBlockMain('button').then(wait);
Promise.all([observerPromise, bufferPromise]).then((results) => {
timeAfterSecondClick = performance.now();
t.step(verifyObserverEntries.bind(null, results[0]));
t.step(verifyBuffer.bind(null, performance.getEntriesByName('mousedown', 'event')));
t.done();
});
});
}, "Event Timing: click, observer, onload, click.");
</script>
</html>
|
