Remove fixed width/height for containers with orthogonal children

third_party/WebKit/Source/core/layout/ng/ng_block_layout_algorithm_test.cc

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "core/layout/ng/ng_block_layout_algorithm.h"
 
 #include "core/dom/NodeComputedStyle.h"
 #include "core/dom/TagCollection.h"
 #include "core/layout/ng/layout_ng_block_flow.h"
 #include "core/layout/ng/ng_block_node.h"
@@ skipping 177 matching lines @@
   child = static_cast<const NGPhysicalBoxFragment*>(child)->Children()[0].get();
 
   EXPECT_EQ(kHeight, child->Height());
   EXPECT_EQ(0, child->TopOffset());
   EXPECT_EQ(kMarginLeft, child->LeftOffset());
 }
 
 // Verifies that floats are positioned at the top of the first child that can
 // determine its position after margins collapsed.
 TEST_F(NGBlockLayoutAlgorithmTest, CollapsingMarginsCase1WithFloats) {
-  setBodyInnerHTML(
-      "<style>"
-      "  #container {"
-      "    height: 200px;"
-      "    width: 200px;"
-      "    margin-top: 10px;"
-      "    padding: 0 7px;"
-      "    background-color: red;"
-      "  }"
-      "  #first-child {"
-      "    margin-top: 20px;"
-      "    height: 10px;"
-      "    background-color: blue;"
-      "  }"
-      "  #float-child-left {"
-      "    float: left;"
-      "    height: 10px;"
-      "    width: 10px;"
-      "    padding: 10px;"
-      "    margin: 10px;"
-      "    background-color: green;"
-      "  }"
-      "  #float-child-right {"
-      "    float: right;"
-      "    height: 30px;"
-      "    width: 30px;"
-      "    background-color: pink;"
-      "  }"
-      "</style>"
-      "<div id='container'>"
-      "  <div id='float-child-left'></div>"
-      "  <div id='float-child-right'></div>"
-      "  <div id='first-child'></div>"
-      "</div>");
+  setBodyInnerHTML(R"HTML(
+      <style>
+        #container {
+          height: 200px;
+          width: 200px;
+          margin-top: 10px;
+          padding: 0 7px;
+          background-color: red;
+        }
+        #first-child {
+          margin-top: 20px;
+          height: 10px;
+          background-color: blue;
+        }
+        #float-child-left {
+          float: left;
+          height: 10px;
+          width: 10px;
+          padding: 10px;
+          margin: 10px;
+          background-color: green;
+        }
+        #float-child-right {
+          float: right;
+          height: 30px;
+          width: 30px;
+          background-color: pink;
+        }
+      </style>
+      <div id='container'>
+        <div id='float-child-left'></div>
+        <div id='float-child-right'></div>
+        <div id='first-child'></div>
+      </div>
+    )HTML");
 
   // ** Run LayoutNG algorithm **
   NGConstraintSpace* space;
   RefPtr<NGPhysicalBoxFragment> fragment;
   std::tie(fragment, space) = RunBlockLayoutAlgorithmForElement(
       document().getElementsByTagName("html")->item(0));
   ASSERT_EQ(fragment->Children().size(), 1UL);
   auto* body_fragment = toNGPhysicalBoxFragment(fragment->Children()[0].get());
   // 20 = max(first child's margin top, containers's margin top)
   int body_top_offset = 20;
@@ skipping 55 matching lines @@
               (ElementsAre(Pointee(expected_exclusion1),
                            Pointee(expected_exclusion2))));
 }
 
 // Verifies the collapsing margins case for the next pairs:
 // - bottom margin of box and top margin of its next in-flow following sibling.
 // - top and bottom margins of a box that does not establish a new block
 //   formatting context and that has zero computed 'min-height', zero or 'auto'
 //   computed 'height', and no in-flow children
 TEST_F(NGBlockLayoutAlgorithmTest, CollapsingMarginsCase2WithFloats) {
-  setBodyInnerHTML(
-      "<style>"
-      "#first-child {"
-      "  background-color: red;"
-      "  height: 50px;"
-      "  margin-bottom: 20px;"
-      "}"
-      "#float-between-empties {"
-      "  background-color: green;"
-      "  float: left;"
-      "  height: 30px;"
-      "  width: 30px;"
-      "}"
-      "#float-between-nonempties {"
-      "  background-color: lightgreen;"
-      "  float: left;"
-      "  height: 40px;"
-      "  width: 40px;"
-      "}"
-      "#float-top-align {"
-      "  background-color: seagreen;"
-      "  float: left;"
-      "  height: 50px;"
-      "  width: 50px;"
-      "}"
-      "#second-child {"
-      "  background-color: blue;"
-      "  height: 50px;"
-      "  margin-top: 10px;"
-      "}"
-      "</style>"
-      "<div id='first-child'>"
-      "  <div id='empty1' style='margin-bottom: -15px'></div>"
-      "  <div id='float-between-empties'></div>"
-      "  <div id='empty2'></div>"
-      "</div>"
-      "<div id='float-between-nonempties'></div>"
-      "<div id='second-child'>"
-      "  <div id='float-top-align'></div>"
-      "  <div id='empty3'></div>"
-      "  <div id='empty4' style='margin-top: -30px'></div>"
-      "</div>"
-      "<div id='empty5'></div>");
+  setBodyInnerHTML(R"HTML(
+      <style>
+      #first-child {
+        background-color: red;
+        height: 50px;
+        margin-bottom: 20px;
+      }
+      #float-between-empties {
+        background-color: green;
+        float: left;
+        height: 30px;
+        width: 30px;
+      }
+      #float-between-nonempties {
+        background-color: lightgreen;
+        float: left;
+        height: 40px;
+        width: 40px;
+      }
+      #float-top-align {
+        background-color: seagreen;
+        float: left;
+        height: 50px;
+        width: 50px;
+      }
+      #second-child {
+        background-color: blue;
+        height: 50px;
+        margin-top: 10px;
+      }
+      </style>
+      <div id='first-child'>
+        <div id='empty1' style='margin-bottom: -15px'></div>
+        <div id='float-between-empties'></div>
+        <div id='empty2'></div>
+      </div>
+      <div id='float-between-nonempties'></div>
+      <div id='second-child'>
+        <div id='float-top-align'></div>
+        <div id='empty3'></div>
+        <div id='empty4' style='margin-top: -30px'></div>
+      </div>
+      <div id='empty5'></div>
+    )HTML");
 
   // ** Run LayoutNG algorithm **
   NGConstraintSpace* space;
   RefPtr<NGPhysicalBoxFragment> fragment;
   std::tie(fragment, space) = RunBlockLayoutAlgorithmForElement(
       document().getElementsByTagName("html")->item(0));
 
   auto* body_fragment = toNGPhysicalBoxFragment(fragment->Children()[0].get());
   // -7 = empty1's margin(-15) + body's margin(8)
   int body_top_offset = -7;
