HTML: make dir=auto and dirname apply to more form controls

For whatwg/html#9689.

Helps with #25569 as this area was barely tested.

(Also correct some typos while here.)

css/selectors/dir-pseudo-on-input-element.html

@@ -84,7 +84,7 @@
     document.body.removeChild(container);
 }, 'input element whose type attribute is in the telephone state in a RTL block');
 
-for (let type of ['text', 'search', 'url', 'email']) {
+for (const type of ['password', 'text', 'search', 'url', 'email', 'submit', 'reset', 'button']) {
     test(() => {
         const input = document.createElement('input');
         input.type = type;
@@ -143,7 +143,7 @@
     assert_true(input.matches(':dir(rtl)'));
 
     // Changing to a different type that does't use value causes the bidi rule to no longer apply.
-    input.type = 'password';
+    input.type = 'radio';
     assert_true(input.matches(':dir(ltr)'));
     assert_false(input.matches(':dir(rtl)'));
 
@@ -153,8 +153,7 @@
     assert_true(input.matches(':dir(rtl)'));
 }, 'dynamic changes to type of input elements affect whether value is used for dir=auto');
 
-for (let type of ['password', 'date', 'time', 'number', 'range', 'color',
-    'checkbox', 'radio', 'submit', 'image', 'reset', 'button']) {
+for (const type of ['date', 'time', 'number', 'range', 'color', 'checkbox', 'radio', 'image']) {
     test(() => {
         const input = document.createElement('input');
         input.type = type;

html/dom/elements/global-attributes/dir-auto-form-associated.window.js

@@ -0,0 +1,61 @@
+// Keep this mostly synchronized with
+// html/semantics/forms/attributes-common-to-form-controls/dirname-only-if-applies.html
+// except that won't have "reset" and "button" as those don't submit their value
+[
+  "hidden",
+  "text",
+  "search",
+  "tel",
+  "url",
+  "email",
+  "password",
+  "submit",
+  "reset",
+  "button"
+].forEach(type => {
+  test(t => {
+    const input = document.createElement("input");
+    t.add_cleanup(() => input.remove());
+    input.type = type;
+    assert_equals(input.type, type);
+    input.dir = "auto";
+    input.value = "\u05D0"; // The Hebrew letter Alef (strongly RTL)
+    document.body.append(input);
+    assert_true(input.matches(":dir(rtl)"));
+  }, `<input dir=auto type=${type}> directionality`);
+});
+
+[
+  "date",
+  "month",
+  "week",
+  "time",
+  "datetime-local",
+  "number",
+  "range",
+  "color",
+  "checkbox",
+  "radio",
+  // "file" // value setter throws
+  "image"
+].forEach(type => {
+  test(t => {
+    const input = document.createElement("input");
+    t.add_cleanup(() => input.remove());
+    input.type = type;
+    assert_equals(input.type, type);
+    input.dir = "auto";
+    input.value = "\u05D0"; // The Hebrew letter Alef (strongly RTL)
+    document.body.append(input);
+    assert_true(input.matches(":dir(ltr)"));
+  }, `<input dir=auto type=${type}> directionality`);
+});
+
+test(t => {
+  const input = document.createElement("textarea");
+  t.add_cleanup(() => input.remove());
+  input.dir = "auto";
+  input.value = "\u05D0"; // The Hebrew letter Alef (strongly RTL)
+  document.body.append(input);
+  assert_true(input.matches(":dir(rtl)"));
+}, `<textarea dir=auto> directionality`);

html/dom/elements/global-attributes/lang-xmllang-01-ref.html

@@ -2,7 +2,7 @@
 <title>Languages</title>
 <link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes">
-<link tel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang">
+<link rel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang">
 <meta name="flags" content="css21">
 <style>
 #test > * { background: limegreen; }

html/dom/elements/global-attributes/lang-xmllang-01.html

@@ -3,7 +3,7 @@
 <link rel="match" href="lang-xmllang-01-ref.html">
 <link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes">
-<link tel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang">
+<link rel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang">
 <meta name="flags" content="css21">
 <style>
 #test #a :lang(en) { background: limegreen; }

html/dom/elements/global-attributes/lang-xyzzy.html

@@ -3,7 +3,7 @@
 <link rel="match" href="lang-xyzzy-ref.html">
 <link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes">
-<link tel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang">
+<link rel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang">
 <meta name="flags" content="css21">
 <style>:lang(xyzzy) { color: green; }</style>
 <body>

html/semantics/forms/attributes-common-to-form-controls/dirname-only-if-applies.html

@@ -13,19 +13,24 @@
     <div id="log"></div>
     <form action="resources/dirname-iframe.html" method=get target="iframe">
       <textarea name="textarea" dirname="textarea.dir"></textarea>
-      <p><button id="btn-submit" type=submit>Submit</button></p>
+      <p><input id="btn-submit" type=submit name=submit dirname=submit.dir value=Submit></p>
     </form>
     <iframe name="iframe"></iframe>
 
     <script>
-      const types_applies = ["text", "search", "hidden", "tel", "url", "email"];
+      const types_applies = [
+        "hidden", "text", "search", "tel", "url", "email", "password", "submit"
+      ];
       const types_not = [
-        "password", "date", "month", "week", "time", "image", "reset", "button",
-        "datetime-local", "number", "range", "color", "checkbox", "radio", "file", "submit",
+        "date", "month", "week", "time", "datetime-local", "number", "range", "color", "checkbox",
+        "radio", "file", "image", "reset", "button"
       ];
       const types = [...types_applies, ...types_not];
       let form = document.querySelector("form");
       for (const type of types) {
+        if (type === "submit") {
+          continue;
+        }
         let p = document.createElement("p");
         let lbl = document.createElement("label");
         let txt = document.createTextNode(type + ": ");
@@ -52,15 +57,16 @@
         }
       }
 
-      const data = new FormData(form);
+      const submitter = document.getElementById("btn-submit");
+      const data = new FormData(form, submitter);
       test(function() {
         assertInputSubmission(data);
       }, "Submit input element directionality to FormData, if dirname applies.");
       test(function() {
         assert_equals(data.get("textarea.dir"), "ltr", "Submit ltr for textarea");
       }, "Submit textarea element directionality to FormData.");
 
-      document.getElementById("btn-submit").click();
+      submitter.click();
       const t_inp = async_test("Submit input element directionality, if dirname applies.");
       onIframeLoadedDone(t_inp, function(params) {
         assertInputSubmission(params);