Changeset 292819 in webkit

Timestamp:

Apr 13, 2022 12:12:47 PM (3 months ago)

Author:

Antti Koivisto

Message:

[CSS Container Queries] Correct container selection for pseudo-elements
​https://bugs.webkit.org/show_bug.cgi?id=239279

Reviewed by Simon Fraser.

Source/WebCore:

The element itself may be the container for its pseudo-elements.

• css/CSSPrimitiveValue.cpp:

(WebCore::CSSPrimitiveValue::computeNonCalcLengthDouble):

• style/ContainerQueryEvaluator.cpp:

(WebCore::Style::ContainerQueryEvaluator::ContainerQueryEvaluator):
(WebCore::Style::ContainerQueryEvaluator::selectContainer const):
(WebCore::Style::ContainerQueryEvaluator::selectContainer):

• style/ContainerQueryEvaluator.h:

Instead of passing the pseudo-element being matched, pass a container selection mode flag. The exact pseudo-element type
doesn't matter.

• style/ElementRuleCollector.cpp:

(WebCore::Style::ElementRuleCollector::containerQueriesMatch):

We need to use the pseudo-element mode when matching a rule that matches a pseudo-element, even when we are not actually resolving
the pseudo element. This is because regular element rule matching sets the style bits that indicate what pseudo-elements the
element has.

LayoutTests:

• TestExpectations:

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/TestExpectations (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/css/CSSPrimitiveValue.cpp (modified) (1 diff)
• Source/WebCore/style/ContainerQueryEvaluator.cpp (modified) (5 diffs)
• Source/WebCore/style/ContainerQueryEvaluator.h (modified) (2 diffs)
• Source/WebCore/style/ElementRuleCollector.cpp (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2022-04-13  Antti Koivisto  <antti@apple.com>
+
+        [CSS Container Queries] Correct container selection for pseudo-elements
+        https://bugs.webkit.org/show_bug.cgi?id=239279
+
+        Reviewed by Simon Fraser.
+
+        * TestExpectations:
+
 2022-04-13  Alan Bujtas  <zalan@apple.com>
 

trunk/LayoutTests/TestExpectations

@@ -4702 +4702 @@
 # Container queries
 webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/custom-layout-container-001.https.html [ ImageOnlyFailure ]
-webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.html [ ImageOnlyFailure ]
 webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html [ Skip ]
 webkit.org/b/229659 imported/w3c/web-platform-tests/css/css-contain/container-queries/inline-size-bfc-floats.html [ ImageOnlyFailure ]

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2022-04-13  Antti Koivisto  <antti@apple.com>
+
+        [CSS Container Queries] Correct container selection for pseudo-elements
+        https://bugs.webkit.org/show_bug.cgi?id=239279
+
+        Reviewed by Simon Fraser.
+
+        The element itself may be the container for its pseudo-elements.
+
+        * css/CSSPrimitiveValue.cpp:
+        (WebCore::CSSPrimitiveValue::computeNonCalcLengthDouble):
+        * style/ContainerQueryEvaluator.cpp:
+        (WebCore::Style::ContainerQueryEvaluator::ContainerQueryEvaluator):
+        (WebCore::Style::ContainerQueryEvaluator::selectContainer const):
+        (WebCore::Style::ContainerQueryEvaluator::selectContainer):
+        * style/ContainerQueryEvaluator.h:
+
+        Instead of passing the pseudo-element being matched, pass a container selection mode flag. The exact pseudo-element type
+        doesn't matter.
+
+        * style/ElementRuleCollector.cpp:
+        (WebCore::Style::ElementRuleCollector::containerQueriesMatch):
+
+        We need to use the pseudo-element mode when matching a rule that matches a pseudo-element, even when we are not actually resolving
+        the pseudo element. This is because regular element rule matching sets the style bits that indicate what pseudo-elements the
+        element has.
+
 2022-04-13  Alan Bujtas  <zalan@apple.com>
 

trunk/Source/WebCore/css/CSSPrimitiveValue.cpp

@@ -827 +827 @@
             return nullptr;
         // FIXME: Use cached query containers when available.
-        auto* container = Style::ContainerQueryEvaluator::selectContainer(axis, nullString(), *conversionData.element(), nullptr);
+        auto* container = Style::ContainerQueryEvaluator::selectContainer(axis, nullString(), *conversionData.element());
         if (!container)
             return nullptr;

trunk/Source/WebCore/style/ContainerQueryEvaluator.cpp

@@ -45 +45 @@
 };
 
-ContainerQueryEvaluator::ContainerQueryEvaluator(const Element& element, PseudoId pseudoId, ScopeOrdinal scopeOrdinal, SelectorMatchingState* selectorMatchingState)
+ContainerQueryEvaluator::ContainerQueryEvaluator(const Element& element, SelectionMode selectionMode, ScopeOrdinal scopeOrdinal, SelectorMatchingState* selectorMatchingState)
     : m_element(element)
-    , m_pseudoId(pseudoId)
+    , m_selectionMode(selectionMode)
     , m_scopeOrdinal(scopeOrdinal)
     , m_selectorMatchingState(selectorMatchingState)
@@ -83 +83 @@
     auto* cachedQueryContainers = m_selectorMatchingState ? &m_selectorMatchingState->queryContainers : nullptr;
 
-    auto* container = selectContainer(filteredContainerQuery.axisFilter, filteredContainerQuery.nameFilter, m_element.get(), cachedQueryContainers, m_pseudoId, m_scopeOrdinal);
+    auto* container = selectContainer(filteredContainerQuery.axisFilter, filteredContainerQuery.nameFilter, m_element.get(), m_selectionMode, m_scopeOrdinal, cachedQueryContainers);
     if (!container)
         return { };
@@ -90 +90 @@
 }
 
