Browse Source

LibWeb: Don't subtract border from used table width

The used width is already a content width, which doesn't include
borders. Border widths should be subtracted from the specified width
instead, since that initially specifies the total width including
borders, for consistent comparison. Also handle table box padding as an
additional fix.
Andi Gallo 2 years ago
parent
commit
2c4908094c

+ 6 - 6
Tests/LibWeb/Layout/expected/css-pseudo-element-should-not-be-affected-by-presentational-hints.txt

@@ -1,12 +1,12 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (1,1) content-size 798x124 [BFC] children: not-inline
     BlockContainer <body> at (10,10) content-size 780x106 children: not-inline
-      TableWrapper <(anonymous)> at (10,10) content-size 106x106 [BFC] children: not-inline
-        Box <table> at (11,11) content-size 104x104 table-box [TFC] children: not-inline
-          Box <tbody> at (11,11) content-size 100x100 table-row-group children: not-inline
-            Box <tr> at (13,13) content-size 100x100 table-row children: not-inline
-              BlockContainer <td> at (15,51.082031) content-size 96x23.835937 table-cell [BFC] children: not-inline
-                BlockContainer <(anonymous)> at (16,52.082031) content-size 94x21.835937 children: inline
+      TableWrapper <(anonymous)> at (10,10) content-size 108x106 [BFC] children: not-inline
+        Box <table> at (11,11) content-size 108x104 table-box [TFC] children: not-inline
+          Box <tbody> at (11,11) content-size 104x100 table-row-group children: not-inline
+            Box <tr> at (13,13) content-size 104x100 table-row children: not-inline
+              BlockContainer <td> at (15,51.082031) content-size 100x23.835937 table-cell [BFC] children: not-inline
+                BlockContainer <(anonymous)> at (16,52.082031) content-size 98x21.835937 children: inline
                   line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062
                     frag 0 from TextNode start: 0, length: 0, rect: [16,52.082031 0x21.835937]
                       ""

+ 2 - 2
Tests/LibWeb/Layout/expected/percentage-max-height-when-containing-block-has-indefinite-height.txt

@@ -33,8 +33,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
           TextNode <#text>
       BlockContainer <(anonymous)> at (10,93.875) content-size 780x0 children: inline
         TextNode <#text>
-      TableWrapper <(anonymous)> at (10,93.875) content-size 38.625x21.46875 [BFC] children: not-inline
-        Box <div.table.formatting-context> at (11,94.875) content-size 38.625x19.46875 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (10,93.875) content-size 40.625x21.46875 [BFC] children: not-inline
+        Box <div.table.formatting-context> at (11,94.875) content-size 40.625x19.46875 table-box [TFC] children: not-inline
           Box <(anonymous)> at (11,94.875) content-size 40.625x19.46875 table-row children: not-inline
             BlockContainer <(anonymous)> at (11,94.875) content-size 40.625x19.46875 table-cell [BFC] children: not-inline
               BlockContainer <div> at (12,95.875) content-size 38.625x17.46875 children: inline

+ 2 - 2
Tests/LibWeb/Layout/expected/table/align-top-and-bottom.txt

@@ -1,8 +1,8 @@
 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 784x100.9375 children: not-inline
-      TableWrapper <(anonymous)> at (8,8) content-size 196.328125x100.9375 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 196.328125x98.9375 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 198.328125x100.9375 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 198.328125x98.9375 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (9,9) content-size 198.328125x98.9375 table-row-group children: not-inline

+ 27 - 0
Tests/LibWeb/Layout/expected/table/border-spacing-and-borders-table-width.txt

@@ -0,0 +1,27 @@
+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 784x77.46875 children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 113.609375x77.46875 [BFC] children: not-inline
+        Box <table> at (23,13) content-size 113.609375x67.46875 table-box [TFC] children: not-inline
+          BlockContainer <(anonymous)> (not painted) children: inline
+            TextNode <#text>
+          Box <tbody> at (23,13) content-size 83.609375x47.46875 table-row-group children: not-inline
+            Box <tr> at (33,23) content-size 83.609375x47.46875 table-row children: not-inline
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td> at (48,38) 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: [48,38 14.265625x17.46875]
+                    "A"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+              BlockContainer <td> at (102.265625,38) content-size 9.34375x17.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: [102.265625,38 9.34375x17.46875]
+                    "B"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+            BlockContainer <(anonymous)> (not painted) children: inline
+              TextNode <#text>

+ 2 - 2
Tests/LibWeb/Layout/expected/table/border-spacing-colspan.txt

@@ -5,8 +5,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
     BlockContainer <body> at (8,8) content-size 784x259.34375 children: not-inline
       BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
         TextNode <#text>
