From 73c790c1475613c6c9755c26cadb5ec670ce2b35 Mon Sep 17 00:00:00 2001
From: "L. David Baron" <dbaron@chromium.org>
Date: Tue, 22 Aug 2023 12:43:24 -0700
Subject: [PATCH] Fix influence of <slot> on dir=auto computation of its shadow
 tree ancestors.

This change treats a <slot> element as being a strong character, of its
resolved directionality, when resolving dir=auto on its shadow tree
ancestor.

This is behind the RuntimeEnabledFeatures::CSSPseudoDirEnabled() flag
because we're hoping to ship that feature soon and it makes sense to
ship related changes to direction handling all at once rather than
piecemeal.

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

This fixes the failures of:
external/wpt/shadow-dom/directionality/dir-shadow-30.html
external/wpt/shadow-dom/directionality/dir-shadow-34.html
in the still-unlanded WPT PR at
https://github.com/web-platform-tests/wpt/pull/29820

This also changes the existing WPT
html/dom/elements/global-attributes/dir-slots-directionality.tentative.html
in the following ways:
 * split the test into separate test() functions to get separate results
 * add a sixth test testing <slot dir=auto></slot>
 * add tests of the :dir() selector for each test (where Chromium fails
   this test for test 1)
 * change the expected result of the fourth test to match this code
   change and the proposed specification

Bug: 576815
Change-Id: I83551e9bc5807109c5318bace486cfc93fc25bbb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4800366
Reviewed-by: Di Zhang <dizhangg@chromium.org>
Commit-Queue: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1186743}
---
 .../dir-slots-directionality.tentative.html   | 62 ++++++++++++++-----
 1 file changed, 45 insertions(+), 17 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
index 1f0dc07f8ef5c1e..5e8cedb9c156f7c 100644
--- a/html/dom/elements/global-attributes/dir-slots-directionality.tentative.html
+++ b/html/dom/elements/global-attributes/dir-slots-directionality.tentative.html
@@ -2,9 +2,9 @@
 <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:myid.shin@igalia.com">
-<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" />
+<meta name="author" title="L. David Baron" href="mailto:dbaron@chromium.org">
 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute"/>
+<link rel="help" href="https://github.com/whatwg/html/issues/3699">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <div id="host1"><span></span></div>
@@ -12,27 +12,55 @@
 <span id="host3" dir="auto"></span>
 <div id="host4">اختبر</div>
 <div id="host5"></div>
+<div id="host6">اختبر</div>
 <script>
-let root1 = host1.attachShadow({mode:"open"});
-root1.innerHTML = '<slot dir="rtl"></slot>';
 
-let root2 = host2.attachShadow({mode:"open"});
-root2.innerHTML = '<span></span>';
+test(() => {
+  let root1 = host1.attachShadow({mode:"open"});
+  root1.innerHTML = '<slot dir="rtl"></slot>';
+  let span = host1.firstChild;
+  assert_equals(getComputedStyle(span).direction, "rtl");
+  assert_true(span.matches(":dir(ltr)"));
+}, 'Slots: Directionality: dir=rtl on slot');
 
-let root3 = host3.attachShadow({mode:"open"});
-root3.innerHTML = `اختبر`;
+test(() => {
+  let root2 = host2.attachShadow({mode:"open"});
+  root2.innerHTML = '<span></span>';
+  let span = root2.querySelector("span");
+  assert_equals(getComputedStyle(span).direction, "rtl");
+  assert_true(span.matches(":dir(rtl)"));
+}, 'Slots: Directionality: dir=rtl on host');
 
-let root4 = host4.attachShadow({mode:"open"});
-root4.innerHTML = '<span dir="auto"><slot></slot></span>';
+test(() => {
+  let root3 = host3.attachShadow({mode:"open"});
+  root3.innerHTML = `اختبر`;
+  let span = host3;
+  assert_equals(getComputedStyle(span).direction, "ltr");
+  assert_true(span.matches(":dir(ltr)"));
+}, 'Slots: Directionality: dir=auto on host with Arabic shadow tree content');
 
-let root5 = host5.attachShadow({mode:"open"});
+test(() => {
+  let root4 = host4.attachShadow({mode:"open"});
+  root4.innerHTML = '<span dir="auto"><slot></slot></span>';
+  let span = root4.querySelector("span");
+  assert_equals(getComputedStyle(span).direction, "ltr");
+  assert_true(span.matches(":dir(ltr)"));
+}, 'Slots: Directionality: dir=auto in shadow tree with Arabic light tree content');
+
+test(() => {
+  let root5 = host5.attachShadow({mode:"open"});
   root5.innerHTML = '<span dir="auto"><slot>اختبر</slot></span>';
+  let span = root5.querySelector("span");
+  assert_equals(getComputedStyle(span).direction, "rtl");
+  assert_true(span.matches(":dir(rtl)"));
+}, 'Slots: Directionality: dir=auto in shadow tree with Arabic shadow tree content');
 
 test(() => {
-  assert_equals(getComputedStyle(host1.firstChild).direction, "rtl");
-  assert_equals(getComputedStyle(root2.querySelector("span")).direction, "rtl");
-  assert_equals(getComputedStyle(host3).direction, "ltr");
-  assert_equals(getComputedStyle(root4.querySelector("span")).direction, "rtl");
-  assert_equals(getComputedStyle(root5.querySelector("span")).direction, "rtl");
-}, 'Slots: Directionality');
+  let root6 = host6.attachShadow({mode:"open"});
+  root6.innerHTML = '<slot dir="auto"></slot>';
+  let span = root6.querySelector("slot");
+  assert_equals(getComputedStyle(span).direction, "rtl");
+  assert_true(span.matches(":dir(rtl)"));
+}, 'Slots: Directionality: dir=auto on slot with Arabic light tree content');
+
 </script>