Closed Bug 1676467 Opened 5 years ago Closed 5 years ago

Range.getClientRects reports incorrect rects for inline-wrapped inline-block item, when triple clicking to select paragraph

Categories

(Core :: DOM: CSS Object Model, defect)

Firefox 84
defect

Tracking

()

RESOLVED INVALID

People

(Reporter: ejsanders, Unassigned)

Details

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Safari/537.36

Steps to reproduce:

(1) Visit https://edg2s.github.io/rangefix/
(2) Click the "Firefox triple click bug" button or triple click the paragraph which contains the inline image.

Actual results:

The rectangle for the <u> tag does not include the full height of the image tag.

Expected results:

The computed rectangles are correct.

See https://github.com/edg2s/rangefix/issues/14 for screenshots and more dicsussion.

Component: Untriaged → DOM: CSS Object Model
Product: Firefox → Core

getClientRects() doesn't include rects from overflowing stuff, and the image overflows the <u> element. Consider:

data:text/html,<!doctype html><div style="width: 100px; height: 100px;"><div style="width: 100px; height: 200px"></div></div>

document.querySelector("div").getClientRects() doesn't include the 200px rect, in any browser. Why should the inline case be different? Even the chrome devtools agree that the <u> is not as tall as the <img>.

But Chrome seems to do the same as us... so for what element exactly is getClientRects() returning the wrong result?

Flags: needinfo?(ejsanders)

If the issue is just overflowing content, then the rectangles should be the same if I make the selection by dragging, but it isn’t.

Flags: needinfo?(ejsanders)

Ah, this is about Range.getClientRects, not about Element.getClientRects, sorry...

So spec is in https://drafts.csswg.org/cssom-view-1/#dom-range-getclientrects:

For each element selected by the range, whose parent is not selected by the range, include the border areas returned by invoking getClientRects() on the element.

So it seems to me that if <u> is selected by the range completely, then we'd return an smaller rect than if it wasn't per the above definition (because when <u> is not fully selected, then we union the getClientRects() of the text and the image, instead of just returning the rects of the <u>). That seems unfortunate, though it's what the spec seems to call for.

Summary: getClientRects reports incorrect rects for inline-wrapped inline-block item, when triple clicking to select paragraph → Range.getClientRects reports incorrect rects for inline-wrapped inline-block item, when triple clicking to select paragraph

I think you should file an issue in https://github.com/w3c/csswg-drafts/issues/new, as this seems an issue with the way Range.getClientRects is defined.

The severity field is not set for this bug.
:mats, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(mats)

This seems invalid per spec, see above in comment 3.

Status: UNCONFIRMED → RESOLVED
Closed: 5 years ago
Flags: needinfo?(mats)
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.