interactionid-composition-manual.html (6907B)
1 <!doctype html> 2 <html> 3 4 <head> 5 <style> 6 table, 7 td { 8 padding: 8px; 9 border: 1px solid black; 10 } 11 </style> 12 </head> 13 14 <body> 15 <title>Event Timing: interactionId composition events.</title> 16 <form> 17 <b> Select your Operating System from the list</b> 18 <select id="option" onchange="dropdownMenu()"> 19 <option> ---Choose OS--- </option> 20 <option> Linux </option> 21 <option> Windows </option> 22 </select> 23 <p> Your selected OS is: 24 <input type="text" id="os" size="20"> 25 </p> 26 </form> 27 <pre> 28 Steps: 29 1) Open <b id = "IMEtype"></b> IME and select Hiragana input method. 30 2) Click at the above textbox and then type 'a' using keyboard. 31 3) Press the '{Enter}' key to complete the IME composition. 32 4) <a href="interactionid-composition-manual.html">Click here</a> to test again if not following the steps exactly. 33 34 <textarea id='test' placeholder="enter 'a'"></textarea> 35 36 Expected Result: 37 The test is successful when the sentence "PASS Event Timing: interactionId composition events" is displayed 38 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. 39 Moreover, the event log table below provides a summary of the keyboard events processed throughout the test. 40 Here is a breakdown of the columns in the table: 41 42 1. <strong>InteractionId</strong>: Identifies the specific interaction to which an event belongs. 43 2. <strong>EventType</strong>: Specifies the type of event that occurred during a particular interaction. There are 44 seven possible event types: 45 - 'keydown' 46 - 'keypress' 47 - 'input' 48 - 'keyup' 49 - 'compositionupdate' 50 - 'compositionstart' 51 - 'compositionend' 52 3. <strong>NumberOfEvents</strong>: Indicates the number of times a particular type of event was recorded in a single interaction. 53 54 </pre> 55 56 <table id="eventLogTable"> 57 <tr> 58 <td>InteractionId</td> 59 <td>Event Type</td> 60 <td>Number of Events</td> 61 </tr> 62 </table> 63 <script src="/resources/testharness.js"></script> 64 <script src="/resources/testharnessreport.js"></script> 65 <script src=resources/event-timing-test-utils.js></script> 66 <script> 67 setup({ explicit_timeout: true, explicit_done: true }); 68 69 function dropdownMenu() { 70 var list = document.getElementById("option"); 71 document.getElementById("os").value = list.options[list.selectedIndex].text; 72 if (document.getElementById("os").value == "Linux") { 73 document.getElementById("IMEtype").textContent = "Japanese - Mozc"; 74 } 75 else if (document.getElementById("os").value == "Windows") { 76 document.getElementById("IMEtype").textContent = "Japanese Microsoft"; 77 } 78 } 79 80 function logEventSummary(interactionId, eventType, nrOfEvents) { 81 82 var table = document.getElementById("eventLogTable"); 83 var row = table.insertRow(); 84 85 // Add values to the table 86 var cell = row.insertCell(); 87 cell.innerHTML = interactionId; 88 cell = row.insertCell(); 89 cell.innerHTML = eventType; 90 cell = row.insertCell(); 91 cell.innerHTML = nrOfEvents; 92 } 93 94 let observedEntries = []; 95 let map = new Map(); 96 const events = ['keydown', 'keypress', 'input', 'keyup', 'compositionupdate', 'compositionstart', 'compositionend']; 97 98 99 function eventsForCheck(entry) { 100 if (events.includes(entry.name)) { 101 if (map.has(entry.name)) { 102 map.get(entry.name).push({ interactionId: entry.interactionId, startTime: entry.startTime }); 103 return true; 104 } else { 105 map.set(entry.name, [{ interactionId: entry.interactionId, startTime: entry.startTime }]); 106 return true; 107 } 108 } 109 110 return false; 111 } 112 113 test(function () { 114 assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.'); 115 new PerformanceObserver(entryList => { 116 observedEntries = observedEntries.concat(entryList.getEntries().filter(eventsForCheck)); 117 118 if (!observedEntries.find(entry => entry.name === "compositionend")) 119 return; 120 121 assert_equals(map.get('compositionstart')[0].interactionId, 0, 'Compositionstart should not have an interactionId'); 122 logEventSummary(map.get('compositionstart')[0].interactionId, "compositionstart", 1); 123 assert_equals(map.get("input").length, map.get("compositionupdate").length, "For every input there should be exactly one compositionupdate"); 124 125 // Create a Set to track seen input values 126 const seenInteractionIds = new Set(); 127 128 map.get("input").forEach(value => { 129 assert_false(seenInteractionIds.has(value.interactionId), "All Inputs shall have unique InteractionIds."); 130 seenInteractionIds.add(value); 131 assert_greater_than(value.interactionId, 0, 'Input should have an interactionId greater than 0'); 132 const filteredArrayKeydowns = map.get('keydown').filter(interactionId => interactionId === value.interactionId); 133 const countKeydowns = filteredArrayKeydowns.length; 134 logEventSummary(value.interactionId, "keydown", countKeydowns); 135 assert_true((countKeydowns <= 1), "For each input there should be no more than 1 keydown."); 136 137 logEventSummary(value.interactionId, "compositionupdate", 1); 138 logEventSummary(value.interactionId, "input", 1); 139 140 const filteredArrayKeyups = map.get('keyup').filter(interactionId => interactionId === value.interactionId); 141 const countKeyups = filteredArrayKeyups.length; 142 logEventSummary(value.interactionId, "keyup", countKeyups); 143 144 filteredArrayKeyups.forEach(keyupEntry => { 145 assert_true(keyupEntry.startTime > value.startTime, 'Keyup start time should be greater than input start time'); 146 }); 147 148 }); 149 150 assert_equals(map.get('compositionend')[0].interactionId, 0, 'Compositionend should not have an interactionId'); 151 logEventSummary(map.get('compositionstart')[0].interactionId, "compositionend", 1); 152 done(); 153 observedEntries = []; 154 }).observe({ type: "event" }); 155 156 addListeners(document.getElementById('test'), events); 157 }); 158 159 </script> 160 </body> 161 162 </html>