summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/forms/textfieldselection/selection-start-end-extra.html
blob: c8ba83bb988006daec57eb2f0ccf9e9dcf421f5d (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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<meta charset=utf-8>
<title></title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<div id=log></div>
<form id="form"><input id="form-input" type="text" value="abc" /></form>
<script>
  // * Should we test setting the dirty flag in any way that isn't
  //   setting the value?
  // * How to simulate users typing?

  test(function() {
    var el = document.createElement("textarea");
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);
    el.defaultValue = "123";
    assert_equals(el.value.length, 3);
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);
  }, "Setting defaultValue in a textarea should NOT move the cursor to the end");

  test(function() {
    var el = document.createElement("textarea");
    el.value = "abcdef";
    assert_equals(el.selectionStart, 6);
    assert_equals(el.selectionEnd, 6);
    el.defaultValue = "123";
    assert_equals(el.value.length, 6);
    assert_equals(el.selectionStart, 6);
    assert_equals(el.selectionEnd, 6);
  }, "Setting defaultValue in a textarea with a value should NOT make any difference");

  test(function() {
    var el = document.createElement("textarea");
    el.appendChild(document.createTextNode("abcdef"));
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);
    el.textContent = "abcdef123456";
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);
  }, "Setting textContent in a textarea should NOT move selection{Start,End} to the end");

  test(function() {
    var el = document.createElement("textarea");
    el.appendChild(document.createTextNode("abcdef"));
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);
    el.appendChild(document.createTextNode("123456"));
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);
  }, "Adding children to a textarea should NOT move selection{Start,End} to the end");

  test(function() {
    var el = document.createElement("textarea");
    el.appendChild(document.createTextNode("abcdef"));
    el.appendChild(document.createTextNode("123"));
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);

    el.removeChild(el.firstChild);
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);
  }, "Removing children from a textarea should NOT update selection{Start,End}");

  test(function() {
    var el = document.createElement("textarea");
    el.textContent = "abcdef\nwhatevs";
    el.selectionStart = 3;
    el.selectionEnd = 5;

    el.firstChild.data = "abcdef\r\nwhatevs";
    assert_equals(el.selectionStart, 3);
    assert_equals(el.selectionEnd, 5);
  }, "Setting the same value (with different newlines) in a textarea should NOT update selection{Start,End}");

  test(function() {
    var el = document.createElement("textarea");
    el.textContent = "foobar";
    el.selectionStart = 3;
    el.selectionEnd = 5;
    el.firstChild.remove();
    assert_equals(el.selectionStart, 0, 'selectionStart after node removal');
    assert_equals(el.selectionEnd, 0, 'selectionEnd after node removal');
    el.appendChild(document.createTextNode("foobar"));
    assert_equals(el.selectionStart, 0, 'selectionStart after appendChild');
    assert_equals(el.selectionEnd, 0, 'selectionEnd after appendChild');

    el.selectionStart = 3;
    el.selectionEnd = 5;
    el.textContent = "foobar2"; // This removes the child node first.
    assert_equals(el.selectionStart, 0, 'selectionStart after textContent setter');
    assert_equals(el.selectionEnd, 0, 'selectionEnd after textContent setter');

    el.selectionStart = 3;
    el.selectionEnd = 5;
    el.defaultValue = "foobar"; // Same as textContent setter.
    assert_equals(el.selectionStart, 0, 'selectionStart after defaultValue setter');
    assert_equals(el.selectionEnd, 0, 'selectionEnd after defaultValue setter');

  }, "Removing child nodes in non-dirty textarea should make selection{Start,End} 0");

  test(function() {
    var el = document.createElement("textarea");
    el.defaultValue = "123";
    assert_equals(el.value.length, 3);
    el.selectionStart = 3;
    el.selectionEnd = 3;
    el.value = "12";
    assert_equals(el.value.length, 2);
    assert_equals(el.selectionStart, 2);
    assert_equals(el.selectionEnd, 2);
  }, "Setting value to a shorter string than defaultValue should correct the cursor position");

  test(function() {
    var el = document.createElement("input");
    el.type = "text";
    el.value = "http://example.com   ";
    assert_equals(el.selectionStart, 21);
    assert_equals(el.selectionEnd, 21);
    el.type = "url";
    assert_equals(el.selectionStart, 18);
    assert_equals(el.selectionEnd, 18);
  }, "Shortening value by turning the input type into 'url' should correct selection{Start,End}");

  test(function() {
    var el = document.createElement("input");
    el.type = "text";
    el.value = "#123456xx";
    assert_equals(el.selectionStart, 9);
    assert_equals(el.selectionEnd, 9);
    el.type = "color";
    el.type = "text";
    // https://html.spec.whatwg.org/C/input.html#the-input-element:attr-input-type-15
    // 9. If previouslySelectable is false and nowSelectable is true, set the
    // element's text entry cursor position to the beginning of the text
    // control, ...
    assert_equals(el.selectionStart, 0);
    assert_equals(el.selectionEnd, 0);
  }, "Shortening value by turning the input type into 'color' and back to 'text' should correct selection{Start,End}");

  test(function() {
    var form = document.getElementById("form");
    var el = document.getElementById("form-input");

    el.value = "abcde";
    assert_equals(el.value.length, 5);
    form.reset();
    assert_equals(el.value.length, 3);
    assert_equals(el.selectionStart, 3);
    assert_equals(el.selectionEnd, 3);
  }, "Resetting a value to a shorter string than defaultValue should correct the cursor position");
</script>