Container Queries: Check that containment applies

Check containment on the layout object instead of ComputedStyle. If
containment does not apply according to principal box, it should not act
as a container for container queries.

Bug: 1146097
Change-Id: I361242bdd23e389a2f390930af5945301a452ad0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2623292
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842543}

third_party/blink/renderer/core/css/style_engine_test.cc

@@ -3768,10 +3768,13 @@ TEST_F(StyleEngineTest, UpdateStyleAndLayoutTreeForContainer) {
         </div>
       </div>
       <span></span>
-      <div id="container3" class="container">
+      <div class="container">
         <span class="affected"></span>
         <span class="affected"></span>
       </div>
+      <span class="container" style="display:inline-block">
+        <span class="affected"></span>
+      </span>
     </div>
   )HTML");
 
@@ -3798,6 +3801,55 @@ TEST_F(StyleEngineTest, UpdateStyleAndLayoutTreeForContainer) {
   EXPECT_EQ(6u, GetStyleEngine().StyleForElementCount() - start_count);
 }
 
+TEST_F(StyleEngineTest, ContainerQueriesContainmentNotApplying) {
+  GetDocument().body()->setInnerHTML(R"HTML(
+    <style>
+      .container {
+        contain: layout size;
+      }
+    </style>
+    <div id="container" class="container">
+      <div class="container" style="display:contents">
+        <span class="affected"></span>
+      </div>
+      <span class="container">
+        <span class="affected"></span>
+      </span>
+      <rt class="container">
+        <span class="affected"></span>
+      </rt>
+      <div class="container" style="display:table">
+        <span class="affected"></span>
+      </div>
+      <div class="container" style="display:table-cell">
+        <span class="affected"></span>
+      </div>
+      <div class="container" style="display:table-row">
+        <span class="affected"></span>
+      </div>
+      <div class="container" style="display:table-row-group">
+        <span class="affected"></span>
+      </div>
+    </div>
+  )HTML");
+
+  UpdateAllLifecyclePhases();
+
+  auto* container = GetDocument().getElementById("container");
+  auto* affected = GetDocument().getElementsByClassName("affected");
+  ASSERT_TRUE(container);
+  ASSERT_TRUE(affected);
+  SetDependsOnContainerQueries(*affected);
+
+  unsigned start_count = GetStyleEngine().StyleForElementCount();
+  GetStyleEngine().UpdateStyleAndLayoutTreeForContainer(*container);
+
+  // span.affected is updated because containment does not apply to the display
+  // types on the element styled with containment. All marked as affected are
+  // recalculated.
+  EXPECT_EQ(7u, GetStyleEngine().StyleForElementCount() - start_count);
+}
+
 TEST_F(StyleEngineTest, MarkStyleDirtyFromContainerRecalc) {
   GetDocument().body()->setInnerHTML(R"HTML(
     <div id="container" style="contain: layout size">

third_party/blink/renderer/core/css/style_recalc.cc

@@ -61,8 +61,9 @@ bool StyleRecalcChange::RecalcContainerQueryDependentChildren(
   // recalculating container queries. If the queries for this container also
   // changes, we will enter another container query recalc for this subtree from
   // layout.
-  const ComputedStyle* style = element.GetComputedStyle();
-  return style && !style->IsContainerForContainerQueries();
+  if (LayoutObject* layout_object = element.GetLayoutObject())
+    return !layout_object->IsContainerForContainerQueries();
+  return true;
 }
 
 }  // namespace blink

third_party/blink/renderer/core/layout/layout_object.h

@@ -625,6 +625,10 @@ class CORE_EXPORT LayoutObject : public ImageResourceObserver,
     return ShouldApplyPaintContainment() && ShouldApplyLayoutContainment() &&
            ShouldApplySizeContainment();
   }
+  inline bool IsContainerForContainerQueries() const {
+    NOT_DESTROYED();
+    return ShouldApplyLayoutContainment() && ShouldApplySizeContainment();
+  }
 
   inline bool IsStackingContext() const {
     NOT_DESTROYED();

third_party/blink/renderer/core/style/computed_style.h

@@ -2662,10 +2662,6 @@ class ComputedStyle : public ComputedStyleBase,
     return LogicalSize(LayoutUnit(ratio.Width()), LayoutUnit(ratio.Height()));
   }
 
-  bool IsContainerForContainerQueries() const {
-    return ContainsLayout() && ContainsSize();
-  }
-
  private:
   EClear Clear() const { return ClearInternal(); }
   EFloat Floating() const { return FloatingInternal(); }