diff options
| author | Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com> | 2023-05-11 17:46:22 +0300 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-05-11 18:37:06 +0200 |
| commit | de970c2dce6989272ff594a255f765061944212c (patch) | |
| tree | fd6458376a14e23b37711c697b0d97a3512fae31 /Tests | |
| parent | c2f6ba8f5f13a49b1946aff1beca8abdc77724db (diff) | |
| download | serenity-de970c2dce6989272ff594a255f765061944212c.zip | |
LibWeb: Resolve grid items preferred width in GFC
Previously, the width and height of grid items were set to match the
size of the grid area they belonged to. With this change, if a grid
item has preferred width or height specified to not "auto" value it
will be resolved using grid area as containing block and used instead.
Diffstat (limited to 'Tests')
4 files changed, 53 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-size.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-size.txt new file mode 100644 index 0000000000..40cf415078 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-size.txt @@ -0,0 +1,9 @@ +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 784x200 children: not-inline + Box <div.grid-container> at (8,8) content-size 784x200 [GFC] children: not-inline + BlockContainer <div.first> at (8,8) content-size 100x200 [BFC] children: inline + line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875] + "First" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width.txt new file mode 100644 index 0000000000..6fb422af98 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width.txt @@ -0,0 +1,14 @@ +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 784x17.46875 children: not-inline + Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline + BlockContainer <div.first> at (8,8) content-size 313.599975x17.46875 [BFC] children: inline + line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875] + "First" + TextNode <#text> + BlockContainer <div.second> at (400,8) content-size 78.399993x17.46875 [BFC] children: inline + line 0 width: 57.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [400,8 57.40625x17.46875] + "Second" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-fixed-size.html b/Tests/LibWeb/Layout/input/grid/grid-item-fixed-size.html new file mode 100644 index 0000000000..6dcd8b29af --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-fixed-size.html @@ -0,0 +1,13 @@ +<style> +.grid-container { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto; +} + +.first { + background-color: lightcoral; + width: 100px; + height: 200px; +} +</style><div class="grid-container"><div class="first">First</div></div>
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width.html b/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width.html new file mode 100644 index 0000000000..101a67c23f --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width.html @@ -0,0 +1,17 @@ +<style> +.grid-container { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto; +} + +.first { + background-color: lightcoral; + width: 80%; +} + +.second { + background-color: lightsteelblue; + width: 20%; +} +</style><div class="grid-container"><div class="first">First</div><div class="second">Second</div></div>
\ No newline at end of file |