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.)
web-platform-tests · Oct 9, 2023 · a3fc53c · a3fc53c
1 parent 2eedb6f
commit a3fc53c
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 6 deletions.
diff --git a/html/dom/elements/global-attributes/dir-auto-form-associated.window.js b/html/dom/elements/global-attributes/dir-auto-form-associated.window.js
@@ -0,0 +1,60 @@
+// Keep this synchronized with
+// html/semantics/forms/attributes-common-to-form-controls/dirname-only-if-applies.html
+[
+  "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`);
diff --git a/html/dom/elements/global-attributes/lang-xmllang-01-ref.html b/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; }

diff --git a/html/dom/elements/global-attributes/lang-xmllang-01.html b/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; }

diff --git a/html/dom/elements/global-attributes/lang-xyzzy.html b/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>

diff --git a/html/semantics/forms/attributes-common-to-form-controls/dirname-only-if-applies.html b/html/semantics/forms/attributes-common-to-form-controls/dirname-only-if-applies.html
@@ -18,10 +18,12 @@
     <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", "reset", "button"
+      ];
       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"
       ];
       const types = [...types_applies, ...types_not];
       let form = document.querySelector("form");