mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
LibWeb: Make sure float: left
boxes get pushed down if they can't fit
This commit is contained in:
parent
52e2095a3f
commit
db545b51ef
Notes:
sideshowbarker
2024-07-17 22:55:25 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/db545b51ef
@ -0,0 +1,10 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x150 children: not-inline
|
||||
BlockContainer <body> at (0,0) content-size 200x0 children: not-inline
|
||||
BlockContainer <ul> at (0,0) content-size 200x0 children: inline
|
||||
BlockContainer <div.red> at (0,0) content-size 150x50 floating children: not-inline
|
||||
BlockContainer <div.green> at (0,50) content-size 150x50 floating children: not-inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.orange> at (0,100) content-size 150x50 floating children: not-inline
|
||||
BlockContainer <(anonymous)> at (0,0) content-size 200x0 children: inline
|
||||
TextNode <#text>
|
@ -0,0 +1,18 @@
|
||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (1,1) content-size 798x107 children: not-inline
|
||||
BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <body> at (2,2) content-size 400x2 children: not-inline
|
||||
BlockContainer <(anonymous)> at (2,2) content-size 400x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.ul> at (3,3) content-size 398x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.yellow> at (4,4) content-size 60x50 floating children: not-inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.orange> at (66,4) content-size 250x50 floating children: not-inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.green> at (3,57) content-size 100x50 floating children: not-inline
|
||||
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
|
||||
TextNode <#text>
|
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html><html><head><style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div {
|
||||
float: left;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background: orange;
|
||||
}
|
||||
</style></head><body><ul><div class="red"></div><div class="green"></div> </ul><div class="orange"></div>
|
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
width: 60px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.orange {
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: lime;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ul">
|
||||
<div class="yellow"></div>
|
||||
<div class="orange"></div>
|
||||
</div>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
</html>
|
@ -785,20 +785,17 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
|
||||
}
|
||||
did_touch_preceding_float = true;
|
||||
if (!fits_next_to_preceding_float)
|
||||
continue;
|
||||
break;
|
||||
offset_from_edge = tentative_offset_from_edge;
|
||||
did_place_next_to_preceding_float = true;
|
||||
break;
|
||||
}
|
||||
|
||||
if (!did_touch_preceding_float) {
|
||||
// This box does not touch another floating box, go all the way to the edge.
|
||||
float_to_edge();
|
||||
|
||||
// Also, forget all previous boxes floated to this side while since they're no longer relevant.
|
||||
side_data.clear();
|
||||
} else if (!did_place_next_to_preceding_float) {
|
||||
// We ran out of horizontal space on this "float line", and need to break.
|
||||
if (!did_touch_preceding_float || !did_place_next_to_preceding_float) {
|
||||
// One of two things happened:
|
||||
// - This box does not touch another floating box.
|
||||
// - We ran out of horizontal space on this "float line", and need to break.
|
||||
// Either way, we float this box all the way to the edge.
|
||||
float_to_edge();
|
||||
CSSPixels lowest_margin_edge = 0;
|
||||
for (auto const& box : side_data.current_boxes) {
|
||||
|
Loading…
Reference in New Issue
Block a user