We use cookies to ensure you get the best experience on our website
Головна сторінка Огляд Довідка
Реєстрація Увійти
0ct0pu5
/
ladybird
1
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Переглянути джерело

LibWeb: Implement top and bottom vertical-align for table cells

Andi Gallo 2 роки тому
батько
4ed7456486
коміт
caa24d0805
3 змінених файлів з 82 додано та 6 видалено
Об'єднаний вигляд Показати статистику Diff
  1. 46 0
      Tests/LibWeb/Layout/expected/table/align-top-and-bottom.txt
  2. 22 0
      Tests/LibWeb/Layout/input/table/align-top-and-bottom.html
  3. 14 6
      Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp

+ 46 - 0
Tests/LibWeb/Layout/expected/table/align-top-and-bottom.txt
Переглянути файл 

@@ -0,0 +1,46 @@
 
+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
 
+          BlockContainer <(anonymous)> (not painted) children: inline
 
+            TextNode <#text>
 
+          Box <tbody> at (9,9) content-size 198.328125x98.9375 table-row-group children: not-inline
 
+            Box <tr> at (9,9) content-size 198.328125x49.46875 table-row children: not-inline
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+              BlockContainer <td> at (25,25) content-size 32.078125x17.46875 table-cell [BFC] children: inline
 
+                line 0 width: 32.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+                  frag 0 from TextNode start: 0, length: 3, rect: [25,25 32.078125x17.46875]
 
+                    "Top"
 
+                TextNode <#text>
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+              BlockContainer <td> at (89.078125,74.46875) content-size 55.984375x17.46875 table-cell [BFC] children: inline
 
+                line 0 width: 55.984375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
 
+                  frag 0 from TextNode start: 0, length: 6, rect: [89.078125,74.46875 55.984375x17.46875]
 
+                    "Bottom"
 
+                TextNode <#text>
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+              BlockContainer <td> at (177.0625,25) 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: [177.0625,25 14.265625x17.46875]
 
+                    "A"
 
+                TextNode <#text>
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+            BlockContainer <(anonymous)> (not painted) children: inline
 
+              TextNode <#text>
 
+            Box <tr> at (9,58.46875) content-size 198.328125x49.46875 table-row children: not-inline
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+              BlockContainer <td> at (177.0625,74.46875) content-size 14.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: [177.0625,74.46875 9.34375x17.46875]
 
+                    "B"
 
+                TextNode <#text>
 
+              BlockContainer <(anonymous)> (not painted) children: inline
 
+                TextNode <#text>
 
+            BlockContainer <(anonymous)> (not painted) children: inline
 
+              TextNode <#text>

+ 22 - 0
Tests/LibWeb/Layout/input/table/align-top-and-bottom.html
Переглянути файл 

@@ -0,0 +1,22 @@
 
+<style>
 
+    table {
 
+        border: 1px solid black;
 
+        border-collapse: collapse;
 
+    }
 
+
 
+    td {
 
+        border: 1px solid black;
 
+        padding: 15px;
 
+    }
 
+</style>
 
+
 
+<table>
 
+    <tr>
 
+        <td rowspan="2" style="vertical-align: top;">Top</td>
 
+        <td rowspan="2" style="vertical-align: bottom;">Bottom</td>
 
+        <td>A</td>
 
+    </tr>
 
+    <tr>
 
+        <td>B</td>
 
+    </tr>
 
+</table>

+ 14 - 6
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
Переглянути файл 

@@ -764,19 +764,27 @@ void TableFormattingContext::position_cell_boxes()
 
         CSSPixels const cell_border_box_height = cell_state.content_height() + cell_state.border_box_top() + cell_state.border_box_bottom();
 
         CSSPixels const cell_border_box_height = cell_state.content_height() + cell_state.border_box_top() + cell_state.border_box_bottom();
 
         CSSPixels const row_content_height = compute_row_content_height(cell);
 
         CSSPixels const row_content_height = compute_row_content_height(cell);
 
         auto const& vertical_align = cell.box->computed_values().vertical_align();
 
         auto const& vertical_align = cell.box->computed_values().vertical_align();
 
+        // The following image shows various alignment lines of a row:
 
+        // https://www.w3.org/TR/css-tables-3/images/cell-align-explainer.png
 
         if (vertical_align.has<CSS::VerticalAlign>()) {
 
         if (vertical_align.has<CSS::VerticalAlign>()) {
 
+            auto height_diff = row_content_height - cell_border_box_height;
 
             switch (vertical_align.get<CSS::VerticalAlign>()) {
 
             switch (vertical_align.get<CSS::VerticalAlign>()) {
 
             case CSS::VerticalAlign::Middle: {
 
             case CSS::VerticalAlign::Middle: {
 
-                cell_state.padding_top += (row_content_height - cell_border_box_height) / 2;
 
-                cell_state.padding_bottom += (row_content_height - cell_border_box_height) / 2;
 
+                cell_state.padding_top += height_diff / 2;
 
+                cell_state.padding_bottom += height_diff / 2;
 
+                break;
 
+            }
 
+            case CSS::VerticalAlign::Top: {
 
+                cell_state.padding_bottom += height_diff;
 
+                break;
 
+            }
 
+            case CSS::VerticalAlign::Bottom: {
 
+                cell_state.padding_top += height_diff;
 
                 break;
 
                 break;
 
             }
 
             }
 
-            // FIXME: implement actual 'top' and 'bottom' support instead of fall back to 'baseline'
 
-            case CSS::VerticalAlign::Top:
 
-            case CSS::VerticalAlign::Bottom:
 
             case CSS::VerticalAlign::Baseline: {
 
             case CSS::VerticalAlign::Baseline: {
 
                 cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline;
 
                 cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline;
 
-                cell_state.padding_bottom += row_content_height - cell_border_box_height;
 
+                cell_state.padding_bottom += height_diff;
 
                 break;
 
                 break;
 
             }
 
             }
 
             default:
 
             default:

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