Skip to content

Commit db545b5

Browse files
awesomeklingawesomekling
committed
LibWeb: Make sure float: left boxes get pushed down if they can't fit
1 parent 52e2095 commit db545b5

File tree

5 files changed

+110
-9
lines changed

5 files changed

+110
-9
lines changed

‎Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically-2.txt

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
2+
BlockContainer <html> at (0,0) content-size 800x150 children: not-inline
3+
BlockContainer <body> at (0,0) content-size 200x0 children: not-inline
4+
BlockContainer <ul> at (0,0) content-size 200x0 children: inline
5+
BlockContainer <div.red> at (0,0) content-size 150x50 floating children: not-inline
6+
BlockContainer <div.green> at (0,50) content-size 150x50 floating children: not-inline
7+
TextNode <#text>
8+
BlockContainer <div.orange> at (0,100) content-size 150x50 floating children: not-inline
9+
BlockContainer <(anonymous)> at (0,0) content-size 200x0 children: inline
10+
TextNode <#text>

‎Tests/LibWeb/Layout/expected/bfc-float-left-break-vertically.txt

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
2+
BlockContainer <html> at (1,1) content-size 798x107 children: not-inline
3+
BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline
4+
TextNode <#text>
5+
BlockContainer <body> at (2,2) content-size 400x2 children: not-inline
6+
BlockContainer <(anonymous)> at (2,2) content-size 400x0 children: inline
7+
TextNode <#text>
8+
BlockContainer <div.ul> at (3,3) content-size 398x0 children: inline
9+
TextNode <#text>
10+
BlockContainer <div.yellow> at (4,4) content-size 60x50 floating children: not-inline
11+
TextNode <#text>
12+
BlockContainer <div.orange> at (66,4) content-size 250x50 floating children: not-inline
13+
TextNode <#text>
14+
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
15+
TextNode <#text>
16+
BlockContainer <div.green> at (3,57) content-size 100x50 floating children: not-inline
17+
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
18+
TextNode <#text>

‎Tests/LibWeb/Layout/input/bfc-float-left-break-vertically-2.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html><html><head><style>
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
width: 200px;
9+
}
10+
11+
div {
12+
float: left;
13+
width: 150px;
14+
height: 50px;
15+
}
16+
17+
.red {
18+
background: red;
19+
}
20+
21+
.green {
22+
background: green;
23+
}
24+
25+
.blue {
26+
background: blue;
27+
}
28+
29+
.orange {
30+
background: orange;
31+
}
32+
</style></head><body><ul><div class="red"></div><div class="green"></div> </ul><div class="orange"></div>

‎Tests/LibWeb/Layout/input/bfc-float-left-break-vertically.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
* {
6+
border: 1px solid black !important;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
11+
body {
12+
width: 400px;
13+
}
14+
15+
.yellow {
16+
width: 60px;
17+
height: 50px;
18+
float: left;
19+
background: yellow;
20+
}
21+
22+
.orange {
23+
width: 250px;
24+
height: 50px;
25+
float: left;
26+
background: orange;
27+
}
28+
29+
.green {
30+
background: lime;
31+
width: 100px;
32+
height: 50px;
33+
float: left;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div class="ul">
39+
<div class="yellow"></div>
40+
<div class="orange"></div>
41+
</div>
42+
<div class="green"></div>
43+
</body>
44+
</html>

‎Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -785,20 +785,17 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
785785
}
786786
did_touch_preceding_float = true;
787787
if (!fits_next_to_preceding_float)
788-
continue;
788+
break;
789789
offset_from_edge = tentative_offset_from_edge;
790790
did_place_next_to_preceding_float = true;
791791
break;
792792
}
793793

794-
if (!did_touch_preceding_float) {
795-
// This box does not touch another floating box, go all the way to the edge.
796-
float_to_edge();
797-
798-
// Also, forget all previous boxes floated to this side while since they're no longer relevant.
799-
side_data.clear();
800-
} else if (!did_place_next_to_preceding_float) {
801-
// We ran out of horizontal space on this "float line", and need to break.
794+
if (!did_touch_preceding_float || !did_place_next_to_preceding_float) {
795+
// One of two things happened:
796+
// - This box does not touch another floating box.
797+
// - We ran out of horizontal space on this "float line", and need to break.
798+
// Either way, we float this box all the way to the edge.
802799
float_to_edge();
803800
CSSPixels lowest_margin_edge = 0;
804801
for (auto const& box : side_data.current_boxes) {

0 commit comments

Comments
 (0)