summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/forms/textfieldselection/selection-value-interactions.html
blob: 0fd8a5b182c6aac3e8ad39ef4ca206642260351c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<meta charset=utf-8>
<title></title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<div id=log></div>
<div id=target></div>
<script>
  var target = document.getElementById("target");
  var sometext = "something";
  var shorttext = "abc";
  var elemData = [
    {
      desc: "textarea not in body",
      factory: () => document.createElement("textarea"),
    },
    {
      desc: "input not in body",
      factory: () => document.createElement("input"),
    },
    {
      desc: "textarea in body",
      factory: () => document.body.appendChild(document.createElement("textarea")),
    },
    {
      desc: "input in body",
      factory: () => document.body.appendChild(document.createElement("input")),
    },
    {
      desc: "textarea in body with parsed default value",
      factory: () => {
        target.innerHTML = "<textarea>abcdefghij</textarea>"
        return target.querySelector("textarea");
      },
    },
    {
      desc: "input in body with parsed default value",
      factory: () => {
        target.innerHTML = "<input value='abcdefghij'>"
        return target.querySelector("input");
      },
    },
    {
      desc: "focused textarea",
      factory: () => {
        var t = document.body.appendChild(document.createElement("textarea"));
        t.focus();
        return t;
      },
    },
    {
      desc: "focused input",
      factory: () => {
        var i = document.body.appendChild(document.createElement("input"));
        i.focus();
        return i;
      },
    },
    {
      desc: "focused then blurred textarea",
      factory: () => {
        var t = document.body.appendChild(document.createElement("textarea"));
        t.focus();
        t.blur();
        return t;
      },
    },
    {
      desc: "focused then blurred input",
      factory: () => {
        var i = document.body.appendChild(document.createElement("input"));
        i.focus();
        i.blur()
        return i;
      },
    },
  ];

for (var data of elemData) {
  test(function() {
    var el = data.factory();
    this.add_cleanup(() => el.remove());
    el.defaultValue = sometext;
    assert_true(sometext.length > 8,
                "sometext too short, test won't work right");
    el.selectionStart = 4;
    el.selectionEnd = 6;
    el.setRangeText("xyz");
    el.defaultValue = "set range text";
    assert_equals(el.value, sometext.slice(0, 4) + "xyz" + sometext.slice(6),
                  "Calling setRangeText should set the value dirty flag");
  }, `value dirty flag behavior after setRangeText on ${data.desc}`);
}

for (var tag of ['input', 'textarea']) {
  test(function() {
    var el = document.createElement(tag);
    document.body.appendChild(el);
    this.add_cleanup(() => el.remove());

    for (let val of ["", "foo", "foobar"]) {
      el.value = val;
      assert_equals(el.selectionStart, val.length,
                   "element.selectionStart should be value.length");
      assert_equals(el.selectionEnd, val.length,
                    "element.selectionEnd should be value.length");
    }
  }, `selection is collapsed to the end after changing values on ${tag}`);

  test(function() {
    var el = document.createElement(tag);
    document.body.appendChild(el);
    this.add_cleanup(() => el.remove());

    el.value = "foobar"
    el.selectionStart = 2
    el.selectionEnd = 4
    el.value = "foobar"

    assert_equals(el.selectionStart, 2,
                  "element.selectionStart should be unchanged");
    assert_equals(el.selectionEnd, 4,
                  "element.selectionEnd should be unchanged");
  }, `selection is not collapsed to the end when value is set to its existing value on ${tag}`);
}

</script>