Fieldset NG: Support dynamic changes of properties copied to anonymous

fieldset content box

LayoutNGFieldset should adopt LayoutObject::UpdateAnonymousChildStyle()
to update properties correctly. Also, we need to add kFlowRoot support
to LayoutBlock::CreateAnonymousWithParentAndDisplay().

Bug: 875235
Change-Id: I8601f1c576c8ee818e69d43dc299026a03879ad5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2336565
Commit-Queue: Kent Tamura <tkent@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795306}

third_party/blink/renderer/core/layout/layout_block.cc

@@ -2072,12 +2072,23 @@ LayoutBlock* LayoutBlock::CreateAnonymousWithParentAndDisplay(
     EDisplay display) {
   // TODO(layout-dev): Do we need to convert all our inline displays to block
   // type in the anonymous logic?
-  const EDisplay new_display =
-      (display == EDisplay::kFlex || display == EDisplay::kInlineFlex)
-          ? EDisplay::kFlex
-          : (display == EDisplay::kGrid || display == EDisplay::kInlineGrid)
-                ? EDisplay::kGrid
-                : EDisplay::kBlock;
+  EDisplay new_display;
+  switch (display) {
+    case EDisplay::kFlex:
+    case EDisplay::kInlineFlex:
+      new_display = EDisplay::kFlex;
+      break;
+    case EDisplay::kGrid:
+    case EDisplay::kInlineGrid:
+      new_display = EDisplay::kGrid;
+      break;
+    case EDisplay::kFlowRoot:
+      new_display = EDisplay::kFlowRoot;
+      break;
+    default:
+      new_display = EDisplay::kBlock;
+      break;
+  }
   scoped_refptr<ComputedStyle> new_style =
       ComputedStyle::CreateAnonymousStyleWithDisplay(parent->StyleRef(),
                                                      new_display);
@@ -2094,7 +2105,8 @@ LayoutBlock* LayoutBlock::CreateAnonymousWithParentAndDisplay(
     layout_block = LayoutObjectFactory::CreateGrid(parent->GetDocument(),
                                                    *new_style, legacy);
   } else {
-    DCHECK_EQ(new_display, EDisplay::kBlock);
+    DCHECK(new_display == EDisplay::kBlock ||
+           new_display == EDisplay::kFlowRoot);
     layout_block = LayoutObjectFactory::CreateBlockFlow(parent->GetDocument(),
                                                         *new_style, legacy);
   }

third_party/blink/renderer/core/layout/ng/layout_ng_fieldset.cc

@@ -46,67 +46,8 @@ void LayoutNGFieldset::AddChild(LayoutObject* new_child,
         break;
     }
 
-    scoped_refptr<ComputedStyle> new_style =
-        ComputedStyle::CreateAnonymousStyleWithDisplay(StyleRef(), display);
-
-    // Inherit all properties listed here:
-    // https://html.spec.whatwg.org/C/#the-fieldset-and-legend-elements
-
-    // TODO(crbug.com/875235): When the paint code is ready for anonymous
-    // scrollable containers, inherit overflow-x and overflow-y here.
-
-    new_style->SetAlignContent(StyleRef().AlignContent());
-    new_style->SetAlignItems(StyleRef().AlignItems());
-
-    new_style->SetBorderBottomLeftRadius(StyleRef().BorderBottomLeftRadius());
-    new_style->SetBorderBottomRightRadius(StyleRef().BorderBottomRightRadius());
-    new_style->SetBorderTopLeftRadius(StyleRef().BorderTopLeftRadius());
-    new_style->SetBorderTopRightRadius(StyleRef().BorderTopRightRadius());
-
-    new_style->SetPaddingTop(StyleRef().PaddingTop());
-    new_style->SetPaddingRight(StyleRef().PaddingRight());
-    new_style->SetPaddingBottom(StyleRef().PaddingBottom());
-    new_style->SetPaddingLeft(StyleRef().PaddingLeft());
-
-    if (StyleRef().SpecifiesColumns()) {
-      new_style->SetColumnCount(StyleRef().ColumnCount());
-      new_style->SetColumnWidth(StyleRef().ColumnWidth());
-    } else {
-      new_style->SetHasAutoColumnCount();
-      new_style->SetHasAutoColumnWidth();
-    }
-    new_style->SetColumnGap(StyleRef().ColumnGap());
-    new_style->SetColumnFill(StyleRef().GetColumnFill());
-    new_style->SetColumnRuleColor(StyleColor(LayoutObject::ResolveColor(
-        StyleRef(), GetCSSPropertyColumnRuleColor())));
-    new_style->SetColumnRuleStyle(StyleRef().ColumnRuleStyle());
-    new_style->SetColumnRuleWidth(StyleRef().ColumnRuleWidth());
-
-    new_style->SetFlexDirection(StyleRef().FlexDirection());
-    new_style->SetFlexWrap(StyleRef().FlexWrap());
-
-    new_style->SetGridAutoColumns(StyleRef().GridAutoColumns());
-    new_style->SetGridAutoFlow(StyleRef().GetGridAutoFlow());
-    new_style->SetGridAutoRows(StyleRef().GridAutoRows());
-    new_style->SetGridColumnEnd(StyleRef().GridColumnEnd());
-    new_style->SetGridColumnStart(StyleRef().GridColumnStart());
-    new_style->SetGridRowEnd(StyleRef().GridRowEnd());
-    new_style->SetGridRowStart(StyleRef().GridRowStart());
-    new_style->SetGridTemplateColumns(StyleRef().GridTemplateColumns());
-    new_style->SetGridTemplateRows(StyleRef().GridTemplateRows());
-    new_style->SetNamedGridArea(StyleRef().NamedGridArea());
-    new_style->SetNamedGridAreaColumnCount(
-        StyleRef().NamedGridAreaColumnCount());
-    new_style->SetNamedGridAreaRowCount(StyleRef().NamedGridAreaRowCount());
-    new_style->SetRowGap(StyleRef().RowGap());
-
-    new_style->SetJustifyContent(StyleRef().JustifyContent());
-    new_style->SetJustifyItems(StyleRef().JustifyItems());
-    new_style->SetUnicodeBidi(StyleRef().GetUnicodeBidi());
-
-    fieldset_content = LayoutBlock::CreateAnonymousWithParentAndDisplay(
-        this, new_style->Display());
-    fieldset_content->SetStyle(std::move(new_style));
+    fieldset_content =
+        LayoutBlock::CreateAnonymousWithParentAndDisplay(this, display);
     LayoutBox::AddChild(fieldset_content);
   }
   fieldset_content->AddChild(new_child, before_child);
