From a3fc53ccf7b9a37dd85c1a3905a1be1fa7b89aee Mon Sep 17 00:00:00 2001
From: Anne van Kesteren <annevk@annevk.nl>
Date: Mon, 9 Oct 2023 17:09:00 +0200
Subject: [PATCH] HTML: make dir=auto and dirname apply to more form controls

For https://github.com/whatwg/html/pull/9689.

Helps with https://github.com/web-platform-tests/wpt/issues/25569 as this area was barely tested.

(Also correct some typos while here.)
---
 .../dir-auto-form-associated.window.js        | 60 +++++++++++++++++++
 .../lang-xmllang-01-ref.html                  |  2 +-
 .../global-attributes/lang-xmllang-01.html    |  2 +-
 .../global-attributes/lang-xyzzy.html         |  2 +-
 .../dirname-only-if-applies.html              |  8 ++-
 5 files changed, 68 insertions(+), 6 deletions(-)
 create mode 100644 html/dom/elements/global-attributes/dir-auto-form-associated.window.js

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
new file mode 100644
index 00000000000000..c426417bcfaef8
--- /dev/null
+++ 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
index 1606bca21581d9..eacf73da16c2e7 100644
--- 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
index 9538f15ca8c808..04d8b74e2d1260 100644
--- 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
index d6e6aeb6475f3b..b950e1fac99168 100644
--- 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
index 1fd0476e314042..20d7b29c5b9dec 100644
--- 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");