1 files changed, 114 insertions, 0 deletions
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>