RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 09:47:34 +00:00
Code Issues Activity Actions

LibWeb: Honor column-gap and row-gap CSS properties in flex layout

Browse source 
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.
This commit is contained in:
Andreas Kling 2023-04-14 10:35:26 +02:00
parent 7dd3c4a79c
commit 47c21cc349
4 changed files with 66 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Tests/LibWeb/Layout/expected/flex/flex-gap-between-items-and-lines.txt Normal file
View file

@ -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

18
Tests/LibWeb/Layout/input/flex/flex-gap-between-items-and-lines.html Normal file
View file

@ -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>