Skip to content

Commit

Permalink
Bug 1856682 [wpt PR 42315] - Fix :dir() selector and updates for dir=…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
marco-c committed Oct 30, 2023
1 parent 6242d6a commit 3f1ca28
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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(() => {
Expand All @@ -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");
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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");

0 comments on commit 3f1ca28

Please sign in to comment.