RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:17:34 +00:00
Code Issues Activity Actions

LibWeb: Use the auto table width formula if it cannot be resolved

Browse source 
If the width is a percentage but the parent isn't resolved yet, take the
same path as for auto width.
This commit is contained in:
Andi Gallo 2023-08-15 03:14:32 +00:00 • committed by Alexander Kalenik
parent 3a8e362ab0
commit d5f54956ba
3 changed files with 59 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

36
Tests/LibWeb/Layout/expected/table/percentage-width-for-nested-table-is-like-auto.txt Normal file
View file

@ -0,0 +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 784x31.46875 children: not-inline
Box <div.grid_layout> at (8,8) content-size 784x31.46875 [GFC] children: not-inline
BlockContainer <div> at (8,8) content-size 200x31.46875 [BFC] children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 200x31.46875 [BFC] children: not-inline
Box <table.outer> at (9,9) content-size 198x29.46875 table-box [TFC] children: not-inline
Box <tbody> at (9,9) content-size 194x25.46875 table-row-group children: not-inline
Box <tr> at (11,11) content-size 194x25.46875 table-row children: not-inline
BlockContainer <td> at (12,12) content-size 192x23.46875 table-cell [BFC] children: not-inline
TableWrapper <(anonymous)> at (12,12) content-size 192x23.46875 [BFC] children: not-inline
Box <table.inner> at (12,12) content-size 192x23.46875 table-box [TFC] children: not-inline
Box <tbody> at (12,12) content-size 188x19.46875 table-row-group children: not-inline
Box <tr> at (14,14) content-size 188x19.46875 table-row children: not-inline
BlockContainer <td> at (15,15) content-size 186x17.46875 table-cell [BFC] children: inline
line 0 width: 36.53125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [15,15 36.53125x17.46875]
"A A"
TextNode <#text>
PaintableWithLines (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x31.46875]
PaintableBox (Box<DIV>.grid_layout) [8,8 784x31.46875]
PaintableWithLines (BlockContainer<DIV>) [8,8 200x31.46875]
PaintableWithLines (TableWrapper(anonymous)) [8,8 200x31.46875]
PaintableBox (Box<TABLE>.outer) [8,8 200x31.46875]
PaintableBox (Box<TBODY>) [9,9 194x25.46875] overflow: [9,9 196x27.46875]
PaintableBox (Box<TR>) [11,11 194x25.46875]
PaintableWithLines (BlockContainer<TD>) [11,11 194x25.46875]
PaintableWithLines (TableWrapper(anonymous)) [12,12 192x23.46875]
PaintableBox (Box<TABLE>.inner) [12,12 192x23.46875]
PaintableBox (Box<TBODY>) [12,12 188x19.46875] overflow: [12,12 190x21.46875]
PaintableBox (Box<TR>) [14,14 188x19.46875]
PaintableWithLines (BlockContainer<TD>) [14,14 188x19.46875]
TextPaintable (TextNode<#text>)

15
Tests/LibWeb/Layout/input/table/percentage-width-for-nested-table-is-like-auto.html Normal file
View file

@ -0,0 +1,15 @@
<style>
.grid_layout {
display: grid;
grid-template: min-content / minmax(0, 200px);
}
.outer {
border: 1px solid black;
width: 100%;
}
.inner {
width: 100%;
}
</style><div class="grid_layout"><div><table class="outer"><tr><td><table class="inner"><tr><td>A A</td></tr></table></td></tr></table></div></div>

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

@ -559,6 +559,11 @@ CSSPixels TableFormattingContext::compute_capmin()
return capmin;
}
static bool width_is_auto_relative_to_state(CSS::Size const& width, LayoutState::UsedValues const& state)
{
return width.is_auto() || (width.contains_percentage() && !state.has_definite_width());
}
void TableFormattingContext::compute_table_width()
{
// https://drafts.csswg.org/css-tables-3/#computing-the-table-width
@ -571,7 +576,8 @@ void TableFormattingContext::compute_table_width()
// Percentages on 'width' and 'height' on the table are relative to the table wrapper box's containing block,
// not the table wrapper box itself.
CSSPixels width_of_table_wrapper_containing_block = m_state.get(*table_wrapper().containing_block()).content_width();
auto const& containing_block_state = m_state.get(*table_wrapper().containing_block());
CSSPixels width_of_table_wrapper_containing_block = containing_block_state.content_width();
// Compute undistributable space due to border spacing: https://www.w3.org/TR/css-tables-3/#computing-undistributable-space.
auto undistributable_space = (m_columns.size() + 1) * border_spacing_horizontal();
@ -599,7 +605,7 @@ void TableFormattingContext::compute_table_width()
}
CSSPixels used_width;
if (computed_values.width().is_auto()) {
if (width_is_auto_relative_to_state(computed_values.width(), containing_block_state)) {
// If the table-root has 'width: auto', the used width is the greater of
// min(GRIDMAX, the table’s containing block width), the used min-width of the table.
if (width_of_table_containing_block.is_definite())