Use the same code for all layouts to manage out-of-flow children

And add failing tests for absolute children of flex and grid containers.

Author: liZe

tests/layout/test_position.py

@@ -1,5 +1,7 @@
 """Tests for position property."""
 
+import pytest
+
 from ..testing_utils import assert_no_logs, render_pages
 
 
@@ -489,3 +491,52 @@ def test_grid_relative_positioning():
     div1, div2 = article.children
 
     assert (div2.position_x, div2.position_y) == (30, 10)
+
+
+@assert_no_logs
+@pytest.mark.xfail
+def test_flex_absolute_positioning():
+    """TODO: Order is not kept when out-of-flow and in-flow children are mixed."""
+    page, = render_pages('''
+      <style>
+        @page { size: 100px 100px }
+        article { display: flex; position: relative }
+        .box { width: 20px; height: 20px }
+        .absolute { position: absolute; top: 10px; left: 10px }
+      </style>
+      <article>
+        <div class="box"></div>
+        <div class="box absolute"></div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    # That’s currently div2, div1
+    div1, div2 = article.children
+
+    assert (div2.position_x, div2.position_y) == (10, 10)
+
+
+@assert_no_logs
+@pytest.mark.xfail
+def test_grid_absolute_positioning():
+    """TODO: Absolutely positioned grid items are not replaced by placeholders ."""
+    page, = render_pages('''
+      <style>
+        @page { size: 100px 100px }
+        article { display: grid; grid-template-columns: 20px 20px; position: relative }
+        .box { width: 20px; height: 20px }
+        .absolute { position: absolute; top: 10px; left: 10px }
+      </style>
+      <article>
+        <div class="box"></div>
+        <div class="box absolute"></div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div1, div2 = article.children
+
+    assert (div1.position_x, div1.position_y) == (10, 10)

weasyprint/layout/flex.py

@@ -923,7 +923,6 @@ def flex_layout(context, box, bottom_space, skip_stack, containing_block, page_i
                             resume_index, = resume_at
                             first_level_skip += resume_index
                         resume_at = {first_level_skip + index: child_resume_at}
-                    block.relative_positioning(new_child, (box.width, box.height))
                 if resume_at:
                     break
 
@@ -938,6 +937,9 @@ def flex_layout(context, box, bottom_space, skip_stack, containing_block, page_i
             absolute_layout(
                 context, absolute_box, box, fixed_boxes, bottom_space, skip_stack=None)
 
+    for child in box.children:
+        block.relative_positioning(child, (box.width, box.height))
+
     # TODO: Use real algorithm, see https://www.w3.org/TR/css-flexbox-1/#flex-baselines.
     if isinstance(box, boxes.InlineFlexBox):
         if main == 'width':  # and main text direction is horizontal

weasyprint/layout/grid.py

@@ -575,11 +575,14 @@ def _resolve_tracks_sizes(sizing_functions, box_size, children_positions,
 def grid_layout(context, box, bottom_space, skip_stack, containing_block,
                 page_is_empty, absolute_boxes, fixed_boxes):
     context.create_block_formatting_context(box)
-    from . import block
 
     if skip_stack and box.style['box_decoration_break'] != 'clone':
         box.remove_decoration(start=True, end=False)
 
+    if box.style['position'] == 'relative':
+        # New containing block, use a new absolute list
+        absolute_boxes = []
+
     # Define explicit grid
     grid_areas = box.style['grid_template_areas']
     flow = box.style['grid_auto_flow']
@@ -1360,8 +1363,6 @@ def _add_page_children(max_row=inf):
         if baseline is None and y == implicit_y1:
             baseline = find_in_flow_baseline(new_child)
 
-        block.relative_positioning(new_child, (box.width, box.height))
-
     # Abort whole grid rendering if no child fits.
     if this_page_children and not new_children:
         context.finish_block_formatting_context(box)
@@ -1375,6 +1376,19 @@ def _add_page_children(max_row=inf):
         LOGGER.warning('Inline grids are not supported')
         box.baseline = baseline or 0
 
+    from .absolute import absolute_layout
+    from .block import relative_positioning
+
+    if box.style['position'] == 'relative':
+        # New containing block, resolve the layout of the absolute descendants
+        for absolute_box in absolute_boxes:
+            absolute_layout(
+                context, absolute_box, box, fixed_boxes, bottom_space,
+                skip_stack=None)
+
+    for child in box.children:
+        relative_positioning(child, (box.width, box.height))
+
     # Resume early when there’s no resume_at.
     if not resume_at:
         context.finish_block_formatting_context(box)