We use cookies to ensure you get the best experience on our website
首頁 探索 說明
註冊 登入
0ct0pu5
/
ladybird
1
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

LibWeb: Improve adjustment of automatic table width with percentages

Use the max-width of percentage cells instead of min-width as the
reference to be used to compute the total table width. The specification
only suggests that the UA should try to satisfy percentage constraints
and this behavior is more consistent with other browsers.
Andi Gallo 2 年之前
父節點
d32bf4cd41
當前提交
7b0b501418
共有 5 個文件被更改，包括 99 次插入 和 34 次删除
分割檢視 顯示文件統計
  1. 17 17
      Tests/LibWeb/Layout/expected/table/percentage-width-columns.txt
  2. 48 0
      Tests/LibWeb/Layout/expected/table/percentage-width-max-width-columns.txt
  3. 16 16
      Tests/LibWeb/Layout/expected/table/sum-of-percentage-column-widths-less-than-100.txt
  4. 17 0
      Tests/LibWeb/Layout/input/table/percentage-width-max-width-columns.html
  5. 1 1
      Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp

+ 17 - 17
Tests/LibWeb/Layout/expected/table/percentage-width-columns.txt
查看文件 

@@ -1,33 +1,33 @@
 
 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 784x22.46875 children: not-inline
 
-      TableWrapper <(anonymous)> at (8,8) content-size 88.328125x22.46875 [BFC] children: not-inline
 
-        Box <table> at (9,9) content-size 86.328125x20.46875 table-box [TFC] children: not-inline
 
+      TableWrapper <(anonymous)> at (8,8) content-size 89x22.46875 [BFC] children: not-inline
 
+        Box <table> at (9,9) content-size 87x20.46875 table-box [TFC] children: not-inline
 
           BlockContainer <(anonymous)> (not painted) children: inline
 
             TextNode <#text>
 
-          Box <tbody> at (9,9) content-size 86.328125x20.46875 table-row-group children: not-inline
 
+          Box <tbody> at (9,9) content-size 86.984375x20.46875 table-row-group children: not-inline
 
             BlockContainer <(anonymous)> (not painted) children: inline
 
               TextNode <#text>
 
-            Box <tr> at (9,9) content-size 86.328125x20.46875 table-row children: not-inline
 
+            Box <tr> at (9,9) content-size 86.984375x20.46875 table-row children: not-inline
 
               BlockContainer <(anonymous)> (not painted) children: inline
 
                 TextNode <#text>
 
-              BlockContainer <td> at (10.5,10.5) content-size 14.265625x17.46875 table-cell [BFC] children: inline
 
+              BlockContainer <td> at (10.5,10.5) content-size 14.390625x17.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: [10.5,10.5 14.265625x17.46875]
 
+                  frag 0 from TextNode start: 0, length: 1, rect: [10.5625,10.5 14.265625x17.46875]
 
                     "A"
 
                 TextNode <#text>
 
               BlockContainer <(anonymous)> (not painted) children: inline
 
                 TextNode <#text>
 
-              BlockContainer <td> at (27.765625,10.5) content-size 48.796875x17.46875 table-cell [BFC] children: inline
 
+              BlockContainer <td> at (27.890625,10.5) content-size 49.203125x17.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: [47.484375,10.5 9.34375x17.46875]
 
+                  frag 0 from TextNode start: 0, length: 1, rect: [47.8125,10.5 9.34375x17.46875]
 
                     "B"
 
                 TextNode <#text>
 
               BlockContainer <(anonymous)> (not painted) children: inline
 
                 TextNode <#text>
 
-              BlockContainer <td> at (79.5625,10.5) content-size 14.265625x17.46875 table-cell [BFC] children: inline
 
+              BlockContainer <td> at (80.09375,10.5) content-size 14.390625x17.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: [81.53125,10.5 10.3125x17.46875]
 
+                  frag 0 from TextNode start: 0, length: 1, rect: [82.125,10.5 10.3125x17.46875]
 
                     "C"
 
                 TextNode <#text>
 
               BlockContainer <(anonymous)> (not painted) children: inline
 
@@ -40,13 +40,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
 PaintableWithLines (Viewport<#document>) [0,0 800x600]
 
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x22.46875]
 
-      PaintableWithLines (TableWrapper(anonymous)) [8,8 88.328125x22.46875]
 
-        PaintableBox (Box<TABLE>) [8,8 88.328125x22.46875]
 
-          PaintableBox (Box<TBODY>) [9,9 86.328125x20.46875]
 
-            PaintableBox (Box<TR>) [9,9 86.328125x20.46875]
 
-              PaintableWithLines (BlockContainer<TD>) [9,9 17.265625x20.46875]
 
