1569211 - getSelection, getRangeAt return wrong anchorNode, endContainer and endOffset if selection contains SVG(or unselectable text inside)

Status: NEW

(Core :: DOM: Selection, defect, P3)

Description

[Stuart Orford]

Attachment: Screenshot of jsFiddle

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

Steps to reproduce:

https://jsfiddle.net/sjorford/0p64nyf5/

Select some of the text, starting before the SVG image, and finishing after the SVG inage

Actual results:

Both the anchorNode and focusNode are the second text element

Expected results:

The first text element should be the anchorNode, and the second text element should be the focusNode.

Reproduced in Nightly 70.0a1 (2019-07-26) (64-bit)

Comment 1

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

The priority flag is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 2

[張俊芝(ZHANG Junzhi)]

Attachment: test.html

If the selection contains unseletable text inbetween it, the same issue occurs.

And besides anchorNode, the other two properties in the first range -- endContainer and endOffset -- are also incorrect.

See my uploaded demo.

Comment 3

[張俊芝(ZHANG Junzhi)]

If the selection contains unseletable text inbetween it, the same issue occurs.

And besides anchorNode,
endContainer and endOffset in the first range is also incorrect.

See my uploaded demo

Comment 4

[Mirko Brodesser (:mbrodesser-Igalia)]

Gecko creates two ranges, which violates the spec.
Changing Gecko to create exactly one range is presumably a lot of work.

Works with Chrome.

Comment 5

[Mirko Brodesser (:mbrodesser-Igalia)]

Interestingly, tapping Ctrl+a and running script to select text and an <svg> element yields different results:

data:text/html,X<svg width="10" height="10"><g><path d="M-8-6h24v24H-8z" /></g></svg>Y<button onclick="const b = document.querySelector('body'); document.getSelection().selectAllChildren(b); document.addEventListener('selectionchange', () => console.log(document.getSelection().rangeCount));">XX</button>

Selecting text and an <svg> element via script creates only one range.

The <path> is in both cases not serialized.