Fix the wrong directionality of slots

After the CL that introduced the cache of the directionality of the element at https://crrev.com/c/2666349, Slots have a wrong directionality, and this CL supplements additionally as follows: - Resolve the directionality and propagate it to descendant if the slot element or it's parent has dir=auto - Propagate the directionality to the assigned nodes if the slot element has a valid dir attribute - Resolve the directionality if the assigned node or its parent have dir=auto - Resolve the directionality when the assigned node is a text node Bug: 1185781 Change-Id: I9c3bba672f3c9580a1c687539cb3215b0f4f2f66 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2744562 Commit-Queue: Miyoung Shin <[email protected]> Reviewed-by: Mason Freed <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/master@{#861868}
web-platform-tests · Mar 11, 2021 · 126ec5c · 126ec5c
1 parent 596cb33
commit 126ec5c
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/html/dom/elements/global-attributes/dir-slots-directionality.tentative.html b/html/dom/elements/global-attributes/dir-slots-directionality.tentative.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>HTML Test: dir=auto|rtl with slots, and direction should be RTL</title>
+<meta charset="UTF-8">
+<meta name="author" title="Miyoung Shin" href="mailto:[email protected]">
+<meta name="assert" content="When dir='auto', the direction is set according to
+ slot's assigned node. And the direction should be propagated to shadow" />
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="host1"><span></span></div>
+<div id="host2" dir="rtl"></div>
+<span id="host3" dir="auto"></span>
+<div id="host4">اختبر</div>
+<div id="host5"></div>
+<script>
+let root1 = host1.attachShadow({mode:"open"});
+root1.innerHTML = '<slot dir="rtl"></slot>';
+
+let root2 = host2.attachShadow({mode:"open"});
+root2.innerHTML = '<span></span>';
+
+let root3 = host3.attachShadow({mode:"open"});
+root3.innerHTML = `اختبر`;
+
+let root4 = host4.attachShadow({mode:"open"});
+root4.innerHTML = '<span dir="auto"><slot></slot></span>';
+
+let root5 = host5.attachShadow({mode:"open"});
+ root5.innerHTML = '<span dir="auto"><slot>اختبر</slot></span>';
+
+test(() => {
+ assert_equals(getComputedStyle(host1.firstChild).direction, "rtl");
+ assert_equals(getComputedStyle(root2.querySelector("span")).direction, "rtl");
+ assert_equals(getComputedStyle(host3).direction, "rtl");
+ assert_equals(getComputedStyle(root4.querySelector("span")).direction, "rtl");
+ assert_equals(getComputedStyle(root5.querySelector("span")).direction, "rtl");
+}, 'Slots: Directionality');
+</script>