LibWeb: Set zero underflow when calculating intrinsic width of block

This fix resolves issue where calculating the min size of a block could
result in incorrect value if width of the block's children was
compensated by margins to fit into container width (which is equal to 0
during min size calculation).
This commit is contained in:
Aliaksandr Kalenik 2023-05-02 11:19:29 +03:00 committed by Andreas Kling
parent 00e3e82bbd
commit 6cec431720
Notes: sideshowbarker 2024-07-16 22:34:39 +09:00
4 changed files with 55 additions and 5 deletions

View File

@ -0,0 +1,28 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x108.21875 children: not-inline
BlockContainer <body> at (8,8) content-size 784x92.21875 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 782x92.21875 children: not-inline
TableBox <table.ambox> at (9,9) content-size 782x90.21875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 0x0 children: inline
TextNode <#text>
TableRowGroupBox <tbody> at (9,9) content-size 782x90.21875 children: not-inline
TableRowBox <tr> at (9,9) content-size 782x90.21875 children: not-inline
TableCellBox <td.mbox-image> at (10,29.109375) content-size 50x50 children: not-inline
BlockContainer <div.mbox-image-div> at (10,29.109375) content-size 50x50 children: not-inline
TableCellBox <td.mbox-text> at (62,10) content-size 728x88.21875 children: inline
line 0 width: 689.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 84, rect: [62,10 689.640625x17.46875]
"In a scene set in a lawyer's office, the lawyer sits alone and bounces a rubber ball"
line 1 width: 695.5625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 86, length: 84, rect: [62,27 695.5625x17.46875]
"against the wall. They receive a call from their assistant who expresses frustration"
line 2 width: 703.125, height: 18.40625, bottom: 53.34375, baseline: 13.53125
frag 0 from TextNode start: 171, length: 85, rect: [62,44 703.125x17.46875]
"over a packed waiting room and the lawyer's lack of clients. The lawyer then looks at"
line 3 width: 695.90625, height: 17.875, bottom: 70.28125, baseline: 13.53125
frag 0 from TextNode start: 257, length: 81, rect: [62,62 695.90625x17.46875]
"some papers from a large envelope, which turn out to be divorce papers from their"
line 4 width: 725.734375, height: 18.34375, bottom: 88.21875, baseline: 13.53125
frag 0 from TextNode start: 339, length: 92, rect: [62,79 725.734375x17.46875]
"significant other. Finally, the lawyer instructs their assistant to send in the next client."
TextNode <#text>

View File

@ -3,14 +3,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
TableWrapper <(anonymous)> at (350,8) content-size 100x17.46875 children: not-inline
TableBox <div> at (350,8) content-size 100x17.46875 children: not-inline
TableRowBox <(anonymous)> at (350,8) content-size 100x17.46875 children: not-inline
TableCellBox <(anonymous)> at (350,8) content-size 100x17.46875 children: not-inline
BlockContainer <(anonymous)> at (350,8) content-size 100x0 children: inline
TableRowBox <(anonymous)> at (350,8) content-size 2000x17.46875 children: not-inline
TableCellBox <(anonymous)> at (350,8) content-size 2000x17.46875 children: not-inline
BlockContainer <(anonymous)> at (350,8) content-size 2000x0 children: inline
TextNode <#text>
BlockContainer <div> at (350,8) content-size 2000x17.46875 children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [350,8 6.34375x17.46875]
"1"
TextNode <#text>
BlockContainer <(anonymous)> at (350,25.46875) content-size 100x0 children: inline
BlockContainer <(anonymous)> at (350,25.46875) content-size 2000x0 children: inline
TextNode <#text>

View File

@ -0,0 +1,22 @@
<style>
* {
font-family: 'SerenitySans';
}
.ambox {
border: 1px solid #a2a9b1;
}
.mbox-text {
width: 100%;
}
.mbox-image-div {
width: 50px;
height: 50px;
background-color: orange;
}
</style><table class="ambox">
<tr><td class="mbox-image"><div class="mbox-image-div"></div></td><td class="mbox-text">
In a scene set in a lawyer's office, the lawyer sits alone and bounces a rubber ball against the wall. They receive a call from their assistant who expresses frustration over a packed waiting room and the lawyer's lack of clients. The lawyer then looks at some papers from a large envelope, which turn out to be divorce papers from their significant other. Finally, the lawyer instructs their assistant to send in the next client.
</td></tr></table>

View File

@ -174,7 +174,7 @@ void BlockFormattingContext::compute_width(Box const& box, AvailableSpace const&
// 10.3.3 cont'd.
auto underflow_px = width_of_containing_block - total_px;
if (!isfinite(underflow_px.value()))
if (available_space.width.is_intrinsic_sizing_constraint())
underflow_px = 0;
if (width.is_auto()) {