summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/virtual-keyboard
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/virtual-keyboard
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/virtual-keyboard')
-rw-r--r--testing/web-platform/tests/virtual-keyboard/META.yml3
-rw-r--r--testing/web-platform/tests/virtual-keyboard/README.md4
-rw-r--r--testing/web-platform/tests/virtual-keyboard/idlharness.https.window.js17
-rw-r--r--testing/web-platform/tests/virtual-keyboard/virtual-keyboard-css-env-manual.html114
-rw-r--r--testing/web-platform/tests/virtual-keyboard/virtual-keyboard-policy.html60
-rw-r--r--testing/web-platform/tests/virtual-keyboard/virtual-keyboard-show-hide-manual.html128
-rw-r--r--testing/web-platform/tests/virtual-keyboard/virtual-keyboard-type.https.html39
-rw-r--r--testing/web-platform/tests/virtual-keyboard/vk_support.js71
8 files changed, 436 insertions, 0 deletions
diff --git a/testing/web-platform/tests/virtual-keyboard/META.yml b/testing/web-platform/tests/virtual-keyboard/META.yml
new file mode 100644
index 0000000000..a925b52d6f
--- /dev/null
+++ b/testing/web-platform/tests/virtual-keyboard/META.yml
@@ -0,0 +1,3 @@
+spec: https://github.com/w3c/editing/blob/gh-pages/docs/virtualkeyboard/index.html
+suggested_reviewers:
+ - snianu
diff --git a/testing/web-platform/tests/virtual-keyboard/README.md b/testing/web-platform/tests/virtual-keyboard/README.md
new file mode 100644
index 0000000000..9feb3204d1
--- /dev/null
+++ b/testing/web-platform/tests/virtual-keyboard/README.md
@@ -0,0 +1,4 @@
+# VirtualKeyboard
+This directory contains (tentative) tests for the [VirtualKeyboard policy](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardPolicy/explainer.md) & [VirtualKeyboard APIs](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardAPI/explainer.md) proposals.
+
+**This suite runs the tests with** `--enable-features=VirtualKeyboard` \ No newline at end of file
diff --git a/testing/web-platform/tests/virtual-keyboard/idlharness.https.window.js b/testing/web-platform/tests/virtual-keyboard/idlharness.https.window.js
new file mode 100644
index 0000000000..8a40e68575
--- /dev/null
+++ b/testing/web-platform/tests/virtual-keyboard/idlharness.https.window.js
@@ -0,0 +1,17 @@
+// META: timeout=long
+// META: script=/resources/WebIDLParser.js
+// META: script=/resources/idlharness.js
+
+'use strict';
+
+idl_test(
+ ['virtual-keyboard.tentative'],
+ ['html', 'dom'],
+ idl_array => {
+ idl_array.add_objects({
+ Navigator: ['navigator'],
+ VirtualKeyboard: ['navigator.virtualKeyboard'],
+ GeometryChangeEvent: ['new GeometryChangeEvent("x")'],
+ });
+ }
+);
diff --git a/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-css-env-manual.html b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-css-env-manual.html
new file mode 100644
index 0000000000..fcddfc9453
--- /dev/null
+++ b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-css-env-manual.html
@@ -0,0 +1,114 @@
+<html>
+<head>
+<title>This tests the new virtualKeyboard CSS environment variables</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="vk_support.js"></script>
+ <script>
+ setup({explicit_timeout: true, explicit_done: true})
+ </script>
+ <style>
+ .target {
+ margin-top: env(keyboard-inset-top);
+ margin-left: env(keyboard-inset-left);
+ margin-bottom: env(keyboard-inset-bottom);
+ margin-right: env(keyboard-inset-right);
+ }
+ </style>
+</head>
+<body>
+ <h1>VirtualKeyboard: Virtual Keyboard show/hide Fires Event & updates CSS env variables</h1>
+ <h4>
+ Test Description: This test checks that a geometry change event is
+ fired when show/hide APIs are called & also updates the CSS env variables for keyboard insets.
+ VK is only displayed on a touch device with tablet mode on or a mobile device where VK is the default
+ text input mechanism.
+ </h4>
+ <h2 style="color: red">THIS IS A MANUAL TEST</h2>
+ <div id="div1" class='target' contenteditable="true" virtualKeyboardPolicy="manual">Manual policy show here.</div>
+ <div id="div2" contenteditable="false">Read-only region tap here.</div>
+ <p id="skip">
+ <button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
+ </p>
+ <p id="instruction"></p>
+ <button id="continue">Start Test</button>
+ <div id="log"></div>
+ </body>
+ <script>
+ var continueBtn = document.getElementById("continue");
+ var div1 = document.getElementById("div1");
+ var style = window.getComputedStyle(document.getElementsByClassName('target')[0], null);
+
+ function continueTest() {
+ nextStep(function(instructionText) {
+ var instruction = document.getElementById("instruction");
+ continueBtn.innerText = "Continue";
+ instruction.innerText = instructionText;
+ });
+ }
+
+ continueBtn.addEventListener('click', continueTest);
+ div1.addEventListener('onfocusin', function(e) {
+ navigator.virtualKeyboard.overlaysContent = true;
+ navigator.virtualKeyboard.show();
+ });
+
+ var didFireGeometryChange;
+ var cancelable;
+ var bubbles;
+
+ function resetValues() {
+ navigator.virtualKeyboard.overlaysContent = false;
+ didFireGeometryChange = false;
+ cancelable = undefined;
+ bubbles = undefined;
+ }
+
+ addManualTestStep(
+ function() {
+ resetValues();
+ navigator.virtualKeyboard.addEventListener('geometrychange', function(e) {
+ didFireGeometryChange = true;
+ cancelable = e.cancelable;
+ bubbles = e.bubbles;
+ });
+ },
+ null,
+ '1. Tap on the Auto policy tap here. text');
+
+ addManualTestStep(
+ function() {
+ assert_true(didFireGeometryChange);
+ assert_not_equals(style.getPropertyValue('margin-top'), "", "keyboard-inset-top should be updated");
+ assert_not_equals(style.getPropertyValue('margin-left'), "", "keyboard-inset-left should be updated");
+ assert_not_equals(style.getPropertyValue('margin-right'), "", "keyboard-inset-right should be updated");
+ assert_not_equals(style.getPropertyValue('margin-bottom'), "", "keyboard-inset-bottom should be updated");
+ assert_false(cancelable);
+ assert_false(bubbles);
+ resetValues();
+ },
+ 'Geometry change event fired at navigator.virtualKeyboard after VK is shown',
+ '2. Hide the VK by tapping on Read-only region tap here. text');
+
+ addManualTestStep(
+ function() {
+ assert_true(didFireGeometryChange);
+ assert_not_equals(style.getPropertyValue('margin-top'), "0px", "keyboard-inset-top should be updated");
+ assert_not_equals(style.getPropertyValue('margin-left'), "0px", "keyboard-inset-left should be updated");
+ assert_not_equals(style.getPropertyValue('margin-right'), "0px", "keyboard-inset-right should be updated");
+ assert_not_equals(style.getPropertyValue('margin-bottom'), "0px", "keyboard-inset-bottom should be updated");
+ assert_false(cancelable);
+ assert_false(bubbles);
+ resetValues();
+ },
+ 'Hiding the VK fires the geometry change event',
+ '');
+
+ addManualTestStep(
+ function() { continueBtn.remove(); },
+ null,
+ 'Test Complete');
+ </script>
+</html>
diff --git a/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-policy.html b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-policy.html
new file mode 100644
index 0000000000..67782020d3
--- /dev/null
+++ b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-policy.html
@@ -0,0 +1,60 @@
+<html>
+<head>
+<title>This tests the new virtualKeyboardPolicy attribute</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id="div1" contenteditable="true" virtualKeyboardPolicy="auto"></div>
+<div id="div2" contenteditable="true" virtualKeyboardPolicy="manual"></div>
+<div id="div3"></div>
+<div id="div4" contenteditable="true" virtualKeyboardPolicy=""></div>
+<div id="div5" contenteditable="true" virtualkeyboardpolicy="invalid"></div>
+<script>
+test(function() {
+ let div1 = document.getElementById("div1");
+ assert_equals(div1.getAttribute('virtualKeyboardPolicy'), "auto");
+ div1.setAttribute("virtualKeyboardPolicy", "manual");
+ assert_equals(div1.getAttribute('virtualKeyboardPolicy'), "manual");
+}, 'Validating virtualKeyboardPolicy auto and changed to manual');
+
+test(function() {
+ let div2 = document.getElementById("div2");
+ assert_equals(div2.getAttribute('virtualKeyboardPolicy'), "manual");
+ div2.setAttribute("virtualKeyboardPolicy", "auto");
+ assert_equals(div2.getAttribute('virtualKeyboardPolicy'), "auto");
+}, 'Validating virtualKeyboardPolicy manual and changed to auto');
+
+test(function() {
+ let div3 = document.getElementById("div3");
+ assert_equals(div3.getAttribute('virtualKeyboardPolicy'), null);
+ assert_equals(div3.virtualKeyboardPolicy, "");
+}, 'Validating virtualKeyboardPolicy for non contenteditable element');
+
+test(function() {
+ let div4 = document.getElementById("div4");
+ assert_equals(div4.virtualKeyboardPolicy, "");
+}, 'Validating virtualKeyboardPolicy access');
+
+test(function() {
+ let div4 = document.getElementById("div4");
+ div4.setAttribute("virtualKeyboardPolicy", "MANUAL");
+ assert_equals(div4.virtualKeyboardPolicy, "manual");
+ div4.setAttribute("virtualKeyboardPolicy", "AUTO");
+ assert_equals(div4.virtualKeyboardPolicy, "auto");
+ div4.setAttribute("virtualKeyboardPolicy", "");
+ assert_equals(div4.virtualKeyboardPolicy, "");
+}, 'Validating virtualKeyboardPolicy with case-insensitive value in div4');
+
+test(function() {
+ let div5 = document.getElementById("div5");
+ assert_equals(div5.virtualKeyboardPolicy, "");
+ div5.setAttribute("virtualKeyboardPolicy", "MANUAL");
+ assert_equals(div5.virtualKeyboardPolicy, "manual");
+ div5.setAttribute("virtualKeyboardPolicy", "AUTO");
+ assert_equals(div5.virtualKeyboardPolicy, "auto");
+ div5.setAttribute("virtualKeyboardPolicy", "");
+ assert_equals(div5.virtualKeyboardPolicy, "");
+}, 'Validating virtualkeyboardpolicy values in div5');
+</script>
+</body>
diff --git a/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-show-hide-manual.html b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-show-hide-manual.html
new file mode 100644
index 0000000000..60e7a07aff
--- /dev/null
+++ b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-show-hide-manual.html
@@ -0,0 +1,128 @@
+<html>
+<head>
+<title>This tests the new virtualKeyboard show/hide APIs</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ <script src="vk_support.js"></script>
+ <script>
+ setup({explicit_timeout: true, explicit_done: true})
+ </script>
+</head>
+<body>
+ <h1>VirtualKeyboard: Virtual Keyboard show/hide Fires Event</h1>
+ <h4>
+ Test Description: This test checks that a geometry change event is
+ fired when show/hide APIs are called. VK is only displayed on a touch
+ device with tablet mode on or a mobile device where VK is the default
+ text input mechanism.
+ </h4>
+ <h2 style="color: red">THIS IS A MANUAL TEST</h2>
+ <div id="div1" contenteditable="true" virtualKeyboardPolicy="auto">Auto policy tap here.</div>
+ <div id="div2" contenteditable="true" virtualKeyboardPolicy="manual">Manual policy show here.</div>
+ <div id="div3" contenteditable="true" virtualKeyboardPolicy="manual">Manual policy hide here.</div>
+ <div id="div4" contenteditable="false">Read-only region tap here.</div>
+ <p id="skip">
+ <button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
+ </p>
+ <p id="instruction"></p>
+ <button id="continue">Start Test</button>
+ <div id="log"></div>
+ </body>
+ <script>
+ var continueBtn = document.getElementById("continue");
+ var div1 = document.getElementById("div1");
+ var div2 = document.getElementById("div2");
+ var div3 = document.getElementById("div3");
+
+ function continueTest() {
+ nextStep(function(instructionText) {
+ var instruction = document.getElementById("instruction");
+ continueBtn.innerText = "Continue";
+ instruction.innerText = instructionText;
+ });
+ }
+
+ continueBtn.addEventListener('click', continueTest);
+ div1.addEventListener('onfocusin', function(e) {
+ navigator.virtualKeyboard.overlaysContent = true;
+ });
+ div2.addEventListener('onfocusin', function(e) {
+ navigator.virtualKeyboard.overlaysContent = true;
+ navigator.virtualKeyboard.show();
+ });
+ div3.addEventListener('onfocusin', function(e) {
+ navigator.virtualKeyboard.overlaysContent = true;
+ navigator.virtualKeyboard.hide();
+ });
+
+ var didFireGeometryChange;
+ var cancelable;
+ var bubbles;
+
+ function resetValues() {
+ navigator.virtualKeyboard.overlaysContent = false;
+ didFireGeometryChange = false;
+ cancelable = undefined;
+ bubbles = undefined;
+ }
+
+ addManualTestStep(
+ function() {
+ resetValues();
+ navigator.virtualKeyboard.addEventListener('geometrychange', function(e) {
+ didFireGeometryChange = true;
+ cancelable = e.cancelable;
+ bubbles = e.bubbles;
+ });
+ },
+ null,
+ '1. Tap on the Auto policy tap here. text');
+
+ addManualTestStep(
+ function() {
+ assert_true(didFireGeometryChange);
+ assert_false(cancelable);
+ assert_false(bubbles);
+ resetValues();
+ },
+ 'Geometry change event fired at navigator.virtualKeyboard after VK is shown',
+ '2. Hide the VK by tapping on Read-only region tap here. text');
+
+ addManualTestStep(
+ function() {
+ assert_true(didFireGeometryChange);
+ assert_false(cancelable);
+ assert_false(bubbles);
+ resetValues();
+ },
+ 'Hiding the VK fires the geometry change event',
+ '3. Tap on the Manual policy show here. text');
+
+ addManualTestStep(
+ function() {
+ assert_true(didFireGeometryChange);
+ assert_false(cancelable);
+ assert_false(bubbles);
+ resetValues();
+ },
+ 'Calling show API displays the VK & fires the geometry change event',
+ '4. Hide the VK by tapping on the Manual policy hide here. text');
+
+ addManualTestStep(
+ function() {
+ assert_true(didFireGeometryChange);
+ assert_false(cancelable);
+ assert_false(bubbles);
+ resetValues();
+ },
+ 'Calling hide API hides the VK and fires the geometry change event',
+ '');
+
+ addManualTestStep(
+ function() { continueBtn.remove(); },
+ null,
+ 'Test Complete');
+ </script>
+</html>
diff --git a/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-type.https.html b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-type.https.html
new file mode 100644
index 0000000000..47d09ce047
--- /dev/null
+++ b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-type.https.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+ <head>
+ <title>VirtualKeyboard: navigator.virtualKeyboard type</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ </head>
+ <body>
+ <h1>VirtualKeyboard: navigator.virtualKeyboard type</h1>
+ <h4>Test Description: This test checks that navigator.virtualKeyboard is an object of type VirtualKeyboard.</h4>
+ <script>
+ test(function() {
+ assert_equals(typeof(navigator.virtualKeyboard), "object");
+ }, "navigator.virtualKeyboard is an object");
+
+ test(function() {
+ assert_equals(navigator.virtualKeyboard.toString(), "[object VirtualKeyboard]");
+ }, "navigator.virtualKeyboard has type `VirtualKeyboard`");
+
+ test(function() {
+ assert_true(navigator.virtualKeyboard.show instanceof Function);
+ }, "navigator.virtualKeyboard.show instanceof Function");
+
+ test(function() {
+ assert_true(navigator.virtualKeyboard.hide instanceof Function);
+ }, "navigator.virtualKeyboard.hide instanceof Function");
+
+ addEventListener("load", function() {
+ document.getElementById("viewtype-log").innerText = typeof(navigator.virtualKeyboard);
+ });
+ </script>
+ <div id="complete-notice">
+ <p>navigator.virtualKeyboard is of type: <span id="viewtype-log"></span>.</p>
+ </div>
+ <div id="log"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/virtual-keyboard/vk_support.js b/testing/web-platform/tests/virtual-keyboard/vk_support.js
new file mode 100644
index 0000000000..e40216dd44
--- /dev/null
+++ b/testing/web-platform/tests/virtual-keyboard/vk_support.js
@@ -0,0 +1,71 @@
+// Ends a manual test. Must be called before any async tests are started.
+function skipManualTest() {
+ test(function() { assert_true(false); }, "Manual Test Skipped");
+ done();
+}
+
+var stepInstructions = [];
+var testNames = [];
+var stepFunctions = [];
+var steps;
+var curStep = 0;
+
+// Adds a manual test step to the test. A test will add a series of steps,
+// along with instructions. Once all the tests steps are added, the test can
+// be run by continually running the nextStep() function. All manual test steps
+// must be added before calling nextStep.
+//
+// |func| A function to be executed at the given step. This function can include
+// testharness assertions if |testName| is provided. If this is the last
+// step, the |done()| function (used for manual testharness.js tests)
+// will be called after |func| is executed.
+// |testName| If provided, the |func| will be wrapped in a testharness.js
+// async_test with this name. If null, |func| will be executed as a
+// free function.
+// |instructions| The text to display to the user. Note, these are shown after
+// step is executed so these should be instructions to setup the
+// checks in the next step.
+function addManualTestStep(func, testName, instructions) {
+ stepFunctions.push(func);
+ testNames.push(testName);
+ stepInstructions.push(instructions);
+}
+
+// Runs the next step of the test. This must be called only after all test steps
+// have been added using |addManualTestStep|.
+//
+// |callbackFunc| If provided, will be called with a single argument being the
+// instruction string for the current step. Use this to update
+// any necessary UI.
+function nextStep(callbackFunc) {
+ if (curStep == 0)
+ _startManualTest();
+
+ if (typeof(callbackFunc) === 'function')
+ callbackFunc(stepInstructions[curStep]);
+
+ steps[curStep]();
+ curStep++;
+}
+
+function _startManualTest() {
+ steps = [];
+ for (let i = 0; i < stepFunctions.length; ++i) {
+ var stepFunc = stepFunctions[i];
+ var testName = testNames[i];
+ if (testName) {
+ steps.push(async_test(testName).step_func(function() {
+ stepFunctions[i]();
+ this.done();
+ if (i == stepFunctions.length - 1)
+ done();
+ }));
+ } else {
+ steps.push(function() {
+ stepFunctions[i]();
+ if (i == stepFunctions.length - 1)
+ done();
+ });
+ }
+ }
+}