+      PaintableWithLines (TableWrapper(anonymous)) [8,8 89x22.46875]
 
+        PaintableBox (Box<TABLE>) [8,8 89x22.46875]
 
+          PaintableBox (Box<TBODY>) [9,9 86.984375x20.46875]
 
+            PaintableBox (Box<TR>) [9,9 86.984375x20.46875]
 
+              PaintableWithLines (BlockContainer<TD>) [9,9 17.390625x20.46875]
 
                 TextPaintable (TextNode<#text>)
 
-              PaintableWithLines (BlockContainer<TD>) [26.265625,9 51.796875x20.46875]
 
+              PaintableWithLines (BlockContainer<TD>) [26.390625,9 52.203125x20.46875]
 
                 TextPaintable (TextNode<#text>)
 
-              PaintableWithLines (BlockContainer<TD>) [78.0625,9 17.265625x20.46875]
 
+              PaintableWithLines (BlockContainer<TD>) [78.59375,9 17.390625x20.46875]
 
                 TextPaintable (TextNode<#text>)

+ 48 - 0
Tests/LibWeb/Layout/expected/table/percentage-width-max-width-columns.txt
查看文件 

@@ -0,0 +1,48 @@
 
+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 784x20.46875 children: not-inline
 
+      TableWrapper <(anonymous)> at (8,8) content-size 116x20.46875 [BFC] children: not-inline
 
+        Box <table> at (8,8) content-size 116x20.46875 table-box [TFC] children: not-inline
 
+          BlockContainer <(anonymous)> (not painted) children: inline
 
+            TextNode <#text>
 
+          Box <tbody> at (8,8) content-size 115.984375x20.46875 table-row-group children: not-inline
 
+            Box <tr> at (8,8) content-size 115.984375x20.46875 table-row children: not-inline
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+              BlockContainer <td> at (9.5,9.5) content-size 31.796875x17.46875 table-cell [BFC] children: inline
 
+                line 0 width: 31.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+                  frag 0 from TextNode start: 0, length: 3, rect: [9.5,9.5 31.609375x17.46875]
 
+                    "A B"
 
+                TextNode <#text>
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+              BlockContainer <td> at (44.296875,9.5) content-size 43.390625x17.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: [44.296875,9.5 10.3125x17.46875]
 
+                    "C"
 
+                TextNode <#text>
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+              BlockContainer <td> at (90.6875,9.5) content-size 31.796875x17.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: [90.6875,9.5 11.140625x17.46875]
 
+                    "D"
 
+                TextNode <#text>
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+            BlockContainer <(anonymous)> (not painted) children: inline
 
+              TextNode <#text>
 
+
 
+PaintableWithLines (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x20.46875]
 
+      PaintableWithLines (TableWrapper(anonymous)) [8,8 116x20.46875]
 
+        PaintableBox (Box<TABLE>) [8,8 116x20.46875]
 
+          PaintableBox (Box<TBODY>) [8,8 115.984375x20.46875]
 
+            PaintableBox (Box<TR>) [8,8 115.984375x20.46875]
 
+              PaintableWithLines (BlockContainer<TD>) [8,8 34.796875x20.46875]
 
+                TextPaintable (TextNode<#text>)
 
+              PaintableWithLines (BlockContainer<TD>) [42.796875,8 46.390625x20.46875]
 
+                TextPaintable (TextNode<#text>)
 
+              PaintableWithLines (BlockContainer<TD>) [89.1875,8 34.796875x20.46875]
 
+                TextPaintable (TextNode<#text>)

+ 16 - 16
Tests/LibWeb/Layout/expected/table/sum-of-percentage-column-widths-less-than-100.txt
查看文件 

@@ -1,31 +1,31 @@
 
 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 784x27.46875 children: not-inline
 
-      TableWrapper <(anonymous)> at (8,8) content-size 93.328125x27.46875 [BFC] children: not-inline
 
-        Box <table> at (9,9) content-size 91.328125x25.46875 table-box [TFC] children: not-inline
 
+      TableWrapper <(anonymous)> at (8,8) content-size 94x27.46875 [BFC] children: not-inline
 
+        Box <table> at (9,9) content-size 92x25.46875 table-box [TFC] children: not-inline
 
           BlockContainer <(anonymous)> (not painted) children: inline
 
             TextNode <#text>
 
-          Box <tbody> at (9,9) content-size 83.3125x21.46875 table-row-group children: not-inline
 
-            Box <tr> at (11,11) content-size 83.3125x21.46875 table-row children: not-inline
 
+          Box <tbody> at (9,9) content-size 83.984375x21.46875 table-row-group children: not-inline
 
+            Box <tr> at (11,11) content-size 83.984375x21.46875 table-row children: not-inline
 
               BlockContainer <(anonymous)> (not painted) children: inline
 
                 TextNode <#text>
 
-              BlockContainer <td> at (13,13) content-size 18.03125x17.46875 table-cell [BFC] children: inline
 
+              BlockContainer <td> at (13,13) content-size 18.09375x17.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: [13,13 14.265625x17.46875]
 
                     "A"
 
                 TextNode <#text>
 
               BlockContainer <(anonymous)> (not painted) children: inline
 
                 TextNode <#text>
 
-              BlockContainer <td> at (37.03125,13) content-size 36.859375x17.46875 table-cell [BFC] children: inline
 
+              BlockContainer <td> at (37.09375,13) content-size 37.265625x17.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: [37.03125,13 9.34375x17.46875]
 
+                  frag 0 from TextNode start: 0, length: 1, rect: [37.09375,13 9.34375x17.46875]
 
                     "B"
 
                 TextNode <#text>
 
               BlockContainer <(anonymous)> (not painted) children: inline
 
                 TextNode <#text>
 
-              BlockContainer <td> at (79.890625,13) content-size 16.421875x17.46875 table-cell [BFC] children: inline
 
+              BlockContainer <td> at (80.359375,13) content-size 16.625x17.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: [79.890625,13 10.3125x17.46875]
 
+                  frag 0 from TextNode start: 0, length: 1, rect: [80.359375,13 10.3125x17.46875]
 
                     "C"
 
                 TextNode <#text>
 
               BlockContainer <(anonymous)> (not painted) children: inline
 
@@ -36,13 +36,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
 PaintableWithLines (Viewport<#document>) [0,0 800x600]
 
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
 
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x27.46875]
 
-      PaintableWithLines (TableWrapper(anonymous)) [8,8 93.328125x27.46875]
 
-        PaintableBox (Box<TABLE>) [8,8 93.328125x27.46875]
 
-          PaintableBox (Box<TBODY>) [9,9 83.3125x21.46875] overflow: [9,9 89.3125x23.46875]
 
-            PaintableBox (Box<TR>) [11,11 83.3125x21.46875] overflow: [11,11 87.3125x21.46875]
 
-              PaintableWithLines (BlockContainer<TD>) [11,11 22.03125x21.46875]
 
+      PaintableWithLines (TableWrapper(anonymous)) [8,8 94x27.46875]
 
+        PaintableBox (Box<TABLE>) [8,8 94x27.46875]
 
+          PaintableBox (Box<TBODY>) [9,9 83.984375x21.46875] overflow: [9,9 89.984375x23.46875]
 
+            PaintableBox (Box<TR>) [11,11 83.984375x21.46875] overflow: [11,11 87.984375x21.46875]
 
+              PaintableWithLines (BlockContainer<TD>) [11,11 22.09375x21.46875]
 
                 TextPaintable (TextNode<#text>)
 
-              PaintableWithLines (BlockContainer<TD>) [35.03125,11 40.859375x21.46875]
 
+              PaintableWithLines (BlockContainer<TD>) [35.09375,11 41.265625x21.46875]
 
                 TextPaintable (TextNode<#text>)
 
-              PaintableWithLines (BlockContainer<TD>) [77.890625,11 20.421875x21.46875]
 
+              PaintableWithLines (BlockContainer<TD>) [78.359375,11 20.625x21.46875]
 
                 TextPaintable (TextNode<#text>)

+ 17 - 0
Tests/LibWeb/Layout/input/table/percentage-width-max-width-columns.html
查看文件 

@@ -0,0 +1,17 @@
 
+<style>
 
+    table {
 
+        border-collapse: collapse;
 
+    }
 
+
 
+    td {
 
+        border: 1px solid black;
 
+    }
 
+</style>
 
+
 
+<table>
 
+    <tr>
 
+        <td style="width: 30%;">A B</td>
 
+        <td style="width: 40%;">C</td>
 
+        <td style="width: 30%;">D</td>
 
+    </tr>
 
+</table>

+ 1 - 1
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
查看文件 

@@ -598,7 +598,7 @@ void TableFormattingContext::compute_table_width()
 
         for (auto& cell : m_cells) {
 
             auto const& cell_width = cell.box->computed_values().width();
 
             if (cell_width.is_percentage()) {
 
-                adjusted_used_width = 100 / cell_width.percentage().value() * cell.outer_min_width;
 
+                adjusted_used_width = ceil(100 / cell_width.percentage().value() * cell.outer_max_width.to_double());
 
                 used_width = min(max(used_width, adjusted_used_width), width_of_table_containing_block);
 
             }
 
         }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5