Auto merge of #29859 - mrobinson:float-negative-block-margin, r=Loirooriol

Layout 2020: Properly handle negative margins in floats

If a float has negative block margins, it should be pushed upward, but shouldn't affect the positioning of any floats that came before it. It should lower the ceiling though when it still has some non-negative block contribution. In order to implement this behavior, we should only place the float considering its non-negative block length contribution. If the float is pushed up completely past it's "natural" position, it should be placed like a float with zero block size.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

components/layout_2020/flow/float.rs

@@ -25,7 +25,7 @@ use std::{f32, mem};
 use style::computed_values::clear::T as ClearProperty;
 use style::computed_values::float::T as FloatProperty;
 use style::properties::ComputedValues;
-use style::values::computed::Length;
+use style::values::computed::{CSSPixelLength, Length};
 use style::values::specified::text::TextDecorationLine;
 
 /// A floating box.
@@ -191,14 +191,22 @@ impl FloatContext {
     /// Places a new float and adds it to the list. Returns the start corner of its margin box.
     pub fn add_float(&mut self, new_float: &PlacementInfo) -> Vec2<Length> {
         // Place the float.
-        let new_float_origin = self.place_object(new_float);
+        let new_float_origin = self.place_object(&new_float);
         let new_float_extent = match new_float.side {
             FloatSide::Left => new_float_origin.inline + new_float.size.inline,
             FloatSide::Right => new_float_origin.inline,
         };
+
         let new_float_rect = Rect {
             start_corner: new_float_origin,
-            size: new_float.size.clone(),
+            // If this float has a negative margin, we should only consider its non-negative
+            // block size contribution when determing where to place it. When the margin is
+            // so negative that it's placed completely above the current float ceiling, then
+            // we should position it as if it had zero block size.
+            size: Vec2 {
+                inline: new_float.size.inline.max(CSSPixelLength::zero()),
+                block: new_float.size.block.max(CSSPixelLength::zero()),
+            },
         };
 
         // Update clear.
@@ -759,7 +767,6 @@ impl FloatBox {
                             .make_fragments(&replaced.style, content_size.clone());
                     },
                 };
-
                 let margin_box_start_corner = float_context.add_float(&PlacementInfo {
                     size: &content_size + &pbm_sums.sum(),
                     side: FloatSide::from_style(&style).expect("Float box wasn't floated!"),

tests/wpt/metadata/MANIFEST.json

@@ -60677,6 +60677,19 @@
         {}
        ]
       ],
+      "negative-block-margin-pushing-float-out-of-block-formatting-context.html": [
+       "0ebe54c1904e0c2487ebe15c4d60e9e93672d859",
+       [
+        null,
+        [
+         [
+          "/css/CSS2/floats/negative-block-margin-pushing-float-out-of-block-formatting-context-ref.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
       "negative-margin-float-positioning.html": [
        "8b4aef22f71f8695ebbc5b6dc83ad5639945618d",
        [
@@ -359622,6 +359635,10 @@
        "68139cdbe2d7c998b6d948f5ecca0ed7ce367694",
        []
       ],
+      "negative-block-margin-pushing-float-out-of-block-formatting-context-ref.html": [
+       "09a0ed094f8eb82f9fa25c4f09bb3f8a1f79c4c9",
+       []
+      ],
       "overflow-scroll-float-paint-order-ref.html": [
        "0fb53d4ecd3cd77e6588be0b271a2ee47950bd29",
        []

tests/wpt/web-platform-tests/css/CSS2/floats/negative-block-margin-pushing-float-out-of-block-formatting-context-ref.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com" />
+<meta name="assert" content="When a floating box has a negative margin negative enough that it pushes the float past the top of the block formatting context, it should render properly."/>
+
+<body>
+<div style="width: 50px; height: 50px; background: green;"></div>
+</body>

tests/wpt/web-platform-tests/css/CSS2/floats/negative-block-margin-pushing-float-out-of-block-formatting-context.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css2/#float-position"/>
+<meta name="assert" content="When a floating box has a negative margin negative enough that it pushes the float past the top of the block formatting context, it should render properly."/>
+<link rel="match" href="negative-block-margin-pushing-float-out-of-block-formatting-context-ref.html"/>
+
+<body>
+<div style="height: 100px;"></div>
+<div style="position: absolute;">
+    <div style="float: left; width: 50px; height: 50px; margin-top: -100px; background: green;"></div>
+</div>
+</body>