Merge pull request #2219 from dhdaines/issue-996

Don't ignore absolutely positioned elements inside flex

tests/layout/test_flex.py

@@ -597,3 +597,21 @@ def test_flex_break_inside_avoid():
     body, = html.children
     article, = body.children
     div, = article.children
+
+
+@assert_no_logs
+def test_flex_absolute_content():
+    # Regression test for https://github.com/Kozea/WeasyPrint/issues/996
+    page, = render_pages('''
+      <section style="display: flex; position: relative">
+         <h1 style="position: absolute; top: 0; right: 0">TEST</h1>
+         <p>Hello world!</p>
+      </section>''')
+    html, = page.children
+    body, = html.children
+    section, = body.children
+    h1, p = section.children
+    assert h1.position_x != 0
+    assert h1.position_y == 0
+    assert p.position_x == 0
+    assert p.position_y == 0

weasyprint/layout/flex.py

@@ -5,6 +5,7 @@
 
 from ..css.properties import Dimension
 from ..formatting_structure import boxes
+from .absolute import AbsolutePlaceholder, absolute_layout
 from .percent import resolve_one_percentage, resolve_percentages
 from .preferred import max_content_width, min_content_width
 from .table import find_in_flow_baseline
@@ -21,6 +22,10 @@ def flex_layout(context, box, bottom_space, skip_stack, containing_block,
     context.create_block_formatting_context()
     resume_at = None
 
+    if box.style['position'] == 'relative':
+        # New containing block, use a new absolute list
+        absolute_boxes = []
+
     # Step 1 is done in formatting_structure.boxes
     # Step 2
     if box.style['flex_direction'].startswith('row'):
@@ -111,8 +116,19 @@ def flex_layout(context, box, bottom_space, skip_stack, containing_block,
     else:
         skip_stack = None
     child_skip_stack = skip_stack
-    for child in children:
+    for index, child in enumerate(children):
         if not child.is_flex_item:
+            # Absolute child layout: create placeholder.
+            if child.is_absolutely_positioned():
+                child.position_x = box.content_box_x()
+                child.position_y = box.content_box_y()
+                new_child = placeholder = AbsolutePlaceholder(child)
+                placeholder.index = index
+                children[index] = placeholder
+                if child.style['position'] == 'absolute':
+                    absolute_boxes.append(placeholder)
+                else:
+                    fixed_boxes.append(placeholder)
             continue
 
         # See https://www.w3.org/TR/css-flexbox-1/#min-size-auto
@@ -839,8 +855,8 @@ def flex_layout(context, box, bottom_space, skip_stack, containing_block,
 
     # TODO: don't use block_box_layout, see TODOs in Step 14 and
     # build.flex_children.
-    box = box.copy()
-    box.children = []
+    box = box.copy_with_children(
+        [child for child in children if not child.is_flex_item])
     child_skip_stack = skip_stack
     for line in flex_lines:
         for i, child in line:
@@ -876,6 +892,13 @@ def flex_layout(context, box, bottom_space, skip_stack, containing_block,
         if resume_at:
             break
 
+    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)
+
     # Set box height
     # TODO: this is probably useless because of step #15
     if axis == 'width' and box.height == 'auto':