Fix influence of <slot> on dir=auto computation of its shadow tree an…

…cestors.

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:
whatwg/html#3699 (comment)
which is in the process of being specified in:
whatwg/html#9166
whatwg/html#9452
whatwg/html#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
web-platform-tests#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 <[email protected]>
Commit-Queue: David Baron <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1186743}

html/dom/elements/global-attributes/dir-slots-directionality.tentative.html

@@ -2,37 +2,65 @@
 <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" />
+<meta name="author" title="L. David Baron" href="mailto:[email protected]">
 <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>
 <div id="host2" dir="rtl"></div>
 <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>