1074543 - scrollwidth property is incorrect (too low) when using text-overflow: ellipsis with box-sizing: border-box

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[Sterling Camden]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:32.0) Gecko/20100101 Firefox/32.0
Build ID: 20140911151253

Steps to reproduce:

http://jsfiddle.net/f0dmkkh8/1/


Actual results:

http://jsfiddle.net/f0dmkkh8/1/


Expected results:

http://jsfiddle.net/f0dmkkh8/1/

Comment 1

[Boris Zbarsky [:bzbarsky]]

If you remove the text-overflow style, you'll see that there is nowhere to scroll in this case because the text fits in the padding-box.

If you look at the spec for scrollWidth (<http://dev.w3.org/csswg/cssom-view/#dom-element-scrollwidth> and <http://dev.w3.org/csswg/cssom-view/#scrolling-area>), in this case the scrollWidth should be the width of the padding box.  Which is what the testcase is showing.

You can set the width in the testcase to "50px" and see that in that case scrollWidth is "96".  Which is clearly less than 100.

The text-overflow style is a red herring; it does not affect scrollWidth values in any way.  It just confused you because text-overlow ellipsizing happens at the content edge is all.

Comment 2

[Sterling Camden]

i was aware that the text wouldn't actually scroll. the trick is that the text overflow property is using the content box to determine overflow, but the scroll is using the border box. this is what you would expect visually, but because of this implementation you cannot detect when this text overflow is occurring. chrome's implementation denotes this by increasing the scroll width (which i use to determine whether or not to show a tooltip). if you consider this working as expected do you have a work around to determine whether the text is overflowing or not?

Comment 3

[Boris Zbarsky [:bzbarsky]]

> chrome's implementation denotes this by increasing the scroll width

Chrome's implementation... I'm not sure what it's doing.  Compare http://jsfiddle.net/f0dmkkh8/4/ and http://jsfiddle.net/f0dmkkh8/5/ in Chrome.  They should have identical behavior, but don't.

Or compare actual scrolling behavior at http://jsfiddle.net/mvbpzgzu/ vs http://jsfiddle.net/mvbpzgzu/1/

In any case, they are not denoting text overflow per se by increasing scrollwidth.  They just add both the left and right padding in some situations, but not others, to the actual content width of the kids when determining the scrollWidth.

> do you have a work around to determine whether the text is overflowing or not

You could check whether the text is wider than the content area in question, right?  For example, select the contents of the <div> with a range and then look at its getBoundingClientRect().width to see how wide those contents are.