Bug fix: inline-block with vertical-align

CHANGES

@@ -10,8 +10,11 @@ Not released yet.
   cairo surface.
 * Add support for the ``font-stretch`` property.
 * Add support for ``@page:blank`` to select blank pages.
-* Bug fixes for importing Pango in some PyGTK installations.
-* Fix a performance problem with large tables split across many pages.
+* Bug fixes:
+
+  - Importing Pango in some PyGTK installations.
+  - Layout of inline-blocks with `vertical-align: top` or `bottom`.
+  - Performance problem with large tables split across many pages.
 
 
 Version 0.14

weasyprint/layout/inlines.py

@@ -838,15 +838,14 @@ def inline_box_verticality(box, top_bottom_subtrees, baseline_y):
                       box.border_top_width + box.padding_top + box.height)
             child_baseline_y = bottom - child.margin_height() + child.baseline
         elif vertical_align in ('top', 'bottom'):
-            top_bottom_subtrees.append(child)
             # Later, we will assume for this subtree that its baseline
             # is at y=0.
-            child.position_y = -child.baseline
-            continue
+            child_baseline_y = 0
         else:
             # Numeric value: The child’s baseline is `vertical_align` above
             # (lower y) the parent’s baseline.
             child_baseline_y = baseline_y - vertical_align
+
         # the child’s `top` is `child.baseline` above (lower y) its baseline.
         top = child_baseline_y - child.baseline
         if isinstance(child, boxes.InlineBlockBox):
@@ -855,6 +854,13 @@ def inline_box_verticality(box, top_bottom_subtrees, baseline_y):
         else:
             child.position_y = top
             # grand-children for inline boxes are handled below
+
+        if vertical_align in ('top', 'bottom'):
+            # top or bottom are special, they need to be handled in
+            # a later pass.
+            top_bottom_subtrees.append(child)
+            continue
+
         bottom = top + child.margin_height()
         if min_y is None or top < min_y:
             min_y = top

weasyprint/tests/test_layout.py

@@ -2415,6 +2415,36 @@ def test_vertical_align():
     assert img_1.position_y == 96
     assert img_2.position_y == 0
 
+    # Reference for the next test
+    page, = parse('''
+        <span style="font-size: 0; vertical-align: top">
+            <img src="pattern.png">
+        </span>
+    ''')
+    html, = page.children
+    body, = html.children
+    line, = body.children
+    span, = line.children
+    img_1, = span.children
+    assert img_1.position_y == 0
+
+    # Should be the same as above
+    page, = parse('''
+        <span style="font-size: 0; vertical-align: top; display: inline-block">
+            <img src="pattern.png">
+        </span>
+    ''')
+    html, = page.children
+    body, = html.children
+    line_1, = body.children
+    span, = line_1.children
+    line_2, = span.children
+    img_1, = line_2.children
+    assert img_1.element_tag == 'img'
+    assert img_1.position_y == 0
+
+
+
 @assert_no_logs
 def test_text_align_left():
     """Test the left text alignment."""