Page breaks are not honored on floating elements

sebastien-coavoux commented 1 month ago

Hi,

I noticed that weasyprint does not honor the page break attributes when generating a pdf. Looks like a bug to me as it happens with a specific mix of div / css . See example below :

index.html

<html>
<body class="dark">
<main class="page-content" aria-label="Content">

<div class="container experience-container">
  <h3>Title h3</h3>
  <div class="row clearfix layout layout-left" style="" >
    <div class="col-xs-12 col-sm-4 col-md-3 col-print-12 details" > <h4>Title h4</h4> </div>
    <div class="col-xs-12 col-sm-8 col-md-9 col-print-12"> IN DIV page break at end <p style="page-break-after: always;"></p>  </div>
  </div>

  <div class="row clearfix layout layout-left" style="" >
    <div class="col-xs-12 col-sm-4 col-md-3 col-print-12 details" ><h4>Title h4 II</h4> </div>
    <div class="col-xs-12 col-sm-8 col-md-9 col-print-12"> SHOULD BE ON NEXT PAGE <br /> </div>
  </div>

</div>

</main>
</body>
</html>

merged-css.txt

mv merged-css.txt merged.css
weasyprint -s merged.css -q index.html index.pdf && evince index.pdf

You should see no page break, and everything in the same pdf page.

I'm not a css guy, the file comes from a merge of bootstrap and other css files. I did not write them.

I noticed 2 things :

If I remove both col-xs-12 and col-sm-8 on the line 5 (where the page break is). It works
If I move the page break out of the row clearfix layout layout-left div scope. It works.

It is weird to me because all those classes don't mention page break avoid (even if there are page break avoid in the css).

Let me know if you see some obvious workaround for me. The html is generated but I can change the text inside the div (" IN DIV page break at end"). As of now I use the print to pdf from firefox that works, but not very fun to automate.

Thanks

liZe commented 1 month ago

Hi!

That’s because col-*-* elements have position: relative set. According to the specification, break-after can break-before can only be set on "boxes in the normal flow of the fragmentation root", and that’s not the case for blocks with relative position.

liZe commented 1 month ago

Well, it may be more complicated than that, relative is not absolute or fixed, and relative elements are actually in the flow.

liZe commented 1 month ago

It’s actually because it’s float: left, and we don’t break on floating elements. We should though: "User agents should also apply these properties to floated boxes whose containing block is in the normal flow of the root fragmented element."

liZe commented 1 month ago

Short sample to reproduce the problem:

<div style="break-after: page; float: left">float</div>
<div>end</div>

Kozea / WeasyPrint

Page breaks are not honored on floating elements #2277