From bcb758abe5392e976b8e69458b048df25d9dc5b1 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Wed, 27 Sep 2023 12:14:57 +0000 Subject: [PATCH] Bug 1854720 [wpt PR 42030] - Rewrite (behind a flag) HTML direction inheritance and invalidation for dir=auto, a=testonly Automatic update from web-platform-tests Rewrite (behind a flag) HTML direction inheritance and invalidation for dir=auto This rewrites significant aspects of inheritance of HTML direction (which affects the unshipped :dir() selector and also the shipped dirname attribute), including its invalidation, to match current spec proposals regarding how the inheritance operates on Shadow DOM, and to improve invalidation in response to dynamic changes. Inheritance of direction now operates on the node tree, except that shadow roots and slots both inherit from the shadow host. It previously operated on the flat tree. This change should not affect the computed values of the CSS direction property, since the HTML direction is only mapped to CSS direction on elements where the HTML direction is not inherited. This also restructures the shadow tree-related invalidation code for dir=auto to match the changes implemented in https://crrev.com/26b1b30268b7af4f0e44f298c10338a65e656f40 , which made dir=auto operate on the node tree, and the additional behavior implemented in https://crrev.com/6abc9cbde67c0700be364c7aab86cb29188c7d5d that implemented special rules (looking at slotted children) for . Certain text-like form controls also have similar special rules in which they look at their value. This change can affect the computed values of the CSS direction property when the direction computed by dir=auto is different. The invalidation code for these two distinct things was (in the old code) too tied together to cleanly separate these changes. The reason these changes are the next step of work is because they change (when CSSPseudoDirEnabled) the one caller that passed a stay_within parameter to CalculateAndAdjustAutoDirectionality that is different from this; this enables further (smaller) refactoring that I believe will be needed to fix the failure of external/wpt/shadow-dom/directionality/dir-shadow-41.html in the still-unlanded WPT PR at https://github.com/web-platform-tests/wpt/pull/29820 . I believe this existing using of stay_within does not make sense; it doesn't make sense to try to partially traverse the descendants of a dir=auto element with a different termination point. The traversal of a dir=auto element should always start at its start and should terminate at the first strong character or the end of the contents that should influence the dir=auto. (There are cases where the interaction of the stay_within and the use of NodeTraversal/FlatTreeTraversal meant that the stay_within parameter was missed entirely and the tree was searched beyond the contents that should be; this is a step towards the refactoring needed to fix that.) 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/9166 https://github.com/whatwg/html/pull/9452 https://github.com/whatwg/html/pull/9554 Bug: 576815 Change-Id: Ic31a3f801f64042a3b4979afdc4e141f45e3b228 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4811757 Reviewed-by: Di Zhang Commit-Queue: David Baron Cr-Commit-Position: refs/heads/main@{#1199647} -- wpt-commits: ce9459e524221bf8f2b7ba04bc21af109a89eb14 wpt-pr: 42030 --- .../global-attributes/dir-assorted.window.js | 18 ++ .../dir-auto-dynamic-changes.window.js | 169 ++++++++++++++++++ 2 files changed, 187 insertions(+) create mode 100644 testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-dynamic-changes.window.js 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 64f99724a95ca..a4b30f0e4ac72 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 @@ -27,3 +27,21 @@ test(() => { ele.append(ele2); assert_true(ele2.matches(":dir(rtl)")); }, "Non-HTML element without direction has parent element direction"); + +test(() => { + let container1 = document.createElement("div"); + document.body.appendChild(container1); + let container2 = document.createElement("div"); + + for (let container of [container1, container2]) { + container.dir = "rtl"; + let e = document.createElement("div"); + assert_true(e.matches(":dir(ltr)")); + container.appendChild(e); + assert_false(e.matches(":dir(ltr)")); + e.remove(); + assert_true(e.matches(":dir(ltr)")); + } + + container1.remove(); +}, "dir inheritance is correct after insertion and removal from document"); 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 new file mode 100644 index 0000000000000..5df996d285f46 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-dynamic-changes.window.js @@ -0,0 +1,169 @@ +function setup_tree(light_tree, shadow_tree) { + let body = document.body; + let old_length = body.childNodes.length; + body.insertAdjacentHTML("beforeend", light_tree.trim()); + if (body.childNodes.length != old_length + 1) { + throw "unexpected markup"; + } + let result = body.lastChild; + if (shadow_tree) { + let shadow = result.querySelector("#root").attachShadow({mode: "open"}); + shadow.innerHTML = shadow_tree.trim(); + return [result, shadow]; + } + return result; +} + +test(t => { + let a = setup_tree(` +
+
+ hello +
+ `); + + let acs = getComputedStyle(a); + assert_true(a.matches(":dir(ltr)"), ":dir(ltr) matches before insertion"); + assert_false(a.matches(":dir(rtl)"), ":dir(rtl) does not match before insertion"); + assert_equals(acs.direction, "ltr", "CSSdirection before insertion"); + b.innerHTML = "\u05D0"; + assert_false(a.matches(":dir(ltr)"), ":dir(ltr) does not match after insertion"); + assert_true(a.matches(":dir(rtl)"), ":dir(rtl) matches after insertion"); + assert_equals(acs.direction, "rtl", "CSSdirection after insertion"); + + a.remove(); +}, "dynamic insertion of RTL text in a child element"); + +test(() => { + let div_rtlchar = document.createElement("div"); + div_rtlchar.innerHTML = "\u05D0"; + + let container1 = document.createElement("div"); + document.body.appendChild(container1); + let container2 = document.createElement("div"); + + for (let container of [container1, container2]) { + container.dir = "auto"; + assert_true(container.matches(":dir(ltr)")); + container.appendChild(div_rtlchar); + assert_false(container.matches(":dir(ltr)")); + div_rtlchar.remove(); + assert_true(container.matches(":dir(ltr)")); + } + + container1.remove(); +}, "dir=auto changes for content insertion and removal, in and out of document"); + +test(() => { + let tree, shadow; + [tree, shadow] = setup_tree(` +
+
+ A + \u05D0 +
+
+ `, ` + \u05D0 + + `); + + let one = shadow.getElementById("one"); + let two = shadow.getElementById("two"); + let l = tree.querySelector("#l"); + let r = tree.querySelector("#r"); + assert_false(one.matches(":dir(ltr)"), "#one while empty"); + assert_true(two.matches(":dir(ltr)"), "#two with both spans"); + l.slot = "one"; + assert_true(one.matches(":dir(ltr)"), "#one with LTR child span"); + assert_false(two.matches(":dir(ltr)"), "#two with RTL child span"); + r.slot = "one"; + assert_true(one.matches(":dir(ltr)"), "#one with both child spans"); + assert_true(two.matches(":dir(ltr)"), "#two while empty"); + l.slot = ""; + assert_false(one.matches(":dir(ltr)"), "#one with RTL child span"); + assert_true(two.matches(":dir(ltr)"), "#two with LTR child span"); + + tree.remove(); +}, "dir=auto changes for slot reassignment"); + +test(() => { + let tree, shadow; + [tree, shadow] = setup_tree(` +
+
+
A
+
+
+ `, ` +
+ +
+ `); + + let text = tree.querySelector("#text"); + let slot = shadow.querySelector("#slot"); + + assert_true(tree.matches(":dir(ltr)"), "node tree ancestor before first text change"); + assert_true(slot.matches(":dir(ltr)"), "slot before first text change"); + text.innerText = "\u05D0"; + assert_false(tree.matches(":dir(ltr)"), "node tree ancestor after first text change"); + assert_false(slot.matches(":dir(ltr)"), "slot after first text change"); + tree.dir = "rtl"; + assert_false(tree.matches(":dir(ltr)"), "node tree ancestor before second text change"); + assert_false(slot.matches(":dir(ltr)"), "slot before second text change"); + text.innerText = "A"; + assert_false(tree.matches(":dir(ltr)"), "node tree ancestor after second text change"); + assert_true(slot.matches(":dir(ltr)"), "slot after second text change"); + slot.dir = "ltr"; + assert_false(tree.matches(":dir(ltr)"), "node tree ancestor before third text change"); + assert_true(slot.matches(":dir(ltr)"), "slot before third text change"); + text.innerText = "\u05D0"; + assert_false(tree.matches(":dir(ltr)"), "node tree ancestor after third text change"); + assert_true(slot.matches(":dir(ltr)"), "slot after third text change"); + slot.dir = "auto"; + tree.dir = "auto"; + assert_false(tree.matches(":dir(ltr)"), "node tree ancestor after fourth text change"); + assert_false(slot.matches(":dir(ltr)"), "slot after fourth text change"); + text.innerText = "A"; + assert_true(tree.matches(":dir(ltr)"), "node tree ancestor before fourth text change"); + assert_true(slot.matches(":dir(ltr)"), "slot before fourth text change"); + slot.dir = "rtl"; + assert_true(tree.matches(":dir(ltr)"), "node tree ancestor before fifth text change"); + assert_false(slot.matches(":dir(ltr)"), "slot before fifth text change"); + 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"); +}, "text changes affecting both slot and ancestor with dir=auto"); + +test(() => { + let tree = setup_tree(` +
+ A + \u05D0 + A + \u05D0 +
+ `); + + let a1 = tree.querySelector("#a1"); + let aleph1 = tree.querySelector("#aleph1"); + assert_true(tree.matches(":dir(ltr)"), "initial state"); + assert_false(tree.matches(":dir(rtl)"), "initial state"); + a1.dir = "ltr"; + assert_false(tree.matches(":dir(ltr)"), "after change 1"); + a1.dir = "invalid"; + assert_true(tree.matches(":dir(ltr)"), "after change 2"); + a1.dir = "rtl"; + assert_false(tree.matches(":dir(ltr)"), "after change 3"); + a1.removeAttribute("dir"); + assert_true(tree.matches(":dir(ltr)"), "after change 4"); + a1.dir = "invalid"; + assert_true(tree.matches(":dir(ltr)"), "after change 5"); + a1.dir = "rtl"; + assert_false(tree.matches(":dir(ltr)"), "after change 6"); + aleph1.dir = "auto"; + assert_true(tree.matches(":dir(ltr)"), "after change 7"); + aleph1.dir = "invalid"; + assert_false(tree.matches(":dir(ltr)"), "after change 8"); +}, "dynamic changes to subtrees excluded as a result of the dir attribute");