mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 08:11:13 +00:00
LibWeb: Clamp growth limit after adding planned increase in GFC
Fixes implementation of the following line from the spec: "However, limit the growth of any fit-content() tracks by their fit-content() argument." Now we correctly apply a limit to increased growth limit rather than to the planned increase. Change in "Tests/LibWeb/Layout/input/grid/fit-content-2.html" is a progression and "Item as wide as the content." is actually as wide as a content.
This commit is contained in:
Aliaksandr Kalenik
Alexander Kalenik
parent
2c8fb49578
commit
07aa25ce50
Notes:
github-actions[bot]
2024-09-09 09:42:02 +00:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/LadybirdBrowser/ladybird/commit/07aa25ce509 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1334
|
|
@ -4,28 +4,26 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
Box <div#container> at (18,18) content-size 764x180 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (23,23) content-size 156.984375x170 [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 15, rect: [23,23 126.109375x17] baseline: 13.296875
|
||||
"Item as wide as"
|
||||
frag 1 from TextNode start: 16, length: 12, rect: [23,40 98.125x17] baseline: 13.296875
|
||||
"the content."
|
||||
BlockContainer <div> at (23,23) content-size 232.234375x170 [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 28, rect: [23,23 232.234375x17] baseline: 13.296875
|
||||
"Item as wide as the content."
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (194.984375,23) content-size 290x170 [BFC] children: inline
|
||||
frag 0 from TextNode start: 1, length: 34, rect: [194.984375,23 278.625x17] baseline: 13.296875
|
||||
BlockContainer <div> at (270.234375,23) content-size 290x170 [BFC] children: inline
|
||||
frag 0 from TextNode start: 1, length: 34, rect: [270.234375,23 278.625x17] baseline: 13.296875
|
||||
"Item with more text in it. Because"
|
||||
frag 1 from TextNode start: 36, length: 33, rect: [194.984375,40 274.53125x17] baseline: 13.296875
|
||||
frag 1 from TextNode start: 36, length: 33, rect: [270.234375,40 274.53125x17] baseline: 13.296875
|
||||
"the contents of it are wider than"
|
||||
frag 2 from TextNode start: 70, length: 35, rect: [194.984375,57 289.90625x17] baseline: 13.296875
|
||||
frag 2 from TextNode start: 70, length: 35, rect: [270.234375,57 289.90625x17] baseline: 13.296875
|
||||
"the maximum width, it is clamped at"
|
||||
frag 3 from TextNode start: 106, length: 11, rect: [194.984375,74 86.609375x17] baseline: 13.296875
|
||||
frag 3 from TextNode start: 106, length: 11, rect: [270.234375,74 86.609375x17] baseline: 13.296875
|
||||
"300 pixels."
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (499.984375,23) content-size 277.015625x170 [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 13, rect: [499.984375,23 102.53125x17] baseline: 13.296875
|
||||
BlockContainer <div> at (575.234375,23) content-size 201.765625x170 [BFC] children: inline
|
||||
frag 0 from TextNode start: 0, length: 13, rect: [575.234375,23 102.53125x17] baseline: 13.296875
|
||||
"Flexible item"
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
|
|
@ -37,10 +35,10 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
|||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
|
||||
PaintableBox (Box<DIV>#container) [8,8 784x200]
|
||||
PaintableWithLines (BlockContainer<DIV>) [18,18 166.984375x180]
|
||||
PaintableWithLines (BlockContainer<DIV>) [18,18 242.234375x180]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>) [189.984375,18 300x180]
|
||||
PaintableWithLines (BlockContainer<DIV>) [265.234375,18 300x180]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer<DIV>) [494.984375,18 287.015625x180]
|
||||
PaintableWithLines (BlockContainer<DIV>) [570.234375,18 211.765625x180]
|
||||
TextPaintable (TextNode<#text>)
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,208 784x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,208 784x0]
|
||||
|
|
|
|||
31
Tests/LibWeb/Layout/expected/grid/fit-content-3.txt
Normal file
31
Tests/LibWeb/Layout/expected/grid/fit-content-3.txt
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x120 [BFC] children: not-inline
|
||||
BlockContainer <body> at (8,10) content-size 784x104 children: not-inline
|
||||
BlockContainer <div.container> at (8,10) content-size 200x104 children: inline
|
||||
frag 0 from Box start: 0, length: 0, rect: [8,10 104x104] baseline: 104
|
||||
TextNode <#text>
|
||||
Box <div.grid> at (8,10) content-size 104x104 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (8,10) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (8,10) content-size 78x104 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> at (9,11) content-size 50x50 floating [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (9,63) content-size 50x50 floating [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,10) content-size 0x0 [BFC] children: inline
|
||||
TextNode <#text>
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,114) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x120]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,10 784x104]
|
||||
PaintableWithLines (BlockContainer<DIV>.container) [8,10 200x104]
|
||||
PaintableBox (Box<DIV>.grid) [8,10 104x104]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,10 0x0]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [8,10 78x104]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,10 52x52]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,62 52x52]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,10 0x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,114 784x0]
|
||||
27
Tests/LibWeb/Layout/input/grid/fit-content-3.html
Normal file
27
Tests/LibWeb/Layout/input/grid/fit-content-3.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
background: blue;
|
||||
}
|
||||
.item {
|
||||
background: orange;
|
||||
}
|
||||
.item::before,
|
||||
.item::after {
|
||||
content: "";
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="grid" style="grid-template-columns: fit-content(75%)">
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -867,10 +867,14 @@ void GridFormattingContext::increase_sizes_to_accommodate_spanning_items_crossin
|
|||
});
|
||||
for (auto& track : spanned_tracks) {
|
||||
if (track.max_track_sizing_function.is_fit_content()) {
|
||||
track.growth_limit = css_clamp(
|
||||
track.planned_increase,
|
||||
track.base_size,
|
||||
track.max_track_sizing_function.css_size().to_px(grid_container(), available_size.to_px_or_zero()));
|
||||
track.growth_limit.value() += track.planned_increase;
|
||||
if (track.growth_limit.value() < track.base_size)
|
||||
track.growth_limit = track.base_size;
|
||||
if (available_size.is_definite()) {
|
||||
auto fit_content_limit = track.max_track_sizing_function.css_size().to_px(grid_container(), available_size.to_px_or_zero());
|
||||
if (track.growth_limit.value() > fit_content_limit)
|
||||
track.growth_limit = fit_content_limit;
|
||||
}
|
||||
} else if (!track.growth_limit.has_value()) {
|
||||
// If the affected size is an infinite growth limit, set it to the track’s base size plus the planned increase.
|
||||
track.growth_limit = track.base_size + track.planned_increase;
|
||||
|
|
|
|||
Loading…
Reference in a new issue