mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
412b2313f3
This patch combines a number of techniques to make inline content flow more correctly around floats: - During inline layout, BFC now lets LineBuilder decide the Y coordinate when inserting a new float. LineBuilder has more information about the currently accumulated line, and can make better breaking decisions. - When inserting a float on one side, and the top of the newly inserted float is below the bottommost float on the opposite side, we now reset the opposite side back to the start of that edge. This improves breaking behavior between opposite-side floats. - After inserting a float during inline layout, we now recalculate the available space on the line, but don't adjust X offsets of already existing fragments. This is handled by update_last_line() anyway, so it was pointless busywork. - When measuring whether a line can fit at a given Y coordinate, we now consider both the top and bottom Y values of the line. This fixes an issue where the bottom part of a line would bleed over other content (since we had only checked that the top Y coordinate of that line would fit.) There are some pretty brain-dead algorithms in here that we need to make smarter, but I didn't want to complicate this any further so I've left FIXMEs about them instead.
68 lines
1.5 KiB
HTML
68 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>float horror show</title>
|
|
<style type="text/css">
|
|
html {
|
|
font: 16px/1 Arial;
|
|
}
|
|
.outer {
|
|
border: 1px solid black;
|
|
width: 300px;
|
|
height: 250px;
|
|
}
|
|
|
|
.one {
|
|
float: left;
|
|
height: 50px;
|
|
width: 200px;
|
|
margin: 0;
|
|
border: 1px solid black;
|
|
background-color: #fc0;
|
|
}
|
|
.two {
|
|
float: right;
|
|
height: 50px;
|
|
width: 200px;
|
|
margin: 0;
|
|
border: 1px solid black;
|
|
background-color: pink;
|
|
}
|
|
.lefty {
|
|
float: left;
|
|
height: 50px;
|
|
width: 50px;
|
|
margin: 0;
|
|
border: 1px solid black;
|
|
background-color: lime;
|
|
}
|
|
.righty {
|
|
float: right;
|
|
height: 30px;
|
|
width: 30px;
|
|
margin: 0;
|
|
border: 1px solid black;
|
|
background-color: magenta;
|
|
}
|
|
</style></head><body>
|
|
<div class=outer>
|
|
foo bar baz foo bar baz
|
|
<div class=lefty></div>
|
|
<div class=one></div>
|
|
<div class=two></div>
|
|
foo bar baz foo bar baz
|
|
foo bar baz foo bar baz
|
|
<div class=righty></div>
|
|
foo bar baz foo bar baz
|
|
foo bar baz foo bar baz
|
|
foo bar baz foo bar baz
|
|
<div class="lefty shwifty"></div>
|
|
foo bar baz foo bar baz
|
|
<div class=righty></div>
|
|
foo bar baz foo bar baz
|
|
foo bar baz foo bar baz
|
|
foo bar baz foo bar baz
|
|
foo bar baz foo bar baz
|
|
foo bar baz foo bar baz
|
|
foo bar baz foo bar baz
|