Fix dir=auto for textarea with rtl text.

I copy-pasted all `SetDirectionFromValue`-related parts from HTMLInputElement to HTMLTextAreaElement Differential Revision: https://phabricator.services.mozilla.com/D176999 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1108425 gecko-commit: e6638f5e6d9f4217f9b1ddacd8f985cf554dfeaf gecko-reviewers: smaug
web-platform-tests · Aug 2, 2023 · 34f51e5 · 34f51e5
1 parent d36a627
commit 34f51e5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 1 deletion.
diff --git a/html/dom/elements/global-attributes/dir_auto-textarea-N-between-Rs.html b/html/dom/elements/global-attributes/dir_auto-textarea-N-between-Rs.html
@@ -12,7 +12,7 @@
       When dir='auto', the direction is set according to the first strong character
       of the text.
       For textarea and pre elements, the heuristic is applied on a per-paragraph level.
-      If there is no strong character, as in this test, the direction defaults to LTR." />
+      If there is no strong character, the direction defaults to LTR." />
     <style>
       body, textarea {
         font-size:18px;

diff --git a/html/semantics/selectors/pseudo-classes/dir-dynamic.html b/html/semantics/selectors/pseudo-classes/dir-dynamic.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel="author" title="Vincent Hilla" href="mailto:[email protected]">
+  <link rel="help" href="https://html.spec.whatwg.org/#the-directionality">
+</head>
+<body>
+  <input id="inp"/>
+  <textarea id="ta"></textarea>
+  <div id="div"></div>
+  <pre id="pre"></pre>
+
+  <script>
+    function doTest(e) {
+      e.dir = "ltr";
+      assert_true(e.matches(":dir(ltr)"), "dir to ltr on " + e.tagName + " element");
+
+      e.dir = "rtl";
+      assert_true(e.matches(":dir(rtl)"), "dir to rtl on " + e.tagName + " element");
+
+      e.dir = "auto";
+      assert_true(e.matches(":dir(ltr)"), "dir to auto, empty text on " + e.tagName + " element");
+
+      e.value = "\u05D0;";
+      e.textContent = "\u05D0;";
+      assert_true(e.matches(":dir(rtl)"), "auto dir, text to Hebrew on " + e.tagName + " element");
+
+      e.dir = "ltr";
+      assert_true(e.matches(":dir(ltr)"), "dir to ltr, Hebrew text on " + e.tagName + " element");
+
+      e.dir = "auto";
+      assert_true(e.matches(":dir(rtl)"), "dir to auto, Hebrew text on " + e.tagName + " element");
+
+      e.removeAttribute("dir");
+      assert_true(e.matches(":dir(ltr)"), "dir removed, Hebrew text on " + e.tagName + " element");
+    }
+
+    const elements = [inp, ta, div, pre];
+    for (const e of elements) {
+      test(() => doTest(e), "Dynamically changing dir, text on " + e.tagName.toLowerCase() + " element");
+    }
+  </script>
+</body>
+</html>
diff --git a/html/semantics/selectors/pseudo-classes/dir.html b/html/semantics/selectors/pseudo-classes/dir.html
@@ -35,8 +35,15 @@
     <bdo dir="auto" id=bdo3>HEBREW</bdo>
     <bdo dir="auto" id=bdo4>إيان</bdo>
     <bdo dir="ltr" id=bdo5>עברית</bdo>
+    <textarea dir="auto" id="ta1">إيان</textarea>
+    <textarea dir="auto" id="ta2">HEBREWإيان</textarea>
+    <textarea dir="auto" id="ta3">إيان</textarea>
+    <pre dir="auto" id="pre1">إيان</pre>
+    <pre dir="auto" id="pre2">HEBREWإيان</pre>
 
     <script id=script4>
+      ta3.value = "HEBREW";
+
       const rtlElements = [
         "bdo1",
         "bdi2",
@@ -46,6 +53,8 @@
         "span7",
         "input-tel3",
         "bdo4",
+        "ta1",
+        "pre1",
       ];
 
       testSelectorIdsMatch(":dir(rtl)", rtlElements, "':dir(rtl)' matches all elements whose directionality is 'rtl'.");
@@ -74,6 +83,9 @@
         "input-tel2",
         "bdo3",
         "bdo5",
+        "ta2",
+        "ta3",
+        "pre2",
         "script4",
       ];