Multiple values for "text-decoration" are not applied correctly

[Morikko]

We have found a few cases where text-decoration values are not applied correctly: only a single value is possible at a time.

The HTML output is based on Firefox 98 and the PDF is generated with weasyprint==54.3.

import weasyprint
from IPython.display import display_pdf

css_size = weasyprint.CSS(string="""
@page {
  size: 100mm;
}
""")

def generate_pdf(data_str):
    html_obj = weasyprint.HTML(string=data_str)
    pdf_data = html_obj.write_pdf(stylesheets=[css_size])
    display_pdf(pdf_data, raw=True)

Single Tag with multiple options

<span style="text-decoration: underline line-through;">
        demo text
</span>

HTML

PDF

It used to work with weasyprint==52.5.

Two tags with different options

<span style="text-decoration: underline;">
    <span style="text-decoration: line-through;">
        demo text
    </span>toto
</span>

HTML

PDF

Historical HTML tags

<p><u><s>demo text</s>toto</u></p>

<p><del><u>demo text</u>toto</del></p>

HTML

PDF

With other CSS properties

Other CSS properties like color or font-weight are applied aside only a single value text-decoration:

<del style="color: blue;"><u>d<span style="font-weight: bold;">em</span>o te<b>xt</b></u></del>

HTML

PDF

[liZe]

Thanks a lot for the bug report and the examples! It should be fixed (and tested) in master, real-life tests are welcome.

[Morikko]

Thank you for the reactivity. I can confirm that the case Single Tag with multiple options (regression) is fixed.

However all the other cases are still broken. Only the most nested value of text-decoration is kept.

[liZe]

However all the other cases are still broken. Only the most nested value of text-decoration is kept.

Sorry, I shouldn’t have closed this issue. Only the first example is fixed.

[liZe]

The CSS specification is full of surprises about inheritance.

[liZe]

This bug is now closed, because all the examples given here are now rendered "correctly".

But, even if the new behavior is better than the previous one, it’s far from perfect. Here are some examples of what don’t work yet:

For all other box types, the decorations are propagated to all in-flow children.

Decorations are currently propagated to all children.

[…] for underlines and overlines the UA must use a single thickness and position on each line for the decorations deriving from a single decorating box.

That’s not true for thickness (because of font-weight or font-size), that’s not true for color.

If anyone needs this problem to be fixed, please open a new issue! Unfortunately, it will require more complicated code (and more time).

[liZe]

(There’s one more bug that needs to be fixed, sorry…)

[liZe]

(Tests now pass.)

[Morikko]

Great, I confirm that all the cases in this issue are fixed 🎉. Thank you very much. That CSS specification is definitively not simple 😅

Do you know when 55 is planned to be released ?

---

For the non technical CSS people like me, here the visual impact of the non cover cases

<div style="color: red;text-decoration: underline blue;">
a
<span style="text-decoration: line-through lime;">b</span>
c</div>

<div style="color: red;text-decoration: underline blue;">a<span style="float: right;">b</span></div>

[liZe]

Do you know when 55 is planned to be released ?

You can expect a beta to be released in the next days / weeks.