Bug 230339
| Summary: | tab width is computed incorrectly for inline elements with font changes | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Jonathan Kew <jfkthame> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, kevin_neal, mmaxfield, rniwa, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar, WPTImpact |
| Version: | Safari 14 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| URL: | http://wpt.live/css/css-text/tab-size/tab-size-block-ancestor.html | ||
Jonathan Kew
The CSS spec (https://drafts.csswg.org/css-text-3/#tab-size-property) for tab-size is clear that
> A <number> represents the measure as a multiple of the advance width of the space character (U+0020) of the nearest block container ancestor of the preserved tab,
but webkit appears to be using the advance width of the inline element's own space character, not the block container's.
See testcase at https://codepen.io/jfkthame/pen/JjJMoqN.
Firefox renders this correctly per spec.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Kevin Neal
Thank you for filing. The appropriate engineers have been notified.
Radar WebKit Bug Importer
<rdar://problem/83358190>
Myles C. Maxfield
I wonder why... 🤔
Ahmad Saleem
I am able to reproduce this bug in Safari Technology Preview 152 using CodePen from Comment 0 and it does not align "A" in one line and it matches with Chrome Canary 107. Only browser (Firefox Nightly 106) show all "A" aligned in one line. Just wanted to share updated test results. Thanks!
Ahmad Saleem
Looks similar to : https://wpt.fyi/results/css/css-text/tab-size/tab-size-block-ancestor.html?label=master&label=experimental&aligned=&q=tab+size
zalan
(In reply to Myles C. Maxfield from comment #3)
> I wonder why... 🤔
It's because tab width is resolved against the current FontCascade and not what the (nearest) block container specifies.
e.g. <div style="tab-size: 10; font-size: 100px;"><span style="font-size: 1px">
In WidthIterator we use the [span]'s font to resolve the tab-size value of 10. At WidthIterator we don't have the context of containing blocks we just have a font (whatever the inline box has) and the specified tab-size value.