diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-04-14 10:35:26 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-04-14 13:22:07 +0200 |
| commit | 47c21cc3497066c0227268879ac4351d1975d2db (patch) | |
| tree | 968e1843977ac213f6d5082104222ac4338f8f0f /Tests | |
| parent | 7dd3c4a79c2a1d937eff90729bcbb6b47cb007b1 (diff) | |
| download | serenity-47c21cc3497066c0227268879ac4351d1975d2db.zip | |
LibWeb: Honor column-gap and row-gap CSS properties in flex layout
This isn't actually part of CSS-FLEXBOX-1, but all major engines honor
these properties in flex layout, and it's widely used on the web.
There's a bug open against the flexbox spec where fantasai says the
algorithm will be updated in CSS-FLEXBOX-2:
https://github.com/w3c/csswg-drafts/issues/2336
I've added comments to all the places where we adjust calculations for
gaps with "CSS-FLEXBOX-2" so we can find them easily. When that spec
becomes available, we can add proper spec links.
Diffstat (limited to 'Tests')
| -rw-r--r-- | Tests/LibWeb/Layout/expected/flex/flex-gap-between-items-and-lines.txt | 12 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/flex/flex-gap-between-items-and-lines.html | 18 |
2 files changed, 30 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/flex/flex-gap-between-items-and-lines.txt b/Tests/LibWeb/Layout/expected/flex/flex-gap-between-items-and-lines.txt new file mode 100644 index 0000000000..d6b51ad414 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-gap-between-items-and-lines.txt @@ -0,0 +1,12 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (1,1) content-size 798x268 children: not-inline + BlockContainer <body> at (10,10) content-size 780x250 children: not-inline + Box <div.flexbox> at (11,11) content-size 100x248 flex-container(row) children: not-inline + BlockContainer <div> at (12,12) content-size 30x30 flex-item children: not-inline + BlockContainer <div> at (64,12) content-size 30x30 flex-item children: not-inline + BlockContainer <div> at (12,84) content-size 30x30 flex-item children: not-inline + BlockContainer <div> at (64,84) content-size 30x30 flex-item children: not-inline + BlockContainer <div> at (12,156) content-size 30x30 flex-item children: not-inline + BlockContainer <div> at (64,156) content-size 30x30 flex-item children: not-inline + BlockContainer <div> at (12,228) content-size 30x30 flex-item children: not-inline + BlockContainer <div> at (64,228) content-size 30x30 flex-item children: not-inline diff --git a/Tests/LibWeb/Layout/input/flex/flex-gap-between-items-and-lines.html b/Tests/LibWeb/Layout/input/flex/flex-gap-between-items-and-lines.html new file mode 100644 index 0000000000..d2b66141fb --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-gap-between-items-and-lines.html @@ -0,0 +1,18 @@ +<style> +* { + border: 1px solid black; + font: 16px SerenitySans; +} +.flexbox { + display: flex; + column-gap: 20px; + flex-wrap: wrap; + row-gap: 40px; + width: 100px; +} +.flexbox > div { + width: 30px; + height: 30px; +} +</style> +<div class=flexbox><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
\ No newline at end of file |