1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 07:27:45 +00:00

LibWeb: Some improvements to absolute positioning

Absolutely positioned blocks now register themselves with their
containing block (and note that the containing block of an absolutely
positioned box is the nearest non-statically positioned block ancestor
or the ICB as fallback.)

Containing blocks then drive the layout of their tracked absolutely
positioned descendants as a separate layout pass.

This is very far from perfect but the general direction seems good.
This commit is contained in:
Andreas Kling 2020-06-12 13:27:28 +02:00
parent ff2c949d70
commit 260427f0ad
8 changed files with 166 additions and 24 deletions

View file

@ -0,0 +1,48 @@
<style>
#container {
position: absolute;
width: 500px;
height: 400px;
border: 1px solid black;
}
#red {
position: absolute;
left: 20px;
top: 20px;
background: red;
width: 100px;
height: 100px;
border: 10px solid gray;
}
#green {
position: absolute;
right: 20px;
top: 20px;
background: green;
width: 100px;
height: 100px;
margin: 50px;
}
#blue {
position: absolute;
left: 20px;
bottom: 20px;
background: blue;
width: 100px;
height: 100px;
}
#yellow {
position: absolute;
right: 20px;
bottom: 20px;
background: yellow;
width: 100px;
height: 100px;
}
</style>
<div id=container>
<div id=red></div>
<div id=green></div>
<div id=blue></div>
<div id=yellow></div>
</div>

View file

@ -28,6 +28,7 @@ span#ua {
<p>Your user agent is: <b><span id="ua"></span></b></p>
<p>Some small test pages:</p>
<ul>
<li><a href="position-absolute-from-edges.html">position: absolute, offset from edges</a></li>
<li><a href="iframe.html">iframe</a></li>
<li><a href="many-buggies.html">many buggies</a></li>
<li><a href="palette.html">system palette color css extension</a></li>