system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-06 16:09:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Fix clearance to update y offset within current block

Browse source 
If a box has clearance and margin bottom of preceding box is greater
than static y of the box then it should also affect y offset in current
block container so subsequent boxes will get correct y position too.
This commit is contained in:
Aliaksandr Kalenik 2023-02-10 17:31:11 +03:00 committed by Andreas Kling
parent 0cd63f851e
commit 2ed5415750
3 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Tests/LibWeb/Layout/expected/clearfix.txt Normal file
View file

@ -0,0 +1,16 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x157 children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
BlockContainer <div> at (8,8) content-size 784x100 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.square.white> at (8,8) content-size 100x100 floating children: not-inline
TextNode <#text>
BlockContainer <div.clearfix> at (8,108) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.square.black> at (8,108) content-size 49x49 floating children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text>

23
Tests/LibWeb/Layout/input/clearfix.html Normal file
View file

@ -0,0 +1,23 @@
<style>
.clearfix {
clear: both;
}
.square {
float: left;
width: 49px;
height: 49px;
}
.white {
background-color: salmon;
width: 100px;
height: 100px;
}
.black {
background-color: slateblue;
}
</style>
<div>
<div class="square white"></div>
<div class="clearfix"></div>
<div class="square black"></div>
</div>

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

@ -636,6 +636,8 @@ void BlockFormattingContext::place_block_level_element_in_normal_flow_vertically
for (auto* containing_block = child_box.containing_block(); containing_block && containing_block != &root(); containing_block = containing_block->containing_block())
clearance_y_in_containing_block -= m_state.get(*containing_block).offset.y();
if (clearance_y_in_containing_block > y)
m_y_offset_of_current_block_container = clearance_y_in_containing_block;
y = max(y, clearance_y_in_containing_block);
float_side.clear();
}