diff options
Diffstat (limited to 'testing/web-platform/tests/virtual-keyboard')
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(); + }); + } + } +} |