RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 06:47:35 +00:00
Code Issues Activity Actions

LibWeb: Exclude table-wrapper margins from table available width

Browse source 
Table should not take up more width than is available inside wrapper
after margins are taken in account.
This commit is contained in:
Aliaksandr Kalenik 2023-05-03 15:26:01 +03:00 • committed by Andreas Kling
parent 4d971b5bc5
commit 09d698e0a0
5 changed files with 94 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Tests/LibWeb/Layout/expected/table/auto-margins.txt Normal file
View file

@ -0,0 +1,12 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
BlockContainer <div.wrapper> at (8,8) content-size 784x17.46875 children: not-inline
TableWrapper <(anonymous)> at (235.265625,8) content-size 329.46875x17.46875 [BFC] children: not-inline
TableBox <div.box> at (235.265625,8) content-size 329.46875x17.46875 [TFC] children: not-inline
TableRowBox <(anonymous)> at (235.265625,8) content-size 329.46875x17.46875 children: not-inline
TableCellBox <div.cell> at (235.265625,8) content-size 329.46875x17.46875 [BFC] children: inline
line 0 width: 329.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 34, rect: [235.265625,8 329.46875x17.46875]
"DaTa DisplaYiNg CSS WeBpaGE ScReEn"
TextNode <#text>

15
Tests/LibWeb/Layout/expected/table/fixed-margins.txt Normal file
View file

@ -0,0 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x51.40625 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x35.40625 children: not-inline
BlockContainer <div.wrapper> at (8,8) content-size 784x35.40625 children: not-inline
TableWrapper <(anonymous)> at (108,8) content-size 584x35.40625 [BFC] children: not-inline
TableBox <div.box> at (108,8) content-size 584x35.40625 [TFC] children: not-inline
TableRowBox <(anonymous)> at (108,8) content-size 584x35.40625 children: not-inline
TableCellBox <div.cell> at (108,8) content-size 584x35.40625 [BFC] children: inline
line 0 width: 569.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 58, rect: [108,8 569.859375x17.46875]
"DaTa DisplaYiNg CSS WeBpaGE ScReEn OF aR AddITioN COmmOnLY"
line 1 width: 399.9375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 59, length: 40, rect: [108,25 399.9375x17.46875]
"To AdJuSt PRiCiNG sTYLiNG ceLL oF TAbLeS"
TextNode <#text>

22
Tests/LibWeb/Layout/input/table/auto-margins.html Normal file
View file

@ -0,0 +1,22 @@
<style>
* {
font-family: 'SerenitySans';
}
.wrapper {
background-color: mediumturquoise;
}
.box {
display: table;
background-color: orange;
margin-left: auto;
margin-right: auto;
}
.cell {
display: table-cell;
}
</style>
<div class="wrapper"><div class="box"><div class="cell">DaTa DisplaYiNg CSS WeBpaGE ScReEn
</div></div></div>

22
Tests/LibWeb/Layout/input/table/fixed-margins.html Normal file
View file

@ -0,0 +1,22 @@
<style>
* {
font-family: 'SerenitySans';
}
.wrapper {
background-color: mediumturquoise;
}
.box {
display: table;
background-color: orange;
margin-left: 100px;
margin-right: 100px;
}
.cell {
display: table-cell;
}
</style>
<div class="wrapper"><div class="box"><div class="cell">DaTa DisplaYiNg CSS WeBpaGE ScReEn OF aR AddITioN COmmOnLY To AdJuSt PRiCiNG sTYLiNG ceLL oF TAbLeS
</div></div></div>

24
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -342,12 +342,34 @@ CSSPixels BlockFormattingContext::compute_width_for_table_wrapper(Box const& box
{ {
// 17.5.2 // 17.5.2
// Table wrapper width should be equal to width of table box it contains // Table wrapper width should be equal to width of table box it contains
auto const& computed_values = box.computed_values();
auto width_of_containing_block = available_space.width.to_px();
auto width_of_containing_block_as_length_for_resolve = available_space.width.is_definite() ? CSS::Length::make_px(width_of_containing_block) : CSS::Length::make_px(0);
auto zero_value = CSS::Length::make_px(0);
auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box);
auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box);
// If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
if (margin_left.is_auto())
margin_left = zero_value;
if (margin_right.is_auto())
margin_right = zero_value;
// table-wrapper can't have borders or paddings but it might have margin taken from table-root.
auto available_width = width_of_containing_block - margin_left.to_px(box) - margin_right.to_px(box);
LayoutState throwaway_state(&m_state); LayoutState throwaway_state(&m_state);
auto context = create_independent_formatting_context_if_needed(throwaway_state, box); auto context = create_independent_formatting_context_if_needed(throwaway_state, box);
VERIFY(context); VERIFY(context);
context->run(box, LayoutMode::IntrinsicSizing, m_state.get(box).available_inner_space_or_constraints_from(available_space)); context->run(box, LayoutMode::IntrinsicSizing, m_state.get(box).available_inner_space_or_constraints_from(available_space));
auto const* table_box = box.first_child_of_type<TableBox>(); auto const* table_box = box.first_child_of_type<TableBox>();
return throwaway_state.get(*table_box).content_width();
auto table_used_width = throwaway_state.get(*table_box).content_width();
return table_used_width > available_width ? available_width : table_used_width;
} }
void BlockFormattingContext::compute_height(Box const& box, AvailableSpace const& available_space) void BlockFormattingContext::compute_height(Box const& box, AvailableSpace const& available_space)