mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-08 09:09:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Draw floating replaced elements more correctly

Browse source 
Previously floating replaced elements were drawn incorrectly and also
twice.
This commit is contained in:
InvalidUsernameException 2024-12-22 18:21:31 +01:00 • committed by Alexander Kalenik
commit 5f1a146afd
Notes: github-actions[bot] 2025-03-03 20:50:39 +00:00
3 changed files with 73 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -129,14 +129,27 @@ void StackingContext::paint_descendants(PaintContext& context, Paintable const&
// "For each one of these, treat the element as if it created a new stacking context, but any positioned
// descendants and descendants which actually create a new stacking context should be considered part of
// the parent stacking context, not this new one."
auto should_be_treated_as_stacking_context = child.layout_node().is_grid_item() && !z_index.has_value();
if (should_be_treated_as_stacking_context) {
auto grid_item_should_be_treated_as_stacking_context = child.layout_node().is_grid_item() && !z_index.has_value();
if (grid_item_should_be_treated_as_stacking_context) {
// FIXME: This may not be fully correct with respect to the paint phases.
if (phase == StackingContextPaintPhase::Foreground)
paint_node_as_stacking_context(child, context);
return IterationDecision::Continue;
}
// https://drafts.csswg.org/css2/#painting-order
// All non-positioned floating descendants, in tree order. For each one of these, treat the
// element as if it created a new stacking context, but any positioned descendants and
// descendants which actually create a new stacking context should be considered part of the
// parent stacking context, not this new one.
auto floating_item_should_be_treated_as_stacking_context = child.is_floating() && !child.is_positioned() && !z_index.has_value();
if (floating_item_should_be_treated_as_stacking_context) {
if (phase == StackingContextPaintPhase::Floats) {
paint_node_as_stacking_context(child, context);
}
return IterationDecision::Continue;
}
if (child.is_positioned() && z_index.value_or(0) == 0)
return IterationDecision::Continue;

27
Tests/LibWeb/Ref/expected/render-order-floating-replaced-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style>
.row > div {
height: 64px;
float: left;
}
.row { clear: both; }
.row > :nth-child(1) { width: 32px; }
.row > :nth-child(2) { width: 64px; }
.red { background-color: red; }
.green { background-color: green; }
</style>
</head>
<body>
<div class="row">
<div class="red"></div>
<div class="green"></div>
</div>
<div class="row">
<div class="green"></div>
<div class="red"></div>
</div>
</body>
</html>

31
Tests/LibWeb/Ref/input/render-order-floating-replaced.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<link rel="match" href="../expected/render-order-floating-replaced-ref.html" />
<style>
.square {
width: 64px;
height: 64px;
float: left;
}
div.square {
background: green;
display: inline-block;
}
.row { clear: both; }
.row > :nth-child(2) { margin-left: -32px; }
</style>
</head>
<body>
<div class="row">
<img class="square" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4z8AAAAMBAQAY3Y2wAAAAAElFTkSuQmCC" />
<div class="square"></div>
</div>
<div class="row">
<div class="square"></div>
<img class="square" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4z8AAAAMBAQAY3Y2wAAAAAElFTkSuQmCC" />
</div>
</body>
</html>