Apply overflow to replaced boxes

tests/draw/svg/test_images.py

@@ -163,7 +163,7 @@ def test_image_svg_align_slice_x(assert_pixels):
     ''', '''
       <style>
         @page { size: 8px 8px }
-        svg { display: block }
+        svg { display: block; overflow: hidden }
       </style>
       <svg width="8px" height="4px" viewBox="0 0 4 4"
            preserveAspectRatio="xMinYMin slice"
@@ -189,7 +189,7 @@ def test_image_svg_align_slice_y(assert_pixels):
     ''', '''
       <style>
         @page { size: 8px 8px }
-        svg { display: block }
+        svg { display: block; overflow: hidden }
       </style>
       <svg width="4px" height="8px" viewBox="0 0 4 4"
            preserveAspectRatio="xMinYMin slice"

tests/draw/test_image.py

@@ -16,6 +16,17 @@
     ________
 '''
 
+centered_image_overflow = '''
+    ________
+    ________
+    __rBBBBB
+    __BBBBBB
+    __BBBBBB
+    __BBBBBB
+    __BBBBBB
+    __BBBBBB
+'''
+
 resized_image = '''
     ____________
     ____________
@@ -153,6 +164,7 @@ def test_images(assert_pixels, filename, image):
       <style>
         @page { size: 8px }
         body { margin: 2px 0 0 2px; font-size: 0 }
+        img { overflow: hidden }
       </style>
       <div><img src="%s"></div>''' % filename)
 
@@ -169,11 +181,21 @@ def test_resized_images(assert_pixels, filename):
       <style>
         @page { size: 12px }
         body { margin: 2px 0 0 2px; font-size: 0 }
-        img { display: block; width: 8px; image-rendering: pixelated }
+        img { display: block; width: 8px; image-rendering: pixelated;
+              overflow: hidden }
       </style>
       <div><img src="%s"></div>''' % filename)
 
 
+def test_image_overflow(assert_pixels):
+    assert_pixels(centered_image_overflow, '''
+      <style>
+        @page { size: 8px }
+        body { margin: 2px 0 0 2px; font-size: 0 }
+      </style>
+      <div><img src="pattern.svg"></div>''')
+
+
 @assert_no_logs
 @pytest.mark.parametrize('viewbox, width, height', (
     (None, None, None),
@@ -478,7 +500,7 @@ def test_image_cover(assert_pixels):
       <style>
         @page { size: 8px }
         body { margin: 2px 0 0 2px; font-size: 0 }
-        img { object-fit: cover; height: 4px; width: 2px }
+        img { object-fit: cover; height: 4px; width: 2px; overflow: hidden }
       </style>
       <img src="pattern.png">''')
 
@@ -489,7 +511,7 @@ def test_image_contain(assert_pixels):
       <style>
         @page { size: 8px }
         body { margin: 1px 0 0 2px; font-size: 0 }
-        img { object-fit: contain; height: 6px; width: 4px }
+        img { object-fit: contain; height: 6px; width: 4px; overflow: hidden }
       </style>
       <img src="pattern.png">''')
 

weasyprint/css/html5_ua.css

@@ -543,6 +543,7 @@ style { display: none; }
 sub { font-size: smaller; line-height: normal; vertical-align: sub; }
 summary { display: block; /* unicode-bidi: isolate; */ }
 sup { font-size: smaller; line-height: normal; vertical-align: super; }
+img, svg { overflow: hidden; }
 
 table { border-collapse: separate; border-color: gray; border-spacing: 2px; display: table; text-indent: 0; /* unicode-bidi: isolate; */ }
 

weasyprint/draw.py

@@ -65,14 +65,6 @@ def draw_page(page, stream):
     draw_stacking_context(stream, stacking_context)
 
 
-def draw_box_background_and_border(stream, page, box):
-    if isinstance(box, boxes.TableBox):
-        draw_table(stream, box)
-    else:
-        draw_background(stream, box.background)
-        draw_border(stream, box)
-
-
 def draw_stacking_context(stream, stacking_context):
     """Draw a ``stacking_context`` on ``stream``."""
     # See https://www.w3.org/TR/CSS2/zindex.html
@@ -121,9 +113,10 @@ def draw_stacking_context(stream, stacking_context):
         # Point 2
         if isinstance(box, (boxes.BlockBox, boxes.MarginBox,
                             boxes.InlineBlockBox, boxes.TableCellBox,
-                            boxes.FlexContainerBox)):
+                            boxes.FlexContainerBox, boxes.ReplacedBox)):
             # The canvas background was removed by layout_backgrounds
-            draw_box_background_and_border(stream, stacking_context.page, box)
+            draw_background(stream, box.background)
+            draw_border(stream, box)
 
         with stacked(stream):
             # dont clip the PageBox, see #35
@@ -142,8 +135,11 @@ def draw_stacking_context(stream, stacking_context):
 
             # Point 4
             for block in stacking_context.block_level_boxes:
-                draw_box_background_and_border(
-                    stream, stacking_context.page, block)
+                if isinstance(block, boxes.TableBox):
+                    draw_table(stream, block)
+                else:
+                    draw_background(stream, block.background)
+                    draw_border(stream, block)
 
             # Point 5
             for child_context in stacking_context.float_contexts:
@@ -156,8 +152,6 @@ def draw_stacking_context(stream, stacking_context):
             # Point 7
             for block in [box] + stacking_context.blocks_and_cells:
                 if isinstance(block, boxes.ReplacedBox):
-                    draw_background(stream, block.background)
-                    draw_border(stream, block)
                     draw_replacedbox(stream, block)
                 elif block.children:
                     if block != box:
@@ -987,9 +981,6 @@ def draw_replacedbox(stream, box):
         return
 
     with stacked(stream):
-        rounded_box_path(stream, box.rounded_content_box())
-        stream.clip()
-        stream.end()
         stream.transform(e=draw_x, f=draw_y)
         with stacked(stream):
             # TODO: Use the real intrinsic size here, not affected by