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

LibWeb: Handle auto margins with flex and justify-content

Browse source 
Auto margins used together with justify-content would previously
result in children being positioned outside their parent. This was
solved by letting auto margins take precedence when they are used,
which was already implemented to some extent before, but not
fully.
This commit is contained in:
PaddiM8 2023-07-26 00:50:08 +02:00 • committed by Andreas Kling
parent a26f2f0aab
commit 6de701b5c3
4 changed files with 385 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

56
Tests/LibWeb/Layout/input/flex/justify-content-with-margin-auto-child.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html><style>
* {
border: 1px solid black !important;
}
.outer {
display: flex;
background: wheat;
}
.outer.row {
width: 300px;
height: 60px;
}
.outer.column {
width: 60px;
height: 300px;
}
.outer > div {
width: 50px;
height: 50px;
background: orange;
}
.flex-start { justify-content: flex-start; }
.flex-end { justify-content: flex-end; }
.start { justify-content: start; }
.end { justify-content: end; }
.flex-start div, .start div {
margin-left: auto;
}
.flex-end div, .end div {
margin-right: auto;
}
.row { flex-direction: row; }
.row.reverse { flex-direction: row-reverse; }
.column { flex-direction: column; }
.column.reverse { flex-direction: column-reverse; }
.reverse > div {
background: magenta;
}
</style>
<body>
<div class="row outer start"><div>start</div><div>a</div><div>b</div></div>
<div class="row outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
<div class="row outer end"><div>end</div><div>a</div><div>b</div></div>
<div class="row outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
<div class="row reverse outer start"><div>start</div><div>a</div><div>b</div></div>
<div class="row reverse outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
<div class="row reverse outer end"><div>end</div><div>a</div><div>b</div></div>
<div class="row reverse outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
<div class="column outer start"><div>start</div><div>a</div><div>b</div></div>
<div class="column outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
<div class="column outer end"><div>end</div><div>a</div><div>b</div></div>
<div class="column outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>
<div class="column reverse outer start"><div>start</div><div>a</div><div>b</div></div>
<div class="column reverse outer flex-start"><div>flex-start</div><div>a</div><div>b</div></div>
<div class="column reverse outer end"><div>end</div><div>a</div><div>b</div></div>
<div class="column reverse outer flex-end"><div>flex-end</div><div>a</div><div>b</div></div>