Auto merge of #29910 - mrobinson:static-absolute-of-inline-box, r=Loirooriol

Fix positioning of statically positioned absolute child of inline box

<!-- 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/inline.rs

@@ -659,13 +659,20 @@ fn layout_atomic(
                 containing_block_for_children.style.writing_mode,
                 "Mixed writing modes are not supported yet"
             );
-            // FIXME: Do we need to adjust the static position of the hoisted fragments in the positioning
+
-            // context somewhere near here?
+            let collects_for_nearest_positioned_ancestor = ifc
+                .positioning_context
+                .collects_for_nearest_positioned_ancestor();
+            let mut child_positioning_context =
+                PositioningContext::new_for_subtree(collects_for_nearest_positioned_ancestor);
             let independent_layout = non_replaced.layout(
                 layout_context,
-                ifc.positioning_context,
+                &mut child_positioning_context,
                 &containing_block_for_children,
             );
+            child_positioning_context
+                .adjust_static_position_of_hoisted_fragments_with_offset(&start_corner);
+            ifc.positioning_context.append(child_positioning_context);
 
             // https://drafts.csswg.org/css2/visudet.html#block-root-margin
             let tentative_block_size = box_size
@@ -685,6 +692,7 @@ fn layout_atomic(
                     inline: inline_size,
                 },
             };
+
             BoxFragment::new(
                 non_replaced.base_fragment_info,
                 non_replaced.style.clone(),

components/layout_2020/positioned.rs

@@ -166,20 +166,27 @@ impl PositioningContext {
         &mut self,
         parent_fragment: &Fragment,
     ) {
-        let fragment_rect = match &parent_fragment {
+        let start_offset = match &parent_fragment {
-            Fragment::Box(b) | Fragment::Float(b) => &b.content_rect,
+            Fragment::Box(b) | Fragment::Float(b) => &b.content_rect.start_corner,
             Fragment::AbsoluteOrFixedPositioned(_) => return,
-            Fragment::Anonymous(a) => &a.rect,
+            Fragment::Anonymous(a) => &a.rect.start_corner,
             _ => unreachable!(),
         };
+        self.adjust_static_position_of_hoisted_fragments_with_offset(start_offset);
+    }
 
+    /// See documentation for [adjust_static_position_of_hoisted_fragments].
+    pub(crate) fn adjust_static_position_of_hoisted_fragments_with_offset(
+        &mut self,
+        start_offset: &Vec2<CSSPixelLength>,
+    ) {
         let update_fragment_if_needed = |hoisted_fragment: &mut HoistedAbsolutelyPositionedBox| {
             let mut fragment = hoisted_fragment.fragment.borrow_mut();
             if let AbsoluteBoxOffsets::StaticStart { start } = &mut fragment.box_offsets.inline {
-                *start += fragment_rect.start_corner.inline;
+                *start += start_offset.inline;
             }
             if let AbsoluteBoxOffsets::StaticStart { start } = &mut fragment.box_offsets.block {
-                *start += fragment_rect.start_corner.block;
+                *start += start_offset.block;
             }
         };
 

tests/wpt/meta/MANIFEST.json

@@ -31605,6 +31605,19 @@
         {}
        ]
       ],
+      "static-inside-inline-block.html": [
+       "327e8e6dacdeabb4d2d57ab700d80f966ccde76b",
+       [
+        null,
+        [
+         [
+          "/css/CSS2/abspos/static-inside-inline-block-ref.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
       "static-inside-table-cell.html": [
        "712bfbaf1e8f2d6a7a8fdd8dfa65792770f004e3",
        [
@@ -355090,6 +355103,10 @@
       "hypothetical-inline-alone-on-second-line-ref.html": [
        "1ceebb0f7e39896003508a769c772cc6e6bf54cd",
        []
+      ],
+      "static-inside-inline-block-ref.html": [
+       "e76a2ccb972a2c056ffdd6380e60e5590b87b36e",
+       []
       ]
      },
      "backgrounds": {

tests/wpt/web-platform-tests/css/CSS2/abspos/static-inside-inline-block-ref.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Static position inside inline-block</title>
+<link rel="author" title="Martin Robinson" href="mrobinson@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: inline-block; width: 100px; height: 100px;"></div>
+<div style="display: inline-block; width: 100px; height: 100px; background: red;">
+    <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
+<div style="display: inline-block; width: 100px; height: 100px;"></div>

tests/wpt/web-platform-tests/css/CSS2/abspos/static-inside-inline-block.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Static position inside inline-block</title>
+<link rel="author" title="Martin Robinson" href="mrobinson@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width" title="10.3.7 Absolutely positioned, non-replaced elements">
+<link rel="match" href="static-inside-inline-block-ref.html">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: inline-block; width: 100px; height: 100px;"></div>
+<div style="display: inline-block; width: 100px; height: 100px; background: red;">
+    <div style="position: absolute; width: 100px; height: 100px; background: green;"></div>
+</div>
+<div style="display: inline-block; width: 100px; height: 100px;"></div>