Media query with :host inside a custom elements doesn't get updated on window resize
authorantti@apple.com <antti@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 15 Nov 2017 01:15:21 +0000 (01:15 +0000)
committerantti@apple.com <antti@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 15 Nov 2017 01:15:21 +0000 (01:15 +0000)
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:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@224864 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/shadow-dom/media-query-in-shadow-style-expected.html
LayoutTests/fast/shadow-dom/resources/media-query-in-shadow-style-frame.html
Source/WebCore/ChangeLog
Source/WebCore/style/StyleScope.cpp

index 3873950..a33d648 100644 (file)
@@ -1,3 +1,16 @@
+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>
 
         Mark fast/scrolling/rtl-scrollbars.html as flaky.
index 31f9a0a..d945b00 100644 (file)
@@ -1,4 +1,4 @@
-<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>
index 6bbf5b7..349ba3d 100644 (file)
@@ -1,15 +1,16 @@
-<div id=test></div>
+<div id=test><span>Text</span></div>
 <script>
 const shadow = test.attachShadow({mode: 'open'});
 shadow.innerHTML = `
     <style>
     @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>
index df7601a..e86be53 100644 (file)
@@ -1,3 +1,23 @@
+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>
 
         Move JSONValues to WTF and convert uses of InspectorValues.h to JSONValues.h
index 458b777..f09191e 100644 (file)
@@ -446,6 +446,18 @@ static void filterEnabledNonemptyCSSStyleSheets(Vector<RefPtr<CSSStyleSheet>>& r
     }
 }
 
+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)
 {
     ASSERT(!m_pendingUpdate);
@@ -493,14 +505,7 @@ void Scope::updateActiveStyleSheets(UpdateType updateType)
         if (m_shadowRoot) {
             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();
     }
@@ -585,9 +590,14 @@ void Scope::clearPendingUpdate()
 
 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) {
         m_pendingUpdate = update;