-const Element* ContainerQueryEvaluator::selectContainer(OptionSet<CQ::Axis> axes, const String& name, const Element& element, const CachedQueryContainers* cachedQueryContainers, PseudoId pseudoId, ScopeOrdinal scopeOrdinal)
+const Element* ContainerQueryEvaluator::selectContainer(OptionSet<CQ::Axis> axes, const String& name, const Element& element, SelectionMode selectionMode, ScopeOrdinal scopeOrdinal, const CachedQueryContainers* cachedQueryContainers)
 {
     // "For each element, the query container to be queried is selected from among the element’s
@@ -145 +145 @@
     }
 
+    if (selectionMode == SelectionMode::PseudoElement) {
+        if (isContainerForQuery(element))
+            return &element;
+    }
+
     if (cachedQueryContainers) {
         for (auto& container : makeReversedRange(*cachedQueryContainers)) {
@@ -151 +156 @@
         }
         return { };
-    }
-
-    if (pseudoId != PseudoId::None) {
-        if (isContainerForQuery(element))
-            return &element;
     }
 

trunk/Source/WebCore/style/ContainerQueryEvaluator.h

@@ -40 +40 @@
 class ContainerQueryEvaluator {
 public:
-    ContainerQueryEvaluator(const Element&, PseudoId, ScopeOrdinal, SelectorMatchingState*);
+    enum class SelectionMode : bool { Element, PseudoElement };
+    ContainerQueryEvaluator(const Element&, SelectionMode, ScopeOrdinal, SelectorMatchingState*);
 
     bool evaluate(const FilteredContainerQuery&) const;
 
-    static const Element* selectContainer(OptionSet<CQ::Axis>, const String& name, const Element&, const CachedQueryContainers*, PseudoId = PseudoId::None, ScopeOrdinal = ScopeOrdinal::Element);
+    static const Element* selectContainer(OptionSet<CQ::Axis>, const String& name, const Element&, SelectionMode = SelectionMode::Element, ScopeOrdinal = ScopeOrdinal::Element, const CachedQueryContainers* = nullptr);
 
 private:
@@ -55 +56 @@
 
     const Ref<const Element> m_element;
-    const PseudoId m_pseudoId;
-    ScopeOrdinal m_scopeOrdinal;
+    const SelectionMode m_selectionMode;
+    const ScopeOrdinal m_scopeOrdinal;
     SelectorMatchingState* m_selectorMatchingState;
 };

trunk/Source/WebCore/style/ElementRuleCollector.cpp

@@ -513 +513 @@
         return true;
 
+    // Style bits indicating which pseudo-elements match are set during regular element matching. Container queries need to be evaluate in the right mode.
+    auto selectionMode = ruleData.canMatchPseudoElement() ? ContainerQueryEvaluator::SelectionMode::PseudoElement : ContainerQueryEvaluator::SelectionMode::Element;
+
     // "Style rules defined on an element inside multiple nested container queries apply when all of the wrapping container queries are true for that element."
-    ContainerQueryEvaluator evaluator(element(), m_pseudoElementRequest.pseudoId, matchRequest.styleScopeOrdinal, m_selectorMatchingState);
+    ContainerQueryEvaluator evaluator(element(), selectionMode, matchRequest.styleScopeOrdinal, m_selectorMatchingState);
     for (auto* query : queries) {
         if (!evaluator.evaluate(*query))