Weasyprint: 'column-span: all' triggers all kinds of errors

[Tontyna]

Snippet to produce duplicates:

<style>    
@page {
  size: 14cm 14cm;
}
.col2 {columns: 2}
h2 {column-span: all}
</style>
<div class="col2">
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
<h2>full-width heading</h2> 
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
</div>

Snippet to produce infinite loop:

<style>    
@page {
  size: 14cm 14cm;
}
.col2 {columns: 2}
h2 {column-span: all}
</style>
<div class="col2">
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
<h2>full-width heading</h2> 
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
</div>

Snippet to crash with AssertionError:

<style>    
@page {
  size: 14cm 14cm;
}
.col2 {columns: 2}
h2 {column-span: all}
</style>
<div class="col2">
<h2>full-width heading</h2> 
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp
abc def lorem ipsum dolor sit amet etc pp

ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
ghi jkl lorem ipsum dolor sit amet etc pp
</div>

[fabiobatalha]

Hello @Tontyna

Please, take a look at: https://github.com/Kozea/WeasyPrint/issues/981#issuecomment-547558282

This may give some more clarifications about the IndexError Exceptions.

[Tontyna]

The special treatment of boxes with column-span:all inside columns_layout() destorts the skip_stack for subsequent multi-columned boxes within the same parent box.
This corrupted skip_stack is harmless, when the multi-column block doesn't cross the page. As soon as a next page is due the crash is inevitable.

Tried to defang and repair the wrecked skip_stack and to skip the already rendered column-span:all box -- to no avail.

In desparation I finally brute-forced the initial original root-tree to separate the column-span:all boxes from their surrounding multi-column content, like that:

original tree

box columns: 2
 + box before1
 + box before2
 + box before3
 + box column-span:all
 + box after1
 + box after2

defused tree

anonymous wrapping box
+ box columns: 2
   + box before1
   + box before2
   + box before3
+ box column-span:all
+ box columns: 2
   + box after1
   + box after2

Of course, though the crashes disappear and the snippets are balanced and rendered as expected, this is an insane solution.

Hoping for somebody else finding the fix, someone more familiar with skip-stacks than I am.

[liZe]

As for flexboxes, where the order of rendered boxes can be changed, columns layout changes the tree in a complex way, totally breaking the skip_stack / resume_at mechanism.

There's no need to find a workaround for that. It's broken.

To close #36 (yes, yes, I know, it's nearly 7 years old…) we'll have change the way skip stacks are stored. We don't have the same needs depending on the layout of the box, so we can have different structures at different levels. And, of course, as we can have parallel flows, we'll have more than one for each level.

That's the fix we need.

[Tontyna]

Therefore I propose to remove the column-span:all feature from WeasyPrint. It's doomed to crash unless someone undertakes the redesign of the skip_stack.

[liZe]

Therefore I propose to remove the column-span:all feature from WeasyPrint. It's doomed to crash unless someone undertakes the redesign of the skip_stack.

It's time for this redesign. Let's say version 52 is the moment when we implement parallel flows.

[EvanEdwards]

I'm not sure if this is the same issue, but it may be close enough to warrant placing it here rather than in its own issue. The bottom of the box carries over for all pages (at minimum padding and margin) when there is a colum-span:all.

Here's a bare bones example that demonstrates the issue as presented in this image:

<!DOCTYPE html>
<html><head><title>Example</title>
<style>

h1 {
  padding: .25in;
  background: blue;
  color: white;
  break-before: always;
  column-span: all;
  border-radius: .1in; /* to demonstrate it is the bottom */
}

section {
  columns: 2;
}

</style>
</head>
<body>

<section>
<h1>This is on blue.</h1>

<p>On the second page of this, there is the bottom padding from the h1 repeated, plus the bottom margin.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
<p>Text that goes on for quite awhile, filling the page and going to the next page.  This paragraph is simply repeated several times to demonstrate this effect.</p>
</section>


</body>
</html>

[EvanEdwards]

Confirmed to still have the same issue in release 52.

(Also: thank you for release 52!!!)