@@ skipping 68 matching lines @@
   EXPECT_THAT(space->Exclusions()->storage,
               (ElementsAre(Pointee(float_empties_exclusion),
                            Pointee(float_nonempties_exclusion),
                            Pointee(float_top_align_exclusion))));
 }
 
 // Verifies the collapsing margins case for the next pair:
 // - bottom margin of a last in-flow child and bottom margin of its parent if
 //   the parent has 'auto' computed height
 TEST_F(NGBlockLayoutAlgorithmTest, CollapsingMarginsCase3) {
-  setBodyInnerHTML(
-      "<style>"
-      " #container {"
-      "   margin-bottom: 20px;"
-      " }"
-      " #child {"
-      "   margin-bottom: 200px;"
-      "   height: 50px;"
-      " }"
-      "</style>"
-      "<div id='container'>"
-      "  <div id='child'></div>"
-      "</div>");
+  setBodyInnerHTML(R"HTML(
+      <style>
+       #container {
+         margin-bottom: 20px;
+       }
+       #child {
+         margin-bottom: 200px;
+         height: 50px;
+       }
+      </style>
+      <div id='container'>
+        <div id='child'></div>
+      </div>
+    )HTML");
 
   const NGPhysicalBoxFragment* body_fragment;
   const NGPhysicalBoxFragment* container_fragment;
   const NGPhysicalBoxFragment* child_fragment;
   RefPtr<const NGPhysicalBoxFragment> fragment;
   auto run_test = [&](const Length& container_height) {
     Element* container = document().getElementById("container");
     container->mutableComputedStyle()->setHeight(container_height);
     std::tie(fragment, std::ignore) = RunBlockLayoutAlgorithmForElement(
         document().getElementsByTagName("html")->item(0));
@@ skipping 18 matching lines @@
   run_test(Length(50, Fixed));
   // Margins are not collapsed, so fragment still has margins == 20.
   // The fragment size 78 == body's margin 8 + child's height 50 + 20
   EXPECT_EQ(NGPhysicalSize(LayoutUnit(800), LayoutUnit(78)), fragment->Size());
   EXPECT_EQ(NGMarginStrut(), container_fragment->EndMarginStrut());
 }
 
 // Verifies that 2 adjoining margins are not collapsed if there is padding or
 // border that separates them.
 TEST_F(NGBlockLayoutAlgorithmTest, CollapsingMarginsCase4) {
-  setBodyInnerHTML(
-      "<style>"
-      "  #container {"
-      "    margin: 30px 0px;"
-      "    width: 200px;"
-      "  }"
-      "  #child {"
-      "    margin: 200px 0px;"
-      "    height: 50px;"
-      "    background-color: blue;"
-      "  }"
-      "</style>"
-      "<div id='container'>"
-      "  <div id='child'></div>"
-      "</div>");
+  setBodyInnerHTML(R"HTML(
+      <style>
+        #container {
+          margin: 30px 0px;
+          width: 200px;
+        }
+        #child {
+         margin: 200px 0px;
+          height: 50px;
+          background-color: blue;
+        }
+      </style>
+      <div id='container'>
+        <div id='child'></div>
+      </div>
+    )HTML");
 
   const NGPhysicalBoxFragment* body_fragment;
   const NGPhysicalBoxFragment* container_fragment;
   const NGPhysicalBoxFragment* child_fragment;
   RefPtr<const NGPhysicalBoxFragment> fragment;
   auto run_test = [&](const Length& container_padding_top) {
     Element* container = document().getElementById("container");
     container->mutableComputedStyle()->setPaddingTop(container_padding_top);
     std::tie(fragment, std::ignore) = RunBlockLayoutAlgorithmForElement(
         document().getElementsByTagName("html")->item(0));
@@ skipping 23 matching lines @@
   EXPECT_EQ(NGPhysicalSize(LayoutUnit(800), LayoutUnit(450)), fragment->Size());
   // 200 = (body's margin 8, container's margin 30, child's margin 200)
   EXPECT_EQ(LayoutUnit(200), body_fragment->TopOffset());
   // 0 = collapsed margins
   EXPECT_EQ(LayoutUnit(0), child_fragment->TopOffset());
 }
 
 // Verifies that margins of 2 adjoining blocks with different writing modes
 // get collapsed.
 TEST_F(NGBlockLayoutAlgorithmTest, CollapsingMarginsCase5) {
-  setBodyInnerHTML(
-      "<style>"
-      // TODO(glebl): Remove the fixed height
-      // Fix this once min/max algorithm handles orthogonal children.
-      " body {"
-      "    height: 500px;"
-      "  }"
-      "  #container {"
-      "    margin-top: 10px;"
-      // TODO(glebl): Remove the fixed height
-      // Fix this once min/max algorithm handles orthogonal children.
-      "    width: 500px;"
-      "    writing-mode: vertical-lr;"
-      "  }"
-      "  #vertical {"
-      "    margin-right: 90px;"
-      "    background-color: red;"
-      "    height: 70px;"
-      "    width: 30px;"
-      "  }"
-      "  #horizontal {"
-      "    background-color: blue;"
-      "    margin-left: 100px;"
-      "    writing-mode: horizontal-tb;"
-      "    height: 60px;"
-      "    width: 30px;"
-      "  }"
-      "</style>"
-      "<div id='container'>"
-      "  <div id='vertical'></div>"
-      "  <div id='horizontal'></div>"
-      "</div>");
+  setBodyInnerHTML(R"HTML(
+      <style>
+        #container {
+          margin-top: 10px;
+          writing-mode: vertical-lr;
+        }
+        #vertical {
+          margin-right: 90px;
+          background-color: red;
+          height: 70px;
+          width: 30px;
+        }
+        #horizontal {
+         background-color: blue;
+          margin-left: 100px;
+          writing-mode: horizontal-tb;
+          height: 60px;
+          width: 30px;
+        }
+      </style>
+      <div id='container'>
+        <div id='vertical'></div>
+        <div id='horizontal'></div>
+      </div>
+    )HTML");
   RefPtr<NGPhysicalBoxFragment> fragment;
   std::tie(fragment, std::ignore) = RunBlockLayoutAlgorithmForElement(
       document().getElementsByTagName("html")->item(0));
 
   // body
   auto* body_fragment = toNGPhysicalBoxFragment(fragment->Children()[0].get());
   // 10 = std::max(body's margin 8, container's margin top)
   int body_top_offset = 10;
   EXPECT_THAT(body_fragment->TopOffset(), LayoutUnit(body_top_offset));
   int body_left_offset = 8;
   EXPECT_THAT(body_fragment->LeftOffset(), LayoutUnit(body_left_offset));
   // height = 70. std::max(vertical height's 70, horizontal's height's 60)
   // TODO(glebl): Should be 70! Fix this once min/max algorithm handles
   // orthogonal children.
