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: ffa8120532d7c0f9a8f2eb4aca9e13073ab557cd authored by Marcos Cáceres on 28 November 2018, 04:56:37 UTC
Another typo
Tip revision: ffa8120
select-event.html 
<!DOCTYPE html>
<meta charset=utf-8>
<meta name="timeout" content="long">
<title>text field selection: select()</title>
<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
<link rel=help href="https://html.spec.whatwg.org/multipage/#textFieldSelection">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>

<textarea>foobar</textarea>
<input type="text" value="foobar">
<input type="search" value="foobar">
<input type="tel" value="1234">
<input type="url" value="https://example.com/">
<input type="password" value="hunter2">

<script>
"use strict";

const els = [document.querySelector("textarea"), ...document.querySelectorAll("input")];

const actions = [
  {
    label: "select()",
    action: el => el.select()
  },
  {
    label: "selectionStart",
    action: el => el.selectionStart = 1
  },
  {
    label: "selectionEnd",
    action: el => el.selectionEnd = el.value.length - 1
  },
  {
    label: "selectionDirection",
    action: el => el.selectionDirection = "backward"
  },
  {
    label: "setSelectionRange()",
    action: el => el.setSelectionRange(1, el.value.length - 1) // changes direction implicitly to none/forward
  },
  {
    label: "setRangeText()",
    action: el => el.setRangeText("newmiddle")
  }
];

els.forEach((el) => {
  const elLabel = el.localName === "textarea" ? "textarea" : "input type " + el.type;

  actions.forEach((action) => {
    // promise_test instead of async_test is important because these need to happen in sequence (to test that events
    // fire if and only if the selection changes).
    promise_test(t => {
      const watcher = new EventWatcher(t, el, "select");

      const promise = watcher.wait_for("select").then(e => {
        assert_true(e.isTrusted, "isTrusted must be true");
        assert_true(e.bubbles, "bubbles must be true");
        assert_false(e.cancelable, "cancelable must be false");
      });

      action.action(el);

      return promise;
    }, `${elLabel}: ${action.label}`);

    promise_test(t => {
      el.onselect = t.unreached_func("the select event must not fire the second time");

      action.action(el);

      return new Promise(resolve => {
        t.step_timeout(() => {
          el.onselect = null;
          resolve();
        }, 200);
      });
    }, `${elLabel}: ${action.label} a second time (must not fire select)`);
  });
});
</script>
back to top