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

Description Jonathan Kew 2021-09-16 04:00:10 PDT

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.

Comment 1 Kevin Neal 2021-09-21 10:33:02 PDT

Thank you for filing. The appropriate engineers have been notified.

Comment 2 Radar WebKit Bug Importer 2021-09-21 10:33:17 PDT

<rdar://problem/83358190>

Comment 3 Myles C. Maxfield 2021-09-21 11:07:17 PDT

I wonder why... 🤔

Comment 4 Ahmad Saleem 2022-08-29 07:22:13 PDT

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!

Comment 5 Ahmad Saleem 2023-09-16 05:36:54 PDT

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

Comment 6 zalan 2023-09-28 08:02:49 PDT

(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.