Do not propagate body styles when html root or body is contained

Per resolution in [1]. Added behind a flag since this is a web facing
change which needs an intent to ship.

[1] w3c/csswg-drafts#5913

Bug: 1215265
Change-Id: I50f142245cdb55b422f8a6f3d9690444bf3648aa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2897247
Reviewed-by: Anders Hartvoll Ruud 
Commit-Queue: Rune Lillesveen 
Cr-Commit-Position: refs/heads/master@{#890175}

Author: lilles

third_party/blink/renderer/core/css/resolver/style_adjuster.cc

@@ -46,6 +46,7 @@
 #include "third_party/blink/renderer/core/frame/web_feature.h"
 #include "third_party/blink/renderer/core/html/forms/html_input_element.h"
 #include "third_party/blink/renderer/core/html/forms/html_text_area_element.h"
+#include "third_party/blink/renderer/core/html/html_body_element.h"
 #include "third_party/blink/renderer/core/html/html_iframe_element.h"
 #include "third_party/blink/renderer/core/html/html_image_element.h"
 #include "third_party/blink/renderer/core/html/html_plugin_element.h"
@@ -95,17 +96,24 @@ bool IsEditableElement(Element* element, const ComputedStyle& style) {
 
 TouchAction AdjustTouchActionForElement(TouchAction touch_action,
                                         const ComputedStyle& style,
+                                        const ComputedStyle& parent_style,
                                         Element* element) {
-  // if body is the viewport defining element then ScrollsOverflow should
-  // return false as body should have overflow-x/overflow-y set to visible
-  Element* body = element ? element->GetDocument().body() : nullptr;
-  bool is_body_and_viewport =
-      element && element == body &&
-      body == element->GetDocument().ViewportDefiningElement();
-  bool is_child_document =
-      element && element == element->GetDocument().documentElement() &&
-      element->GetDocument().LocalOwner();
-  if ((!is_body_and_viewport && style.ScrollsOverflow()) || is_child_document)
+  Element* document_element = element->GetDocument().documentElement();
+  bool scrolls_overflow = style.ScrollsOverflow();
+  if (element && element == element->GetDocument().FirstBodyElement()) {
+    // Body scrolls overflow if html root overflow is not visible or the
+    // propagation of overflow is stopped by containment.
+    if (parent_style.IsOverflowVisibleAlongBothAxes()) {
+      if (!RuntimeEnabledFeatures::CSSContainedBodyPropagationEnabled() ||
+          (!parent_style.ShouldApplyAnyContainment(*document_element) &&
+           !style.ShouldApplyAnyContainment(*element))) {
+        scrolls_overflow = false;
+      }
+    }
+  }
+  bool is_child_document = element && element == document_element &&
+                           element->GetDocument().LocalOwner();
+  if (scrolls_overflow || is_child_document)
     return touch_action | TouchAction::kPan | TouchAction::kInternalPanXScrolls;
   return touch_action;
 }
@@ -607,8 +615,8 @@ static void AdjustEffectiveTouchAction(ComputedStyle& style,
   // The panning-restricted cancellation should also apply to iframes, so we
   // allow (panning & local touch action) on the first descendant element of a
   // iframe element.
-  inherited_action =
-      AdjustTouchActionForElement(inherited_action, style, element);
+  inherited_action = AdjustTouchActionForElement(inherited_action, style,
+                                                 parent_style, element);
 
   TouchAction enforced_by_policy = TouchAction::kNone;
   if (element->GetDocument().IsVerticalScrollEnforced())

third_party/blink/renderer/core/css/resolver/style_resolver.cc

@@ -1715,17 +1715,38 @@ bool PropagateScrollSnapStyleToViewport(
 
 }  // namespace
 
+bool StyleResolver::ShouldStopBodyPropagation(const Element& body_or_html) {
+  DCHECK(!body_or_html.NeedsReattachLayoutTree())
+      << "This method relies on LayoutObject to be attached and up-to-date";
+  DCHECK(IsA(body_or_html) ||
+         IsA(body_or_html));
+  LayoutObject* layout_object = body_or_html.GetLayoutObject();
+  if (!layout_object)
+    return true;
+  if (!RuntimeEnabledFeatures::CSSContainedBodyPropagationEnabled())
+    return false;
+  bool contained = layout_object->ShouldApplyAnyContainment();
+  DCHECK_EQ(contained,
+            layout_object->StyleRef().ShouldApplyAnyContainment(body_or_html))
+      << "Applied containment must give the same result from LayoutObject and "
+         "ComputedStyle";
+  return contained;
+}
+
 void StyleResolver::PropagateStyleToViewport() {
   DCHECK(GetDocument().InStyleRecalc());
-  HTMLBodyElement* body = GetDocument().FirstBodyElement();
   Element* document_element = GetDocument().documentElement();
-
   const ComputedStyle* document_element_style =
       document_element && document_element->GetLayoutObject()
           ? document_element->GetComputedStyle()
           : nullptr;
-  const ComputedStyle* body_style =
-      body && body->GetLayoutObject() ? body->GetComputedStyle() : nullptr;
+  const ComputedStyle* body_style = nullptr;
+  if (HTMLBodyElement* body = GetDocument().FirstBodyElement()) {
+    if (!ShouldStopBodyPropagation(*document_element) &&
+        !ShouldStopBodyPropagation(*body)) {
+      body_style = body->GetComputedStyle();
+    }
+  }
 
   const ComputedStyle& viewport_style =
       GetDocument().GetLayoutView()->StyleRef();
@@ -1792,22 +1813,18 @@ void StyleResolver::PropagateStyleToViewport() {
 
   // Overflow
   {
-    const ComputedStyle* overflow_style = nullptr;
-    if (Element* viewport_element = GetDocument().ViewportDefiningElement()) {
-      if (viewport_element == body) {
-        overflow_style = body_style;
-      } else {
-        DCHECK_EQ(viewport_element, document_element);
-        overflow_style = document_element_style;
-
-        // The body element has its own scrolling box, independent from the
-        // viewport.  This is a bit of a weird edge case in the CSS spec that we
-        // might want to try to eliminate some day (eg. for ScrollTopLeftInterop
-        // - see http://crbug.com/157855).
-        if (body_style && body_style->IsScrollContainer()) {
-          UseCounter::Count(GetDocument(),
-                            WebFeature::kBodyScrollsInAdditionToViewport);
-        }
+    const ComputedStyle* overflow_style = document_element_style;
+    if (body_style &&
+        document_element_style->IsOverflowVisibleAlongBothAxes()) {
+      overflow_style = body_style;
+
+      // The body element has its own scrolling box, independent from the
+      // viewport.  This is a bit of a weird edge case in the CSS spec that we
+      // might want to try to eliminate some day (eg. for ScrollTopLeftInterop
+      // - see http://crbug.com/157855).
+      if (body_style && body_style->IsScrollContainer()) {
+        UseCounter::Count(GetDocument(),
+                          WebFeature::kBodyScrollsInAdditionToViewport);
       }
     }
 

third_party/blink/renderer/core/css/resolver/style_resolver.h

@@ -161,6 +161,10 @@ class CORE_EXPORT StyleResolver final : public GarbageCollected {
                                       const CSSPropertyName&,
                                       const CSSValue&);
 
+  // Check if the BODY or HTML element's display or containment stops
+  // propagation of BODY style to HTML and viewport.
+  static bool ShouldStopBodyPropagation(const Element& body_or_html);
+
   scoped_refptr StyleForInterpolations(
       Element& element,
       ActiveInterpolationsMap& animations);

third_party/blink/renderer/core/dom/document.cc

@@ -3287,20 +3287,37 @@ Element* Document::ViewportDefiningElement() const {
   // If a BODY element sets non-visible overflow, it is to be propagated to the
   // viewport, as long as the following conditions are all met:
   // (1) The root element is HTML.
-  // (2) It is the primary BODY element (we only assert for this, expecting
-  //     callers to behave).
+  // (2) It is the primary BODY element.
   // (3) The root element has visible overflow.
+  // (4) The root or BODY elements do not apply any containment.
   // Otherwise it's the root element's properties that are to be propagated.
+
+  // This method is called in the middle of a lifecycle update, for instance
+  // from a LayoutObject which is created but not yet inserted into the box
+  // tree, which is why we have to do the decision based on the ComputedStyle
+  // and not the LayoutObject style and the containment checks below also.
+
   Element* root_element = documentElement();
-  HTMLBodyElement* body_element = FirstBodyElement();
   if (!root_element)
     return nullptr;
   const ComputedStyle* root_style = root_element->GetComputedStyle();
   if (!root_style || root_style->IsEnsuredInDisplayNone())
     return nullptr;
-  if (body_element && root_style->IsOverflowVisibleAlongBothAxes())
-    return body_element;
-  return root_element;
+  if (!root_style->IsOverflowVisibleAlongBothAxes())
+    return root_element;
+  HTMLBodyElement* body_element = FirstBodyElement();
+  if (!body_element)
+    return root_element;
+  const ComputedStyle* body_style = body_element->GetComputedStyle();
+  if (!body_style || body_style->IsEnsuredInDisplayNone())
+    return root_element;
+  if (RuntimeEnabledFeatures::CSSContainedBodyPropagationEnabled()) {
+    if (root_style->ShouldApplyAnyContainment(*root_element) ||
+        body_style->ShouldApplyAnyContainment(*body_element)) {
+      return root_element;
+    }
+  }
+  return body_element;
 }
 
 Document* Document::open(v8::Isolate* isolate,

third_party/blink/renderer/core/html/html_html_element.cc

@@ -134,7 +134,12 @@ scoped_refptr HTMLHtmlElement::LayoutStyleForElement(
     scoped_refptr<const ComputedStyle> style) {
   DCHECK(style);
   DCHECK(GetDocument().InStyleRecalc());
+  DCHECK(GetLayoutObject());
+  if (StyleResolver::ShouldStopBodyPropagation(*this))
+    return style;
   if (const Element* body_element = GetDocument().FirstBodyElement()) {
+    if (StyleResolver::ShouldStopBodyPropagation(*body_element))
+      return style;
     if (const ComputedStyle* body_style = body_element->GetComputedStyle()) {
       if (NeedsLayoutStylePropagation(*style, *body_style))
         return CreateLayoutStyle(*style, *body_style);

third_party/blink/renderer/platform/runtime_enabled_features.json5

@@ -487,6 +487,13 @@
       name: "CSSColorTypedOM",
       status:  "experimental",
     },
+    {
+      // Stop propagation from BODY to HTML and viewport if HTML or BODY
+      // elements have any containment applied.
+      // https://drafts.csswg.org/css-contain-2/#contain-property
+      name: "CSSContainedBodyPropagation",
+      status: "test",
+    },
     {
       name: "CSSContainerQueries",
     },

third_party/blink/web_tests/TestExpectations

@@ -685,39 +685,6 @@ crbug.com/882385 external/wpt/css/css-contain/quote-scoping-002.html [ Failure ]
 crbug.com/882385 external/wpt/css/css-contain/quote-scoping-003.html [ Failure ]
 crbug.com/882385 external/wpt/css/css-contain/quote-scoping-004.html [ Failure ]
 
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-bg-001.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-bg-002.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-bg-003.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-bg-004.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-dir-001.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-dir-002.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-dir-003.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-dir-004.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-overflow-001.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-overflow-002.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-overflow-003.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-overflow-004.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-w-m-001.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-w-m-002.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-w-m-003.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-body-w-m-004.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-bg-001.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-bg-002.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-bg-003.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-bg-004.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-dir-001.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-dir-002.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-dir-003.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-dir-004.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-overflow-001.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-overflow-002.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-overflow-003.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-overflow-004.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-w-m-001.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-w-m-002.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-w-m-003.html [ Failure ]
-crbug.com/1215265 external/wpt/css/css-contain/contain-html-w-m-004.html [ Failure ]
-
 # [css-align]
 
 crbug.com/599828 external/wpt/css/css-flexbox/abspos/flex-abspos-staticpos-align-content-001.html [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-backgrounds/background-color-body-propagation-008.html

@@ -0,0 +1,10 @@
+>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Test: Do not propagate body background when html root is containedtitle>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#special-backgrounds">
+<link rel="match" href="../reference/blank.html">
+<style>
+  html { contain: paint; }
+  body { background: red; }
+style>
+<body>body>

third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-body-propagation-011-ref.html

@@ -0,0 +1,4 @@
+>
+<meta charset="utf-8">
+<title>CSS Test Referencetitle>
+<div style="overflow:scroll">PASS if BODY has scrollbars, but not viewport.div>

third_party/blink/web_tests/external/wpt/css/css-overflow/overflow-body-propagation-011.html

@@ -0,0 +1,14 @@
+>
+<meta charset="utf-8">
+<title>CSS Test: HTML root containment stops overflow propagation from BODYtitle>
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation">
+<link rel="match" href="overflow-body-propagation-011-ref.html">
+<style>
+  html {
+    contain: paint;
+  }
+  body {
+    overflow: scroll;
+  }
+style>
+<body>PASS if BODY has scrollbars, but not viewport.body>

third_party/blink/web_tests/external/wpt/css/css-writing-modes/direction-propagation-body-contain-root-ref.html

@@ -0,0 +1,4 @@
+>
+<meta charset="utf-8">
+<title>CSS Test Referencetitle>
+<body style="margin:0">This text should be left aligned.body>

third_party/blink/web_tests/external/wpt/css/css-writing-modes/direction-propagation-body-contain-root.html

@@ -0,0 +1,13 @@
+>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Do not propagate direction from body when html root is containedtitle>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#principal-flow">
+<link rel="match" href="direction-propagation-body-contain-root-ref.html">
+<style>
+  html { contain: paint; }
+  body { direction: rtl; display: inline; }
+style>
+<body>body>
+<script>
+  document.documentElement.insertBefore(document.createTextNode("This text should be left aligned."), document.body);
+script>

third_party/blink/web_tests/external/wpt/css/css-writing-modes/wm-propagation-body-contain-root-ref.html

@@ -0,0 +1,4 @@
+>
+<meta charset="utf-8">
+<title>CSS Test Referencetitle>
+<div style="writing-mode:vertical-rl">This text should run vertically on the left sidebody>

third_party/blink/web_tests/external/wpt/css/css-writing-modes/wm-propagation-body-contain-root.html

@@ -0,0 +1,10 @@
+>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Do not propagate writing-mode from body when html root is containedtitle>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#principal-flow">
+<link rel="match" href="wm-propagation-body-contain-root-ref.html">
+<style>
+  html { contain: paint; }
+  body { writing-mode: vertical-rl; }
+style>
+<body>This text should run vertically on the left sidebody>