-      TableWrapper <(anonymous)> at (8,8) content-size 239.90625x259.34375 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 239.90625x257.34375 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 241.90625x259.34375 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 241.90625x257.34375 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (9,9) content-size 161.90625x197.34375 table-row-group children: not-inline

+ 2 - 2
Tests/LibWeb/Layout/expected/table/border-spacing-rowspan.txt

@@ -5,8 +5,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
     BlockContainer <body> at (8,8) content-size 784x259.34375 children: not-inline
       BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
         TextNode <#text>
-      TableWrapper <(anonymous)> at (8,8) content-size 239.90625x259.34375 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 239.90625x257.34375 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 241.90625x259.34375 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 241.90625x257.34375 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (9,9) content-size 161.90625x197.34375 table-row-group children: not-inline

+ 2 - 2
Tests/LibWeb/Layout/expected/table/border-spacing.txt

@@ -5,8 +5,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
     BlockContainer <body> at (8,8) content-size 784x259.34375 children: not-inline
       BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
         TextNode <#text>
-      TableWrapper <(anonymous)> at (8,8) content-size 239.90625x259.34375 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 239.90625x257.34375 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 241.90625x259.34375 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 241.90625x257.34375 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (9,9) content-size 161.90625x197.34375 table-row-group children: not-inline

+ 2 - 2
Tests/LibWeb/Layout/expected/table/borders.txt

@@ -1,8 +1,8 @@
 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 784x285.625 children: not-inline
-      TableWrapper <(anonymous)> at (8,8) content-size 170.296875x74.40625 [BFC] children: not-inline
-        Box <table.table-border-black> at (9,9) content-size 170.296875x72.40625 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 172.296875x74.40625 [BFC] children: not-inline
+        Box <table.table-border-black> at (9,9) content-size 172.296875x72.40625 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (9,9) content-size 166.296875x64.40625 table-row-group children: not-inline

+ 11 - 11
Tests/LibWeb/Layout/expected/table/colspan-weighted-width-distribution.txt

@@ -1,36 +1,36 @@
 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 784x44.9375 children: not-inline
-      TableWrapper <(anonymous)> at (8,8) content-size 206x44.9375 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 204x42.9375 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 208x44.9375 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 208x42.9375 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
-          Box <tbody> at (9,9) content-size 204x42.9375 table-row-group children: not-inline
-            Box <tr> at (9,9) content-size 204x21.46875 table-row children: not-inline
+          Box <tbody> at (9,9) content-size 208x42.9375 table-row-group children: not-inline
+            Box <tr> at (9,9) content-size 208x21.46875 table-row children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (11,11) content-size 176.241651x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (11,11) content-size 180x17.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: [92,11 14.265625x17.46875]
+                  frag 0 from TextNode start: 0, length: 1, rect: [94,11 14.265625x17.46875]
                     "A"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (191.241651,11) content-size 19.758348x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (195,11) content-size 20x17.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: [196.241651,11 9.34375x17.46875]
+                  frag 0 from TextNode start: 0, length: 1, rect: [200,11 9.34375x17.46875]
                     "B"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
             BlockContainer <(anonymous)> (not painted) children: inline
               TextNode <#text>
-            Box <tr> at (9,30.46875) content-size 204x21.46875 table-row children: not-inline
+            Box <tr> at (9,30.46875) content-size 208x21.46875 table-row children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (11,32.46875) content-size 200x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (11,32.46875) content-size 204x17.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: [106,32.46875 10.3125x17.46875]
+                  frag 0 from TextNode start: 0, length: 1, rect: [108,32.46875 10.3125x17.46875]
                     "C"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline

+ 2 - 2
Tests/LibWeb/Layout/expected/table/colspan-width-distribution.txt

@@ -5,8 +5,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
     BlockContainer <body> at (8,8) content-size 784x44.9375 children: not-inline
       BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
         TextNode <#text>
-      TableWrapper <(anonymous)> at (8,8) content-size 35.3125x44.9375 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 35.3125x42.9375 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 37.3125x44.9375 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 37.3125x42.9375 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (9,9) content-size 37.3125x42.9375 table-row-group children: not-inline

+ 5 - 5
Tests/LibWeb/Layout/expected/table/columns-width-distribution-1.txt

@@ -1,15 +1,15 @@
 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 784x113.15625 children: not-inline
