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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!doctype html>
<html>
<head>
<style>
table,
td {
padding: 8px;
border: 1px solid black;
}
</style>
</head>
<body>
<title>Event Timing: interactionId composition events.</title>
<form>
<b> Select your Operating System from the list</b>
<select id="option" onchange="dropdownMenu()">
<option> ---Choose OS--- </option>
<option> Linux </option>
<option> Windows </option>
</select>
<p> Your selected OS is:
<input type="text" id="os" size="20">
</p>
</form>
<pre>
Steps:
1) Open <b id = "IMEtype"></b> IME and select Hiragana input method.
2) Click at the above textbox and then type 'a' using keyboard.
3) Press the '{Enter}' key to complete the IME composition.
4) <a href="interactionid-composition-manual.html">Click here</a> to test again if not following the steps exactly.
<textarea id='test' placeholder="enter 'a'"></textarea>
Expected Result:
The test is successful when the sentence "PASS Event Timing: interactionId composition events" is displayed
at the bottom of the page after completing all the steps. If there is an indicated Harness Error next to the sentence, the test failed.
Moreover, the event log table below provides a summary of the keyboard events processed throughout the test.
Here is a breakdown of the columns in the table:
1. <strong>InteractionId</strong>: Identifies the specific interaction to which an event belongs.
2. <strong>EventType</strong>: Specifies the type of event that occurred during a particular interaction. There are
seven possible event types:
- 'keydown'
- 'keypress'
- 'input'
- 'keyup'
- 'compositionupdate'
- 'compositionstart'
- 'compositionend'
3. <strong>NumberOfEvents</strong>: Indicates the number of times a particular type of event was recorded in a single interaction.
</pre>
<table id="eventLogTable">
<tr>
<td>InteractionId</td>
<td>Event Type</td>
<td>Number of Events</td>
</tr>
</table>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src=resources/event-timing-test-utils.js></script>
<script>
setup({ explicit_timeout: true, explicit_done: true });
function dropdownMenu() {
var list = document.getElementById("option");
document.getElementById("os").value = list.options[list.selectedIndex].text;
if (document.getElementById("os").value == "Linux") {
document.getElementById("IMEtype").textContent = "Japanese - Mozc";
}
else if (document.getElementById("os").value == "Windows") {
document.getElementById("IMEtype").textContent = "Japanese Microsoft";
}
}
function logEventSummary(interactionId, eventType, nrOfEvents) {
var table = document.getElementById("eventLogTable");
var row = table.insertRow();
// Add values to the table
var cell = row.insertCell();
cell.innerHTML = interactionId;
cell = row.insertCell();
cell.innerHTML = eventType;
cell = row.insertCell();
cell.innerHTML = nrOfEvents;
}
let observedEntries = [];
let map = new Map();
const events = ['keydown', 'keypress', 'input', 'keyup', 'compositionupdate', 'compositionstart', 'compositionend'];
function eventsForCheck(entry) {
if (events.includes(entry.name)) {
if (map.has(entry.name)) {
map.get(entry.name).push({ interactionId: entry.interactionId, startTime: entry.startTime });
return true;
} else {
map.set(entry.name, [{ interactionId: entry.interactionId, startTime: entry.startTime }]);
return true;
}
}
return false;
}
test(function () {
assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.');
new PerformanceObserver(entryList => {
observedEntries = observedEntries.concat(entryList.getEntries().filter(eventsForCheck));
if (!observedEntries.find(entry => entry.name === "compositionend"))
return;
assert_equals(map.get('compositionstart')[0].interactionId, 0, 'Compositionstart should not have an interactionId');
logEventSummary(map.get('compositionstart')[0].interactionId, "compositionstart", 1);
assert_equals(map.get("input").length, map.get("compositionupdate").length, "For every input there should be exactly one compositionupdate");
// Create a Set to track seen input values
const seenInteractionIds = new Set();
map.get("input").forEach(value => {
assert_false(seenInteractionIds.has(value.interactionId), "All Inputs shall have unique InteractionIds.");
seenInteractionIds.add(value);
assert_greater_than(value.interactionId, 0, 'Input should have an interactionId greater than 0');
const filteredArrayKeydowns = map.get('keydown').filter(interactionId => interactionId === value.interactionId);
const countKeydowns = filteredArrayKeydowns.length;
logEventSummary(value.interactionId, "keydown", countKeydowns);
assert_true((countKeydowns <= 1), "For each input there should be no more than 1 keydown.");
logEventSummary(value.interactionId, "compositionupdate", 1);
logEventSummary(value.interactionId, "input", 1);
const filteredArrayKeyups = map.get('keyup').filter(interactionId => interactionId === value.interactionId);
const countKeyups = filteredArrayKeyups.length;
logEventSummary(value.interactionId, "keyup", countKeyups);
filteredArrayKeyups.forEach(keyupEntry => {
assert_true(keyupEntry.startTime > value.startTime, 'Keyup start time should be greater than input start time');
});
});
assert_equals(map.get('compositionend')[0].interactionId, 0, 'Compositionend should not have an interactionId');
logEventSummary(map.get('compositionstart')[0].interactionId, "compositionend", 1);
done();
observedEntries = [];
}).observe({ type: "event" });
addListeners(document.getElementById('test'), events);
});
</script>
</body>
</html>
|
