RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 09:17:35 +00:00
Code Issues Activity Actions

LibWeb: Naively implement the CSS clear property

Browse source 
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:
Andreas Kling 2020-12-06 01:45:51 +01:00
parent 26a9ab7cd5
commit af757a1659
8 changed files with 120 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

64
Base/res/html/misc/clear-1.html Normal file
View 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>