Changeset 213712 in webkit

Timestamp:

Mar 10, 2017 8:01:50 AM (7 years ago)

Author:

Antti Koivisto

Message:

Source/WebCore:
Allow the page to render before <link> stylesheet tags in body
​https://bugs.webkit.org/show_bug.cgi?id=149157
<rdar://problem/24658830>

Reviewed by Simon Fraser.

Currently we block style and renderer building completely if document has any loading
stylesheets. In case a script queries something layout dependent we construct the render
tree with whatever style we have but block painting in it.

This patch changes behavior so that a loading stylesheet in body only blocks rendering for elements
that are after it. The expectation is that such stylesheets rarely affect elements before them
and the elements can be rendered without causing ugly visible styling changes.

The patch replaces the old flash-of-unstyled-content (FOUC) preventation mechanism with a more
fine-grained one. Paint blocking is now done on per-renderer basis with based on isNonFinal flag in
RenderStyle.

For stylesheets in head the behavior should be largely unchanged.

Test: http/tests/incremental/stylesheet-body-incremental-rendering.html

• css/StyleResolver.cpp:

(WebCore::StyleResolver::pseudoStyleRulesForElement):

• dom/Document.cpp:

(WebCore::Document::Document):
(WebCore::Document::resolveStyle):
(WebCore::Document::updateLayoutIgnorePendingStylesheets):

Remove the old FOUC preventation state tracking.

(WebCore::Document::shouldScheduleLayout):
(WebCore::Document::didRemoveAllPendingStylesheet):

Repaints will now get triggered by the normal style mechanism.

• dom/Document.h:

(WebCore::Document::hasNodesWithNonFinalStyle):
(WebCore::Document::setHasNodesWithNonFinalStyle):

Track if we need to recompute the style later because non-final or unstyled elements.

(WebCore::Document::didLayoutWithPendingStylesheets): Deleted.
(WebCore::Document::hasNodesWithPlaceholderStyle): Deleted.
(WebCore::Document::setHasNodesWithPlaceholderStyle): Deleted.

• html/HTMLFrameSetElement.cpp:

(WebCore::HTMLFrameSetElement::rendererIsNeeded):

• page/FrameView.cpp:

(WebCore::FrameView::qualifiesAsVisuallyNonEmpty):

Don't qualify as visually non-empty if we have loading stylesheets in head (even if there is
a fouc-prevented render tree).

(WebCore::FrameView::fireLayoutRelatedMilestonesIfNeeded):

• rendering/RenderBlock.cpp:

(WebCore::RenderBlock::paintContents):

Instead of a global test, block painting if isNonFinal is set in the renderer's style.

• rendering/RenderLayer.cpp:

(WebCore::shouldSuppressPaintingLayer):

• rendering/style/RenderStyle.cpp:

(WebCore::RenderStyle::changeRequiresRepaint):

The isNonFinal flag prevents painting so we need to trigger repaint when it gets cleared.

• rendering/style/RenderStyle.h:

(WebCore::RenderStyle::isNotFinal):
(WebCore::RenderStyle::setIsNotFinal):
(WebCore::RenderStyle::isPlaceholderStyle): Deleted.
(WebCore::RenderStyle::setIsPlaceholderStyle): Deleted.

There is no need for placeholder styles anymore. Reuse the bit for isNotFinal.

• rendering/style/StyleRareNonInheritedData.cpp:

(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator==):

• rendering/style/StyleRareNonInheritedData.h:
• style/StyleScope.cpp:

(WebCore::Style::Scope::analyzeStyleSheetChange):
(WebCore::Style::Scope::updateActiveStyleSheets):

• style/StyleTreeResolver.cpp:

(WebCore::Style::TreeResolver::styleForElement):
(WebCore::Style::TreeResolver::resolveElement):

If we have seens a loading stylesheet and don't have a renderer yet don't style the element.
In case there is a renderer or we are ignoring pending sheets, resolve the style normally
but mark it as non-final.

(WebCore::Style::makePlaceholderStyle): Deleted.

LayoutTests:
Loading in-body stylesheets should not block rendering of elements before them
​https://bugs.webkit.org/show_bug.cgi?id=169345

Reviewed by Simon Fraser.