@@ -116,6 +57,65 @@ void LayoutNGFieldset::AddChild(LayoutObject* new_child,
 // childless. While an empty anonymous child should have no effect, it doesn't
 // seem right to leave it around.
 
+void LayoutNGFieldset::UpdateAnonymousChildStyle(
+    const LayoutObject*,
+    ComputedStyle& child_style) const {
+  // Inherit all properties listed here:
+  // https://html.spec.whatwg.org/C/#anonymous-fieldset-content-box
+
+  // TODO(crbug.com/1101976): When the paint code is ready for anonymous
+  // scrollable containers, inherit overflow-x and overflow-y here.
+
+  child_style.SetAlignContent(StyleRef().AlignContent());
+  child_style.SetAlignItems(StyleRef().AlignItems());
+
+  child_style.SetBorderBottomLeftRadius(StyleRef().BorderBottomLeftRadius());
+  child_style.SetBorderBottomRightRadius(StyleRef().BorderBottomRightRadius());
+  child_style.SetBorderTopLeftRadius(StyleRef().BorderTopLeftRadius());
+  child_style.SetBorderTopRightRadius(StyleRef().BorderTopRightRadius());
+
+  child_style.SetPaddingTop(StyleRef().PaddingTop());
+  child_style.SetPaddingRight(StyleRef().PaddingRight());
+  child_style.SetPaddingBottom(StyleRef().PaddingBottom());
+  child_style.SetPaddingLeft(StyleRef().PaddingLeft());
+
+  if (StyleRef().SpecifiesColumns()) {
+    child_style.SetColumnCount(StyleRef().ColumnCount());
+    child_style.SetColumnWidth(StyleRef().ColumnWidth());
+  } else {
+    child_style.SetHasAutoColumnCount();
+    child_style.SetHasAutoColumnWidth();
+  }
+  child_style.SetColumnGap(StyleRef().ColumnGap());
+  child_style.SetColumnFill(StyleRef().GetColumnFill());
+  child_style.SetColumnRuleColor(StyleColor(
+      LayoutObject::ResolveColor(StyleRef(), GetCSSPropertyColumnRuleColor())));
+  child_style.SetColumnRuleStyle(StyleRef().ColumnRuleStyle());
+  child_style.SetColumnRuleWidth(StyleRef().ColumnRuleWidth());
+
+  child_style.SetFlexDirection(StyleRef().FlexDirection());
+  child_style.SetFlexWrap(StyleRef().FlexWrap());
+
+  child_style.SetGridAutoColumns(StyleRef().GridAutoColumns());
+  child_style.SetGridAutoFlow(StyleRef().GetGridAutoFlow());
+  child_style.SetGridAutoRows(StyleRef().GridAutoRows());
+  child_style.SetGridColumnEnd(StyleRef().GridColumnEnd());
+  child_style.SetGridColumnStart(StyleRef().GridColumnStart());
+  child_style.SetGridRowEnd(StyleRef().GridRowEnd());
+  child_style.SetGridRowStart(StyleRef().GridRowStart());
+  child_style.SetGridTemplateColumns(StyleRef().GridTemplateColumns());
+  child_style.SetGridTemplateRows(StyleRef().GridTemplateRows());
+  child_style.SetNamedGridArea(StyleRef().NamedGridArea());
+  child_style.SetNamedGridAreaColumnCount(
+      StyleRef().NamedGridAreaColumnCount());
+  child_style.SetNamedGridAreaRowCount(StyleRef().NamedGridAreaRowCount());
+  child_style.SetRowGap(StyleRef().RowGap());
+
+  child_style.SetJustifyContent(StyleRef().JustifyContent());
+  child_style.SetJustifyItems(StyleRef().JustifyItems());
+  child_style.SetUnicodeBidi(StyleRef().GetUnicodeBidi());
+}
+
 bool LayoutNGFieldset::IsOfType(LayoutObjectType type) const {
   return type == kLayoutObjectNGFieldset || LayoutNGBlockFlow::IsOfType(type);
 }

third_party/blink/renderer/core/layout/ng/layout_ng_fieldset.h

@@ -23,6 +23,8 @@ class CORE_EXPORT LayoutNGFieldset final : public LayoutNGBlockFlow {
 
  protected:
   bool IsOfType(LayoutObjectType) const override;
+  void UpdateAnonymousChildStyle(const LayoutObject* child,
+                                 ComputedStyle& child_style) const override;
   void InvalidatePaint(const PaintInvalidatorContext& context) const final;
   bool BackgroundIsKnownToBeOpaqueInRect(const PhysicalRect&) const override;
 };

third_party/blink/web_tests/external/wpt/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox.html

@@ -81,4 +81,15 @@ legend {
                   testElm.querySelector('div').offsetTop, 'offsetTop')
 
   }, "Inline flex");