-      TableWrapper <(anonymous)> at (8,8) content-size 782x113.15625 [BFC] children: not-inline
-        Box <table.ambox> at (9,9) content-size 780x111.15625 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 784x113.15625 [BFC] children: not-inline
+        Box <table.ambox> at (9,9) content-size 784x111.15625 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
-          Box <tbody> at (9,9) content-size 774x107.15625 table-row-group children: not-inline
-            Box <tr> at (11,11) content-size 774x107.15625 table-row children: not-inline
+          Box <tbody> at (9,9) content-size 778x107.15625 table-row-group children: not-inline
+            Box <tr> at (11,11) content-size 778x107.15625 table-row children: not-inline
               BlockContainer <td.mbox-image> at (12,39.578125) content-size 50x50 table-cell [BFC] children: not-inline
                 BlockContainer <div.mbox-image-div> at (12,39.578125) content-size 50x50 children: not-inline
-              BlockContainer <td.mbox-text> at (66,12) content-size 720x105.15625 table-cell [BFC] children: inline
+              BlockContainer <td.mbox-text> at (66,12) content-size 724x105.15625 table-cell [BFC] children: inline
                 line 0 width: 689.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
                   frag 0 from TextNode start: 1, length: 84, rect: [66,12 689.640625x17.46875]
                     "In a scene set in a lawyer's office, the lawyer sits alone and bounces a rubber ball"

+ 29 - 32
Tests/LibWeb/Layout/expected/table/long-caption-increases-width.txt

@@ -1,41 +1,38 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x146.21875 [BFC] children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x127.8125 [BFC] children: not-inline
     BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
       TextNode <#text>
-    BlockContainer <body> at (8,8) content-size 784x130.21875 children: not-inline
-      TableWrapper <(anonymous)> at (8,8) content-size 55.046875x130.21875 [BFC] children: not-inline
-        Box <table#full-table> at (10,61.8125) content-size 55.046875x72.40625 table-box [TFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x111.8125 children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 59.046875x111.8125 [BFC] children: not-inline
+        Box <table#full-table> at (10,43.40625) content-size 59.046875x72.40625 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
-          BlockContainer <caption> at (8,8) content-size 59.046875x53.8125 [BFC] children: inline
-            line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-              frag 0 from TextNode start: 1, length: 1, rect: [22,8 14.265625x17.46875]
-                "A"
-            line 1 width: 31.765625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
-              frag 0 from TextNode start: 3, length: 4, rect: [14,25 31.765625x17.46875]
-                "long"
-            line 2 width: 59.046875, height: 18.40625, bottom: 53.34375, baseline: 13.53125
-              frag 0 from TextNode start: 8, length: 7, rect: [8,42 59.046875x17.46875]
+          BlockContainer <caption> at (8,8) content-size 59.046875x35.40625 [BFC] children: inline
+            line 0 width: 54.03125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+              frag 0 from TextNode start: 1, length: 6, rect: [9,8 54.03125x17.46875]
+                "A long"
+            line 1 width: 59.046875, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+              frag 0 from TextNode start: 8, length: 7, rect: [8,25 59.046875x17.46875]
                 "caption"
             TextNode <#text>
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
-          Box <thead> at (10,10) content-size 51.6875x21.46875 table-header-group children: not-inline
+          Box <thead> at (10,10) content-size 53.046875x21.46875 table-header-group children: not-inline
             BlockContainer <(anonymous)> (not painted) children: inline
               TextNode <#text>
-            Box <tr> at (12,63.8125) content-size 51.6875x21.46875 table-row children: not-inline
+            Box <tr> at (12,45.40625) content-size 53.046875x21.46875 table-row children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (14,65.8125) content-size 20.609375x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (14,47.40625) content-size 21.256598x17.46875 table-cell [BFC] children: inline
                 line 0 width: 20.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-                  frag 0 from TextNode start: 0, length: 2, rect: [14,65.8125 20.609375x17.46875]
+                  frag 0 from TextNode start: 0, length: 2, rect: [14,47.40625 20.609375x17.46875]
                     "A1"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (40.609375,65.8125) content-size 23.078125x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (41.256598,47.40625) content-size 23.790276x17.46875 table-cell [BFC] children: inline
                 line 0 width: 23.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-                  frag 0 from TextNode start: 0, length: 2, rect: [40.609375,65.8125 23.078125x17.46875]
+                  frag 0 from TextNode start: 0, length: 2, rect: [41.256598,47.40625 23.078125x17.46875]
                     "A2"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
@@ -44,22 +41,22 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
               TextNode <#text>
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
-          Box <tbody> at (10,31.46875) content-size 51.6875x21.46875 table-row-group children: not-inline
+          Box <tbody> at (10,31.46875) content-size 53.046875x21.46875 table-row-group children: not-inline
             BlockContainer <(anonymous)> (not painted) children: inline
               TextNode <#text>