-  int body_fragment_block_size = 500;
+  int body_fragment_block_size = 130;
   ASSERT_EQ(
       NGPhysicalSize(LayoutUnit(784), LayoutUnit(body_fragment_block_size)),
       body_fragment->Size());
   ASSERT_EQ(1UL, body_fragment->Children().size());
 
   // container
   auto* container_fragment =
       toNGPhysicalBoxFragment(body_fragment->Children()[0].get());
   // Container's margins are collapsed with body's fragment.
   EXPECT_THAT(container_fragment->TopOffset(), LayoutUnit());
@@ skipping 202 matching lines @@
 
   const NGPhysicalFragment* child = frag->Children()[0].get();
   EXPECT_EQ(LayoutUnit(kChildWidth), child->Width());
   EXPECT_EQ(LayoutUnit(kPaddingLeft + 10), child->LeftOffset());
   EXPECT_EQ(LayoutUnit(0), child->TopOffset());
 }
 
 // Verifies that floats can be correctly positioned if they are inside of nested
 // empty blocks.
 TEST_F(NGBlockLayoutAlgorithmTest, PositionFloatInsideEmptyBlocks) {
-  setBodyInnerHTML(
-      "<!DOCTYPE html>"
-      "<style>"
-      "  #container {"
-      "    height: 200px;"
-      "    width: 200px;"
-      "  }"
-      "  #empty1 {"
-      "    margin: 20px;"
-      "    padding: 0 20px;"
-      "  }"
-      "  #empty2 {"
-      "    margin: 15px;"
-      "    padding: 0 15px;"
-      "  }"
-      "  #float {"
-      "    float: left;"
-      "    height: 5px;"
-      "    width: 5px;"
-      "    padding: 10px;"
-      "    margin: 10px;"
-      "    background-color: green;"
-      "  }"
-      "</style>"
-      "<div id='container'>"
-      "  <div id='empty1'>"
-      "    <div id='empty2'>"
-      "      <div id='float'></div>"
-      "    </div>"
-      "  </div>"
-      "</div>");
+  setBodyInnerHTML(R"HTML(
+      <style>
+        #container {
+          height: 200px;
+          width: 200px;
+        }
+        #empty1 {
+          margin: 20px;
+          padding: 0 20px;
+        }
+        #empty2 {
+          margin: 15px;
+          padding: 0 15px;
+        }
+        #float {
+          float: left;
+          height: 5px;
+          width: 5px;
+          padding: 10px;
+          margin: 10px;
+          background-color: green;
+        }
+      </style>
+      <div id='container'>
+        <div id='empty1'>
+          <div id='empty2'>
+            <div id='float'></div>
+          </div>
+        </div>
+      </div>
+    )HTML");
 
   // ** Run LayoutNG algorithm **
   NGConstraintSpace* space;
   RefPtr<NGPhysicalBoxFragment> fragment;
   std::tie(fragment, space) = RunBlockLayoutAlgorithmForElement(
       document().getElementsByTagName("html")->item(0));
 
   auto* body_fragment = toNGPhysicalBoxFragment(fragment->Children()[0].get());
   // 20 = std::max(empty1's margin, empty2's margin, body's margin)
   int body_top_offset = 20;
