1636655 - scrollWidth incorrect when font-weight is bold

Status: RESOLVED DUPLICATE of bug 1226695

(Core :: Layout: Text and Fonts, defect)

Description

[gsn880]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0

Steps to reproduce:

I had a div with
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
font-weight:bold;

and use scrollWidth to detect if it is overflowing

https://jsfiddle.net/8wudgyfh/1/

Actual results:

scrollWidth returned the incorrect size however with no bold styling it works fine
I suspect scrollWidth is returning the size without the bold styling.

Expected results:

scrollWidth should of returned the size of the content with all styles applied.
it works as expected in chrome and edge

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Firefox Bug Husbandry Bot]

Because this bug's Severity is normal and has not been changed, and this bug's priority is -- (none,) indicating it has has not been previously triaged, the bug's Severity is being updated to -- (default, untriaged.)

Comment 3

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Hi gsn880,

I want to clarify the bug a bit. I check your test case, the "Check scrollWidth" returns a bigger value for the bold text. On my Linux system, the first scrollWidth is 127 (bold) and the second scrollWidth is 115 (normal). Do you see the same value for both?

Comment 4

[Mats Palmgren (inactive)]

Reporter's testcase checks overflow like this:

function isOverflowing(element) {
       return (element.scrollWidth > element.offsetWidth);
}

That doesn't work because the returned values are integers:
https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface
https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface
so when the underlying internal layout width has a fractional value, say 100.1px, it will be rounded to 100px. text-overflow acts on the actual internal layout sizes though.