-            Box <tr> at (12,85.28125) content-size 51.6875x21.46875 table-row children: not-inline
+            Box <tr> at (12,66.875) content-size 53.046875x21.46875 table-row children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (14,89.28125) content-size 20.609375x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (14,70.875) content-size 21.256598x17.46875 table-cell [BFC] children: inline
                 line 0 width: 15.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-                  frag 0 from TextNode start: 0, length: 2, rect: [14,89.28125 15.6875x17.46875]
+                  frag 0 from TextNode start: 0, length: 2, rect: [14,70.875 15.6875x17.46875]
                     "B1"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (40.609375,89.28125) content-size 23.078125x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (41.256598,70.875) content-size 23.790276x17.46875 table-cell [BFC] children: inline
                 line 0 width: 18.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-                  frag 0 from TextNode start: 0, length: 2, rect: [40.609375,89.28125 18.15625x17.46875]
+                  frag 0 from TextNode start: 0, length: 2, rect: [41.256598,70.875 18.15625x17.46875]
                     "B2"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
@@ -68,22 +65,22 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
               TextNode <#text>
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
-          Box <tfoot> at (10,52.9375) content-size 51.6875x21.46875 table-footer-group children: not-inline
+          Box <tfoot> at (10,52.9375) content-size 53.046875x21.46875 table-footer-group children: not-inline
             BlockContainer <(anonymous)> (not painted) children: inline
               TextNode <#text>
-            Box <tr> at (12,106.75) content-size 51.6875x21.46875 table-row children: not-inline
+            Box <tr> at (12,88.34375) content-size 53.046875x21.46875 table-row children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (14,112.75) content-size 20.609375x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (14,94.34375) content-size 21.256598x17.46875 table-cell [BFC] children: inline
                 line 0 width: 18.890625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-                  frag 0 from TextNode start: 0, length: 2, rect: [14,112.75 18.890625x17.46875]
+                  frag 0 from TextNode start: 0, length: 2, rect: [14,94.34375 18.890625x17.46875]
                     "F1"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (40.609375,112.75) content-size 23.078125x17.46875 table-cell [BFC] children: inline
+              BlockContainer <td> at (41.256598,94.34375) content-size 23.790276x17.46875 table-cell [BFC] children: inline
                 line 0 width: 21.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-                  frag 0 from TextNode start: 0, length: 2, rect: [40.609375,112.75 21.359375x17.46875]
+                  frag 0 from TextNode start: 0, length: 2, rect: [41.256598,94.34375 21.359375x17.46875]
                     "F2"
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
@@ -92,5 +89,5 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
               TextNode <#text>
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
-      BlockContainer <(anonymous)> at (8,138.21875) content-size 784x0 children: inline
+      BlockContainer <(anonymous)> at (8,119.8125) content-size 784x0 children: inline
         TextNode <#text>

+ 2 - 2
Tests/LibWeb/Layout/expected/table/multi-line-cell.txt

@@ -1,8 +1,8 @@
 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.8125 children: not-inline
-      TableWrapper <(anonymous)> at (8,8) content-size 77.4375x86.8125 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 77.4375x84.8125 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 79.4375x86.8125 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 79.4375x84.8125 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (9,9) content-size 75.4375x78.8125 table-row-group children: not-inline

+ 10 - 10
Tests/LibWeb/Layout/expected/table/row-span-and-nested-tables.txt

@@ -5,14 +5,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
     BlockContainer <body> at (8,8) content-size 784x116.40625 children: not-inline
       BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
         TextNode <#text>
-      TableWrapper <(anonymous)> at (8,8) content-size 67.828125x116.40625 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 67.828125x114.40625 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 71.828125x116.40625 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 71.828125x114.40625 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
-          Box <tbody> at (9,9) content-size 63.828125x108.40625 table-row-group children: not-inline
+          Box <tbody> at (9,9) content-size 65.828125x108.40625 table-row-group children: not-inline
             BlockContainer <(anonymous)> (not painted) children: inline
               TextNode <#text>
-            Box <tr> at (11,11) content-size 63.828125x54.203125 table-row children: not-inline
+            Box <tr> at (11,11) content-size 65.828125x54.203125 table-row children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
               BlockContainer <td> at (17,29.367187) content-size 11.5625x17.46875 table-cell [BFC] children: inline
