Add first batch of tests for selection update

These tests already show differences between eg. Firefox and Chrome, and show what seems to be browser bugs. Follows whatwg/html#3472.
web-platform-tests · Mar 6, 2018 · 05d6e35 · 05d6e35
1 parent 88f08cc
commit 05d6e35
Showing 1 changed file with 123 additions and 0 deletions.
diff --git a/html/semantics/forms/textfieldselection/selection-start-end-extra.html b/html/semantics/forms/textfieldselection/selection-start-end-extra.html
@@ -0,0 +1,123 @@
+<!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, 3);
+    assert_equals(el.selectionEnd, 3);
+  }, "Setting defaultValue in a textarea should 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, 6);
+    assert_equals(el.selectionEnd, 6);
+    el.textContent = "abcdef123456";
+    assert_equals(el.selectionStart, 12);
+    assert_equals(el.selectionEnd, 12);
+  }, "Setting textContent in a textarea should move selection{Start,End} to the end");
+
+  test(function() {
+    var el = document.createElement("textarea");
+    el.appendChild(document.createTextNode("abcdef"));
+    assert_equals(el.selectionStart, 6);
+    assert_equals(el.selectionEnd, 6);
+    el.appendChild(document.createTextNode("123456"));
+    assert_equals(el.selectionStart, 12);
+    assert_equals(el.selectionEnd, 12);
+  }, "Adding children to a textarea should 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, 9);
+    assert_equals(el.selectionEnd, 9);
+
+    el.removeChild(el.firstChild);
+    assert_equals(el.selectionStart, 3);
+    assert_equals(el.selectionEnd, 3);
+  }, "Removing children from a textarea should update selection{Start,End}");
+
+  test(function() {
+    var el = document.createElement("textarea");
+    el.textContent = "abcdef\nwhatevs";
+    el.selectionStart = 3;
+    el.selectionEnd = 5;
+
+    el.textContent = "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.defaultValue = "123";
+    assert_equals(el.value.length, 3);
+    assert_equals(el.selectionStart, 3);
+    assert_equals(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";
+    assert_equals(el.selectionStart, 7);
+    assert_equals(el.selectionEnd, 7);
+  }, "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>