[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 <[email protected]> Reviewed-by: Philip Rogers <[email protected]> Reviewed-by: Morten Stenshorne <[email protected]> Cr-Commit-Position: refs/heads/main@{#1008101}
web-platform-tests · May 27, 2022 · 982b82b · 982b82b
1 parent b28e5b1
commit 982b82b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
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
@@ -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
@@ -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>