Support "display: contents"

[nbanyan]

I'm using Material for MkDocs with PyMdown Extensions and mkdocs-with-pdf. PyMdown has a tabbed content feature. This is a simplified example of the structure of the tabbed content with minimal CSS for print.

<div style="display: flex; flex-flow: column wrap">
  <div style="display:contents">
    <label style="order: 1;">Tab 1</label>
    <label style="order: 2;">Tab 2</label>
  </div>
  <div style="display: contents">
    <div style="order: 1; display block; ">
    Content Block 1
    </div>
    <div style="order: 2; display block; ">
    Content Block 2
    </div>
  </div>
</div>

In the browser this is displayed as:

Tab 1
Content Block 1
Tab 2
Content Block 2

Weasyprint renders this as:

Tab 1 Tab 2
Content Block 1
Content Block 2

Even placing all the 'order' elements directly under the 'display: flex' element gives the same result.

I proposed a workaround to PyMdown, but this should be resolved here.

[liZe]

Hi!

Thanks for this bug report. That’s actually because display: contents is not supported. I change the title accordingly.

[nbanyan]

It likely contributes, but the issue is still there without those elements. I included them because it is a potential complication to consider that is present in the tabbed extension's design.

<div style="display: flex; flex-flow: column wrap">
  <label style="order: 1;">Tab 1</label>
  <label style="order: 2;">Tab 2</label>
  <div style="order: 1; display block; ">
  Content Block 1
  </div>
  <div style="order: 2; display block; ">
  Content Block 2
  </div>
</div>

[liZe]

That’s another problem caused by the fact that label elements are by default inline elements, and they’re wrapped inside anonymous block elements (instead of being flex items, as they should be). Adding display: block to labels gives the correct order. It’s probably related to #1652.

You can open a separate issue if you want to track it separately.

(And as you can see in other issues, flex layout should be rewritten.)