Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: ae999f1c2fe70a3195d00d214002242227b63b62 authored by Luke Bjerring on 16 May 2018, 02:06:44 UTC
Fix nits as per review
Tip revision: ae999f1
activation-thru-contextmenu-event-manual.html 
<!DOCTYPE html>
<html>
  <head>
    <title>User activation with 'contextmenu' event</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <link rel="author" title="Google" href="http://www.google.com "/>
    <link rel="help" href="https://html.spec.whatwg.org/#triggered-by-user-activation">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <style>
      #target {
        width: 250px;
        height: 150px;
        float: left;
        background-color: green;
      }

      #done {
        float: left;
        padding: 20px;
        margin: 10px;
      }
    </style>
    <script type="text/javascript">
      let activation_event_fired = false;

      function run() {
        let success = false;
        let test_contextmenu = async_test("'contextmenu' can call vibrate.");

        on_event(document.getElementById("done"), "click", () => {
          test_contextmenu.step(() => {
            assert_true(activation_event_fired, "activation event has fired");
          });
          test_contextmenu.done();
        });

        on_event(document.getElementById("target"), "contextmenu", (e) => {
            test_contextmenu.step(() => {
              e.preventDefault();
              assert_true(navigator.vibrate(200), "navigator.vibrate is successful");
              activation_event_fired = true;
            });
        });
      }
    </script>
  </head>
  <body onload="run()">
    <h1>User activation with 'contextmenu' event</h1>
    <h4>Tests that a 'contextmenu' event is treated like a user activation.</h4>
    <ol>
      <li>Right-click or long-press on green.</li>
      <li>Click or tap on Done.</li>
    </ol>
    <div id="target"></div>
    <input type="button" id="done" value="Done" />
  </body>
</html>
back to top