mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 02:07:36 +00:00
LibWeb: Naively implement the CSS clear property
This is definitely not fully-featured, but basically we now handle the clear property by forcing the cleared box below the bottom-most floated box on the relevant side.
This commit is contained in:
parent
26a9ab7cd5
commit
af757a1659
8 changed files with 120 additions and 0 deletions
64
Base/res/html/misc/clear-1.html
Normal file
64
Base/res/html/misc/clear-1.html
Normal file
|
@ -0,0 +1,64 @@
|
|||
<style>
|
||||
#lefty {
|
||||
float: left;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#righty {
|
||||
float: right;
|
||||
background: green;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#lefty2 {
|
||||
float: left;
|
||||
background: orange;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
#righty2 {
|
||||
float: right;
|
||||
background: magenta;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
#lefty3 {
|
||||
float: left;
|
||||
background: cyan;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
#righty3 {
|
||||
float: right;
|
||||
background: silver;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
#clearo {
|
||||
clear: left;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
<body>
|
||||
<div>
|
||||
<div id=lefty>L</div>
|
||||
<div id=righty>R</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id=lefty2>L2</div>
|
||||
<div id=righty2>R2</div>
|
||||
</div>
|
||||
<div>
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
<div id=clearo></div>
|
||||
<div>
|
||||
<div id=lefty3>L3</div>
|
||||
<div id=righty3>R3</div>
|
||||
</div>
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
</div>
|
||||
</body>
|
|
@ -38,6 +38,7 @@ span#loadtime {
|
|||
<p>This page loaded in <b><span id="loadtime"></span></b> ms</p>
|
||||
<p>Some small test pages:</p>
|
||||
<ul>
|
||||
<li><a href="clear-1.html">clearing floats</a></li>
|
||||
<li><a href="float-1.html">floating boxes</a></li>
|
||||
<li><a href="padding-inline.html">inline elements with padding</a></li>
|
||||
<li><a href="event-bubbling-and-multiple-listeners.html">event bubbling and multiple listeners</a></li>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue