RESOLVED FIXED257992
text-decoration-thickness not properly propagated to inner spans with non-inline style
https://bugs.webkit.org/show_bug.cgi?id=257992
Summary text-decoration-thickness not properly propagated to inner spans with non-inl...
Jon Lee
Reported 2023-06-12 17:32:34 PDT
https://codepen.io/legion80/pen/YzRyqJO compare with Chrome and Firefox. The structure is <a><span></span></a> with CSS text-decoration-thickness set. If the span is inline, the style is propagated. If the style is inline-block, the decoration is removed (consistent across all browsers). If the style is block, the style is not propagated in Safari, but is propagated in Chrome and Firefox.
Attachments
rendering in safari, firefox, chrome (1.24 MB, image/png)
2024-11-10 22:21 PST, Karl Dubost
no flags
testcase (3.29 KB, text/html)
2026-05-25 08:55 PDT, Karl Dubost
no flags
rendering in safari, firefox, chrome (testcase) (338.29 KB, image/png)
2026-05-25 08:57 PDT, Karl Dubost
no flags
testcase (4.22 KB, text/html)
2026-05-25 09:01 PDT, Karl Dubost
no flags
rendering in safari, firefox, chrome (testcase) (564.87 KB, image/png)
2026-05-25 09:02 PDT, Karl Dubost
no flags
Patch (16.40 KB, patch)
2026-06-02 19:36 PDT, alan
no flags
[fast-cq]Patch (22.36 KB, patch)
2026-06-03 08:36 PDT, alan
no flags
Radar WebKit Bug Importer
Comment 1 2023-06-19 17:33:16 PDT
Ahmad Saleem
Comment 2 2023-06-22 15:01:43 PDT
https://github.com/WebKit/WebKit/blob/6172ecd8b1485a5387d034f7e623a36b8f5a45fc/Source/WebCore/style/StyleAdjuster.cpp#L187 by adding ‘DisplayType::Block’? ^ Something here to also inherit text decoration effects?
Tim Nguyen (:ntim)
Comment 3 2023-11-13 01:21:26 PST
Very likely same regression range as bug 250831
Karl Dubost
Comment 4 2024-11-10 22:21:09 PST
Created attachment 473189 [details] rendering in safari, firefox, chrome Apart of the last one, this is consitent. https://codepen.io/legion80/pen/YzRyqJO This is the one failing. <style>a.thick { text-decoration-thickness: 3px; }</style> <a href="#" class="thick"><span style="display:block">- link text inside span styled block</span></a>
Karl Dubost
Comment 5 2026-05-25 08:55:26 PDT
Created attachment 479812 [details] testcase
Karl Dubost
Comment 6 2026-05-25 08:57:07 PDT
Created attachment 479813 [details] rendering in safari, firefox, chrome (testcase) We can clearly see the issue.
Karl Dubost
Comment 7 2026-05-25 08:57:45 PDT
This has an impact on the rendering of some tests on Bug 315487
Karl Dubost
Comment 8 2026-05-25 09:01:36 PDT
Created attachment 479814 [details] testcase
Karl Dubost
Comment 9 2026-05-25 09:02:44 PDT
Created attachment 479815 [details] rendering in safari, firefox, chrome (testcase)
Karl Dubost
Comment 11 2026-05-25 17:13:33 PDT
While validating the patch for bug 315487 (dotted/dashed text-decoration phase reset across text-box boundaries), I came across what looks like another manifestation of this same propagation bug, on a different code path. Flagging it here so it's tracked together with the existing case rather than re-filed. ## Reproducer (testcase attached) Pure-inline structure, plain `<span>`: ```html <style> div { font: 92px Arial, sans-serif; text-decoration: dotted blue line-through; text-decoration-thickness: 30px; } </style> <div>foo<span>bar</span>baz</div> ``` The dotted line-through over `<span>bar</span>` is drawn at the `auto` resolution (~`font-size × 0.05` ≈ 4–6px) instead of the `<div>`'s `30px`. `foo` and `baz` render correctly at 30px. The dot diameter and period change at every `<span>` boundary, breaking the pattern visibly. Firefox 152 and Chrome 150 canary both render uniformly at 30px. The page also runs `getComputedStyle(span).textDecorationThickness` and prints as a result that returns `auto` in WebKit/Firefox/Chrome alike, which is **correct** per spec CSS Text Decoration 4 / 2.2 https://drafts.csswg.org/css-text-decor-4/#text-decoration-thickness-property `Inherited: no`. The bug is only that WebKit's painter then *uses* that descendant-side `auto` to draw the *ancestor's* decoration. `paintBackgroundDecorations` (underline / overline) and `paintForegroundDecorations` (line-through) take their thickness from different sources 1. `paintBackgroundDecorations`: `decoratingBox.style.get()` (set in `collectDecoratingBoxesForBackgroundPainting()` from the actual decorating box) (OK?) 2. `paintForegroundDecorations`: `decoratingBoxStyle(textBox)` → `parentInlineBox->style()` (wrong for inner non-decorating inline boxes?) Same markup, same line, same paint pass: underline thickness is uniform; line-through thickness isn't.
Karl Dubost
Comment 12 2026-06-01 18:45:53 PDT
The spec says: > This property, which is a sub-property of the text-decoration shorthand, sets the stroke thickness of underlines, overlines, and line-throughs specified on the element with text-decoration-line, and affects all decorations originating from this element even if descendant boxes specify a different thickness. Things to look at, maybe more tests will be needed. * line-through y-position * textBoxPaintRect.width() is per-text-box see Bug 315487 phase-origin * vertical writing modes, Check also isLineInverted() * Ruby base * text-box-trim
alan
Comment 13 2026-06-02 19:36:10 PDT
alan
Comment 14 2026-06-02 19:39:56 PDT
^ This change fixes the original test case, Karl's test case was (partially) addressed by bug 316108.
fantasai
Comment 15 2026-06-02 20:33:10 PDT
Comment on attachment 479964 [details] Patch The asymmetry in the way we handle thickness vs style and color is a bit weird, and it makes lines like 993 auto textDecorationThickness = ceilToDevicePixel(decoratingBox.textDecorationStyles.linethrough.thickness, deviceScaleFactor); kinda confusing. Makes you think, why line through? What if we're painting only underlines? So maybe DecoratingBox should contain the color/style/thickness directly, and just have flags for the line types, to make it clear that there's one value for thickness (and style and color) for all of the lines. But that's a bit of a pre-existing problem, so r=fantasai. Might be worth adding a comment somewhere though, as to why we're pulling out only one thickness value and ignoring the rest.
alan
Comment 16 2026-06-03 08:36:03 PDT
Created attachment 479973 [details] [fast-cq]Patch
EWS
Comment 17 2026-06-03 16:02:30 PDT
Committed 314502@main (40f72ef0f26d): <https://commits.webkit.org/314502@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 479973 [details].
Note You need to log in before you can comment on or make changes to this bug.