Container Queries: Update pseudo elements

Allow traversal into and update pseudo elements affected by container
queries.

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

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

@@ -3732,16 +3732,19 @@ TEST_F(StyleEngineTest, CSSPseudoHostDynamicSpecificity) {
 
 namespace {
 
-void SetDependsOnContainerQueries(HTMLCollection& affected) {
-  for (Element* element : affected) {
-    if (const ComputedStyle* style = element->GetComputedStyle()) {
-      scoped_refptr<ComputedStyle> cloned_style = ComputedStyle::Clone(*style);
-      cloned_style->SetDependsOnContainerQueries(true);
-      element->SetComputedStyle(cloned_style);
-    }
+void SetDependsOnContainerQueries(Element& element) {
+  if (const ComputedStyle* style = element.GetComputedStyle()) {
+    scoped_refptr<ComputedStyle> cloned_style = ComputedStyle::Clone(*style);
+    cloned_style->SetDependsOnContainerQueries(true);
+    element.SetComputedStyle(cloned_style);
   }
 }
 
+void SetDependsOnContainerQueries(HTMLCollection& affected) {
+  for (Element* element : affected)
+    SetDependsOnContainerQueries(*element);
+}
+
 }  // namespace
 
 TEST_F(StyleEngineTest, UpdateStyleAndLayoutTreeForContainer) {
@@ -3850,6 +3853,39 @@ TEST_F(StyleEngineTest, ContainerQueriesContainmentNotApplying) {
   EXPECT_EQ(7u, GetStyleEngine().StyleForElementCount() - start_count);
 }
 
+TEST_F(StyleEngineTest, PseudoElementContainerQueryRecalc) {
+  GetDocument().body()->setInnerHTML(R"HTML(
+    <style>
+      #container { contain: layout size }
+      #container::before { content: " " }
+      span::before { content: " " }
+    </style>
+    <div id="container">
+      <span id="span"></span>
+    </div>
+  )HTML");
+
+  UpdateAllLifecyclePhases();
+
+  auto* container = GetDocument().getElementById("container");
+  auto* span = GetDocument().getElementById("span");
+  ASSERT_TRUE(container);
+  ASSERT_TRUE(span);
+
+  auto* before = span->GetPseudoElement(kPseudoIdBefore);
+  ASSERT_TRUE(before);
+  SetDependsOnContainerQueries(*before);
+
+  before = container->GetPseudoElement(kPseudoIdBefore);
+  ASSERT_TRUE(before);
+  SetDependsOnContainerQueries(*before);
+
+  unsigned start_count = GetStyleEngine().StyleForElementCount();
+  GetStyleEngine().UpdateStyleAndLayoutTreeForContainer(*container);
+
+  EXPECT_EQ(2u, 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

@@ -15,7 +15,8 @@ bool StyleRecalcChange::TraverseChildren(const Element& element) const {
 }
 
 bool StyleRecalcChange::TraversePseudoElements(const Element& element) const {
-  return UpdatePseudoElements() || element.ChildNeedsStyleRecalc();
+  return UpdatePseudoElements() || RecalcContainerQueryDependent() ||
+         element.ChildNeedsStyleRecalc();
 }
 
 bool StyleRecalcChange::TraverseChild(const Node& node) const {
@@ -47,7 +48,12 @@ bool StyleRecalcChange::ShouldRecalcStyleFor(const Node& node) const {
 
 bool StyleRecalcChange::ShouldUpdatePseudoElement(
     const PseudoElement& pseudo_element) const {
-  return UpdatePseudoElements() || pseudo_element.NeedsStyleRecalc();
+  if (UpdatePseudoElements())
+    return true;
+  if (pseudo_element.NeedsStyleRecalc())
+    return true;
+  return RecalcContainerQueryDependent() &&
+         pseudo_element.ComputedStyleRef().DependsOnContainerQueries();
 }
 
 bool StyleRecalcChange::RecalcContainerQueryDependentChildren(