Skip to content

Add a (failing) test on long section with break-inside: avoid

Boris Budini requested to merge reproduction-case-break-inside-avoid into master

Another failing test to highlight the issue with long elements. Similar issue: https://gitlab.pagedmedia.org/tools/pagedjs/merge_requests/112

At first, I thought that this issue was only related to tables but I can reproduce it with other long elements (here a <section>).

I think we should be able correct this on the onOverflow hook, but the chunker break doesn't have a special way to handle tables (or other things images) so hopefully this can be fixed with those updates.

@fchasen I'm not sure I understand what you meant. In this case, the onOverflow hook is not called (using either a <table> or a <section>).

Unless I'm missing something we need to detect when an element with break-inside: avoid cannot fit on its own on a page. If that's the case then we should try to fit the element on the previous page (and break the element accordingly).

My idea was to check that:

  • the previous break node has the rule break-inside: avoid
  • one of the parent elements of the current break node is equals to the previous break node

Basically, it means that we are breaking inside an element that has the rule break-inside: avoid. In other words, at this point we know that this element cannot fit on one page and that the rule break-inside: avoid cannot be fulfilled.

This part is relatively easy to implement but then I need to remove/ignore the break-inside: avoid rule and "reflow" the previous page...

Does it makes sense? is it the right approach? How can I do to "reflow" the previous page?

Merge request reports