[TableFragmentation] Fix collapsed borders near fragmentation boundaries
This does some fixes to collapsed borders around fragmentation
boundaries.
Firstly it excludes the over/under border from the joint calculation
when at a fragmentation boundary. This prevents the border seemingly
having a random joint color when fragmentation is present.
We check if we should draw a "half" border if we are at a fragmentation
boundary, and we know we have previous/next table content. We check
this by looking at the row indices to determine if there are subsequent
rows.
I've made the test .tentative as the joint logic isn't really written
down anywhere, and everyone has bad behaviour here.
Bug: 1078927
Change-Id: I7a12458bb128f3a6650b2a408cef218ae1093dd3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3662014
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1008101}
diff --git a/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html b/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html
new file mode 100644
index 0000000..04d6434
--- /dev/null
+++ b/css/css-break/table/table-collapsed-borders-paint-at-boundary-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.multicol {
+ width: 500px;
+ height: 100px;
+ columns: 5;
+ column-fill: auto;
+ gap: 10px;
+ padding: 10px;
+ border: solid 3px;
+}
+</style>
+<div class="multicol">
+ <div style="background: dodgerblue; height: 150px;"></div>
+ <div style="height: 35px; border: solid 10px lime; border-bottom-width: 5px; margin-left: 2.5px; margin-right: 2.5px;"></div>
+ <div style="height: 95px; border: solid black; border-width: 0 10px 5px 15px; margin-right: 2.5px;">
+ <div style="border-top: solid lime 5px;"></div>
+ </div>
+ <div style="height: 5px; background: black; border-right: solid blue 15px; margin-left: 2.5px;"></div>
+ <div style="height: 40px; border: solid blue; border-width: 0 15px 10px 10px; margin-left: 2.5px;"></div>
+ <div style="height: 40px; border: solid blue; border-width: 0 10px 5px 10px; margin-left: 2.5px; margin-right: 2.5px;"></div>
+ <div style="height: 70px; border: solid blue; border-width: 5px 10px 10px 10px; margin-left: 2.5px; margin-right: 2.5px;"></div>
diff --git a/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html b/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html
new file mode 100644
index 0000000..0227b57
--- /dev/null
+++ b/css/css-break/table/table-collapsed-borders-paint-at-boundary.tentative.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link rel="match" href="table-collapsed-borders-paint-at-boundary-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering">
+<style>
+.multicol {
+ width: 500px;
+ height: 100px;
+ columns: 5;
+ column-fill: auto;
+ gap: 10px;
+ padding: 10px;
+ border: solid 3px;
+}
+</style>
+<div class="multicol">
+ <table style="border-collapse: collapse; width: 100%;">
+ <caption style="background: dodgerblue; height: 150px;"></caption>
+ <tbody>
+ <tr style="height: 45px;">
+ <td style="border: solid 10px lime;"></td>
+ </tr>
+ <tr style="height: 100px;">
+ <td style="border: solid 10px; border-left-width: 15px;"></td>
+ </tr>
+ </tbody>
+ <tbody>
+ <tr style="height: 50px;">
+ <td style="border: solid blue 10px; border-right-width: 15px;"></td>
+ </tr>
+ <tr style="height: 50px;">
+ <td style="border: solid blue 10px;"></td>
+ </tr>
+ <tr style="height: 80px;">
+ <td style="border: solid blue 10px;"></td>
+ </tr>
+ </tbody>
+ </table>
+</div>
