mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 10:28: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.
40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<!DOCTYPE html><style>
|
|
* {
|
|
border: 10px solid black !important;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.outer {
|
|
display: flex;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: wheat;
|
|
}
|
|
.outer > div {
|
|
position: absolute;
|
|
width: 150px;
|
|
height: 50px;
|
|
background: orange;
|
|
}
|
|
.normal { align-items: normal; }
|
|
.stretch { align-items: stretch; }
|
|
.flex-start { align-items: flex-start; }
|
|
.flex-end { align-items: flex-end; }
|
|
.start { align-items: start; }
|
|
.end { align-items: end; }
|
|
.center { align-items: center; }
|
|
.self-start { align-items: self-start; }
|
|
.self-end { align-items: self-end; }
|
|
</style>
|
|
<body>
|
|
<div class="outer normal"><div>normal</div></div>
|
|
<div class="outer stretch"><div>stretch</div></div>
|
|
<div class="outer start"><div>start</div></div>
|
|
<div class="outer flex-start"><div>flex-start</div></div>
|
|
<div class="outer end"><div>end</div></div>
|
|
<div class="outer flex-end"><div>flex-end</div></div>
|
|
<div class="outer center"><div>center</div></div>
|
|
<div class="outer self-start"><div>self-start</div></div>
|
|
<div class="outer self-end"><div>self-end</div></div>
|