Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/textfieldselection/selection-start-end-extra.html - WPT Dashboard Interop Dashboard
<!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";
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";
// 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>