Repository: Kozea/WeasyPrint (Python)

Issue:
Page margins are broken with "body { overflow: auto }" style
I have a CSS file that defines headers and footers using @top-center, @bottom-center, and @top-right. When I use weasyprint the resulting PDF does not have the headers and footers. Here's a snippet from the CSS file:

```
@page
{
    size: letter;
    margin: 27mm 16mm 27mm 16mm;
    counter-increment: page;
    @bottom-center
    {
        content: counter(page);
        white-space: pre;
        color: grey;
        }
    @top-center
    {
        content: 'Strategic Planning Concept';
        color: grey;
        border-bottom: solid 1px grey;
    }
    @top-left
    {
        content: ' \a \a \a ';
        white-space: pre;
        color: grey;
        border-bottom: solid 1px grey;
    }
    @top-right
    {
        content: ' \a \a \a February 6, 2013';
        white-space: pre;
        color: grey;
        border-bottom: solid 1px grey;
    }
}
```



Discussion:
I was able to figure out what the problem was. I had some parameters defined in the body{} that were causing the problem.

I don’t get it. What was the problem? A syntax error that caused the rule to be ignored?

By the way, you might want to use padding-top rather than `\a \a \a` in content.

Closing as this seems solved. But I’m still curious as to what was the issue and the solution, if you feel like commenting.

Unfortunately, I didn't keep any revision control on the files, so I'm not quite sure what I changed :-( Suffice it to say, that it was my ignorance and not a problem with WeasyPrint.

By the way, thanks for the tip about padding-top!

For me it didn't work while I had "overflow: auto" on the `<body>` element. Removing that made the text box appear.
> For me it didn't work while I had "overflow: auto" on the <body> element. Removing that made the text box appear.

Great! `body { overflow: auto }` breaks the margins for some reason. Minimal case:

```html
<style>
  @page { @top-left { content: 'test' } }
  body { overflow: auto }
</style>
body
```
This wasn't a bug. This was intentional :smirk: 

WeasyPrint treats all `overflow` values but `visible` like **`hidden`**.
The [spec tells us](https://www.w3.org/TR/css-overflow-3/#overflow-propagation) that 

> UAs must apply the overflow-* values set on the root element to the viewport.

The *viewport* in our case is the **PageBox** (= all pages) and thus the PageBox is clipped, cutting off every single piece of content outside the page box:

https://github.com/Kozea/WeasyPrint/blob/27c600f18f025d8a7bffb4e5e0f861014881198e/weasyprint/draw.py#L226-L231

Obviously, the actual intent of this *viewport-overflow* is to clip the body, resp. the document content. It should not devour the `@page` margin content.
But when we draw the MarginBoxes (being children of the PageBox) **after** the PageBox has clipped the context to the inner area of the page (`rounded_padding_box`)...

> This wasn't a bug. This was intentional

For sure :wink:.

> Obviously, the actual intent of this _viewport-overflow_ is to clip the body, resp. the document content. It should not devour the `@page` margin content.

We have other similar workarounds to draw and clip the viewport background. The special cases needed to draw the viewport (and draw the root element a bit differently) are a mess, just like the mess created by the table wrappers. We have to live with that, I think…



Patch:
diff --git a/weasyprint/draw.py b/weasyprint/draw.py
index 94484143e7..ed3a530083 100644
--- a/weasyprint/draw.py
+++ b/weasyprint/draw.py
@@ -184,6 +184,15 @@ def draw_stacking_context(context, stacking_context, enable_hinting):
     # See http://www.w3.org/TR/CSS2/zindex.html
     with stacked(context):
         box = stacking_context.box
+
+        # apply the viewport_overflow to the html box, see #35
+        if box.is_for_root_element and (
+                stacking_context.page.style['overflow'] != 'visible'):
+            rounded_box_path(
+                context,
+                stacking_context.page.rounded_padding_box())
+            context.clip()
+
         if box.is_absolutely_positioned() and box.style['clip']:
             top, right, bottom, left = box.style['clip']
             if top == 'auto':
@@ -223,7 +232,9 @@ def draw_stacking_context(context, stacking_context, enable_hinting):
                 context, stacking_context.page, box, enable_hinting)
 
         with stacked(context):
-            if box.style['overflow'] != 'visible':
+            # dont clip the PageBox, see #35
+            if box.style['overflow'] != 'visible' and not isinstance(
+                    box, boxes.PageBox):
                 # Only clip the content and the children:
                 # - the background is already clipped
                 # - the border must *not* be clipped


Test patch:
diff --git a/weasyprint/tests/test_draw/test_overflow.py b/weasyprint/tests/test_draw/test_overflow.py
index 814ef64438..f8d21d936d 100644
--- a/weasyprint/tests/test_draw/test_overflow.py
+++ b/weasyprint/tests/test_draw/test_overflow.py
@@ -78,6 +78,30 @@ def test_overflow_3():
       <div></div>''')
 
 
+@assert_no_logs
+def test_overflow_4():
+    # Assert that the page margins aren't clipped by body's overflow
+    assert_pixels('border_box_overflow', 8, 8, '''
+        rr______
+        rr______
+        __BBBB__
+        __BBBB__
+        __BBBB__
+        __BBBB__
+        ________
+        ________
+    ''', '''
+      <style>
+        @page {
+          size: 8px;
+          margin: 2px;
+          background:#fff;
+          @top-left-corner { content: ''; background:#f00; } }
+        body { overflow: auto; background:#00f; }
+      </style>
+      ''')
+
+
 @assert_no_logs
 @requires('cairo', (1, 12, 0))
 @pytest.mark.parametrize('number, css, pixels', (