Bug 1718588 [wpt PR 29523] - [VirtualKeyboard] Add WPT tests for the VK feature., a=testonly

Automatic update from web-platform-tests [VirtualKeyboard] Add WPT tests for the VK feature. This patch adds wpt tests for the new VK API. Explainers and Design Doc: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardPolicy/explainer.md https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardAPI/explainer.md https://docs.google.com/document/d/1I0LUNxK_gP5IaNQsbYN6gL6Zpm71XzduCKkublU5o5Q/edit?usp=sharing Bug: 856269 Change-Id: I4f3ef35f71499a45e53e3fe79dd1df59257b8e6a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2993938 Commit-Queue: Anupam Snigdha <snianu@microsoft.com> Reviewed-by: Keith Lee <keithlee@chromium.org> Cr-Commit-Position: refs/heads/master@{#898372} -- wpt-commits: 80a417662387b6eda904607d78ad246c5d8bf191 wpt-pr: 29523
2021-07-03 09:27:16 +00:00 · 2021-07-03 09:27:16 +00:00 · 32a64a6d6d
--- a/testing/web-platform/tests/interfaces/virtual-keyboard.tentative.idl
+++ b/testing/web-platform/tests/interfaces/virtual-keyboard.tentative.idl
@ -0,0 +1,15 @@
+// Explainers:
+// https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardPolicy/explainer.md
+// https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardAPI/explainer.md
+
+partial interface Navigator {
+  [SecureContext, SameObject] readonly attribute VirtualKeyboard virtualKeyboard;
+};
+
+[SecureContext, Exposed=Window] interface VirtualKeyboard : EventTarget {
+    undefined show();
+    undefined hide();
+    readonly attribute DOMRect boundingRect;
+    attribute boolean overlaysContent;
+    attribute EventHandler ongeometrychange;
+};
--- a/testing/web-platform/tests/virtual-keyboard/META.yml
+++ b/testing/web-platform/tests/virtual-keyboard/META.yml
@ -0,0 +1,3 @@
+spec: https://github.com/w3c/editing/pull/309
+suggested_reviewers:
+  - snianu
--- a/testing/web-platform/tests/virtual-keyboard/README.md
+++ 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`
--- a/testing/web-platform/tests/virtual-keyboard/idlharness.https.window.js
+++ 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")'],
+    });
+  }
+);
--- 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
@ -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>
--- a/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-policy.html
+++ 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>
--- 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
@ -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>
--- a/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-type.html
+++ b/testing/web-platform/tests/virtual-keyboard/virtual-keyboard-type.html
@ -0,0 +1,31 @@
+<!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`");
+
+        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>
--- a/testing/web-platform/tests/virtual-keyboard/vk_support.js
+++ 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();
+            });
+        }
+    }
+}