LibWeb: Resolve table border conflicts with cells

Build a mapping from coordinates to cells and use it to resolve border conflicts between adjacent cells.
2025-07-27 13:07:46 +00:00 · 2023-07-09 03:02:54 +00:00 · 2023-07-09 03:02:54 +00:00 · e30662a8a0
commit e30662a8a0
parent d8bdf26917
4 changed files with 131 additions and 2 deletions
--- a/Tests/LibWeb/Layout/expected/table/border-conflict-resolution-with-cell.txt
+++ b/Tests/LibWeb/Layout/expected/table/border-conflict-resolution-with-cell.txt
@ -0,0 +1,64 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x86.9375 children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 172.671875x86.9375 [BFC] children: not-inline
+        Box <table> at (8,8) content-size 172.671875x86.9375 table-box [TFC] children: not-inline
+          BlockContainer <(anonymous)> (not painted) children: inline
+            TextNode <#text>
+          Box <tbody> at (8,8) content-size 172.671875x86.9375 table-row-group children: not-inline
+            BlockContainer <(anonymous)> (not painted) children: inline
+              TextNode <#text>
+            Box <tr> at (8,8) content-size 172.671875x43.46875 table-row children: not-inline
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td> at (29,21) content-size 14.265625x17.46875 table-cell [BFC] children: inline
+                line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 1, rect: [29,21 14.265625x17.46875]
+                    "A"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td.td-thick-border> at (89.265625,21) content-size 9.859375x17.46875 table-cell [BFC] children: inline
+                line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 1, rect: [89.265625,21 9.34375x17.46875]
+                    "B"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td> at (145.125,20) content-size 14.546875x17.46875 table-cell [BFC] children: inline
+                line 0 width: 10.3125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 1, rect: [145.125,20 10.3125x17.46875]
+                    "C"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+            BlockContainer <(anonymous)> (not painted) children: inline
+              TextNode <#text>
+            Box <tr> at (8,51.46875) content-size 172.671875x43.46875 table-row children: not-inline
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td> at (29,64.46875) content-size 16.265625x17.46875 table-cell [BFC] children: inline
+                line 0 width: 11.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 1, rect: [29,64.46875 11.140625x17.46875]
+                    "D"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td> at (87.265625,65.46875) content-size 11.859375x17.46875 table-cell [BFC] children: inline
+                line 0 width: 11.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 1, rect: [87.265625,65.46875 11.859375x17.46875]
+                    "E"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td.td-thick-border> at (145.125,64.46875) content-size 12.546875x17.46875 table-cell [BFC] children: inline
+                line 0 width: 12.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 1, rect: [145.125,64.46875 12.546875x17.46875]
+                    "F"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+            BlockContainer <(anonymous)> (not painted) children: inline
+              TextNode <#text>
+          BlockContainer <(anonymous)> (not painted) children: inline
+            TextNode <#text>
--- a/Tests/LibWeb/Layout/input/table/border-conflict-resolution-with-cell.html
+++ b/Tests/LibWeb/Layout/input/table/border-conflict-resolution-with-cell.html
@ -0,0 +1,29 @@
+<style>
+  table {
+    border-collapse: collapse;
+  }
+
+  td {
+    border: 1px solid black;
+    padding: 10px 20px;
+  }
+
+  .td-thick-border {
+    border: 5px solid black;
+  }
+</style>
+
+<table>
+  <tbody>
+    <tr>
+      <td>A</td>
+      <td class="td-thick-border">B</td>
+      <td>C</td>
+    </tr>
+    <tr>
+      <td>D</td>
+      <td>E</td>
+      <td class="td-thick-border">F</td>
+    </tr>
+  </tbody>
+</table>