230339 2021-09-16 04:00:10 -0700 tab width is computed incorrectly for inline elements with font changes 2023-09-28 08:02:49 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 14 Unspecified Unspecified NEW http://wpt.live/css/css-text/tab-size/tab-size-block-ancestor.html BrowserCompat, InRadar, WPTImpact P2 Normal --- 1 jfkthame webkit-unassigned ahmad.saleem792 ap bfulgham kevin_neal mmaxfield rniwa simon.fraser webkit-bug-importer zalan oldest_to_newest 1794002 0 jfkthame 2021-09-16 04:00:10 -0700 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. 1795637 1 kevin_neal 2021-09-21 10:33:02 -0700 Thank you for filing. The appropriate engineers have been notified. 1795638 2 webkit-bug-importer 2021-09-21 10:33:17 -0700 <rdar://problem/83358190> 1795661 3 mmaxfield 2021-09-21 11:07:17 -0700 I wonder why... 🤔 1894520 4 ahmad.saleem792 2022-08-29 07:22:13 -0700 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! 1977831 5 ahmad.saleem792 2023-09-16 05:36:54 -0700 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 1980976 6 zalan 2023-09-28 08:02:49 -0700 (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.