Changeset 224864 in webkit

Timestamp:

Nov 14, 2017, 5:15:21 PM (8 years ago)

Author:

Antti Koivisto

Message:

Media query with :host inside a custom elements doesn't get updated on window resize
​https://bugs.webkit.org/show_bug.cgi?id=176101
<rdar://problem/34163850>

Reviewed by Simon Fraser.

Source/WebCore:

If a media query containing :host or ::slotted stops applying we fail to update the style.

• style/StyleScope.cpp:

(WebCore::Style::invalidateHostAndSlottedStyleIfNeeded):

Factor into function.

(WebCore::Style::Scope::updateActiveStyleSheets):
(WebCore::Style::Scope::scheduleUpdate):

Invalidate elements that may match :host and ::slotted before clearing style resolver for full update.

LayoutTests:

Expand the existing test case to cover :host and ::slotted.

• fast/shadow-dom/media-query-in-shadow-style-expected.html:
• fast/shadow-dom/resources/media-query-in-shadow-style-frame.html:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/shadow-dom/media-query-in-shadow-style-expected.html (modified) (1 diff)
• LayoutTests/fast/shadow-dom/resources/media-query-in-shadow-style-frame.html (modified) (2 diffs)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/style/StyleScope.cpp (modified) (3 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2017-11-14  Antti Koivisto  <antti@apple.com>
+
+        Media query with :host inside a custom elements doesn't get updated on window resize
+        https://bugs.webkit.org/show_bug.cgi?id=176101
+        <rdar://problem/34163850>
+
+        Reviewed by Simon Fraser.
+
+        Expand the existing test case to cover :host and ::slotted.
+
+        * fast/shadow-dom/media-query-in-shadow-style-expected.html:
+        * fast/shadow-dom/resources/media-query-in-shadow-style-frame.html:
+
 2017-11-14  Ryan Haddad  <ryanhaddad@apple.com>
 

trunk/LayoutTests/fast/shadow-dom/media-query-in-shadow-style-expected.html

@@ -1 @@
-<iframe src="data:text/html,<span style='color:red'>Text</span>" width=150 height=50></iframe><br>
-<iframe src="data:text/html,<span style='color:green'>Text</span>" width=300 height=50></iframe><br>
-<iframe src="data:text/html,<span style='color:red'>Text</span>" width=150 height=50></iframe><br>
-<iframe src="data:text/html,<span style='color:green'>Text</span>" width=300 height=50></iframe><br>
+<iframe src="data:text/html,<div style='color:red'>Text</div>" width=150 height=50></iframe><br>
+<iframe src="data:text/html,<div style='color:green;background-color: lightgrey'>Text</div>" width=300 height=50></iframe><br>
+<iframe src="data:text/html,<div style='color:red'>Text</div>" width=150 height=50></iframe><br>
+<iframe src="data:text/html,<div style='color:green;background-color: lightgrey'>Text</div>" width=300 height=50></iframe><br>

trunk/LayoutTests/fast/shadow-dom/resources/media-query-in-shadow-style-frame.html

@@ -1 @@
-<div id=test></div>
+<div id=test><span>Text</span></div>
 <script>
 const shadow = test.attachShadow({mode: 'open'});
@@ -6 +6 @@
     @media (min-width:200px) {
         div { color: green }
+        :host { background-color: lightgrey }
     }
     @media (max-width:200px) {
-        div { color: red }
+        ::slotted(*) { color: red }
     }
     </style>
-    <div>Text</div>
+    <div><slot></slot></div>
 `;
 </script>

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2017-11-14  Antti Koivisto  <antti@apple.com>
+
+        Media query with :host inside a custom elements doesn't get updated on window resize
+        https://bugs.webkit.org/show_bug.cgi?id=176101
+        <rdar://problem/34163850>
+
+        Reviewed by Simon Fraser.
+
+        If a media query containing :host or ::slotted stops applying we fail to update the style.
+
+        * style/StyleScope.cpp:
+        (WebCore::Style::invalidateHostAndSlottedStyleIfNeeded):
+
+            Factor into function.
+
+        (WebCore::Style::Scope::updateActiveStyleSheets):
+        (WebCore::Style::Scope::scheduleUpdate):
+
+            Invalidate elements that may match :host and ::slotted before clearing style resolver for full update.
+
 2017-11-14  Carlos Garcia Campos  <cgarcia@igalia.com>
 

trunk/Source/WebCore/style/StyleScope.cpp

@@ -447 +447 @@
 }
 
+static void invalidateHostAndSlottedStyleIfNeeded(ShadowRoot& shadowRoot, StyleResolver& resolver)
+{
+    auto& host = *shadowRoot.host();
+    if (!resolver.ruleSets().authorStyle().hostPseudoClassRules().isEmpty())
+        host.invalidateStyle();
+
+    if (!resolver.ruleSets().authorStyle().slottedPseudoElementRules().isEmpty()) {
+        for (auto& shadowChild : childrenOfType<Element>(host))
+            shadowChild.invalidateStyle();
+    }
+}
+
 void Scope::updateActiveStyleSheets(UpdateType updateType)
 {
@@ -494 +506 @@
             for (auto& shadowChild : childrenOfType<Element>(*m_shadowRoot))
                 shadowChild.invalidateStyleForSubtree();
-            if (m_shadowRoot->host()) {
-                if (!resolver().ruleSets().authorStyle().hostPseudoClassRules().isEmpty())
-                    m_shadowRoot->host()->invalidateStyle();
-                if (!resolver().ruleSets().authorStyle().slottedPseudoElementRules().isEmpty()) {
-                    for (auto& shadowChild : childrenOfType<Element>(*m_shadowRoot->host()))
-                        shadowChild.invalidateStyle();
-                }
-            }
+            invalidateHostAndSlottedStyleIfNeeded(*m_shadowRoot, resolver());
         } else
             m_document.scheduleForcedStyleRecalc();
@@ -586 +591 @@
 void Scope::scheduleUpdate(UpdateType update)
 {
-    // FIXME: The m_isUpdatingStyleResolver test is here because extension stylesheets can get us here from StyleResolver::appendAuthorStyleSheets.
-    if (update == UpdateType::ContentsOrInterpretation && !m_isUpdatingStyleResolver)
-        clearResolver();
+    if (update == UpdateType::ContentsOrInterpretation) {
+        // :host and ::slotted rules might go away.
+        if (m_shadowRoot && m_resolver)
+            invalidateHostAndSlottedStyleIfNeeded(*m_shadowRoot, *m_resolver);
+        // FIXME: The m_isUpdatingStyleResolver test is here because extension stylesheets can get us here from StyleResolver::appendAuthorStyleSheets.
+        if (!m_isUpdatingStyleResolver)
+            clearResolver();
+    }
 
     if (!m_pendingUpdate || *m_pendingUpdate < update) {