mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 03:57:44 +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:
parent
ff2c949d70
commit
260427f0ad
8 changed files with 166 additions and 24 deletions
48
Base/home/anon/www/position-absolute-from-edges.html
Normal file
48
Base/home/anon/www/position-absolute-from-edges.html
Normal 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>
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue