Bug 1856682 [wpt PR 42315] - Fix :dir() selector and updates for dir=…

…auto and descendant directionality to consider non-HTML elements., a=testonly

Automatic update from web-platform-tests
Fix :dir() selector and updates for dir=auto and descendant directionality to consider non-HTML elements.

This changes behavior only when the CSSPseudoDir flag is enabled.

This is based on the proposed behavior described in:
whatwg/html#3699 (comment)
which is in the process of being specified in:
whatwg/html#9554
whatwg/html#9796
and on the behavior specified in:
https://drafts.csswg.org/selectors-4/#the-dir-pseudo

Bug: 576815
Change-Id: I57323aeda8850f382756cd36b3717d34e8911f5e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4908695
Commit-Queue: David Baron <dbaronchromium.org>
Reviewed-by: Di Zhang <dizhanggchromium.org>
Cr-Commit-Position: refs/heads/main{#1204886}

--

wpt-commits: 9c46bae54706a175a99a9f127a4a8065704c2cc2
wpt-pr: 42315

UltraBlame original commit: 28cd492bf06128adefbd727f510e3773c4c531ab

testing/web-platform/tests/html/dom/elements/global-attributes/dir-assorted.window.js

@@ -18,6 +18,8 @@ test(() => {
   const ele2 = document.createElement("foobar");
   ele.append(ele2);
   assert_true(ele2.matches(":dir(rtl)"));
+  ele.dir = "ltr";
+  assert_true(ele2.matches(":dir(ltr)"), "direction after dynamic change");
 }, "Element without direction has parent element direction");
 
 test(() => {
@@ -26,6 +28,8 @@ test(() => {
   const ele2 = document.createElementNS("foobar", "foobar");
   ele.append(ele2);
   assert_true(ele2.matches(":dir(rtl)"));
+  ele.dir = "ltr";
+  assert_true(ele2.matches(":dir(ltr)"), "direction after dynamic change");
 }, "Non-HTML element without direction has parent element direction");
 
 test(() => {
@@ -45,3 +49,17 @@ test(() => {
 
   container1.remove();
 }, "dir inheritance is correct after insertion and removal from document");
+
+test(() => {
+  const ele = document.createElement("foobar");
+  ele.dir = "auto";
+  const ele2 = document.createElementNS("foobar", "foobar");
+  ele.append(ele2);
+  const text = document.createTextNode("\u05D0\u05D1\u05D2");
+  ele2.append(text);
+  assert_true(ele.matches(":dir(rtl)"), "is RTL before change");
+  assert_true(ele2.matches(":dir(rtl)"), "child is RTL before change");
+  text.data = "ABC";
+  assert_true(ele.matches(":dir(ltr)"), "is LTR after change");
+  assert_true(ele2.matches(":dir(ltr)"), "child is LTR after change");
+}, "Non-HTML element text contents influence dir=auto");

testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-dynamic-changes.window.js

@@ -134,6 +134,8 @@ test(() => {
   text.innerText = "\u05D0";
   assert_false(tree.matches(":dir(ltr)"), "node tree ancestor before fifth text change");
   assert_false(slot.matches(":dir(ltr)"), "slot before fifth text change");
+
+  tree.remove();
 }, "text changes affecting both slot and ancestor with dir=auto");
 
 test(() => {
@@ -166,4 +168,109 @@ test(() => {
   assert_true(tree.matches(":dir(ltr)"), "after change 7");
   aleph1.dir = "invalid";
   assert_false(tree.matches(":dir(ltr)"), "after change 8");
+
+  tree.remove();
 }, "dynamic changes to subtrees excluded as a result of the dir attribute");
+
+test(() => {
+  let tree = setup_tree(`
+    <div dir="auto">
+      <!-- element goes here -->
+    </div>
+  `);
+
+  let element = document.createElementNS("namespace", "element");
+  let text = document.createTextNode("\u05D0");
+  element.appendChild(text);
+  tree.prepend(element);
+  assert_not_equals(element.namespaceURI, tree.namespaceURI);
+
+  assert_true(tree.matches(":dir(rtl)"), "initial state");
+  assert_false(tree.matches(":dir(ltr)"), "initial state");
+  text.data = "A";
+  assert_true(tree.matches(":dir(ltr)"), "after dynamic change");
+  assert_false(tree.matches(":dir(rtl)"), "after dynamic change");
+
+  tree.remove();
+}, "dynamic changes inside of non-HTML elements");
+
+test(() => {
+  let tree, shadow;
+  [tree, shadow] = setup_tree(`
+    <div dir="auto">
+      <div id="root">
+        <element xmlns="namespace">A</element>
+        \u05D0
+      </div>
+    </div>
+  `, `
+    <div dir="ltr">
+      <slot dir="auto">\u05D0</slot>
+    </div>
+  `);
+
+  let element = tree.querySelector("element");
+  let slot = shadow.querySelector("slot");
+  let text = element.firstChild;
+
+  assert_true(tree.matches(":dir(ltr)"), "initial state (tree)");
+  assert_true(element.matches(":dir(ltr)"), "initial state (element)");
+  assert_true(slot.matches(":dir(ltr)"), "initial state (slot)");
+
+  text.data = "\u05D0";
+
+  assert_true(tree.matches(":dir(rtl)"), "state after first change (tree)");
+  assert_true(element.matches(":dir(rtl)"), "state after first change (element)");
+  assert_true(slot.matches(":dir(rtl)"), "state after first change (slot)");
+
+  text.data = "";
+
+  assert_true(tree.matches(":dir(rtl)"), "state after second change (tree)");
+  assert_true(element.matches(":dir(rtl)"), "state after second change (element)");
+  assert_true(slot.matches(":dir(rtl)"), "state after second change (slot)");
+
+  tree.remove();
+}, "slotted non-HTML elements");
+
+test(() => {
+  let tree, shadow;
+  [tree, shadow] = setup_tree(`
+    <div>
+      <div id="root">
+        <!-- element goes here -->
+        \u05D0
+      </div>
+    </div>
+  `, `
+    <div dir="ltr">
+      <slot></slot>
+    </div>
+  `);
+
+  let element = document.createElementNS("namespace", "element");
+  let text = document.createTextNode("A");
+  element.appendChild(text);
+  tree.querySelector("#root").prepend(element);
+
+  assert_not_equals(element.namespaceURI, tree.namespaceURI);
+
+  assert_true(tree.matches(":dir(ltr)"), "initial state (tree)");
+  assert_true(element.matches(":dir(ltr)"), "initial state (element)");
+
+  tree.dir = "auto";
+
+  assert_true(tree.matches(":dir(ltr)"), "state after making dir=auto (tree)");
+  assert_true(element.matches(":dir(ltr)"), "state after making dir=auto (element)");
+
+  text.data = "\u05D0";
+
+  assert_true(tree.matches(":dir(rtl)"), "state after first change (tree)");
+  assert_true(element.matches(":dir(rtl)"), "state after first change (element)");
+
+  text.data = "";
+
+  assert_true(tree.matches(":dir(rtl)"), "state after second change (tree)");
+  assert_true(element.matches(":dir(rtl)"), "state after second change (element)");
+
+  tree.remove();
+}, "slotted non-HTML elements after dynamically assigning dir=auto, and dir attribute ignored on non-HTML elements");