Fix clearance on replaced elements

Loirooriol · Loirooriol · commit 246dc983f611 · 2023-06-26T17:24:24.000+02:00
diff --git a/components/layout_2020/flow/mod.rs b/components/layout_2020/flow/mod.rs
@@ -733,10 +733,13 @@ fn layout_in_flow_replaced_block_level<'a>(
 
     let mut clearance = Length::zero();
     if let Some(ref mut sequential_layout_state) = sequential_layout_state {
+        sequential_layout_state.adjoin_assign(&CollapsedMargin::new(margin.block_start));
         sequential_layout_state.collapse_margins();
         clearance = sequential_layout_state.calculate_clearance(ClearSide::from_style(style));
-        sequential_layout_state
-            .advance_block_position(pbm.border.block_sum() + pbm.padding.block_sum() + size.block);
+        sequential_layout_state.advance_block_position(
+            pbm.border.block_sum() + pbm.padding.block_sum() + size.block + clearance,
+        );
+        sequential_layout_state.adjoin_assign(&CollapsedMargin::new(margin.block_end));
     };
 
     let content_rect = Rect {
@@ -756,7 +759,7 @@ fn layout_in_flow_replaced_block_level<'a>(
         pbm.padding,
         pbm.border,
         margin,
-        Length::zero(),
+        clearance,
         block_margins_collapsed_with_children,
     )
 }
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
@@ -61742,6 +61742,35 @@
         {}
        ]
       ],
+      "clear-on-replaced-element.html": [
+       "e5566b38326da17455d54c3d06d498f72bc4c693",
+       [
+        null,
+        [
+         [
+          "/css/CSS2/reference/ref-filled-green-100px-square.xht",
+          "=="
+         ]
+        ],
+        {
+         "fuzzy": [
+          [
+           null,
+           [
+            [
+             0,
+             2
+            ],
+            [
+             0,
+             1500
+            ]
+           ]
+          ]
+         ]
+        }
+       ]
+      ],
       "clear-with-top-margin-after-cleared-empty-block.html": [
        "5d0fba7981f3f688b22442c1e8bef2ff8b146f5e",
        [
diff --git a/tests/wpt/tests/css/CSS2/floats-clear/clear-on-replaced-element.html b/tests/wpt/tests/css/CSS2/floats-clear/clear-on-replaced-element.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Clear on block-level replaced element</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
+<link rel="help" href="https://www.w3.org/TR/CSS22/conform.html#replaced-element">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-1500">
+<style>
+#wrapper {
+  width: 90px;
+  border: 5px solid green;
+  background-image: linear-gradient(
+    to bottom,
+    red 30px, green 30px,
+    green 50px, red 50px,
+    red 60px, green 60px,
+    green 70px, red 70px,
+    red 80px, green 80px
+  )
+}
+#wrapper > * {
+  display: block;
+  width: 100%;
+  background: green content-box;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="wrapper">
+  <div style="float: left; height: 20px"></div>
+  <canvas style="clear: both; height: 10px; margin: 10px 0"></canvas>
+  <canvas style="float: left; height: 10px; margin: 10px 0"></canvas>
+  <div style="clear: both; height: 10px; padding-bottom: 10px"></div>
+</div>
