::slotted doesn't work in nested shadow trees

https://bugs.webkit.org/show_bug.cgi?id=154765 <rdar://problem/24870995> Reviewed by Ryosuke Niwa. Source/WebCore: See WICG/webcomponents#331 (comment) Test: fast/shadow-dom/css-scoping-shadow-slotted-nested.html * css/ElementRuleCollector.cpp: (WebCore::ElementRuleCollector::matchSlottedPseudoElementRules): Collect ::slotted rules from all the nested shadow trees instead of just the host's. LayoutTests: * fast/shadow-dom/css-scoping-shadow-slotted-nested-expected.html: Added. * fast/shadow-dom/css-scoping-shadow-slotted-nested.html: Added. git-svn-id: http://svn.webkit.org/repository/webkit/trunk@197316 268f45cc-cd09-0410-ab3c-d52691b4dbfc
paul99 · Feb 29, 2016 · 594c2f0 · 594c2f0
1 parent 608dcdc
commit 594c2f0
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 12 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,14 @@
+2016-02-28  Antti Koivisto  <antti@apple.com>
+
+        ::slotted doesn't work in nested shadow trees
+        https://bugs.webkit.org/show_bug.cgi?id=154765
+        <rdar://problem/24870995>
+
+        Reviewed by Ryosuke Niwa.
+
+        * fast/shadow-dom/css-scoping-shadow-slotted-nested-expected.html: Added.
+        * fast/shadow-dom/css-scoping-shadow-slotted-nested.html: Added.
+
 2016-02-28  Tim Horton  <timothy_horton@apple.com>
 
         Switch to application/vnd.apple.folder for <attachment> folder special-case

diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-nested-expected.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-nested-expected.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div style="width: 100px; height: 100px; background: green;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-nested.html b/LayoutTests/fast/shadow-dom/css-scoping-shadow-slotted-nested.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Scoping - ::slotted pseudo element rule must apply to an element that got slotted via another slot</title>
+    <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
+    <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
+    <link rel="match" href="reference/green-box.html"/>
+</head>
+<body>
+    <style>
+        outer-host {
+            display: block;
+            width: 100px;
+            height: 100px;
+            background: red;
+        }
+        outer-host > * {
+            display: block;
+            width: 100px;
+            height: 25px;
+        }
+    </style>
+    <p>Test passes if you see a single 100px by 100px green box below.</p> 
+    <outer-host>
+        <span slot="outer">FAIL1</span>
+        <span slot="inner">FAIL2</span>
+        <span slot="both">FAIL3</span>
+    </outer-host>
+    <template id="outer-host-template">
+        <inner-host>
+            <style>
+                ::slotted([slot=outer]) { background: green; color: green; }
+                ::slotted([slot=both]) { background: green; }
+                span { display: block; width: 100px; height: 25px; }
+            </style>
+            <slot name="outer"></slot>
+            <slot name="inner"></slot>
+            <slot name="both"></slot>
+            <span slot="inner">FAIL4</span>
+        </inner-host>
+    </template>
+    <template id="inner-host-template">
+        <style>
+            ::slotted([slot=inner]) { background: green; color: green; }
+            ::slotted([slot=both]) { color: green; }
+        </style>
+        <slot></slot>
+        <slot name="inner"></slot>
+    </template>
+    <script>
+
+        try {
+            var outerHost = document.querySelector('outer-host');
+            outerShadow = outerHost.attachShadow({mode: 'closed'});
+            outerShadow.appendChild(document.getElementById('outer-host-template').content.cloneNode(true));
+
+            var innerHost = outerShadow.querySelector('inner-host');
+            innerShadow = innerHost.attachShadow({mode: 'closed'});
+            innerShadow.appendChild(document.getElementById('inner-host-template').content.cloneNode(true));
+        } catch (exception) {
+            document.body.appendChild(document.createTextNode(exception));
+        }
+
+    </script>
+</body>
+</html>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,20 @@
+2016-02-28  Antti Koivisto  <antti@apple.com>
+
+        ::slotted doesn't work in nested shadow trees
+        https://bugs.webkit.org/show_bug.cgi?id=154765
+        <rdar://problem/24870995>
+
+        Reviewed by Ryosuke Niwa.
+
+        See https://github.com/w3c/webcomponents/issues/331#issuecomment-189191593
+
+        Test: fast/shadow-dom/css-scoping-shadow-slotted-nested.html
+
+        * css/ElementRuleCollector.cpp:
+        (WebCore::ElementRuleCollector::matchSlottedPseudoElementRules):
+
+        Collect ::slotted rules from all the nested shadow trees instead of just the host's.
+
 2016-02-28  Chris Dumez  <cdumez@apple.com>
 
         Parse HTMLOLElement.start as per the HTML spec

diff --git a/Source/WebCore/css/ElementRuleCollector.cpp b/Source/WebCore/css/ElementRuleCollector.cpp
@@ -249,18 +249,24 @@ void ElementRuleCollector::matchHostPseudoClassRules(bool includeEmptyRules)
 
 void ElementRuleCollector::matchSlottedPseudoElementRules(bool includeEmptyRules)
 {
-    auto* hostShadowRoot = m_element.parentNode()->shadowRoot();
-    ASSERT(hostShadowRoot);
-    auto* slot = hostShadowRoot->findAssignedSlot(m_element);
-    if (!slot)
-        return;
-    auto* shadowAuthorStyle = hostShadowRoot->styleResolver().ruleSets().authorStyle();
-    if (!shadowAuthorStyle)
-        return;
-    // Find out if there are any ::slotted rules in the shadow tree matching the current slot.
-    // FIXME: This is really part of the slot style and could be cached when resolving it.
-    ElementRuleCollector collector(*slot, *shadowAuthorStyle, nullptr);
-    auto slottedPseudoElementRules = collector.collectSlottedPseudoElementRulesForSlot(includeEmptyRules);
+    RuleSet::RuleDataVector slottedPseudoElementRules;
+
+    auto* maybeSlotted = &m_element;
+    for (auto* hostShadowRoot = m_element.parentNode()->shadowRoot(); hostShadowRoot; hostShadowRoot = maybeSlotted->parentNode()->shadowRoot()) {
+        auto* slot = hostShadowRoot->findAssignedSlot(*maybeSlotted);
+        if (!slot)
+            break;
+        // In nested case the slot may itself be assigned to a slot. Collect ::slotted rules from all the nested trees.
+        maybeSlotted = slot;
+        auto* shadowAuthorStyle = hostShadowRoot->styleResolver().ruleSets().authorStyle();
+        if (!shadowAuthorStyle)
+            continue;
+        // Find out if there are any ::slotted rules in the shadow tree matching the current slot.
+        // FIXME: This is really part of the slot style and could be cached when resolving it.
+        ElementRuleCollector collector(*slot, *shadowAuthorStyle, nullptr);
+        slottedPseudoElementRules.appendVector(collector.collectSlottedPseudoElementRulesForSlot(includeEmptyRules));
+    }
+
     if (slottedPseudoElementRules.isEmpty())
         return;