RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:17:34 +00:00
Code Issues Activity Actions

LibWeb: Allow block level boxes to be floated and have clearance

Browse source 
Before, we completely ignored clearance for block-level boxes if they
were floated. This was incorrect because it is valid for a block-level
box to be floated and still have clearance. However, unlike clearance
on normal flow boxes, clearance on floating boxes does not affect the
y-position of subsequent normal flow boxes. Instead, it pushes the
box's position to the very beginning of an edge.

Work towards https://github.com/SerenityOS/serenity/issues/21023
This commit is contained in:
Aliaksandr Kalenik 2023-09-11 20:45:18 +02:00 • committed by Andreas Kling
parent 9240233378
commit 81ddad3fcf
3 changed files with 72 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

34
Tests/LibWeb/Layout/expected/block-and-inline/block-level-floating-box-with-clearance.txt Normal file
View file

@ -0,0 +1,34 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x976 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 600x960 children: not-inline
BlockContainer <div.normal> at (18,18) content-size 300x300 children: not-inline
BlockContainer <div#top> at (8,328) content-size 100x100 floating [BFC] children: inline
line 0 width: 26.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [8,328 26.640625x17.46875]
"top"
TextNode <#text>
BlockContainer <div#left> at (8,428) content-size 100x100 floating [BFC] children: inline
line 0 width: 26.25, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [8,428 26.25x17.46875]
"left"
TextNode <#text>
BlockContainer <div#right> at (108,428) content-size 100x100 floating [BFC] children: inline
line 0 width: 37.109375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [108,428 37.109375x17.46875]
"right"
TextNode <#text>
BlockContainer <div.normal> at (18,338) content-size 300x300 children: not-inline
BlockContainer <div.normal> at (18,658) content-size 300x300 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x976]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x976]
PaintableWithLines (BlockContainer<BODY>) [8,8 600x960]
PaintableWithLines (BlockContainer<DIV>.normal) [8,8 320x320]
PaintableWithLines (BlockContainer<DIV>#top) [8,328 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#left) [8,428 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#right) [108,428 100x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.normal) [8,328 320x320]
PaintableWithLines (BlockContainer<DIV>.normal) [8,648 320x320]

27
Tests/LibWeb/Layout/input/block-and-inline/block-level-floating-box-with-clearance.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html><style>
* { outline: 1px solid black; }
body { width: 600px; }
div {
width: 100px;
height: 100px;
}
#top {
float: left;
background: green;
}
#left {
float: left;
background: pink;
clear: both;
}
#right {
float: left;
background: orange;
}
.normal {
width: 300px;
height: 300px;
background-color: gray;
border: 10px solid sandybrown;
}
</style><body><div class="normal"></div><div id="top">top</div><div id="left">left</div><div id="right">right</div><div class="normal"></div><div class="normal"></div>

13
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
View file

@ -904,6 +904,7 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
VERIFY(box.is_floating()); VERIFY(box.is_floating());
auto& box_state = m_state.get_mutable(box); auto& box_state = m_state.get_mutable(box);
auto const& computed_values = box.computed_values();
resolve_vertical_box_model_metrics(box); resolve_vertical_box_model_metrics(box);
@ -979,10 +980,18 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer
break; break;
} }
if (!did_touch_preceding_float || !did_place_next_to_preceding_float) { auto has_clearance = false;
// One of two things happened: if (side == FloatSide::Left) {
has_clearance = computed_values.clear() == CSS::Clear::Left || computed_values.clear() == CSS::Clear::Both;
} else if (side == FloatSide::Right) {
has_clearance = computed_values.clear() == CSS::Clear::Right || computed_values.clear() == CSS::Clear::Both;
}
if (!did_touch_preceding_float || !did_place_next_to_preceding_float || has_clearance) {
// One of three things happened:
// - This box does not touch another floating box. // - This box does not touch another floating box.
// - We ran out of horizontal space on this "float line", and need to break. // - We ran out of horizontal space on this "float line", and need to break.
// - This box has clearance.
// Either way, we float this box all the way to the edge. // Either way, we float this box all the way to the edge.
float_to_edge(); float_to_edge();
CSSPixels lowest_margin_edge = 0; CSSPixels lowest_margin_edge = 0;