Changeset 291154 in webkit

Timestamp:

Mar 11, 2022 3:51:29 AM (4 months ago)

Author:

Antti Koivisto

Message:

[CSS Container Queries] Only apply inline-size containment when it is allowed
​https://bugs.webkit.org/show_bug.cgi?id=237761

Reviewed by Antoine Quint.

LayoutTests/imported/w3c:

• web-platform-tests/css/css-contain/container-queries/ineligible-containment-expected.txt:

Source/WebCore:

"Giving an element inline-size containment has no effect if any of the following are true:

if the element does not generate a principal box (as is the case with display: contents or display: none)
if its inner display type is table
if its principal box is an internal table box
if its principal box is an internal ruby box or a non-atomic inline-level box"

​https://drafts.csswg.org/css-contain-3/#containment-inline-size

• rendering/RenderBlockFlow.cpp:

(WebCore::RenderBlockFlow::computeInlinePreferredLogicalWidths const):

Check for valid inline-size containment.

• rendering/RenderObject.cpp:

(WebCore::shouldApplyInlineSizeContainment):

• rendering/RenderObject.h:
• style/ContainerQueryEvaluator.cpp:

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

Cleanups.

(WebCore::Style::ContainerQueryEvaluator::evaluateSizeFeature const):

Check for valid size containment for the type, evaluate to unknown if it doesn't exist.
Also check layout containment.

Location:

trunk

Files:

• LayoutTests/imported/w3c/ChangeLog (modified) (1 diff)
• LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/ineligible-containment-expected.txt (modified) (1 diff)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/rendering/RenderBlockFlow.cpp (modified) (1 diff)
• Source/WebCore/rendering/RenderObject.cpp (modified) (1 diff)
• Source/WebCore/rendering/RenderObject.h (modified) (1 diff)
• Source/WebCore/style/ContainerQueryEvaluator.cpp (modified) (4 diffs)

trunk/LayoutTests/imported/w3c/ChangeLog

@@ +1 @@
+2022-03-11  Antti Koivisto  <antti@apple.com>
+
+        [CSS Container Queries] Only apply inline-size containment when it is allowed
+        https://bugs.webkit.org/show_bug.cgi?id=237761
+
+        Reviewed by Antoine Quint.
+
+        * web-platform-tests/css/css-contain/container-queries/ineligible-containment-expected.txt:
+
 2022-03-10  Antoine Quint  <graouts@webkit.org>
 

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/ineligible-containment-expected.txt

@@ -4 +4 @@
 
 
-FAIL Container ineligible for containment assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
-FAIL Changing containment eligibility invalidates style assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
+PASS Container ineligible for containment
+PASS Changing containment eligibility invalidates style
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2022-03-11  Antti Koivisto  <antti@apple.com>
+
+        [CSS Container Queries] Only apply inline-size containment when it is allowed
+        https://bugs.webkit.org/show_bug.cgi?id=237761
+
+        Reviewed by Antoine Quint.
+
+        "Giving an element inline-size containment has no effect if any of the following are true:
+
+        if the element does not generate a principal box (as is the case with display: contents or display: none)
+        if its inner display type is table
+        if its principal box is an internal table box
+        if its principal box is an internal ruby box or a non-atomic inline-level box"
+
+        https://drafts.csswg.org/css-contain-3/#containment-inline-size
+
+        * rendering/RenderBlockFlow.cpp:
+        (WebCore::RenderBlockFlow::computeInlinePreferredLogicalWidths const):
+
+        Check for valid inline-size containment.
+
+        * rendering/RenderObject.cpp:
+        (WebCore::shouldApplyInlineSizeContainment):
+        * rendering/RenderObject.h:
+        * style/ContainerQueryEvaluator.cpp:
+        (WebCore::Style::ContainerQueryEvaluator::selectContainer const):
+
+        Cleanups.
+
+        (WebCore::Style::ContainerQueryEvaluator::evaluateSizeFeature const):
+
+        Check for valid size containment for the type, evaluate to unknown if it doesn't exist.
+        Also check layout containment.
+
 2022-03-11  Zan Dobersek  <zdobersek@igalia.com>
 

trunk/Source/WebCore/rendering/RenderBlockFlow.cpp

@@ -4096 +4096 @@
     // "The inline-axis intrinsic sizes of the principal box are determined as if the element had no content."
     // https://drafts.csswg.org/css-contain-3/#containment-inline-size
