LadybirdBrowser
Float clearing with clear: both not working as expected.
Summary
The clear: both; doesn't work as expected and doesn't render under the floats, this issue is visible on the main page of 4chan preventing proper navigation and rendering of the layout, I have created a reduced test case for it.
Operating system
Linux
Steps to reproduce
Open 4chan or use the reduced test case reported below.
Expected behavior
The "Text below" should render below the float element.
Actual behavior
The "Text below" is render as clear: both; wasn't there.
URL for a reduced test case
N/A
HTML/SVG/etc. source for a reduced test case
<!DOCTYPE html>
<html>
<head>
<title>Ladybird Float Clear Test Case</title>
<style>
.container {
background: lightgray; /* Visual aid to see container size */
border: 1px solid black; /* Visual aid */
}
.floated {
float: left;
width: 100px;
height: 50px;
background: red;
}
br.clear-bug {
height: 0;
line-height: 0;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="floated">Floated</div>
<br class="clear-bug">
<p>Text below (should be below the red box)</p>
</div>
</body>
</html>
Log output and (if possible) backtrace
Nothing relevant.
Screenshots or screen recordings
Incorrect (Ladybird)
Correct (Firefox)
Build flags or config settings
No response
Contribute a patch?
- [ ] I’ll contribute a patch for this myself.
Okay I figure out the main problem, the clear actually render correctly as stated by the CSS specification (at least I think) but 4chan mainpage use it with br that is an inline element, this is a problem because clear is supposed to be used only with block-level elements. Mainstream browsers still support the use of the clear property with br for compatibility reasons.
Since this issue tries to apply all of height, line-height and clear to a <br> element, https://github.com/whatwg/html/issues/2291 seems relevant
Another reproduction, simplified a bit further:
<!DOCTYPE html>
<style>
.a {
background: green;
float: left;
height: 100px;
width: 100px;
}
.b {
clear: both;
}
</style>
<div class="a"></div>
<br class="b">
foo
This does not expose exactly the same bug as the repro in the description of this issue, but it is definitely related and should be fixed as well.
Hi @GaggiX, I've put up #4120 to fix your minimal reproduction, but I don't see any visual changes on the website itself. Can you provide more details (e.g. screenshots or a video) of what exactly isn't working correctly after #4120?
@gmta my minimal reproduction is not actually fixed and the bug is still present on the actual website, the div.boxcontent on the website does collapse because the br.clear-bug does not properly clear the floats (the columns in this case). Firefox does lie when saying that the clear property does not apply to the br because it actually does, it's just not in the CSS spec given that br is a inline element (and a special one tbh). Removing the clear property from br.clear-bug does affect the page.
Just to show the result of my reduced test code on the latest commit: a83145c7519015ce5dac2d9a2012c817f58aa61e
Ladybird (incorrect)
The floated div is not cleared by the br.
Firefox (correct)
Let me know if there is something that I do not understand properly.
@gmta yup I have noticed just now, and I was going to correct myself. I will try to create a better reduction code given that the problem is still present.
@gmta This should (hopefully) be a better reduced test code.
<style>
.column {
float: left;
}
br {
clear: both
}
body {
background: lightblue;
}
.top-box {
background: #fff
}
</style>
<div class="top-box">
<div class=column>
<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur adipiscing elit,</p>
<p>sed do eiusmod tempor incididunt</p>
</div>
<br>
</div>