COMMIT_MESSAGE

[CSS Container Queries] Correctly resolve queries when container size is affected by a subsequent sibling
 
https://bugs.webkit.org/show_bug.cgi?id=241457

Reviewed by NOBODY (OOPS!).

We currently only take style changes before the container into account.

This patch changes the query container resolution so that whenever we encounter a query container

we skip the subtree and restart the resolution from the main resolution loop. This way we

can optimize away unnecessary layouts while also handling backward dependencies.

* LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency-expected.txt:

* Source/WebCore/dom/Document.cpp:

(WebCore::Document::resolveStyle):

Loop also when there are no style changes to apply but there are unresolved container. In this case we just resume

the style resolution where we left it.

* Source/WebCore/dom/Element.cpp:

(WebCore::Element::invalidateForQueryContainerChange):

Invalidate all descendants when a query container is resized. In practice we ended up computing them all anyway.

* Source/WebCore/style/StyleChange.cpp:

(WebCore::Style::determineChange):

* Source/WebCore/style/StyleChange.h:

Add new Descendants value for when container type or name changes.

* Source/WebCore/style/StyleTreeResolver.cpp:

(WebCore::Style::TreeResolver::computeDescendantsToResolve):

(WebCore::Style::TreeResolver::pushParent):

(WebCore::Style::TreeResolver::popParent):

(WebCore::Style::TreeResolver::resolveComposedTree):

(WebCore::Style::TreeResolver::determineQueryContainerAction):

Use two buckets for unresolved and resolved containers. Use the resolved bucket to avoid

recomputing containers we have resolved already.

(WebCore::Style::TreeResolver::resolve):

Move the containers from the unresolved to resolved bucket in the beginning.

(WebCore::Style::TreeResolver::updateQueryContainer): Deleted.

* Source/WebCore/style/StyleTreeResolver.h:

Source/WebCore/dom/Document.cpp

@@void Document::resolveStyle(ResolveStyleType type)

        Style::TreeResolver resolver(*this, WTFMove(m_pendingRenderTreeUpdate));

        auto styleUpdate = resolver.resolve();

        while (resolver.hasUnresolvedQueryContainers() && styleUpdate) {

            SetForScope resolvingContainerQueriesScope(m_isResolvingContainerQueries, true);

            updateRenderTree(WTFMove(styleUpdate));

            if (frameView.layoutContext().needsLayout())

                frameView.layoutContext().layout();

        while (resolver.hasUnresolvedQueryContainers()) {

            if (styleUpdate) {

                SetForScope resolvingContainerQueriesScope(m_isResolvingContainerQueries, true);

                updateRenderTree(WTFMove(styleUpdate));

                if (frameView.layoutContext().needsLayout())

                    frameView.layoutContext().layout();

            }

            styleUpdate = resolver.resolve();

        }

Source/WebCore/dom/Element.cpp

@@void Element::invalidateStyleForSubtreeInternal()

void Element::invalidateForQueryContainerChange()

{

2270 // FIXME: ~~This~~ ~~doesn't r~~eally need to recompute the el~~eme~~nt s~~tyl~~e.

2271 Node::invalidateStyle(Style::Validity::Elem~~ent~~Invalid);

2270 // FIXME: Ideally we would just recompute things that are actually affected by containers queries within the subtree.

2271 Node::invalidateStyle(Style::Validity::SubtreeInvalid);

}

void Element::invalidateEventListenerRegions()

Source/WebCore/style/StyleChange.cpp

@@Change determineChange(const RenderStyle& s1, const RenderStyle& s2)

    if (s1.hasTextCombine() != s2.hasTextCombine())

        return Change::Renderer;

    if (!s1.descendantAffectingNonInheritedPropertiesEqual(s2))

        return Change::Inherited;

6360 // Query container changes affect descendant style.

6461 if (s1.containerType() != s2.containerType() || s1.containerNames() != s2.containerNames())

        return Change::Descendants;

    if (!s1.descendantAffectingNonInheritedPropertiesEqual(s2))

        return Change::Inherited;

    if (!s1.nonFastPathInheritedEqual(s2))

Source/WebCore/style/StyleChange.h

@@enum class Change : uint8_t {

    NonInherited,

    FastPathInherited,

    Inherited,

39 Descendants,

    Renderer

};

Source/WebCore/style/StyleTreeResolver.cpp

@@auto TreeResolver::computeDescendantsToResolve(Change change, Validity validity,

    case Change::FastPathInherited:

    case Change::Inherited:

        return DescendantsToResolve::Children;

202 case Change::Descendants:

203 return DescendantsToResolve::All;

    case Change::Renderer:

        return DescendantsToResolve::All;

    };

@@ElementUpdate TreeResolver::createAnimatedElementUpdate(std::unique_ptr<RenderSt

void TreeResolver::pushParent(Element& element, const RenderStyle& style, Change change, DescendantsToResolve descendantsToResolve)

{

    scope().selectorMatchingState.selectorFilter.pushParent(&element);

630 if (style.containerType() != ContainerType::None)

631 scope().selectorMatchingState.queryContainers.append(element);

    Parent parent(element, style, change, descendantsToResolve);

@@void TreeResolver::popParent()

    auto& parentElement = *parent().element;

    parentElement.setHasValidStyle();

648 parentElement.clearChildNeedsStyleRecalc();

    // Don't clear the child flag if the are unresolved containers because we are going to resume the style resolution.

    if (m_unresolvedQueryContainers.isEmpty())

        parentElement.clearChildNeedsStyleRecalc();

    if (parent().didPushScope)

        popScope();

@@void TreeResolver::resolveComposedTree()

        if (!style)

            resetStyleForNonRenderedDescendants(element);

837 b~~ool~~ ~~shouldIt~~era~~teChildre~~n = styl~~e &&~~ (element~~.childNeed~~sStyleR~~ecalc() || descendantsToResolve != DescendantsToResolve::Non~~e);

843 auto queryContainerAction = determineQueryContainerAction(element, style, previousContainerType);

838844

839 if (style && updateQueryContainer(element, *style, previousContainerType) == QueryContainerAction::Layout)

840 shouldIterateChildren = false;

        bool shouldIterateChildren = [&] {

            // display::none, no need to resolve descendants.

            if (!style)

                return false;

            // Style resolution will be resumed after the container has been resolved.

            if (queryContainerAction == QueryContainerAction::Resolve)

                return false;

            return element.childNeedsStyleRecalc() || descendantsToResolve != DescendantsToResolve::None;

        }();

        // Ensure we respect DescendantsToResolve::All after resuming the style resolution.

        if (queryContainerAction == QueryContainerAction::Resolve && descendantsToResolve == DescendantsToResolve::All)

            element.invalidateStyleForSubtreeInternal();

        if (!m_didSeePendingStylesheet)

            m_didSeePendingStylesheet = hasLoadingStylesheet(m_document.styleScope(), element, !shouldIterateChildren);

@@void TreeResolver::resolveComposedTree()

    popParentsToDepth(1);

}

863 auto TreeResolver::updateQueryContainer(Element& element, const RenderStyle& style, ContainerType previousContainerType) -> QueryContainerAction

880auto TreeResolver::determineQueryContainerAction(Element& element, const RenderStyle* style, ContainerType previousContainerType) -> QueryContainerAction

864881{

    if (style.containerType() != ContainerType::None)

        scope().selectorMatchingState.queryContainers.append(element);

    if (m_unresolvedQueryContainers.remove(&element))

        return QueryContainerAction::Continue;

882 if (!style)

883 return QueryContainerAction::None;

870884

    // Render tree needs to be updated before proceeding to children also if we have a former query container

    // because container query resolution for descendants relies on it being up-to-date.

    if (style.containerType() == ContainerType::None && previousContainerType == ContainerType::None)

    // FIXME: Render tree needs to be updated before proceeding to children also if we have a former query container

    // because container unit resolution for descendants relies on it being up-to-date.

    if (style->containerType() == ContainerType::None && previousContainerType == ContainerType::None)

874888 return QueryContainerAction::None;

875889

876 if (m_~~upd~~at~~e->isE~~mp~~ty(~~))

877 return QueryContainerAction::C~~ontinu~~e;

890 if (m_resolvedQueryContainers.contains(&element))

891 return QueryContainerAction::None;

878892

879 // Bail out from TreeResolver to build a render tree and do a layout. Resolution continues after.

880893 m_unresolvedQueryContainers.add(&element);

881 return QueryContainerAction::~~Layout~~;

894 return QueryContainerAction::Resolve;

}

std::unique_ptr<Update> TreeResolver::resolve()

{

    m_resolvedQueryContainers.add(m_unresolvedQueryContainers.begin(), m_unresolvedQueryContainers.end());

    m_unresolvedQueryContainers.clear();

    Element* documentElement = m_document.documentElement();

    if (!documentElement) {

        m_document.styleScope().resolver();

        return nullptr;

    }

    // FIXME: Just need to restore the ancestor marking.

    for (auto& queryContainer : m_unresolvedQueryContainers)

        queryContainer->invalidateStyleForSubtreeInternal();

    if (!documentElement->childNeedsStyleRecalc() && !documentElement->needsStyleRecalc())

        return WTFMove(m_update);

Source/WebCore/style/StyleTreeResolver.h

@@private:

    void resolveComposedTree();

66 enum class QueryContainerAction : uint8_t { None, C~~ontinue, Layout~~ };

67 QueryContainerAction updateQueryContainer(Element&, const RenderStyle&, ContainerType previousContainerType);

66 enum class QueryContainerAction : uint8_t { None, Resolve };

67 QueryContainerAction determineQueryContainerAction(Element&, const RenderStyle*, ContainerType previousContainerType);

    enum class DescendantsToResolve : uint8_t { None, ChildrenWithExplicitInherit, Children, All };

    std::pair<ElementUpdate, DescendantsToResolve> resolveElement(Element&, ResolutionType);

@@private:

    bool m_didSeePendingStylesheet { false };

    HashSet<RefPtr<Element>> m_unresolvedQueryContainers;

133 HashSet<RefPtr<Element>> m_resolvedQueryContainers;

    std::unique_ptr<Update> m_update;

};

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/sibling-layout-dependency-expected.txt

11XXXX

22

FAIL Sibling style mutation assert_equals: expected "10" but got "20"

FAIL Sibling style mutation, parent is affected assert_equals: expected "10" but got "20"

FAIL Sibling style mutation, ancestor is affected assert_equals: expected "10" but got "20"

FAIL Sibling text mutation assert_equals: expected "10" but got "20"

PASS Sibling style mutation

PASS Sibling style mutation, parent is affected

PASS Sibling style mutation, ancestor is affected

PASS Sibling text mutation

77