-    if (style().effectiveContainment().contains(Containment::InlineSize))
+    if (shouldApplyInlineSizeContainment(*this))
         return;
 

trunk/Source/WebCore/rendering/RenderObject.cpp

@@ -2604 +2604 @@
 }
 
+bool WebCore::shouldApplyInlineSizeContainment(const WebCore::RenderObject& renderer)
+{
+    return renderer.style().effectiveContainment().contains(Containment::InlineSize) && (!renderer.isInline() || renderer.isAtomicInlineLevelBox()) && !renderer.isRubyText() && (!renderer.isTablePart() || renderer.isTableCaption()) && !renderer.isTable();
+}
+
 bool WebCore::shouldApplyStyleContainment(const WebCore::RenderObject& renderer)
 {

trunk/Source/WebCore/rendering/RenderObject.h

@@ -1211 +1211 @@
 bool shouldApplyLayoutContainment(const RenderObject&);
 bool shouldApplySizeContainment(const RenderObject&);
+bool shouldApplyInlineSizeContainment(const RenderObject&);
 bool shouldApplyStyleContainment(const RenderObject&);
 bool shouldApplyPaintContainment(const RenderObject&);

trunk/Source/WebCore/style/ContainerQueryEvaluator.cpp

@@ -79 +79 @@
     };
 
-    auto computeUnsupportedAxes = [&](ContainerType containerType, const RenderElement* principalBox) -> OptionSet<CQ::Axis> {
+    auto isValidContainerForRequiredAxes = [&](ContainerType containerType, const RenderElement* principalBox) {
         switch (containerType) {
         case ContainerType::Size:
-            return { };
+            return true;
         case ContainerType::InlineSize:
             // Without a principal box the container matches but the query against it will evaluate to Unknown.
             if (!principalBox)
-                return { };
-            if (!principalBox->isHorizontalWritingMode())
-                return { CQ::Axis::Width, CQ::Axis::Block };
-            return { CQ::Axis::Height, CQ::Axis::Block };
+                return true;
+            if (filteredContainerQuery.axisFilter.contains(CQ::Axis::Block))
+                return false;
+            return !filteredContainerQuery.axisFilter.contains(principalBox->isHorizontalWritingMode() ? CQ::Axis::Height : CQ::Axis::Width);
         case ContainerType::None:
-            return { CQ::Axis::Width, CQ::Axis::Height, CQ::Axis::Inline, CQ::Axis::Block };
+            return false;
         }
         RELEASE_ASSERT_NOT_REACHED();
@@ -100 +100 @@
         if (!style)
             return false;
-        auto unsupportedAxes = computeUnsupportedAxes(style->containerType(), element.renderer());
-        if (filteredContainerQuery.axisFilter.containsAny(unsupportedAxes))
+        if (!isValidContainerForRequiredAxes(style->containerType(), element.renderer()))
             return false;
         if (filteredContainerQuery.nameFilter.isEmpty())
             return true;
-        return element.existingComputedStyle()->containerNames().contains(filteredContainerQuery.nameFilter);
+        return style->containerNames().contains(filteredContainerQuery.nameFilter);
     };
 
@@ -202 +201 @@
 auto ContainerQueryEvaluator::evaluateSizeFeature(const CQ::SizeFeature& sizeFeature, const SelectedContainer& container) const -> EvaluationResult
 {
-    // "If the query container does not have a principal box ... then the result of evaluating the size feature is unknown."
+    // "If the query container does not have a principal box, or the principal box is not a layout containment box,
+    // or the query container does not support container size queries on the relevant axes, then the result of
+    // evaluating the size feature is unknown."
     // https://drafts.csswg.org/css-contain-3/#size-container
     if (!container.renderer)
@@ -208 +209 @@
 
     auto& renderer = *container.renderer;
+
+    auto hasEligibleContainment = [&] {
+        if (!shouldApplyLayoutContainment(renderer))
+            return false;
+        switch (renderer.style().containerType()) {
+        case ContainerType::InlineSize:
+            return shouldApplyInlineSizeContainment(renderer);
+        case ContainerType::Size:
+            return shouldApplySizeContainment(renderer);
+        case ContainerType::None:
+            return true;
+        }
+    };
+
+    if (!hasEligibleContainment())
+        return EvaluationResult::Unknown;
 
     auto compare = [](CQ::ComparisonOperator op, auto left, auto right) {