@@ skipping 48 matching lines @@
   ASSERT_TRUE(floating_object->isPlaced());
   // 80 = float_inline_offset(25) + accumulative offset of empty blocks(35 + 20)
   EXPECT_THAT(LayoutUnit(80), floating_object->x());
   // 10 = float's padding
   EXPECT_THAT(LayoutUnit(10), floating_object->y());
 }
 
 // Verifies that left/right floating and regular blocks can be positioned
 // correctly by the algorithm.
 TEST_F(NGBlockLayoutAlgorithmTest, PositionFloatFragments) {
-  setBodyInnerHTML(
-      "<style>"
-      "  #container {"
-      "    height: 200px;"
-      "    width: 200px;"
-      "  }"
-      "  #left-float {"
-      "    background-color: red;"
-      "    float:left;"
-      "    height: 30px;"
-      "    width: 30px;"
-      "  }"
-      "  #left-wide-float {"
-      "    background-color: greenyellow;"
-      "    float:left;"
-      "    height: 30px;"
-      "    width: 180px;"
-      "  }"
-      "  #regular {"
-      "    width: 40px;"
-      "    height: 40px;"
-      "    background-color: green;"
-      "  }"
-      "  #right-float {"
-      "    background-color: cyan;"
-      "    float:right;"
-      "    width: 50px;"
-      "    height: 50px;"
-      "  }"
-      "  #left-float-with-margin {"
-      "    background-color: black;"
-      "    float:left;"
-      "    height: 120px;"
-      "    margin: 10px;"
-      "    width: 120px;"
-      "  }"
-      "</style>"
-      "<div id='container'>"
-      "  <div id='left-float'></div>"
-      "  <div id='left-wide-float'></div>"
-      "  <div id='regular'></div>"
-      "  <div id='right-float'></div>"
-      "  <div id='left-float-with-margin'></div>"
-      "</div>");
+  setBodyInnerHTML(R"HTML(
+      <style>
+        #container {
+          height: 200px;
+          width: 200px;
+        }
+        #left-float {
+          background-color: red;
+          float: left;
+          height: 30px;
+          width: 30px;
+        }
+        #left-wide-float {
+          background-color: greenyellow;
+          float: left;
+          height: 30px;
+          width: 180px;
+        }
+        #regular {
+          width: 40px;
+          height: 40px;
+          background-color: green;
+        }
+        #right-float {
+          background-color: cyan;
+          float: right;
+          width: 50px;
+          height: 50px;
+        }
+        #left-float-with-margin {
+          background-color: black;
+          float: left;
+          height: 120px;
+          margin: 10px;
+          width: 120px;
+        }
+      </style>
+      <div id='container'>
+        <div id='left-float'></div>
+        <div id='left-wide-float'></div>
+        <div id='regular'></div>
+        <div id='right-float'></div>
+        <div id='left-float-with-margin'></div>
+      </div>
+      )HTML");
 
   // ** Run LayoutNG algorithm **
   NGConstraintSpace* space;
   RefPtr<NGPhysicalBoxFragment> fragment;
   std::tie(fragment, space) = RunBlockLayoutAlgorithmForElement(
       document().getElementsByTagName("html")->item(0));
 
   // ** Verify LayoutNG fragments and the list of positioned floats **
   ASSERT_EQ(1UL, fragment->Children().size());
   auto* body_fragment = toNGPhysicalBoxFragment(fragment->Children()[0].get());
