Bug 1660095 [wpt PR 25119] - [LayoutNG] Correct border painting for block fragmentation., a=testonly
authorMorten Stenshorne <mstensho@chromium.org>
Wed, 26 Aug 2020 08:50:22 +0000
changeset 546443 87ee5d4898acd6e62af5b7ff17d7f620ba526aae
parent 546442 f3ab6c5183be0180817e7c9b018802a3693aa8bc
child 546444 789c0009ccab64be7a337326ec4f5a8c22663dbd
push id37735
push userabutkovits@mozilla.com
push dateThu, 27 Aug 2020 21:29:40 +0000
treeherdermozilla-central@109f3a4de567 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1660095, 25119, 829028, 2362902, 800047
milestone82.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1660095 [wpt PR 25119] - [LayoutNG] Correct border painting for block fragmentation., a=testonly Automatic update from web-platform-tests [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/+/2362902 Reviewed-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} -- wpt-commits: 01ce6e496d457671942418efae0a35583c425544 wpt-pr: 25119
testing/web-platform/tests/css/css-break/borders-000-ref.html
testing/web-platform/tests/css/css-break/borders-000.html
testing/web-platform/tests/css/css-break/borders-001-ref.html
testing/web-platform/tests/css/css-break/borders-001.html
testing/web-platform/tests/css/css-break/borders-002-ref.html
testing/web-platform/tests/css/css-break/borders-002.html
testing/web-platform/tests/css/css-break/borders-003-ref.html
testing/web-platform/tests/css/css-break/borders-003.html
testing/web-platform/tests/css/css-break/borders-004-ref.html
testing/web-platform/tests/css/css-break/borders-004.html
testing/web-platform/tests/css/css-break/borders-005-ref.html
testing/web-platform/tests/css/css-break/borders-005.html
testing/web-platform/tests/css/css-break/borders-006-ref.html
testing/web-platform/tests/css/css-break/borders-006.html
testing/web-platform/tests/css/css-break/borders-007-ref.html
testing/web-platform/tests/css/css-break/borders-007.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-000-ref.html
@@ -0,0 +1,4 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-000.html
@@ -0,0 +1,9 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-001-ref.html
@@ -0,0 +1,7 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-001.html
@@ -0,0 +1,11 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-002-ref.html
@@ -0,0 +1,8 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-002.html
@@ -0,0 +1,11 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-003-ref.html
@@ -0,0 +1,37 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-003.html
@@ -0,0 +1,10 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-004-ref.html
@@ -0,0 +1,37 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-004.html
@@ -0,0 +1,10 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-005-ref.html
@@ -0,0 +1,37 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-005.html
@@ -0,0 +1,10 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-006-ref.html
@@ -0,0 +1,22 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-006.html
@@ -0,0 +1,10 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-007-ref.html
@@ -0,0 +1,22 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/borders-007.html
@@ -0,0 +1,10 @@
+<!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>