@@ -22,11 +22,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                 TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
-              BlockContainer <td> at (42.5625,17) content-size 28.265625x98.40625 table-cell [BFC] children: not-inline
-                BlockContainer <(anonymous)> at (42.5625,17) content-size 28.265625x0 children: inline
+              BlockContainer <td> at (42.5625,17) content-size 30.265625x98.40625 table-cell [BFC] children: not-inline
+                BlockContainer <(anonymous)> at (42.5625,17) content-size 30.265625x0 children: inline
                   TextNode <#text>
-                TableWrapper <(anonymous)> at (42.5625,17) content-size 28.265625x98.40625 [BFC] children: not-inline
-                  Box <table> at (43.5625,18) content-size 28.265625x96.40625 table-box [TFC] children: not-inline
+                TableWrapper <(anonymous)> at (42.5625,17) content-size 30.265625x98.40625 [BFC] children: not-inline
+                  Box <table> at (43.5625,18) content-size 30.265625x96.40625 table-box [TFC] children: not-inline
                     BlockContainer <(anonymous)> (not painted) children: inline
                       TextNode <#text>
                     Box <tbody> at (43.5625,18) content-size 26.265625x88.40625 table-row-group children: not-inline
@@ -70,13 +70,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                         TextNode <#text>
                     BlockContainer <(anonymous)> (not painted) children: inline
                       TextNode <#text>
-                BlockContainer <(anonymous)> at (42.5625,115.40625) content-size 28.265625x0 children: inline
+                BlockContainer <(anonymous)> at (42.5625,115.40625) content-size 30.265625x0 children: inline
                   TextNode <#text>
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
             BlockContainer <(anonymous)> (not painted) children: inline
               TextNode <#text>
-            Box <tr> at (11,65.203125) content-size 63.828125x54.203125 table-row children: not-inline
+            Box <tr> at (11,65.203125) content-size 65.828125x54.203125 table-row children: not-inline
               BlockContainer <(anonymous)> (not painted) children: inline
                 TextNode <#text>
               BlockContainer <td> at (17,85.570312) content-size 11.5625x17.46875 table-cell [BFC] children: inline

+ 2 - 2
Tests/LibWeb/Layout/expected/table/stretch-to-fixed-height.txt

@@ -1,8 +1,8 @@
 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 784x122 children: not-inline
-      TableWrapper <(anonymous)> at (8,8) content-size 0x122 [BFC] children: not-inline
-        Box <table> at (19,19) content-size 0x100 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 2x122 [BFC] children: not-inline
+        Box <table> at (19,19) content-size 2x100 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (19,19) content-size 0x0 table-row-group children: not-inline

+ 2 - 2
Tests/LibWeb/Layout/expected/table/table-formation-with-rowspan-in-the-middle.txt

@@ -1,8 +1,8 @@
 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 784x159.875 children: not-inline
-      TableWrapper <(anonymous)> at (8,8) content-size 99.421875x159.875 [BFC] children: not-inline
-        Box <table> at (9,9) content-size 99.421875x157.875 table-box [TFC] children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 101.421875x159.875 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 101.421875x157.875 table-box [TFC] children: not-inline
           BlockContainer <(anonymous)> (not painted) children: inline
             TextNode <#text>
           Box <tbody> at (9,9) content-size 101.421875x157.875 table-row-group children: not-inline

+ 22 - 0
Tests/LibWeb/Layout/input/table/border-spacing-and-borders-table-width.html

@@ -0,0 +1,22 @@
+<style>
+    table {
+        border: 5px solid black;
+        text-align: center;
+        border-collapse: separate;
+        border-spacing: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    td {
+        border: 5px solid blue;
+        padding: 10px;
+    }
+</style>
+
+<table>
+    <tr>
+        <td>A</td>
+        <td>B</td>
+    </tr>
+</table>

+ 3 - 2
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp

@@ -367,12 +367,13 @@ void TableFormattingContext::compute_table_width()
         // resolved-table-width) other than auto, the used width is the greater
         // of resolved-table-width, and the used min-width of the table.
         CSSPixels resolved_table_width = computed_values.width().to_px(table_box(), width_of_table_wrapper_containing_block);
-        used_width = max(resolved_table_width, used_min_width);
+        // Since used_width is content width, we need to subtract the border spacing from the specified width for a consistent comparison.
+        used_width = max(resolved_table_width - table_box_state.border_box_left() - table_box_state.border_box_right(), used_min_width);
         if (!should_treat_max_width_as_none(table_box(), m_available_space->width))
             used_width = min(used_width, computed_values.max_width().to_px(table_box(), width_of_table_wrapper_containing_block));
     }
 
-    table_box_state.set_content_width(used_width - table_box_state.border_left - table_box_state.border_right);
+    table_box_state.set_content_width(used_width);
 }
 
 void TableFormattingContext::distribute_width_to_columns()