@@ skipping 108 matching lines @@
 
   EXPECT_THAT(
       space->Exclusions()->storage,
       (ElementsAre(Pointee(left_float_exclusion), Pointee(left_wide_exclusion),
                    Pointee(right_float_exclusion),
                    Pointee(left_float_with_margin_exclusion))));
 }
 
 // Verifies that NG block layout algorithm respects "clear" CSS property.
 TEST_F(NGBlockLayoutAlgorithmTest, PositionFragmentsWithClear) {
-  setBodyInnerHTML(
-      "<style>"
-      "  #container {"
-      "    height: 200px;"
-      "    width: 200px;"
-      "  }"
-      "  #float-left {"
-      "    background-color: red;"
-      "    float: left;"
-      "    height: 30px;"
-      "    width: 30px;"
-      "  }"
-      "  #float-right {"
-      "    background-color: blue;"
-      "    float: right;"
-      "    height: 170px;"
-      "    width: 40px;"
-      "  }"
-      "  #clearance {"
-      "    background-color: yellow;"
-      "    height: 60px;"
-      "    width: 60px;"
-      "    margin: 20px;"
-      "  }"
-      "  #block {"
-      "    margin: 40px;"
-      "    background-color: black;"
-      "    height: 60px;"
-      "    width: 60px;"
-      "  }"
-      "  #adjoining-clearance {"
-      "    background-color: green;"
-      "    clear: left;"
-      "    height: 20px;"
-      "    width: 20px;"
-      "    margin: 30px;"
-      "  }"
-      "</style>"
-      "<div id='container'>"
-      "  <div id='float-left'></div>"
-      "  <div id='float-right'></div>"
-      "  <div id='clearance'></div>"
-      "  <div id='block'></div>"
-      "  <div id='adjoining-clearance'></div>"
-      "</div>");
+  setBodyInnerHTML(R"HTML(
+      <style>
+        #container {
+          height: 200px;
+          width: 200px;
+        }
+        #float-left {
+          background-color: red;
+          float: left;
+          height: 30px;
+          width: 30px;
+        }
+        #float-right {
+          background-color: blue;
+          float: right;
+          height: 170px;
+          width: 40px;
+        }
+        #clearance {
+          background-color: yellow;
+          height: 60px;
+          width: 60px;
+          margin: 20px;
+        }
+        #block {
+          margin: 40px;
+          background-color: black;
+          height: 60px;
+          width: 60px;
+        }
+        #adjoining-clearance {
+          background-color: green;
+          clear: left;
+          height: 20px;
+          width: 20px;
+          margin: 30px;
+        }
+      </style>
+      <div id='container'>
+        <div id='float-left'></div>
+        <div id='float-right'></div>
+        <div id='clearance'></div>
+        <div id='block'></div>
+        <div id='adjoining-clearance'></div>
+      </div>
+    )HTML");
 
   const NGPhysicalBoxFragment* clerance_fragment;
   const NGPhysicalBoxFragment* body_fragment;
   const NGPhysicalBoxFragment* container_fragment;
   const NGPhysicalBoxFragment* block_fragment;
   const NGPhysicalBoxFragment* adjoining_clearance_fragment;
   auto run_with_clearance = [&](EClear clear_value) {
     RefPtr<NGPhysicalBoxFragment> fragment;
     Element* el_with_clear = document().getElementById("clearance");
     el_with_clear->mutableComputedStyle()->setClear(clear_value);
@@ skipping 858 matching lines @@
   EXPECT_EQ(LayoutUnit(194), fragment->LeftOffset());
   EXPECT_EQ(LayoutUnit(), fragment->TopOffset());
   EXPECT_EQ(LayoutUnit(16), fragment->Width());
   EXPECT_EQ(LayoutUnit(50), fragment->Height());
   EXPECT_EQ(0UL, fragment->Children().size());
   EXPECT_FALSE(iterator.NextChild());
 }
 
 }  // namespace
 }  // namespace blink