[LayoutNG] Correct border painting for block fragmentation.

Add a few new tests, as coverage seemed low.

Fix PhysicalBoxSides writing-mode converter to handle vertical-lr, and
skip sideways-lr and sideways-rl, since those aren't even supported by
the CSS parser.

Update BackgroundRoundedRectAdjustedForBleedAvoidance() to skip the
borders that aren't part of the fragment. I suppose inline fragmentation
wasn't using this code path, but block fragmentation uses it.

Bug: 829028
Change-Id: I7e3f78a4fde54c7da1442efdabe609651cd27d10
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2362902Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#800047}

third_party/blink/renderer/core/layout/geometry/box_sides.h

@@ -51,26 +51,28 @@ struct PhysicalBoxSides {
   PhysicalBoxSides(bool top, bool right, bool bottom, bool left)
       : top(top), right(right), bottom(bottom), left(left) {}
   PhysicalBoxSides(LogicalBoxSides logical, WritingMode writing_mode) {
-    // TODO(mstensho): This needs some fixing. The block sides in vertical-rl
-    // writing-mode are not handled correctly, for instance.
+    // The values sideways-lr and sideways-rl are not supported by the engine,
+    // although they're part of the WritingMode enum.
+    DCHECK(writing_mode != WritingMode::kSidewaysLr);
+    DCHECK(writing_mode != WritingMode::kSidewaysRl);
+
     if (writing_mode == WritingMode::kHorizontalTb) {
       top = logical.block_start;
       right = logical.line_right;
       bottom = logical.block_end;
       left = logical.line_left;
-      return;
-    }
-    if (writing_mode != WritingMode::kSidewaysLr) {
+    } else {
       top = logical.line_left;
-      right = logical.block_start;
       bottom = logical.line_right;
-      left = logical.block_end;
-      return;
+      if (writing_mode == WritingMode::kVerticalRl) {
+        right = logical.block_start;
+        left = logical.block_end;
+      } else {
+        DCHECK_EQ(writing_mode, WritingMode::kVerticalLr);
+        right = logical.block_end;
+        left = logical.block_start;
+      }
     }
-    top = logical.line_right;
-    right = logical.block_end;
-    bottom = logical.line_left;
-    left = logical.block_start;
   }
 
   bool IsEmpty() const { return !top && !right && !bottom && !left; }

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

@@ -297,6 +297,13 @@ bool FinishFragmentation(NGBlockNode node,
       builder->SetDidBreakSelf();
   }
 
+  LogicalBoxSides sides;
+  if (previously_consumed_block_size)
+    sides.block_start = false;
+  if (builder->DidBreakSelf())
+    sides.block_end = false;
+  builder->SetSidesToInclude(sides);
+
   builder->SetConsumedBlockSize(previously_consumed_block_size +
                                 final_block_size);
   builder->SetFragmentBlockSize(final_block_size);

third_party/blink/renderer/core/paint/box_painter_base.cc

@@ -661,11 +661,14 @@ FloatRoundedRect BackgroundRoundedRectAdjustedForBleedAvoidance(
   }
 
   FloatRectOutsets insets(
-      -fractional_inset * edges[static_cast<unsigned>(BoxSide::kTop)].Width(),
-      -fractional_inset * edges[static_cast<unsigned>(BoxSide::kRight)].Width(),
       -fractional_inset *
-          edges[static_cast<unsigned>(BoxSide::kBottom)].Width(),
-      -fractional_inset * edges[static_cast<unsigned>(BoxSide::kLeft)].Width());
+          edges[static_cast<unsigned>(BoxSide::kTop)].UsedWidth(),
+      -fractional_inset *
+          edges[static_cast<unsigned>(BoxSide::kRight)].UsedWidth(),
+      -fractional_inset *
+          edges[static_cast<unsigned>(BoxSide::kBottom)].UsedWidth(),
+      -fractional_inset *
+          edges[static_cast<unsigned>(BoxSide::kLeft)].UsedWidth());
 
   FloatRect inset_rect(background_rounded_rect.Rect());
   inset_rect.Expand(insets);

third_party/blink/web_tests/TestExpectations

@@ -990,6 +990,12 @@ crbug.com/982194 [ Win10 ] paint/invalidation/outline/focus-ring-on-inline-conti
 
 crbug.com/1079031 virtual/layout_ng_block_frag/external/wpt/css/css-break/block-end-aligned-abspos-nested.html [ Failure ]
 crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/block-end-aligned-abspos-with-overflow.html [ Failure ]
+crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/borders-000.html [ Pass ]
+crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/borders-001.html [ Pass ]
+crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/borders-002.html [ Pass ]
+crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/borders-003.html [ Pass ]
+crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/borders-004.html [ Pass ]
+crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/borders-005.html [ Pass ]
 crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/break-at-end-container-edge-000.html [ Pass ]
 crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/break-at-end-container-edge-001.html [ Pass ]
 crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-break/break-at-end-container-edge-002.html [ Pass ]
