mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 23:27:36 +00:00
LibWeb: Exclude table-wrapper margins from table available width
Table should not take up more width than is available inside wrapper after margins are taken in account.
This commit is contained in:
parent
4d971b5bc5
commit
09d698e0a0
5 changed files with 94 additions and 1 deletions
12
Tests/LibWeb/Layout/expected/table/auto-margins.txt
Normal file
12
Tests/LibWeb/Layout/expected/table/auto-margins.txt
Normal 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
15
Tests/LibWeb/Layout/expected/table/fixed-margins.txt
Normal 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
22
Tests/LibWeb/Layout/input/table/auto-margins.html
Normal 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
22
Tests/LibWeb/Layout/input/table/fixed-margins.html
Normal 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>
|
|
@ -342,12 +342,34 @@ CSSPixels BlockFormattingContext::compute_width_for_table_wrapper(Box const& box
|
|||
{
|
||||
// 17.5.2
|
||||
// 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);
|
||||
auto context = create_independent_formatting_context_if_needed(throwaway_state, box);
|
||||
VERIFY(context);
|
||||
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>();
|
||||
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)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue