beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-25 09:00:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

LibWeb: Modify table formatting according to spec
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Details
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
Details
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
Details
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Details
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Details
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Details
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Details
Lint Code / lint (push) Waiting to run
Details
Push notes / build (push) Waiting to run
Details

Browse source 
Makes Sub, Super, TextBottom, TextTop vertical aligns equal to Baseline
This commit is contained in:
Pavel Shliak 2024-10-21 01:12:13 +04:00 committed by Sam Atkins
parent 1388b6866e
commit 38bb8ce0de
Notes: github-actions[bot] 2024-11-04 14:55:29 +00:00 
Author: https://github.com/shlyakpavel
Commit: https://github.com/LadybirdBrowser/ladybird/commit/38bb8ce0de9
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1891
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/gmta
3 changed files with 72 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
Tests/LibWeb/Layout/expected/css-table-cell-verticalalign-text-top.txt Normal file
View file

@ -0,0 +1,38 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
TableWrapper <(anonymous)> at (8,8) content-size 204x100 [BFC] children: not-inline
Box <table> at (8,8) content-size 204x100 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tbody> at (8,8) content-size 204x100 table-row-group children: not-inline
Box <tr> at (8,8) content-size 204x100 table-row children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <td> at (10,10) content-size 200x17 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 15, rect: [10,10 129.296875x17] baseline: 13.296875
"Text at the top"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x116]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x100]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (TableWrapper(anonymous)) [8,8 204x100]
PaintableBox (Box<TABLE>) [8,8 204x100]
PaintableBox (Box<TBODY>) [8,8 204x100]
PaintableBox (Box<TR>) [8,8 204x100]
PaintableWithLines (BlockContainer<TD>) [8,8 204x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,108 784x0]

23
Tests/LibWeb/Layout/input/css-table-cell-verticalalign-text-top.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 200px;
height: 100px;
vertical-align: text-top;
}
</style>
</head>
<body>
<table>
<tr>
<td>Text at the top</td>
</tr>
</table>
</body>
</html>

27
Userland/Libraries/LibWeb/Layout/TableFormattingContext.cpp
View file

@ -1094,43 +1094,38 @@ void TableFormattingContext::position_cell_boxes()
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
// https://drafts.csswg.org/css2/#height-layout
// In the context of tables, values for vertical-align have the following meanings:
if (vertical_align.has<CSS::VerticalAlign>()) {
switch (vertical_align.get<CSS::VerticalAlign>()) {
// The center of the cell is aligned with the center of the rows it spans.
case CSS::VerticalAlign::Middle: {
auto const height_diff = row_content_height - cell_state.border_box_height();
cell_state.padding_top += height_diff / 2;
cell_state.padding_bottom += height_diff / 2;
break;
}
// The top of the cell box is aligned with the top of the first row it spans.
case CSS::VerticalAlign::Top: {
cell_state.padding_bottom += row_content_height - cell_state.border_box_height();
break;
}
// The bottom of the cell box is aligned with the bottom of the last row it spans.
case CSS::VerticalAlign::Bottom: {
cell_state.padding_top += row_content_height - cell_state.border_box_height();
break;
}
// These values do not apply to cells; the cell is aligned at the baseline instead.
case CSS::VerticalAlign::Sub:
case CSS::VerticalAlign::Super:
case CSS::VerticalAlign::TextBottom:
case CSS::VerticalAlign::TextTop:
// The baseline of the cell is put at the same height as the baseline of the first of the rows it spans.
case CSS::VerticalAlign::Baseline: {
cell_state.padding_top += m_rows[cell.row_index].baseline - cell.baseline;
cell_state.padding_bottom += row_content_height - cell_state.border_box_height();
break;
}
case CSS::VerticalAlign::Sub: {
dbgln("FIXME: Implement \"vertical-align: sub\" support for table cells");
break;
}
case CSS::VerticalAlign::Super: {
dbgln("FIXME: Implement \"vertical-align: super\" support for table cells");
break;
}
case CSS::VerticalAlign::TextBottom: {
dbgln("FIXME: Implement \"vertical-align: text-bottom\" support for table cells");
break;
}
case CSS::VerticalAlign::TextTop: {
dbgln("FIXME: Implement \"vertical-align: text-top\" support for table cells");
break;
}
default:
VERIFY_NOT_REACHED();
}