@@ -1051,7 +1057,6 @@ crbug.com/1079031 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/mul
 crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/multicol-span-all-children-height-002.html [ Failure ]
 crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/multicol-span-all-children-height-003.html [ Failure ]
 crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/multicol-span-all-children-height-006.html [ Failure ]
-crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/multicol-span-all-children-height-007.html [ Failure ]
 crbug.com/829028 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/multicol-span-all-children-height-008.html [ Failure ]
 crbug.com/994172 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/multicol-span-all-dynamic-add-007.html [ Pass Crash ]
 crbug.com/924142 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/multicol-span-all-dynamic-add-010.html [ Crash Pass ]
@@ -3383,6 +3388,12 @@ crbug.com/1034807 [ Mac ] virtual/off-main-thread-css-paint/external/wpt/css/css
 crbug.com/982116 http/tests/devtools/elements/styles-4/styles-new-API.js [ Pass Timeout ]
 
 crbug.com/829028 external/wpt/css/css-break/avoid-border-break.html [ Failure ]
+crbug.com/829028 external/wpt/css/css-break/borders-000.html [ Failure ]
+crbug.com/829028 external/wpt/css/css-break/borders-001.html [ Failure ]
+crbug.com/829028 external/wpt/css/css-break/borders-002.html [ Failure ]
+crbug.com/829028 external/wpt/css/css-break/borders-003.html [ Failure ]
+crbug.com/829028 external/wpt/css/css-break/borders-004.html [ Failure ]
+crbug.com/829028 external/wpt/css/css-break/borders-005.html [ Failure ]
 crbug.com/829028 external/wpt/css/css-break/break-at-end-container-edge-000.html [ Failure ]
 crbug.com/829028 external/wpt/css/css-break/break-at-end-container-edge-001.html [ Failure ]
 crbug.com/829028 external/wpt/css/css-break/break-at-end-container-edge-002.html [ Failure ]

