From 3f1ca28cb0f743c28f607f495779797327254dca Mon Sep 17 00:00:00 2001 From: Marco Castelluccio Date: Mon, 30 Oct 2023 11:17:00 +0000 Subject: [PATCH] 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: https://github.com/whatwg/html/issues/3699#issuecomment-951423468 which is in the process of being specified in: https://github.com/whatwg/html/pull/9554 https://github.com/whatwg/html/pull/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 Reviewed-by: Di Zhang Cr-Commit-Position: refs/heads/main{#1204886} -- wpt-commits: 9c46bae54706a175a99a9f127a4a8065704c2cc2 wpt-pr: 42315 UltraBlame original commit: 28cd492bf06128adefbd727f510e3773c4c531ab --- .../global-attributes/dir-assorted.window.js | 18 +++ .../dir-auto-dynamic-changes.window.js | 107 ++++++++++++++++++ 2 files changed, 125 insertions(+) diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir-assorted.window.js b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-assorted.window.js index a4b30f0e4ac72..d65cba7421cba 100644 --- a/testing/web-platform/tests/html/dom/elements/global-attributes/dir-assorted.window.js +++ b/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"); diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-dynamic-changes.window.js b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-dynamic-changes.window.js index 5df996d285f46..a0cf4aae7bad3 100644 --- a/testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-dynamic-changes.window.js +++ b/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(` +
+ +
+ `); + + 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(` +
+
+ A + \u05D0 +
+
+ `, ` +
+ \u05D0 +
+ `); + + 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(` +
+
+ + \u05D0 +
+
+ `, ` +
+ +
+ `); + + 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");