• http/tests/incremental/resources/delayed-css.php: Added.
• http/tests/incremental/stylesheet-body-incremental-rendering-expected.html: Added.
• http/tests/incremental/stylesheet-body-incremental-rendering.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/http/tests/incremental/resources/delayed-css.php (added)
• LayoutTests/http/tests/incremental/stylesheet-body-incremental-rendering-expected.html (added)
• LayoutTests/http/tests/incremental/stylesheet-body-incremental-rendering.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/css/StyleResolver.cpp (modified) (1 diff)
• Source/WebCore/dom/Document.cpp (modified) (7 diffs)
• Source/WebCore/dom/Document.h (modified) (2 diffs)
• Source/WebCore/html/HTMLFrameSetElement.cpp (modified) (1 diff)
• Source/WebCore/page/FrameView.cpp (modified) (2 diffs)
• Source/WebCore/rendering/RenderBlock.cpp (modified) (1 diff)
• Source/WebCore/rendering/RenderLayer.cpp (modified) (1 diff)
• Source/WebCore/rendering/style/RenderStyle.cpp (modified) (1 diff)
• Source/WebCore/rendering/style/RenderStyle.h (modified) (1 diff)
• Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp (modified) (3 diffs)
• Source/WebCore/rendering/style/StyleRareNonInheritedData.h (modified) (1 diff)
• Source/WebCore/style/StyleScope.cpp (modified) (2 diffs)
• Source/WebCore/style/StyleTreeResolver.cpp (modified) (4 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2017-03-10  Antti Koivisto  <antti@apple.com>
+
+        Loading in-body stylesheets should not block rendering of elements before them
+        https://bugs.webkit.org/show_bug.cgi?id=169345
+
+        Reviewed by Simon Fraser.
+
+        * http/tests/incremental/resources/delayed-css.php: Added.
+        * http/tests/incremental/stylesheet-body-incremental-rendering-expected.html: Added.
+        * http/tests/incremental/stylesheet-body-incremental-rendering.html: Added.
+
 2017-03-10  Antoine Quint  <graouts@apple.com>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2017-03-10  Antti Koivisto  <antti@apple.com>
+
+        Allow the page to render before <link> stylesheet tags in body
+        https://bugs.webkit.org/show_bug.cgi?id=149157
+        <rdar://problem/24658830>
+
+        Reviewed by Simon Fraser.
+
+        Currently we block style and renderer building completely if document has any loading
+        stylesheets. In case a script queries something layout dependent we construct the render
+        tree with whatever style we have but block painting in it.
+
+        This patch changes behavior so that a loading stylesheet in body only blocks rendering for elements
+        that are after it. The expectation is that such stylesheets rarely affect elements before them
+        and the elements can be rendered without causing ugly visible styling changes.
+
+        The patch replaces the old flash-of-unstyled-content (FOUC) preventation mechanism with a more
+        fine-grained one. Paint blocking is now done on per-renderer basis with based on isNonFinal flag in
+        RenderStyle.
+
+        For stylesheets in head the behavior should be largely unchanged.
+
+        Test: http/tests/incremental/stylesheet-body-incremental-rendering.html
+
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::pseudoStyleRulesForElement):
+        * dom/Document.cpp:
+        (WebCore::Document::Document):
+        (WebCore::Document::resolveStyle):
+        (WebCore::Document::updateLayoutIgnorePendingStylesheets):
+
+            Remove the old FOUC preventation state tracking.
+
+        (WebCore::Document::shouldScheduleLayout):
+        (WebCore::Document::didRemoveAllPendingStylesheet):
+
+            Repaints will now get triggered by the normal style mechanism.
+
+        * dom/Document.h:
+        (WebCore::Document::hasNodesWithNonFinalStyle):
+        (WebCore::Document::setHasNodesWithNonFinalStyle):
+
+            Track if we need to recompute the style later because non-final or unstyled elements.
+
+        (WebCore::Document::didLayoutWithPendingStylesheets): Deleted.
+        (WebCore::Document::hasNodesWithPlaceholderStyle): Deleted.
+        (WebCore::Document::setHasNodesWithPlaceholderStyle): Deleted.
+        * html/HTMLFrameSetElement.cpp:
+        (WebCore::HTMLFrameSetElement::rendererIsNeeded):
+        * page/FrameView.cpp:
+        (WebCore::FrameView::qualifiesAsVisuallyNonEmpty):
+
+            Don't qualify as visually non-empty if we have loading stylesheets in head (even if there is
+            a fouc-prevented render tree).
+
+        (WebCore::FrameView::fireLayoutRelatedMilestonesIfNeeded):
+        * rendering/RenderBlock.cpp:
+        (WebCore::RenderBlock::paintContents):
+
+            Instead of a global test, block painting if isNonFinal is set in the renderer's style.
+
+        * rendering/RenderLayer.cpp:
+        (WebCore::shouldSuppressPaintingLayer):
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::RenderStyle::changeRequiresRepaint):
+
+            The isNonFinal flag prevents painting so we need to trigger repaint when it gets cleared.
+
+        * rendering/style/RenderStyle.h:
+        (WebCore::RenderStyle::isNotFinal):
+        (WebCore::RenderStyle::setIsNotFinal):
+        (WebCore::RenderStyle::isPlaceholderStyle): Deleted.
+        (WebCore::RenderStyle::setIsPlaceholderStyle): Deleted.
+
+            There is no need for placeholder styles anymore. Reuse the bit for isNotFinal.
+
+        * rendering/style/StyleRareNonInheritedData.cpp:
+        (WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
+        (WebCore::StyleRareNonInheritedData::operator==):
+        * rendering/style/StyleRareNonInheritedData.h:
+        * style/StyleScope.cpp:
+        (WebCore::Style::Scope::analyzeStyleSheetChange):
+        (WebCore::Style::Scope::updateActiveStyleSheets):
+        * style/StyleTreeResolver.cpp:
+        (WebCore::Style::TreeResolver::styleForElement):
+        (WebCore::Style::TreeResolver::resolveElement):
+
+            If we have seens a loading stylesheet and don't have a renderer yet don't style the element.
+            In case there is a renderer or we are ignoring pending sheets, resolve the style normally
+            but mark it as non-final.
+
+        (WebCore::Style::makePlaceholderStyle): Deleted.
+
 2017-03-10  Antti Koivisto  <antti@apple.com>
 

trunk/Source/WebCore/css/StyleResolver.cpp

@@ -1124 +1124 @@
 Vector<RefPtr<StyleRule>> StyleResolver::pseudoStyleRulesForElement(const Element* element, PseudoId pseudoId, unsigned rulesToInclude)
 {
-    if (!element || !element->document().haveStylesheetsLoaded())
-        return Vector<RefPtr<StyleRule>>();
+    if (!element)
+        return { };
 
     m_state = State(*element, nullptr);

trunk/Source/WebCore/dom/Document.cpp

@@ -443 +443 @@
     , m_referencingNodeCount(0)
     , m_settings(frame ? Ref<Settings>(frame->settings()) : Settings::create(nullptr))
-    , m_hasNodesWithPlaceholderStyle(false)
+    , m_hasNodesWithNonFinalStyle(false)
     , m_ignorePendingStylesheets(false)
-    , m_pendingSheetLayout(NoLayoutWithPendingSheets)
     , m_cachedResourceLoader(m_frame ? Ref<CachedResourceLoader>(m_frame->loader().activeDocumentLoader()->cachedResourceLoader()) : CachedResourceLoader::create(nullptr))
     , m_activeParserCount(0)
@@ -1783 +1782 @@
         if (type == ResolveStyleType::Rebuild) {
             // This may get set again during style resolve.
-            m_hasNodesWithPlaceholderStyle = false;
+            m_hasNodesWithNonFinalStyle = false;
 
             auto documentStyle = Style::resolveForDocument(*this);
@@ -1819 +1818 @@
 
         updatedCompositingLayers = frameView.updateCompositingLayersAfterStyleChange();
+
+        if (m_renderView->needsLayout())
+            frameView.scheduleRelayout();
     }
 
@@ -1912 +1914 @@
 }
 
-// FIXME: This is a bad idea and needs to be removed eventually.
-// Other browsers load stylesheets before they continue parsing the web page.
-// Since we don't, we can run JavaScript code that needs answers before the
-// stylesheets are loaded. Doing a layout ignoring the pending stylesheets
-// lets us get reasonable answers. The long term solution to this problem is
-// to instead suspend JavaScript execution.
 void Document::updateLayoutIgnorePendingStylesheets(Document::RunPostLayoutTasks runPostLayoutTasks)
 {
@@ -1924 +1920 @@
     if (!haveStylesheetsLoaded()) {
         m_ignorePendingStylesheets = true;
-        // FIXME: We are willing to attempt to suppress painting with outdated style info only once.  Our assumption is that it would be
-        // dangerous to try to stop it a second time, after page content has already been loaded and displayed
-        // with accurate style information.  (Our suppression involves blanking the whole page at the
-        // moment.  If it were more refined, we might be able to do something better.)
-        // It's worth noting though that this entire method is a hack, since what we really want to do is
-        // suspend JS instead of doing a layout with inaccurate information.
-        HTMLElement* bodyElement = bodyOrFrameset();
-        if (bodyElement && !bodyElement->renderer() && m_pendingSheetLayout == NoLayoutWithPendingSheets) {
-            m_pendingSheetLayout = DidLayoutWithPendingSheets;
-            styleScope().didChangeActiveStyleSheetCandidates();
-            resolveStyle(ResolveStyleType::Rebuild);
-        } else if (m_hasNodesWithPlaceholderStyle)
-            // If new nodes have been added or style recalc has been done with style sheets still pending, some nodes 
-            // may not have had their real style calculated yet. Normally this gets cleaned when style sheets arrive 
-            // but here we need up-to-date style immediately.
+        // FIXME: This should just invalidate elements with non-final styles.
+        if (m_hasNodesWithNonFinalStyle)
             resolveStyle(ResolveStyleType::Rebuild);
     }
@@ -2772 +2755 @@
 bool Document::shouldScheduleLayout()
 {
-    // This function will only be called when FrameView thinks a layout is needed.
-    // This enforces a couple extra rules.
-    //
-    //    (a) Only schedule a layout once the stylesheets are loaded.
-    //    (b) Only schedule layout once we have a body element.
-
-    return (haveStylesheetsLoaded() && bodyOrFrameset())
-        || (documentElement() && !is<HTMLHtmlElement>(*documentElement()));
+    if (!documentElement())
+        return false;
+    if (!is<HTMLHtmlElement>(*documentElement()))
+        return true;
+    if (!bodyOrFrameset())
+        return false;
+    if (styleScope().hasPendingSheetsBeforeBody())
+        return false;
+
+    return true;
 }
     
@@ -3083 +3068 @@
 void Document::didRemoveAllPendingStylesheet()
 {
-    if (m_pendingSheetLayout == DidLayoutWithPendingSheets) {
-        // Painting is disabled when doing layouts with pending sheets to avoid FOUC.
-        // We need to force paint when coming out from this state.
-        // FIXME: This is not very elegant.
-        m_pendingSheetLayout = IgnoreLayoutWithPendingSheets;
-        if (renderView())
-            renderView()->repaintViewAndCompositedLayers();
-    }
-
     if (auto* parser = scriptableDocumentParser())
         parser->executeScriptsWaitingForStylesheetsSoon();

trunk/Source/WebCore/dom/Document.h

@@ -937 +937 @@
     WEBCORE_EXPORT ExceptionOr<Ref<XPathResult>> evaluate(const String& expression, Node* contextNode, RefPtr<XPathNSResolver>&&, unsigned short type, XPathResult*);
 
-    enum PendingSheetLayout { NoLayoutWithPendingSheets, DidLayoutWithPendingSheets, IgnoreLayoutWithPendingSheets };
-
-    bool didLayoutWithPendingStylesheets() const { return m_pendingSheetLayout == DidLayoutWithPendingSheets; }
-
-    bool hasNodesWithPlaceholderStyle() const { return m_hasNodesWithPlaceholderStyle; }
-    void setHasNodesWithPlaceholderStyle() { m_hasNodesWithPlaceholderStyle = true; }
+    bool hasNodesWithNonFinalStyle() const { return m_hasNodesWithNonFinalStyle; }
+    void setHasNodesWithNonFinalStyle() { m_hasNodesWithNonFinalStyle = true; }
 
     void updateFocusAppearanceSoon(SelectionRestorationMode);
@@ -1386 +1382 @@
 
     std::unique_ptr<StyleResolver> m_userAgentShadowTreeStyleResolver;
-    bool m_hasNodesWithPlaceholderStyle;
+    bool m_hasNodesWithNonFinalStyle;
     // But sometimes you need to ignore pending stylesheet count to
     // force an immediate layout when requested by JS.
     bool m_ignorePendingStylesheets;
-
-    // If we do ignore the pending stylesheet count, then we need to add a boolean
-    // to track that this happened so that we can do a full repaint when the stylesheets
-    // do eventually load.
-    PendingSheetLayout m_pendingSheetLayout;
 
     RefPtr<DOMWindow> m_domWindow;

trunk/Source/WebCore/html/HTMLFrameSetElement.cpp

@@ -154 +154 @@
     // For compatibility, frames render even when display: none is set.
     // However, we delay creating a renderer until stylesheets have loaded. 
-    return !style.isPlaceholderStyle();
+    return !style.isNotFinal();
 }
 

trunk/Source/WebCore/page/FrameView.cpp

@@ -4630 +4630 @@
         return true;
 
+    // FIXME: We should also ignore renderers with non-final style.
+    if (frame().document()->styleScope().hasPendingSheetsBeforeBody())
+        return false;
+
     // Require the document to grow a bit.
     // Using a value of 48 allows the header on Google's search page to render immediately before search results populate later.
@@ -5172 +5176 @@
 
     // If the layout was done with pending sheets, we are not in fact visually non-empty yet.
-    if (m_isVisuallyNonEmpty && !frame().document()->didLayoutWithPendingStylesheets() && m_firstVisuallyNonEmptyLayoutCallbackPending) {
+    if (m_isVisuallyNonEmpty &&m_firstVisuallyNonEmptyLayoutCallbackPending) {
         m_firstVisuallyNonEmptyLayoutCallbackPending = false;
         if (requestedMilestones & DidFirstVisuallyNonEmptyLayout)

trunk/Source/WebCore/rendering/RenderBlock.cpp

@@ -1570 +1570 @@
 void RenderBlock::paintContents(PaintInfo& paintInfo, const LayoutPoint& paintOffset)
 {
-    // Avoid painting descendants of the root element when stylesheets haven't loaded.  This eliminates FOUC.
-    // It's ok not to draw, because later on, when all the stylesheets do load, styleResolverChanged() on the Document
-    // will do a full repaint.
-    if (document().didLayoutWithPendingStylesheets() && !isRenderView())
+    // Style is non-final if the element has a pending stylesheet before it. We end up with renderers with such styles if a script
+    // forces renderer construction by querying something layout dependent.
+    // Avoid FOUC by not painting. Switching to final style triggers repaint.
+    if (style().isNotFinal())
         return;
 

trunk/Source/WebCore/rendering/RenderLayer.cpp

@@ -3940 +3940 @@
 static inline bool shouldSuppressPaintingLayer(RenderLayer* layer)
 {
-    // Avoid painting descendants of the root layer when stylesheets haven't loaded. This eliminates FOUC.
-    // It's ok not to draw, because later on, when all the stylesheets do load, updateStyleSelector on the Document
-    // will do a full repaint().
-    if (layer->renderer().document().didLayoutWithPendingStylesheets() && !layer->isRootLayer() && !layer->renderer().isDocumentElementRenderer())
+    if (layer->renderer().style().isNotFinal() && !layer->isRootLayer() && !layer->renderer().isDocumentElementRenderer())
         return true;
 

trunk/Source/WebCore/rendering/style/RenderStyle.cpp

@@ -854 +854 @@
         return true;
 
+    if (m_rareNonInheritedData->isNotFinal != other.m_rareNonInheritedData->isNotFinal)
+        return true;
+
     if (m_rareNonInheritedData->shapeOutside != other.m_rareNonInheritedData->shapeOutside)
         return true;

trunk/Source/WebCore/rendering/style/RenderStyle.h

@@ -1654 +1654 @@
 #endif
 
-    bool isPlaceholderStyle() const { return m_rareNonInheritedData->isPlaceholderStyle; }
-    void setIsPlaceholderStyle() { SET_VAR(m_rareNonInheritedData, isPlaceholderStyle, true); }
+    // Indicates the style is likely to change due to a pending stylesheet load.
+    bool isNotFinal() const { return m_rareNonInheritedData->isNotFinal; }
+    void setIsNotFinal() { SET_VAR(m_rareNonInheritedData, isNotFinal, true); }
 
     void setVisitedLinkColor(const Color&);

trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp

@@ -108 +108 @@
     , resize(RenderStyle::initialResize())
     , hasAttrContent(false)
-    , isPlaceholderStyle(false)
+    , isNotFinal(false)
 {
     maskBoxImage.setMaskDefaults();
@@ -201 +201 @@
     , resize(o.resize)
     , hasAttrContent(o.hasAttrContent)
-    , isPlaceholderStyle(o.isPlaceholderStyle)
+    , isNotFinal(o.isNotFinal)
 {
 }
@@ -305 +305 @@
         && resize == o.resize
         && hasAttrContent == o.hasAttrContent
-        && isPlaceholderStyle == o.isPlaceholderStyle;
+        && isNotFinal == o.isNotFinal;
 }
 

trunk/Source/WebCore/rendering/style/StyleRareNonInheritedData.h

@@ -221 +221 @@
     unsigned hasAttrContent : 1;
 
-    unsigned isPlaceholderStyle : 1;
+    unsigned isNotFinal : 1;
 
 private:

trunk/Source/WebCore/style/StyleScope.cpp

@@ -390 +390 @@
 
     // If we are already parsing the body and so may have significant amount of elements, put some effort into trying to avoid style recalcs.
-    if (!m_document.bodyOrFrameset() || m_document.hasNodesWithPlaceholderStyle())
+    if (!m_document.bodyOrFrameset() || m_document.hasNodesWithNonFinalStyle())
         return styleResolverUpdateType;
 
@@ -441 +441 @@
     // Don't bother updating, since we haven't loaded all our style info yet
     // and haven't calculated the style resolver for the first time.
-    if (!m_shadowRoot && !m_didUpdateActiveStyleSheets && hasPendingSheets()) {
+    if (!m_shadowRoot && !m_didUpdateActiveStyleSheets && hasPendingSheetsBeforeBody()) {
         clearResolver();
         return;

trunk/Source/WebCore/style/StyleTreeResolver.cpp

@@ -52 +52 @@
 namespace Style {
 
-static std::unique_ptr<RenderStyle> makePlaceholderStyle(Document& document)
-{
-    auto placeholderStyle = RenderStyle::createPtr();
-    placeholderStyle->setDisplay(NONE);
-    placeholderStyle->setIsPlaceholderStyle();
-
-    FontCascadeDescription fontDescription;
-    fontDescription.setOneFamily(standardFamily);
-    fontDescription.setKeywordSizeFromIdentifier(CSSValueMedium);
-    float size = Style::fontSizeForKeyword(CSSValueMedium, false, document);
-    fontDescription.setSpecifiedSize(size);
-    fontDescription.setComputedSize(size);
-    placeholderStyle->setFontDescription(fontDescription);
-
-    placeholderStyle->fontCascade().update(&document.fontSelector());
-    return placeholderStyle;
-}
-
 TreeResolver::TreeResolver(Document& document)
     : m_document(document)
@@ -127 +109 @@
 std::unique_ptr<RenderStyle> TreeResolver::styleForElement(Element& element, const RenderStyle& inheritedStyle)
 {
-    if (m_didSeePendingStylesheet && !element.renderer() && !m_document.isIgnoringPendingStylesheets()) {
-        m_document.setHasNodesWithPlaceholderStyle();
-        return makePlaceholderStyle(m_document);
-    }
-
     if (element.hasCustomStyleResolveCallbacks()) {
         RenderStyle* shadowHostStyle = scope().shadowRoot ? m_update->elementStyle(*scope().shadowRoot->host()) : nullptr;
@@ -191 +168 @@
 ElementUpdate TreeResolver::resolveElement(Element& element)
 {
+    if (m_didSeePendingStylesheet && !element.renderer() && !m_document.isIgnoringPendingStylesheets()) {
+        m_document.setHasNodesWithNonFinalStyle();
+        return { };
+    }
+
     auto newStyle = styleForElement(element, parent().style);
 
@@ -196 +178 @@
         return { };
 
+    auto* existingStyle = element.renderStyle();
+
+    if (m_didSeePendingStylesheet && (!existingStyle || existingStyle->isNotFinal())) {
+        newStyle->setIsNotFinal();
+        m_document.setHasNodesWithNonFinalStyle();
+    }
+
     auto update = createAnimatedElementUpdate(WTFMove(newStyle), element, parent().change);
-
-    auto* existingStyle = element.renderStyle();
 
     if (&element == m_document.documentElement()) {