Steps 7-9 of the input type change algorithm

Spec: https://html.spec.whatwg.org/multipage/input.html#input-type-change

In short, this resets the selection to the start of the field when the
type has changed from one which doesn't support the selection API to one
that does.

I couldn't see an existing WPT test covering this.

2 files changed, 27 insertions, 1 deletions

diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index 04fd44f5dbd..f247ba70162 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -553459,7 +553459,7 @@
    "testharness"
   ],
   "html/semantics/forms/the-input-element/type-change-state.html": [
-   "d731573ee091b7e658ea0b1ded46a764e8165f6c",
+   "6ca94002609dae5548e5c832e4a84639c1094f69",
    "testharness"
   ],
   "html/semantics/forms/the-input-element/url.html": [
diff --git a/tests/wpt/web-platform-tests/html/semantics/forms/the-input-element/type-change-state.html b/tests/wpt/web-platform-tests/html/semantics/forms/the-input-element/type-change-state.html
index 82d36cda481..34cfd438cb6 100644
--- a/tests/wpt/web-platform-tests/html/semantics/forms/the-input-element/type-change-state.html
+++ b/tests/wpt/web-platform-tests/html/semantics/forms/the-input-element/type-change-state.html
@@ -31,6 +31,11 @@
     { type: "reset" },
     { type: "button" }
   ];
+
+  const selectionStart = 2;
+  const selectionEnd = 5;
+  const selectionDirection = "backward";
+
   for (var i = 0; i < types.length; i++) {
     for (var j = 0; j < types.length; j++) {
       if (types[i] != types[j]) {
@@ -49,6 +54,13 @@
             assert_equals(input.value, "");
           } else {
             input.value = expected;
+
+            const previouslySelectable = (input.selectionStart !== null);
+
+            if (previouslySelectable) {
+              input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+            }
+
             input.type = types[j].type;  // change state
 
             // type[i] sanitization
@@ -69,6 +81,20 @@
             }
 
             assert_equals(input.value, expected, "input.value should be '" + expected + "' after change of state");
+
+            const nowSelectable = (input.selectionStart !== null);
+
+            if (nowSelectable) {
+              if (previouslySelectable) {
+                assert_equals(input.selectionStart, selectionStart, "selectionStart should be unchanged");
+                assert_equals(input.selectionEnd, selectionEnd, "selectionEnd should be unchanged");
+                assert_equals(input.selectionDirection, selectionDirection, "selectionDirection should be unchanged");
+              } else {
+                assert_equals(input.selectionStart, 0, "selectionStart should be 0");
+                assert_equals(input.selectionEnd, 0, "selectionEnd should be 0");
+                assert_equals(input.selectionDirection, "none", "selectionDirection should be 'none'");
+              }
+            }
           }
         }, "change state from " + types[i].type + " to " + types[j].type);
       }