[CSS Container Queries] Container unit resolution should check the se…

…lected container is eligible https://bugs.webkit.org/show_bug.cgi?id=260561 rdar://problem/114291153 Reviewed by Alan Baradlay. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-units-ineligible-container-expected.txt: * Source/WebCore/css/CSSPrimitiveValue.cpp: (WebCore::CSSPrimitiveValue::computeNonCalcLengthDouble): Loop until an eligible container is found. * Source/WebCore/css/query/ContainerQueryFeatures.cpp: * Source/WebCore/rendering/RenderElement.cpp: (WebCore::RenderElement::hasEligibleContainmentForSizeQuery const): Factor into a shared function. * Source/WebCore/rendering/RenderElement.h: Canonical link: https://commits.webkit.org/267192@main
WebKit · Aug 23, 2023 · 9853d19 · 9853d19
1 parent 7e81eec
commit 9853d19
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 31 deletions.
diff --git a/...tests/css/css-contain/container-queries/container-units-ineligible-container-expected.txt b/...tests/css/css-contain/container-queries/container-units-ineligible-container-expected.txt
@@ -1,10 +1,10 @@
 
 PASS /* basic */
-FAIL display: table assert_equals: width expected "30px" but got "20px"
-FAIL display: table-cell assert_equals: width expected "30px" but got "20px"
-FAIL display: inline assert_equals: width expected "30px" but got "80px"
-FAIL display: contents assert_equals: width expected "30px" but got "80px"
-FAIL display: none assert_equals: width expected "30px" but got "80px"
+PASS display: table
+PASS display: table-cell
+PASS display: inline
+PASS display: contents
+PASS display: none
 PASS container-type: normal
 PASS container-type: inline-size
 PASS container-type: inline-size; writing-mode: vertical-lr

diff --git a/Source/WebCore/css/CSSPrimitiveValue.cpp b/Source/WebCore/css/CSSPrimitiveValue.cpp
@@ -787,17 +787,15 @@ double CSSPrimitiveValue::computeNonCalcLengthDouble(const CSSToLengthConversion
         if (!element)
             return { };
 
-        // FIXME: Use cached query containers when available.
-        auto* container = Style::ContainerQueryEvaluator::selectContainer(physicalAxis, nullString(), *element);
-        if (!container)
-            return { };
-
-        auto* containerRenderer = dynamicDowncast<RenderBox>(container->renderer());
-        if (!containerRenderer)
-            return { };
-
-        auto widthOrHeight = physicalAxis == CQ::Axis::Width ? containerRenderer->contentWidth() : containerRenderer->contentHeight();
-        return widthOrHeight * value / 100;
+        // "The query container for each axis is the nearest ancestor container that accepts container size queries on that axis."
+        while ((element = Style::ContainerQueryEvaluator::selectContainer(physicalAxis, nullString(), *element))) {
+            auto* containerRenderer = dynamicDowncast<RenderBox>(element->renderer());
+            if (containerRenderer && containerRenderer->hasEligibleContainmentForSizeQuery()) {
+                auto widthOrHeight = physicalAxis == CQ::Axis::Width ? containerRenderer->contentWidth() : containerRenderer->contentHeight();
+                return widthOrHeight * value / 100;
+            }
+        }
+        return { };
     };
 
     switch (primitiveType) {

diff --git a/Source/WebCore/css/query/ContainerQueryFeatures.cpp b/Source/WebCore/css/query/ContainerQueryFeatures.cpp
@@ -50,21 +50,7 @@ struct SizeFeatureSchema : public FeatureSchema {
 
         auto& renderer = downcast<RenderBox>(*context.renderer);
 
-        auto hasEligibleContainment = [&] {
-            if (!renderer.shouldApplyLayoutContainment())
-                return false;
-            switch (renderer.style().containerType()) {
-            case ContainerType::InlineSize:
-                return renderer.shouldApplyInlineSizeContainment();
-            case ContainerType::Size:
-                return renderer.shouldApplySizeContainment();
-            case ContainerType::Normal:
-                return true;
-            }
-            RELEASE_ASSERT_NOT_REACHED();
-        };
-
-        if (!hasEligibleContainment())
+        if (!renderer.hasEligibleContainmentForSizeQuery())
             return MQ::EvaluationResult::Unknown;
 
         return evaluate(feature, renderer, context.conversionData);

diff --git a/Source/WebCore/rendering/RenderElement.cpp b/Source/WebCore/rendering/RenderElement.cpp
@@ -2269,4 +2269,22 @@ bool RenderElement::isSkippedContentRoot() const
     return WebCore::isSkippedContentRoot(style(), element());
 }
 
+bool RenderElement::hasEligibleContainmentForSizeQuery() const
+{
+    if (!shouldApplyLayoutContainment())
+        return false;
+
+    switch (style().containerType()) {
+    case ContainerType::InlineSize:
+        return shouldApplyInlineSizeContainment();
+    case ContainerType::Size:
+        return shouldApplySizeContainment();
+    case ContainerType::Normal:
+        return true;
+    }
+    ASSERT_NOT_REACHED();
+    return false;
+}
+
+
 }
diff --git a/Source/WebCore/rendering/RenderElement.h b/Source/WebCore/rendering/RenderElement.h
@@ -108,6 +108,8 @@ class RenderElement : public RenderObject {
     inline bool shouldApplyLayoutOrPaintContainment() const;
     inline bool shouldApplyAnyContainment() const;
 
+    bool hasEligibleContainmentForSizeQuery() const;
+
     Color selectionColor(CSSPropertyID) const;
     std::unique_ptr<RenderStyle> selectionPseudoStyle() const;