RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 08:37:46 +00:00
Code Issues Activity Actions

LibWeb: Support reverse flex layout with space-around/space-between

Browse source 
We were not taking reverse flex directions into account when choosing
the initial offset for flex item placement if justify-content were
either space-around or space-between.
This commit is contained in:
Andreas Kling 2023-05-28 15:39:21 +02:00
parent d15ae9fa93
commit 30feb95d53
3 changed files with 103 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

20
Tests/LibWeb/Layout/input/flex/reverse-flex-layout-with-space-between-and-space-around.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html><style>
.outer {
display: flex;
width: 150px;
height: 150px;
justify-content: space-around;
background: pink;
}
.row { flex-direction: row; }
.row-reverse { flex-direction: row-reverse; }
.column { flex-direction: column; }
.column-reverse { flex-direction: column-reverse; }
.inner {
background: orange;
}
</style>
<div class="outer row"><div class="inner">Well</div><div class="inner">hello</div><div class="inner">friends</div></div>
<div class="outer row-reverse"><div class="inner">Well</div><div class="inner">hello</div><div class="inner">friends</div></div>
<div class="outer column"><div class="inner">Well</div><div class="inner">hello</div><div class="inner">friends</div></div>
<div class="outer column-reverse"><div class="inner">Well</div><div class="inner">hello</div><div class="inner">friends</div></div>