Fix background size on page canvas

Fix https://print-css.rocks/lesson/lesson-background-repeated. Related to #1026.
Kozea · Jan 25, 2020 · e442165 · e442165
1 parent 5c5e5ea
commit e442165
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/weasyprint/layout/backgrounds.py b/weasyprint/layout/backgrounds.py
@@ -46,17 +46,21 @@ def box_rectangle(box, which_rectangle):
         )
 
 
-def layout_box_backgrounds(page, box, get_image_from_uri):
+def layout_box_backgrounds(page, box, get_image_from_uri, layout_children=True,
+                           style=None):
     """Fetch and position background images."""
     from ..draw import get_color
 
     # Resolve percentages in border-radius properties
     resolve_radii_percentages(box)
 
-    for child in box.all_children():
-        layout_box_backgrounds(page, child, get_image_from_uri)
+    if layout_children:
+        for child in box.all_children():
+            layout_box_backgrounds(page, child, get_image_from_uri)
+
+    if style is None:
+        style = box.style
 
-    style = box.style
     if style['visibility'] == 'hidden':
         box.background = None
         if page != box:  # Pages need a background for bleed box
@@ -139,7 +143,7 @@ def layout_background_layer(box, page, resolution, image, size, clip, repeat,
 
     if image is None or 0 in image.get_intrinsic_size(1, 1):
         return BackgroundLayer(
-            image=None, unbounded=(box is page), painting_area=painting_area,
+            image=None, unbounded=False, painting_area=painting_area,
             size='unused', position='unused', repeat='unused',
             positioning_area='unused', clipped_boxes=clipped_boxes)
 
@@ -202,14 +206,14 @@ def layout_background_layer(box, page, resolution, image, size, clip, repeat,
         size=(image_width, image_height),
         position=(position_x, position_y),
         repeat=repeat,
-        unbounded=(box is page),
+        unbounded=False,
         painting_area=painting_area,
         positioning_area=positioning_area,
         clipped_boxes=clipped_boxes)
 
 
-def set_canvas_background(page):
-    """Set a ``canvas_background`` attribute on the PageBox,
+def set_canvas_background(page, get_image_from_uri):
+    """Set a ``background`` attribute on the PageBox,
     with style for the canvas background, taken from the root elememt
     or a <body> child of the root element.
 
@@ -227,16 +231,21 @@ def set_canvas_background(page):
 
     if chosen_box.background:
         painting_area = box_rectangle(page, 'padding-box')
-        page.canvas_background = chosen_box.background._replace(
+        original_background = page.background
+        layout_box_backgrounds(
+            page, page, get_image_from_uri, layout_children=False,
+            style=chosen_box.style)
+        page.canvas_background = page.background._replace(
             # TODO: shouldn’t background-clip be considered here?
             layers=[
                 layer._replace(painting_area=painting_area)
-                for layer in chosen_box.background.layers])
+                for layer in page.background.layers])
+        page.background = original_background
         chosen_box.background = None
     else:
         page.canvas_background = None
 
 
 def layout_backgrounds(page, get_image_from_uri):
     layout_box_backgrounds(page, page, get_image_from_uri)
-    set_canvas_background(page)
+    set_canvas_background(page, get_image_from_uri)
diff --git a/weasyprint/tests/test_draw/test_background.py b/weasyprint/tests/test_draw/test_background.py
@@ -51,6 +51,32 @@ def test_canvas_background(name, expected_width, expected_height,
     assert_pixels(name, expected_width, expected_height, expected_pixels, html)
 
 
+def test_canvas_background_size():
+    expected_pixels = '''
+        __________
+        __________
+        __RRRRRR__
+        __RGGGGR__
+        __RRRRRR__
+        __BBBBBB__
+        __BBBBBB__
+        __BBBBBB__
+        __________
+        __________
+    '''
+    html = '''
+      <style>
+         @page { size: 10px; margin: 2px; background: white }
+         /* html’s background propagates to the whole canvas */
+         html { background: linear-gradient(
+           red 0, red 50%, blue 50%, blue 100%); }
+         /* html has a background, so body’s does not propagate */
+         body { margin: 1px; background: lime; height: 1px }
+      </style>
+      <body>'''
+    assert_pixels('background-size', 10, 10, expected_pixels, html)
+
+
 @assert_no_logs
 @pytest.mark.parametrize('name, css, pixels', (
     ('repeat', 'url(pattern.png)', '''