Source code
Revision control
Copy as Markdown
Other Tools
<!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>