tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

virtual-keyboard-css-env-manual.html (4758B)

      1 <html>
      2 <head>
      3 <title>This tests the new virtualKeyboard CSS environment variables</title>
      4        <meta charset="utf-8">
      5        <meta name="viewport" content="width=device-width">
      6        <script src="/resources/testharness.js"></script>
      7        <script src="/resources/testharnessreport.js"></script>
      8        <script src="vk_support.js"></script>
      9        <script>
     10           setup({explicit_timeout: true, explicit_done: true})
     11        </script>
     12        <style>
     13            .target {
     14            margin-top: env(keyboard-inset-top);
     15            margin-left: env(keyboard-inset-left);
     16            margin-bottom: env(keyboard-inset-bottom);
     17            margin-right: env(keyboard-inset-right);
     18            }
     19        </style>
     20 </head>
     21 <body>
     22  <h1>VirtualKeyboard: Virtual Keyboard show/hide Fires Event & updates CSS env variables</h1>
     23  <h4>
     24      Test Description: This test checks that a geometry change event is
     25      fired when show/hide APIs are called & also updates the CSS env variables for keyboard insets.
     26      VK is only displayed on a touch device with tablet mode on or a mobile device where VK is the default
     27      text input mechanism.
     28  </h4>
     29  <h2 style="color: red">THIS IS A MANUAL TEST</h2>
     30  <div id="div1" class='target' contenteditable="true" virtualKeyboardPolicy="manual">Manual policy show here.</div>
     31  <div id="div2" contenteditable="false">Read-only region tap here.</div>
     32  <p id="skip">
     33      <button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
     34  </p>
     35  <p id="instruction"></p>
     36  <button id="continue">Start Test</button>
     37  <div id="log"></div>
     38  </body>
     39  <script>
     40      var continueBtn = document.getElementById("continue");
     41      var div1 = document.getElementById("div1");
     42      var style = window.getComputedStyle(document.getElementsByClassName('target')[0], null);
     43 
     44      function continueTest() {
     45        nextStep(function(instructionText) {
     46          var instruction = document.getElementById("instruction");
     47          continueBtn.innerText = "Continue";
     48          instruction.innerText = instructionText;
     49        });
     50      }
     51 
     52      continueBtn.addEventListener('click', continueTest);
     53      div1.addEventListener('onfocusin', function(e) {
     54        navigator.virtualKeyboard.overlaysContent = true;
     55        navigator.virtualKeyboard.show();
     56      });
     57 
     58      var didFireGeometryChange;
     59      var cancelable;
     60      var bubbles;
     61 
     62      function resetValues() {
     63          navigator.virtualKeyboard.overlaysContent = false;
     64          didFireGeometryChange = false;
     65          cancelable = undefined;
     66          bubbles = undefined;
     67      }
     68 
     69      addManualTestStep(
     70          function() {
     71              resetValues();
     72              navigator.virtualKeyboard.addEventListener('geometrychange', function(e) {
     73                  didFireGeometryChange = true;
     74                  cancelable = e.cancelable;
     75                  bubbles = e.bubbles;
     76              });
     77          },
     78          null,
     79          '1. Tap on the Auto policy tap here. text');
     80 
     81      addManualTestStep(
     82          function() {
     83              assert_true(didFireGeometryChange);
     84              assert_not_equals(style.getPropertyValue('margin-top'), "", "keyboard-inset-top should be updated");
     85              assert_not_equals(style.getPropertyValue('margin-left'), "", "keyboard-inset-left should be updated");
     86              assert_not_equals(style.getPropertyValue('margin-right'), "", "keyboard-inset-right should be updated");
     87              assert_not_equals(style.getPropertyValue('margin-bottom'), "", "keyboard-inset-bottom should be updated");
     88              assert_false(cancelable);
     89              assert_false(bubbles);
     90              resetValues();
     91           },
     92          'Geometry change event fired at navigator.virtualKeyboard after VK is shown',
     93          '2. Hide the VK by tapping on Read-only region tap here. text');
     94 
     95      addManualTestStep(
     96          function() {
     97            assert_true(didFireGeometryChange);
     98              assert_not_equals(style.getPropertyValue('margin-top'), "0px", "keyboard-inset-top should be updated");
     99              assert_not_equals(style.getPropertyValue('margin-left'), "0px", "keyboard-inset-left should be updated");
    100              assert_not_equals(style.getPropertyValue('margin-right'), "0px", "keyboard-inset-right should be updated");
    101              assert_not_equals(style.getPropertyValue('margin-bottom'), "0px", "keyboard-inset-bottom should be updated");
    102              assert_false(cancelable);
    103              assert_false(bubbles);
    104              resetValues();
    105          },
    106          'Hiding the VK fires the geometry change event',
    107          '');
    108 
    109      addManualTestStep(
    110          function() { continueBtn.remove(); },
    111          null,
    112          'Test Complete');
    113  </script>
    114 </html>