WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
257992
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
Details
testcase
(3.29 KB, text/html)
2026-05-25 08:55 PDT
,
Karl Dubost
no flags
Details
rendering in safari, firefox, chrome (testcase)
(338.29 KB, image/png)
2026-05-25 08:57 PDT
,
Karl Dubost
no flags
Details
testcase
(4.22 KB, text/html)
2026-05-25 09:01 PDT
,
Karl Dubost
no flags
Details
rendering in safari, firefox, chrome (testcase)
(564.87 KB, image/png)
2026-05-25 09:02 PDT
,
Karl Dubost
no flags
Details
Patch
(16.40 KB, patch)
2026-06-02 19:36 PDT
,
alan
no flags
Details
Formatted Diff
Diff
[fast-cq]Patch
(22.36 KB, patch)
2026-06-03 08:36 PDT
,
alan
no flags
Details
Formatted Diff
Diff
Show Obsolete
(3)
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2023-06-19 17:33:16 PDT
<
rdar://problem/111015539
>
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 10
2026-05-25 09:04:34 PDT
https://drafts.csswg.org/css-text-decor-4/#text-decoration-thickness-property
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
Created
attachment 479964
[details]
Patch
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.
Top of Page
Format For Printing
XML
Clone This Bug