From e00a14bbc93d4e2931cd0d4c288bdd6cb3d53fa3 Mon Sep 17 00:00:00 2001 From: InvalidUsernameException Date: Sun, 22 Dec 2024 18:21:31 +0100 Subject: [PATCH] LibWeb: Draw floating replaced elements more correctly Previously floating replaced elements were drawn incorrectly and also twice. --- Libraries/LibWeb/Painting/StackingContext.cpp | 17 ++++++++-- .../render-order-floating-replaced-ref.html | 27 ++++++++++++++++ .../input/render-order-floating-replaced.html | 31 +++++++++++++++++++ 3 files changed, 73 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Ref/expected/render-order-floating-replaced-ref.html create mode 100644 Tests/LibWeb/Ref/input/render-order-floating-replaced.html diff --git a/Libraries/LibWeb/Painting/StackingContext.cpp b/Libraries/LibWeb/Painting/StackingContext.cpp index 56dec20390bfc..2b69fbd0a861e 100644 --- a/Libraries/LibWeb/Painting/StackingContext.cpp +++ b/Libraries/LibWeb/Painting/StackingContext.cpp @@ -128,14 +128,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; diff --git a/Tests/LibWeb/Ref/expected/render-order-floating-replaced-ref.html b/Tests/LibWeb/Ref/expected/render-order-floating-replaced-ref.html new file mode 100644 index 0000000000000..350a5a691ec55 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/render-order-floating-replaced-ref.html @@ -0,0 +1,27 @@ + + + + + + +
+
+
+
+
+
+
+
+ + diff --git a/Tests/LibWeb/Ref/input/render-order-floating-replaced.html b/Tests/LibWeb/Ref/input/render-order-floating-replaced.html new file mode 100644 index 0000000000000..e17a02a94299a --- /dev/null +++ b/Tests/LibWeb/Ref/input/render-order-floating-replaced.html @@ -0,0 +1,31 @@ + + + + + + + +
+ +
+
+
+
+ +
+ +