1700490 - Percentage text-decoration-thickness values are resolved against the used font size instead of computed

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, defect, P3)

Description

[Xiaocheng Hu]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Steps to reproduce:

Go to https://jsfiddle.net/h9dqac15/, or render the following

<style>
u {
font-family: Ahem;
font-size: 20px;
}
</style>

<u style="text-decoration-thickness: 10%; font-size-adjust: 2">
É
</u>

<u style="text-decoration-thickness: 10%">
É
</u>

Actual results:

The two <u> elements have different underline thicknesses. The first one is thicker.

Expected results:

The two <u> elements have the same underline thickness

The spec [1] says percentage values of text-decoration-thickness "Specifies the thickness of text decoration lines as a percentage of 1em". So it shouldn't be affected by font-size-adjust or anything else that affects the used font size.

[1] https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-thickness-percentage

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

So the relevant code is here, we use the font's em height rather than the computed font-size.

Comment 3

[Jonathan Kew [:jfkthame]]

Agreed, this is a bug; the same also applies to percentage values of text-underline-offset.

Comment 4

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1700490 - Use computed font size (rather than used size) to resolve percentages for text-decoration properties. r=#layout-reviewers

Comment 5

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1700490 - Add WPT reftest for resolving text-decoration-thickness percentage value. r=#layout-reviewers

Depends on D109904

Comment 6

[Jonathan Kew [:jfkthame]]

Thanks for reporting, Xiaocheng! I see the equivalent issue was recently fixed in Chrome Canary. :-)

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2dade59cbeef
Use computed font size (rather than used size) to resolve percentages for text-decoration properties. r=jwatt
https://hg.mozilla.org/integration/autoland/rev/480d28465472
Add WPT reftest for resolving text-decoration-thickness percentage value. r=jwatt

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/28263 for changes under testing/web-platform/tests

Comment 9

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/2dade59cbeef
https://hg.mozilla.org/mozilla-central/rev/480d28465472

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot