eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-05 06:32:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Avoid floats for BFC/FFC/GFCs with a definite width

Browse Source 
Applicable FCs with an indefinite width simply shrink in their available
space as long as floats are intruding, but as soon as we have a definite
width we must push the box down until it it has enough space again.

Fixes #4136.
This commit is contained in:
Jelle Raaijmakers
2025-07-28 21:24:30 +02:00
committed by Jelle Raaijmakers
parent d27395cf1f
commit af8b256832
Notes: github-actions[bot] 2025-08-01 12:27:28 +00:00 
Author: https://github.com/gmta
Commit: https://github.com/LadybirdBrowser/ladybird/commit/af8b2568321
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5630
6 changed files with 226 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
Tests/LibWeb/Layout/input/flex/flex-container-with-definite-width-avoids-float-intrusions.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<style>
body {
width: 400px;
}
.a {
background: blue;
float: left;
height: 100px;
width: 100px;
}
.b {
background: green;
float: right;
height: 200px;
width: 50px;
}
.c {
background: red;
display: flex;
height: 100px;
width: 400px;
}
.d {
background: red;
display: flex;
height: 100px;
margin-left: 12.5%;
width: 300px;
}
.e {
background: red;
display: flex;
height: 100px;
margin-left: 50px;
padding-left: 10%;
width: 150px;
}
.f {
background: red;
display: flex;
margin: 0 auto;
height: 100px;
width: 200px;
}
</style><br><div class="a"></div><div class="c">This should clear the blue box.</div>
<hr><div class="a"></div><div class="b"></div><div class="c">This should clear the green box.</div>
<hr><div class="a"></div><div class="b"></div><div class="d">This should clear the blue box and sit flush against the green box.</div>
<hr><div class="a"></div><div class="e">This should sit flush against the blue box, with 40px of padding to the left.</div>
<hr><div class="a"></div><div class="b"></div><div class="f">This should be centered between the blue and green boxes.</div>