LibWeb: Draw floating replaced elements more correctly

Previously floating replaced elements were drawn incorrectly and also twice.
LadybirdBrowser · Feb 3, 2025 · e00a14b · e00a14b
1 parent 0cfe90b
commit e00a14b
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 2 deletions.
diff --git 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
@@ -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>
diff --git a/Tests/LibWeb/Ref/input/render-order-floating-replaced.html b/Tests/LibWeb/Ref/input/render-order-floating-replaced.html
@@ -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>