diff options
| author | Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com> | 2023-05-18 17:24:46 +0300 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-05-18 18:06:05 +0200 |
| commit | 82aedfcaf0eb1a91c2f604849928c6af783a0a3c (patch) | |
| tree | 2340c2e9aa1fddc0ec08b9700d3d5939eda3b43f /Tests | |
| parent | 52e9dced1afeab6a0245408bbfaaa53768254703 (diff) | |
| download | serenity-82aedfcaf0eb1a91c2f604849928c6af783a0a3c.zip | |
LibWeb: Use grid item used width as available width during track sizing
This change addresses the incorrect assumption that the available width
inside a grid item is equal to the width of the track it belongs to.
For instance, if a grid item has a width of 200px, the available width
inside that item is also 200px regardless of its column(s) base size.
To solve this issue, it was necessary to move the final resolution of
grid items to occur immediately after the final column track sizes are
determined. By doing so, it becomes possible to obtain correct
available width inside grid items while resolving the row track sizes.
Diffstat (limited to 'Tests')
10 files changed, 87 insertions, 11 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/auto-fill.txt b/Tests/LibWeb/Layout/expected/grid/auto-fill.txt index 1bff504c5c..c5b176307e 100644 --- a/Tests/LibWeb/Layout/expected/grid/auto-fill.txt +++ b/Tests/LibWeb/Layout/expected/grid/auto-fill.txt @@ -18,7 +18,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline + BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 9.09375x17.46875] "3" diff --git a/Tests/LibWeb/Layout/expected/grid/auto-fit.txt b/Tests/LibWeb/Layout/expected/grid/auto-fit.txt index 1bff504c5c..c5b176307e 100644 --- a/Tests/LibWeb/Layout/expected/grid/auto-fit.txt +++ b/Tests/LibWeb/Layout/expected/grid/auto-fit.txt @@ -18,7 +18,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline + BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 9.09375x17.46875] "3" diff --git a/Tests/LibWeb/Layout/expected/grid/borders.txt b/Tests/LibWeb/Layout/expected/grid/borders.txt index 75f4c52982..6d408e0071 100644 --- a/Tests/LibWeb/Layout/expected/grid/borders.txt +++ b/Tests/LibWeb/Layout/expected/grid/borders.txt @@ -103,7 +103,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 [GFC] children: not-inline BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer <div.grid-item> at (444.199981,285.34375) content-size 337.800018x17.46875 [BFC] children: inline + BlockContainer <div.grid-item> at (444.199981,285.34375) content-size 337.799987x17.46875 [BFC] 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: [444.199981,285.34375 6.34375x17.46875] "1" diff --git a/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt b/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt index 02eb01f635..c043c2f6cf 100644 --- a/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt +++ b/Tests/LibWeb/Layout/expected/grid/grid-gap-2.txt @@ -2,7 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline BlockContainer <body> at (8,8) content-size 784x50.9375 children: not-inline Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline - BlockContainer <div.item> at (434.199981,8) content-size 357.800018x17.46875 [BFC] children: inline + BlockContainer <div.item> at (434.199981,8) content-size 357.799987x17.46875 [BFC] 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: [434.199981,8 6.34375x17.46875] "1" diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width-2.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width-2.txt new file mode 100644 index 0000000000..e47bd3a089 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width-2.txt @@ -0,0 +1,60 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer <body> at (8,8) content-size 784x0 children: not-inline + Box <div.container> at (8,8) content-size 200x315.40625 floating [GFC] children: not-inline + BlockContainer <div.item> at (8,8) content-size 100x315.40625 [BFC] children: inline + line 0 width: 50.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 1, length: 5, rect: [8,8 50.96875x17.46875] + "Lorem" + line 1 width: 94.9375, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 7, length: 11, rect: [8,25 94.9375x17.46875] + "ipsum dolor" + line 2 width: 70.9375, height: 18.40625, bottom: 53.34375, baseline: 13.53125 + frag 0 from TextNode start: 19, length: 9, rect: [8,42 70.9375x17.46875] + "sit amet," + line 3 width: 96.84375, height: 17.875, bottom: 70.28125, baseline: 13.53125 + frag 0 from TextNode start: 29, length: 11, rect: [8,60 96.84375x17.46875] + "consectetur" + line 4 width: 75.71875, height: 18.34375, bottom: 88.21875, baseline: 13.53125 + frag 0 from TextNode start: 41, length: 10, rect: [8,77 75.71875x17.46875] + "adipiscing" + line 5 width: 28.71875, height: 17.8125, bottom: 105.15625, baseline: 13.53125 + frag 0 from TextNode start: 52, length: 5, rect: [8,95 28.71875x17.46875] + "elit." + line 6 width: 65.40625, height: 18.28125, bottom: 123.09375, baseline: 13.53125 + frag 0 from TextNode start: 58, length: 7, rect: [8,112 65.40625x17.46875] + "Vivamus" + line 7 width: 88.640625, height: 17.75, bottom: 140.03125, baseline: 13.53125 + frag 0 from TextNode start: 66, length: 11, rect: [8,130 88.640625x17.46875] + "eget turpis" + line 8 width: 77.40625, height: 18.21875, bottom: 157.96875, baseline: 13.53125 + frag 0 from TextNode start: 78, length: 9, rect: [8,147 77.40625x17.46875] + "eget urna" + line 9 width: 53.25, height: 17.6875, bottom: 174.90625, baseline: 13.53125 + frag 0 from TextNode start: 88, length: 7, rect: [8,165 53.25x17.46875] + "feugiat" + line 10 width: 84.984375, height: 18.15625, bottom: 192.84375, baseline: 13.53125 + frag 0 from TextNode start: 96, length: 10, rect: [8,182 84.984375x17.46875] + "pretium ut" + line 11 width: 65.359375, height: 17.625, bottom: 209.78125, baseline: 13.53125 + frag 0 from TextNode start: 107, length: 8, rect: [8,200 65.359375x17.46875] + "eu ante." + line 12 width: 72.46875, height: 18.09375, bottom: 227.71875, baseline: 13.53125 + frag 0 from TextNode start: 116, length: 8, rect: [8,217 72.46875x17.46875] + "Nunc sed" + line 13 width: 70.640625, height: 17.5625, bottom: 244.65625, baseline: 13.53125 + frag 0 from TextNode start: 125, length: 8, rect: [8,235 70.640625x17.46875] + "pharetra" + line 14 width: 39.015625, height: 18.03125, bottom: 262.59375, baseline: 13.53125 + frag 0 from TextNode start: 134, length: 5, rect: [8,252 39.015625x17.46875] + "diam," + line 15 width: 56.25, height: 17.5, bottom: 279.53125, baseline: 13.53125 + frag 0 from TextNode start: 140, length: 6, rect: [8,270 56.25x17.46875] + "rutrum" + line 16 width: 50.546875, height: 17.96875, bottom: 297.46875, baseline: 13.53125 + frag 0 from TextNode start: 147, length: 7, rect: [8,287 50.546875x17.46875] + "lacinia" + line 17 width: 47.5, height: 18.4375, bottom: 315.40625, baseline: 13.53125 + frag 0 from TextNode start: 155, length: 7, rect: [8,304 47.5x17.46875] + "tellus." + TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/grid/named-tracks.txt b/Tests/LibWeb/Layout/expected/grid/named-tracks.txt index e0a0414077..c968d268a4 100644 --- a/Tests/LibWeb/Layout/expected/grid/named-tracks.txt +++ b/Tests/LibWeb/Layout/expected/grid/named-tracks.txt @@ -32,7 +32,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer <div.grid-item> at (530.666687,25.46875) content-size 261.333312x50 [BFC] children: inline + BlockContainer <div.grid-item> at (530.666687,25.46875) content-size 261.333343x50 [BFC] children: inline line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [530.666687,25.46875 8.8125x17.46875] "2" @@ -46,7 +46,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer <div.grid-item> at (269.333343,75.46875) content-size 522.666625x25 [BFC] children: inline + BlockContainer <div.grid-item> at (269.333343,75.46875) content-size 522.666687x25 [BFC] children: inline line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [269.333343,75.46875 7.75x17.46875] "4" diff --git a/Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt b/Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt index c16c4e68f4..758286126e 100644 --- a/Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt +++ b/Tests/LibWeb/Layout/expected/grid/positions-and-spans.txt @@ -11,7 +11,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333251x17.46875 [BFC] children: inline + BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 8.8125x17.46875] "2" @@ -32,7 +32,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline TextNode <#text> BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer <div.grid-item> at (269.333343,25.46875) content-size 522.666625x17.46875 [BFC] children: inline + BlockContainer <div.grid-item> at (269.333343,25.46875) content-size 522.666687x17.46875 [BFC] children: inline line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [269.333343,25.46875 8.8125x17.46875] "2" diff --git a/Tests/LibWeb/Layout/expected/grid/row-span-2.txt b/Tests/LibWeb/Layout/expected/grid/row-span-2.txt index fd01a6aba5..c8fcf92aee 100644 --- a/Tests/LibWeb/Layout/expected/grid/row-span-2.txt +++ b/Tests/LibWeb/Layout/expected/grid/row-span-2.txt @@ -1,7 +1,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline - BlockContainer <body> at (8,8) content-size 784x193.375 children: not-inline - Box <div.grid-container> at (8,8) content-size 784x193.375 [GFC] children: not-inline + BlockContainer <body> at (8,8) content-size 784x315.40625 children: not-inline + Box <div.grid-container> at (8,8) content-size 784x315.40625 [GFC] children: not-inline BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline TextNode <#text> BlockContainer <div.grid-item.item-span-one-one> at (401.46875,8) content-size 392x131.296875 [BFC] children: inline diff --git a/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt b/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt index a94c806bd8..f8229f932c 100644 --- a/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt +++ b/Tests/LibWeb/Layout/expected/grid/template-lines-and-areas.txt @@ -7,7 +7,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875] "1fr" TextNode <#text> - BlockContainer <div.item-right> at (530.666687,8) content-size 261.333312x17.46875 [BFC] children: inline + BlockContainer <div.item-right> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 3, rect: [530.666687,8 21.609375x17.46875] "1fr" diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width-2.html b/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width-2.html new file mode 100644 index 0000000000..701355d272 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width-2.html @@ -0,0 +1,16 @@ +<style> +.container { + display: grid; + grid-template-columns: 200px; + background-color: pink; + float: left; +} + +.item { + width: 50%; + background-color: palevioletred; +} +</style> +<div class="container"><div class="item"> +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget turpis eget urna +feugiat pretium ut eu ante. Nunc sed pharetra diam, rutrum lacinia tellus.</div></div>
\ No newline at end of file |