<!DOCTYPE html>
<meta charset=utf-8>
<title>text field selection: setRangeText</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
<link rel=help href="https://html.spec.whatwg.org/multipage/#textFieldSelection">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #display_none {display:none;}
</style>
<div id="log"></div>
<input type=text id=text value="foobar">
<input type=search id=search value="foobar">
<input type=tel id=tel value="foobar">
<input type=url id=url value="foobar">
<input type=password id=password value="foobar">
<input id=display_none value="foobar">
<textarea id=textarea>foobar</textarea>
<script>
  var input = document.createElement("input");
  input.id = "input_not_in_doc";
  input.value = "foobar";

  var elements = [
    document.getElementById("text"),
    document.getElementById("search"),
    document.getElementById("tel"),
    document.getElementById("url"),
    document.getElementById("password"),
    document.getElementById("display_none"),
    document.getElementById("textarea"),
    input,
  ]

  elements.forEach(function(element) {
    test(function() {
      element.value = "foobar";
      element.selectionStart = 0;
      element.selectionEnd = 3;
      assert_equals(element.selectionStart, 0);
      assert_equals(element.selectionEnd, 3);
      element.setRangeText("foobar2");
      assert_equals(element.value, "foobar2bar");
      assert_equals(element.selectionStart, 0);
      assert_equals(element.selectionEnd, 7);
      element.setRangeText("foobar3", 7, 10);
      assert_equals(element.value, "foobar2foobar3");
    }, element.id + " setRangeText with only one argument replaces the value between selectionStart and selectionEnd, otherwise replaces the value between 2nd and 3rd arguments");

    test(function(){
      element.value = "foobar";
      element.selectionStart = 0;
      element.selectionEnd = 0;

      element.setRangeText("foobar2", 0, 3); // no 4th arg, default "preserve"
      assert_equals(element.value, "foobar2bar");
      assert_equals(element.selectionStart, 0);
      assert_equals(element.selectionEnd, 0);
    }, element.id + " selectionMode missing");

    test(function(){
      element.value = "foobar"
      element.setRangeText("foo", 3, 6, "select");
      assert_equals(element.value, "foofoo");
      assert_equals(element.selectionStart, 3);
      assert_equals(element.selectionEnd, 6);
    }, element.id + " selectionMode 'select'");

    test(function(){
      element.value = "foobar"
      element.setRangeText("foo", 3, 6, "start");
      assert_equals(element.value, "foofoo");
      assert_equals(element.selectionStart, 3);
      assert_equals(element.selectionEnd, 3);
    }, element.id + " selectionMode 'start'");

    test(function(){
      element.value = "foobar"
      element.setRangeText("foobar", 3, 6, "end");
      assert_equals(element.value, "foofoobar");
      assert_equals(element.selectionStart, 9);
      assert_equals(element.selectionEnd, 9);
    }, element.id + " selectionMode 'end'");

    test(function(){
      element.value = "foobar"
      element.selectionStart = 0;
      element.selectionEnd = 5;
      assert_equals(element.selectionStart, 0);
      element.setRangeText("", 3, 6, "preserve");
      assert_equals(element.value, "foo");
      assert_equals(element.selectionStart, 0);
      assert_equals(element.selectionEnd, 3);
    }, element.id + " selectionMode 'preserve'");

    test(function(){
      assert_throws("INDEX_SIZE_ERR", function() {
        element.setRangeText("barfoo", 2, 1);
      });
    }, element.id + " setRangeText with 3rd argument greater than 2nd argument throws an IndexSizeError exception");

    test(function(){
      assert_throws(new TypeError(), function() {
        element.setRangeText();
      });
    }, element.id + " setRangeText without argument throws a type error");

    async_test(function() {
      var q = false;
      element.onselect = this.step_func_done(function(e) {
        assert_true(q, "event should be queued");
        assert_true(e.isTrusted, "event is trusted");
        assert_false(e.bubbles, "event bubbles");
        assert_false(e.cancelable, "event is not cancelable");
      });
      element.setRangeText("foobar2", 0, 6);
      q = true;
    }, element.id + " setRangeText fires a select event");
  })
</script>