third_party/blink/web_tests/external/wpt/css/css-break/borders-000-ref.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<p>There should be a yellow box with a hotpink border in the second column.</p>
+<div style="float:left; margin-left:110px; border:10px solid hotpink; width:80px; height:80px; background:yellow;"></div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-000.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
+<link rel="match" href="borders-000-ref.html">
+<p>There should be a yellow box with a hotpink border in the second column.</p>
+<div style="columns:4; column-gap:10px; column-fill:auto; width:430px; height:100px;">
+  <div style="height:95px;"></div>
+  <div style="border:10px solid hotpink; height:80px; background:yellow;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-001-ref.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<p>There should be a yellow box that starts in the second column and ends in the
+  third. The top border should be in the second column, and the bottom border
+  should be in the third.</p>
+<div style="float:left; margin-left:110px; border:10px solid hotpink; border-bottom:none; width:80px; height:90px; background:yellow;"></div>
+<div style="float:left; margin-left:10px; border:10px solid hotpink; border-top:none; width:80px; height:10px; background:yellow;"></div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-001.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
+<link rel="match" href="borders-001-ref.html">
+<p>There should be a yellow box that starts in the second column and ends in the
+  third. The top border should be in the second column, and the bottom border
+  should be in the third.</p>
+<div style="columns:4; column-gap:10px; column-fill:auto; width:430px; height:100px;">
+  <div style="height:95px;"></div>
+  <div style="border:10px solid hotpink; height:100px; background:yellow;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-002-ref.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<p>There should be a yellow box that starts in the second column and ends in the
+  fourth. The top border should be in the second column, and the bottom border
+  should be in the fourth.</p>
+<div style="float:left; margin-left:110px; border:10px solid hotpink; border-bottom:none; width:80px; height:90px; background:yellow;"></div>
+<div style="float:left; margin-left:10px; border:10px solid hotpink; border-bottom:none; border-top:none; width:80px; height:100px; background:yellow;"></div>
+<div style="float:left; margin-left:10px; border:10px solid hotpink; border-top:none; width:80px; height:60px; background:yellow;"></div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-002.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
+<link rel="match" href="borders-002-ref.html">
+<p>There should be a yellow box that starts in the second column and ends in the
+  fourth. The top border should be in the second column, and the bottom border
+  should be in the fourth.</p>
+<div style="columns:4; column-gap:10px; column-fill:auto; width:430px; height:100px;">
+  <div style="height:95px;"></div>
+  <div style="border:10px solid hotpink; height:250px; background:yellow;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-003-ref.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  .container {
+      float: left;
+      width: 200px;
+      height: 100px;
+      margin-right: 10px;
+  }
+  .box {
+      border-radius: 15px;
+      border: 20px solid hotpink;
+      background: yellow;
+  }
+  .skip-start {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none;
+  }
+  .skip-end {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: none;
+  }
+</style>
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The border should be rounded at the start (first column) and at the end
+  (last column).</p>
+<div class="container">
+  <div class="box skip-end" style="height:80px;"></div>
+</div>
+<div class="container">
+  <div class="box skip-start skip-end" style="height:100px;"></div>
+</div>
+<div class="container">
+  <div class="box skip-start" style="height:70px;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-003.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
+<link rel="match" href="borders-003-ref.html">
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The border should be rounded at the start (first column) and at the end
+  (last column).</p>
+<div style="columns:3; column-gap:10px; column-fill:auto; width:620px; height:100px;">
+  <div style="border-radius:15px; border:20px solid hotpink; height:250px; background:yellow;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-004-ref.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  .container {
+      float: left;
+      width: 200px;
+      height: 100px;
+      margin-right: 10px;
+  }
+  .box {
+      border-radius: 40px;
+      border: 20px solid hotpink;
+      background: yellow;
+  }
+  .skip-start {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none;
+  }
+  .skip-end {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: none;
+  }
+</style>
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The border should be rounded at the start (first column) and at the end
+  (last column).</p>
+<div class="container">
+  <div class="box skip-end" style="height:80px;"></div>
+</div>
+<div class="container">
+  <div class="box skip-start skip-end" style="height:100px;"></div>
+</div>
+<div class="container">
+  <div class="box skip-start" style="height:70px;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-004.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
+<link rel="match" href="borders-004-ref.html">
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The border should be rounded at the start (first column) and at the end
+  (last column).</p>
+<div style="columns:3; column-gap:10px; column-fill:auto; width:620px; height:100px;">
+  <div style="border-radius:40px; border:20px solid hotpink; height:250px; background:yellow;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-005-ref.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  .container {
+      float: left;
+      width: 200px;
+      height: 100px;
+      margin-right: 10px;
+  }
+  .box {
+      border-radius: 80px;
+      border: 20px solid hotpink;
+      background: yellow;
+  }
+  .skip-start {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none;
+  }
+  .skip-end {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom: none;
+  }
+</style>
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The border should be rounded at the start (first column) and at the end
+  (last column).</p>
+<div class="container">
+  <div class="box skip-end" style="height:80px;"></div>
+</div>
+<div class="container">
+  <div class="box skip-start skip-end" style="height:100px;"></div>
+</div>
+<div class="container">
+  <div class="box skip-start" style="height:70px;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-005.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
+<link rel="match" href="borders-005-ref.html">
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The border should be rounded at the start (first column) and at the end
+  (last column).</p>
+<div style="columns:3; column-gap:10px; column-fill:auto; width:620px; height:100px;">
+  <div style="border-radius:80px; border:20px solid hotpink; height:250px; background:yellow;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-006-ref.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  .box {
+      height: 80px;
+      margin-bottom: 10px;
+      border: 10px solid hotpink;
+      background: yellow;
+  }
+  .skip-start {
+      border-left: none;
+  }
+  .skip-end {
+      border-right: none;
+  }
+</style>
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The block-start border should be in the first column, and the block-end
+  border should be in the third.</p>
+<div class="box skip-end" style="width:90px;"></div>
+<div class="box skip-start skip-end" style="width:100px;"></div>
+<div class="box skip-start" style="width:60px;"></div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-006.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
+<link rel="match" href="borders-006-ref.html">
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The block-start border should be in the first column, and the block-end
+  border should be in the third.</p>
+<div style="columns:3; column-gap:10px; column-fill:auto; writing-mode:vertical-lr; inline-size:320px; block-size:100px;">
+  <div style="border:10px solid hotpink; block-size:250px; background:yellow;"></div>
+</div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-007-ref.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  .box {
+      height: 80px;
+      margin-bottom: 10px;
+      border: 10px solid hotpink;
+      background: yellow;
+  }
+  .skip-start {
+      border-right: none;
+  }
+  .skip-end {
+      border-left: none;
+  }
+</style>
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The block-start border should be in the first column, and the block-end
+  border should be in the third.</p>
+<div class="box skip-end" style="width:90px;"></div>
+<div class="box skip-start skip-end" style="width:100px;"></div>
+<div class="box skip-start" style="margin-left:30px; width:60px;"></div>

third_party/blink/web_tests/external/wpt/css/css-break/borders-007.html

+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration">
+<link rel="match" href="borders-007-ref.html">
+<p>There should be a yellow box that starts in the first column and ends in the
+  third. The block-start border should be in the first column, and the block-end
+  border should be in the third.</p>
+<div style="columns:3; column-gap:10px; column-fill:auto; writing-mode:vertical-rl; inline-size:320px; block-size:100px;">
+  <div style="border:10px solid hotpink; block-size:250px; background:yellow;"></div>
+</div>