<!DOCTYPE html>
the phone's display without scrolling, the test will start being flaky and
it will be very difficult to debug :(. -->
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<textarea id="txt1" virtualkeyboardpolicy="manual" onfocusin="FocusIn1()"></textarea>
<textarea id="txt2" virtualkeyboardpolicy="manual"></textarea>
<textarea id="txt3" virtualkeyboardpolicy="manual" onfocusin="FocusIn2()"></textarea>
<input id="input_text" type="text"></input>
</body>
<script>
let VKRect, new_vv_width = 0, new_vv_height = 0, numEvents = 0;
navigator.virtualKeyboard.overlaysContent = true;
let old_vv_width = visualViewport.width.toFixed(2);
let old_vv_height = visualViewport.height.toFixed(2);
navigator.virtualKeyboard.addEventListener('geometrychange', evt => {
numEvents++;
VKRect = navigator.virtualKeyboard.boundingRect;
new_vv_width = visualViewport.width.toFixed(2);
new_vv_height = visualViewport.height.toFixed(2);
}, false);
function FocusIn1() {
navigator.virtualKeyboard.show();
}
function FocusIn2() {
txt2.focus();
}
var selectionChangeEventLog = "";
var otherEventLog = "";
function addOtherEventLog(type, detail) {
if (otherEventLog.length > 0) {
otherEventLog += ',';
}
if (detail == null) {
otherEventLog += type;
} else {
otherEventLog += type + '(' + detail + ')';
}
}
function addSelectionChangeEventLog(type, detail) {
if (selectionChangeEventLog.length > 0) {
selectionChangeEventLog += ',';
}
if (detail == null) {
selectionChangeEventLog += type;
} else {
selectionChangeEventLog += type + '(' + detail + ')';
}
}
function getEventLogs() {
if (otherEventLog.length > 0 && selectionChangeEventLog.length > 0)
return otherEventLog + ',' + selectionChangeEventLog;
return otherEventLog + selectionChangeEventLog;
}
function clearEventLogs() {
selectionChangeEventLog = '';
otherEventLog = '';
}
function addKeyEventListener(element, event_name) {
element.addEventListener(event_name, function (e) { addOtherEventLog(event_name, e.keyCode); });
}
function addSelectionEventListener(event_name) {
document.addEventListener(event_name, function (e) { addSelectionChangeEventLog(event_name, e.data); });
}
function registerListeners(element) {
addKeyEventListener(element, "keydown");
addKeyEventListener(element, "keypress");
addKeyEventListener(element, "keyup");
}
var inputText = document.getElementById("input_text");
var contenteditableEvent1 = document.getElementById("txt1");
var contenteditableEvent2 = document.getElementById("txt2");
addSelectionEventListener("selectionchange");
registerListeners(inputText);
registerListeners(contenteditableEvent1);
registerListeners(contenteditableEvent2);
</script>
</html>