+
+test(() => {
+  const testElm = document.getElementById('test');
+  testElm.style.flexDirection = 'row';
+  const item0 = testElm.querySelectorAll('div')[0];
+  const item1 = testElm.querySelectorAll('div')[1];
+  assert_equals(item0.offsetTop, item1.offsetTop);
+
+  testElm.style.flexDirection = 'column';
+  assert_true(item0.offsetTop < item1.offsetTop);
+}, "Dynamic change of flex-direction");
 </script>

third_party/blink/web_tests/platform/linux/external/wpt/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox-expected.txt

 This is a testharness.js-based test.
 FAIL Flex assert_equals: height expected "20px" but got "180px"
 FAIL Inline flex assert_equals: height expected "20px" but got "180px"
+FAIL Dynamic change of flex-direction assert_equals: expected 48 but got 28
 Harness: the test ran to completion.
 

third_party/blink/web_tests/platform/mac/external/wpt/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox-expected.txt

 This is a testharness.js-based test.
 FAIL Flex assert_equals: height expected "18px" but got "162px"
 FAIL Inline flex assert_equals: height expected "18px" but got "162px"
+FAIL Dynamic change of flex-direction assert_equals: expected 44 but got 26
 Harness: the test ran to completion.
 

third_party/blink/web_tests/platform/win/external/wpt/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox-expected.txt

 This is a testharness.js-based test.
 FAIL Flex assert_equals: height expected "20px" but got "180px"
 FAIL Inline flex assert_equals: height expected "20px" but got "180px"
+FAIL Dynamic change of flex-direction assert_equals: expected 48 but got 28
 Harness: the test ran to completion.
 

third_party/blink/web_tests/virtual/layout_ng_fieldset/external/wpt/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-flexbox-expected.txt

 This is a testharness.js-based test.
 PASS Flex
 PASS Inline flex
+PASS Dynamic change of flex-direction
 Harness: the test ran to completion.