mirror of
https://github.com/RGBCube/serenity
synced 2025-07-23 19:37:34 +00:00
LibWeb: Exclude borders from width available for table columns
Fix table box width calculation to minus horizonal borders from space available for columns.
This commit is contained in:
parent
a04316403e
commit
e54ee7de96
5 changed files with 33 additions and 10 deletions
|
@ -1,12 +1,12 @@
|
||||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (1,1) content-size 798x120 children: not-inline
|
BlockContainer <html> at (1,1) content-size 798x120 children: not-inline
|
||||||
BlockContainer <body> at (10,10) content-size 780x102 children: not-inline
|
BlockContainer <body> at (10,10) content-size 780x102 children: not-inline
|
||||||
TableWrapper <(anonymous)> at (10,10) content-size 104x102 children: not-inline
|
TableWrapper <(anonymous)> at (10,10) content-size 102x102 children: not-inline
|
||||||
TableBox <table> at (11,11) content-size 104x100 children: not-inline
|
TableBox <table> at (11,11) content-size 102x100 children: not-inline
|
||||||
TableRowGroupBox <tbody> at (11,11) content-size 104x100 children: not-inline
|
TableRowGroupBox <tbody> at (11,11) content-size 102x100 children: not-inline
|
||||||
TableRowBox <tr> at (11,11) content-size 104x100 children: not-inline
|
TableRowBox <tr> at (11,11) content-size 102x100 children: not-inline
|
||||||
TableCellBox <td> at (13,49.082031) content-size 100x23.835937 children: not-inline
|
TableCellBox <td> at (13,49.082031) content-size 98x23.835937 children: not-inline
|
||||||
BlockContainer <(anonymous)> at (14,50.082031) content-size 98x21.835937 children: inline
|
BlockContainer <(anonymous)> at (14,50.082031) content-size 96x21.835937 children: inline
|
||||||
line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062
|
line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062
|
||||||
frag 0 from TextNode start: 0, length: 0, rect: [14,50.082031 0x21.835937]
|
frag 0 from TextNode start: 0, length: 0, rect: [14,50.082031 0x21.835937]
|
||||||
""
|
""
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (0,0) content-size 800x293.625 children: not-inline
|
BlockContainer <html> at (0,0) content-size 800x293.625 children: not-inline
|
||||||
BlockContainer <body> at (8,8) content-size 784x277.625 children: not-inline
|
BlockContainer <body> at (8,8) content-size 784x277.625 children: not-inline
|
||||||
TableWrapper <(anonymous)> at (8,8) content-size 166.296875x66.40625 children: not-inline
|
TableWrapper <(anonymous)> at (8,8) content-size 164.296875x66.40625 children: not-inline
|
||||||
TableBox <table.table-border-black> at (9,9) content-size 166.296875x64.40625 children: not-inline
|
TableBox <table.table-border-black> at (9,9) content-size 164.296875x64.40625 children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TableRowGroupBox <tbody> at (9,9) content-size 166.296875x64.40625 children: not-inline
|
TableRowGroupBox <tbody> at (9,9) content-size 166.296875x64.40625 children: not-inline
|
||||||
|
|
8
Tests/LibWeb/Layout/expected/table/table-width.txt
Normal file
8
Tests/LibWeb/Layout/expected/table/table-width.txt
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x226 children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x210 children: not-inline
|
||||||
|
TableWrapper <(anonymous)> at (8,8) content-size 584x210 children: not-inline
|
||||||
|
TableBox <table.table> at (108,108) content-size 584x10 children: not-inline
|
||||||
|
TableRowGroupBox <tbody> at (108,108) content-size 584x10 children: not-inline
|
||||||
|
TableRowBox <tr> at (108,108) content-size 584x10 children: not-inline
|
||||||
|
TableCellBox <td.cell> at (109,113) content-size 582x0 children: not-inline
|
11
Tests/LibWeb/Layout/input/table/table-width.html
Normal file
11
Tests/LibWeb/Layout/input/table/table-width.html
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<style>
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
border: 100px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
height: 10px;
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
</style><table class="table"><tr><td class="cell"></td></tr></table>
|
|
@ -206,6 +206,8 @@ void TableFormattingContext::compute_table_measures()
|
||||||
|
|
||||||
void TableFormattingContext::compute_table_width()
|
void TableFormattingContext::compute_table_width()
|
||||||
{
|
{
|
||||||
|
// https://drafts.csswg.org/css-tables-3/#computing-the-table-width
|
||||||
|
|
||||||
auto& table_box_state = m_state.get_mutable(table_box());
|
auto& table_box_state = m_state.get_mutable(table_box());
|
||||||
|
|
||||||
auto& computed_values = table_box().computed_values();
|
auto& computed_values = table_box().computed_values();
|
||||||
|
@ -239,7 +241,6 @@ void TableFormattingContext::compute_table_width()
|
||||||
// If the table-root has 'width: auto', the used width is the greater of
|
// 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.
|
// min(GRIDMAX, the table’s containing block width), the used min-width of the table.
|
||||||
used_width = max(min(grid_max, width_of_table_containing_block), used_min_width);
|
used_width = max(min(grid_max, width_of_table_containing_block), used_min_width);
|
||||||
table_box_state.set_content_width(used_width);
|
|
||||||
} else {
|
} else {
|
||||||
// If the table-root’s width property has a computed value (resolving to
|
// If the table-root’s width property has a computed value (resolving to
|
||||||
// resolved-table-width) other than auto, the used width is the greater
|
// resolved-table-width) other than auto, the used width is the greater
|
||||||
|
@ -248,8 +249,11 @@ void TableFormattingContext::compute_table_width()
|
||||||
used_width = max(resolved_table_width, used_min_width);
|
used_width = max(resolved_table_width, used_min_width);
|
||||||
if (!computed_values.max_width().is_none())
|
if (!computed_values.max_width().is_none())
|
||||||
used_width = min(used_width, computed_values.max_width().resolved(table_box(), CSS::Length::make_px(width_of_table_containing_block)).to_px(table_box()));
|
used_width = min(used_width, computed_values.max_width().resolved(table_box(), CSS::Length::make_px(width_of_table_containing_block)).to_px(table_box()));
|
||||||
table_box_state.set_content_width(used_width);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// The assignable table width is the used width of the table minus the total horizontal border spacing (if any).
|
||||||
|
// This is the width that we will be able to allocate to the columns.
|
||||||
|
table_box_state.set_content_width(used_width - table_box_state.border_left - table_box_state.border_right);
|
||||||
}
|
}
|
||||||
|
|
||||||
void TableFormattingContext::distribute_width_to_columns()
|
void TableFormattingContext::distribute_width_to_columns()
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue