mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 22:08:10 +00:00
6a66a05809
The tests still pass, but opening the files in Ladybird and Safari or Firefox shows clearly where the layouting in Ladybird is incorrect for some absolute positioned elements. The previous 1px border was subtly hiding some issues.
66 lines
3 KiB
HTML
66 lines
3 KiB
HTML
<!DOCTYPE html><style>
|
|
* {
|
|
border: 15px solid black;
|
|
}
|
|
.outer {
|
|
display: flex;
|
|
width: 300px;
|
|
height: 60px;
|
|
background: wheat;
|
|
}
|
|
.outer > div {
|
|
position: absolute;
|
|
width: 150px;
|
|
height: 50px;
|
|
background: orange;
|
|
}
|
|
.flex-start { justify-content: flex-start; }
|
|
.flex-end { justify-content: flex-end; }
|
|
.start { justify-content: start; }
|
|
.end { justify-content: end; }
|
|
.center { justify-content: center; }
|
|
.space-around { justify-content: space-around; }
|
|
.space-between { justify-content: space-between; }
|
|
.space-evenly { justify-content: space-evenly; }
|
|
|
|
.row { flex-direction: row; border-color: red; }
|
|
.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>
|
|
<div class="row outer flex-start"><div>flex-start</div></div>
|
|
<div class="row outer end"><div>end</div></div>
|
|
<div class="row outer flex-end"><div>flex-end</div></div>
|
|
<div class="row outer center"><div>center</div></div>
|
|
<div class="row outer space-around"><div>space-around</div></div>
|
|
<div class="row outer space-between"><div>space-between</div></div>
|
|
<div class="row outer space-evenly"><div>space-evenly</div></div>
|
|
<div class="row reverse outer start"><div>start</div></div>
|
|
<div class="row reverse outer flex-start"><div>flex-start</div></div>
|
|
<div class="row reverse outer end"><div>end</div></div>
|
|
<div class="row reverse outer flex-end"><div>flex-end</div></div>
|
|
<div class="row reverse outer center"><div>center</div></div>
|
|
<div class="row reverse outer space-around"><div>space-around</div></div>
|
|
<div class="row reverse outer space-between"><div>space-between</div></div>
|
|
<div class="row reverse outer space-evenly"><div>space-evenly</div></div>
|
|
<div class="column outer start"><div>start</div></div>
|
|
<div class="column outer flex-start"><div>flex-start</div></div>
|
|
<div class="column outer end"><div>end</div></div>
|
|
<div class="column outer flex-end"><div>flex-end</div></div>
|
|
<div class="column outer center"><div>center</div></div>
|
|
<div class="column outer space-around"><div>space-around</div></div>
|
|
<div class="column outer space-between"><div>space-between</div></div>
|
|
<div class="column outer space-evenly"><div>space-evenly</div></div>
|
|
<div class="column reverse outer start"><div>start</div></div>
|
|
<div class="column reverse outer flex-start"><div>flex-start</div></div>
|
|
<div class="column reverse outer end"><div>end</div></div>
|
|
<div class="column reverse outer flex-end"><div>flex-end</div></div>
|
|
<div class="column reverse outer center"><div>center</div></div>
|
|
<div class="column reverse outer space-around"><div>space-around</div></div>
|
|
<div class="column reverse outer space-between"><div>space-between</div></div>
|
|
<div class="column reverse outer space-evenly"><div>space-evenly</div></div>
|