Merge pull request #2618 from different55/relative-flexgrid

Calculate relative offsets for grid and flex children.

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
 
 
@@ -445,3 +447,96 @@ def test_fixed_positioning_regression_2():
     assert (article.position_x, article.position_y) == (15, 20)
     header, = article.children
     assert (header.position_x, header.position_y) == (5, 10)
+
+
+@assert_no_logs
+def test_flex_relative_positioning():
+    page, = render_pages('''
+      <style>
+        @page { size: 100px 100px }
+        article { display: flex }
+        .box { width: 20px; height: 20px }
+        .relative { position: relative; top: 10px; left: 10px }
+      </style>
+      <article>
+        <div class="box"></div>
+        <div class="box relative"></div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div1, div2 = article.children
+
+    assert (div2.position_x, div2.position_y) == (30, 10)
+
+
+@assert_no_logs
+def test_grid_relative_positioning():
+    page, = render_pages('''
+      <style>
+        @page { size: 100px 100px }
+        article { display: grid; grid-template-columns: 20px 20px }
+        .box { width: 20px; height: 20px }
+        .relative { position: relative; top: 10px; left: 10px }
+      </style>
+      <article>
+        <div class="box"></div>
+        <div class="box relative"></div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    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

@@ -937,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

@@ -579,6 +579,10 @@ def grid_layout(context, box, bottom_space, skip_stack, containing_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']
@@ -1372,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)