Open Bug 1569211 Opened 6 years ago Updated 2 years ago

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

Categories

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

68 Branch
defect

Tracking

()

Webcompat Priority P3

People

(Reporter: sjorford, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: parity-chrome)

Attachments

(2 files)

Attached image 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)

Component: Untriaged → SVG
Product: Firefox → Core

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(jwatt)
Component: SVG → Selection
Flags: needinfo?(jwatt)
Priority: -- → P3
Attached file 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.

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

Summary: getSelection returns wrong anchorNode if selection contains SVG → getSelection, getRangeAt return wrong anchorNode, endContainer and endOffset if selection contains SVG(or unselectable text inside)

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

Works with Chrome.

Blocks: 1664350
Status: UNCONFIRMED → NEW
Ever confirmed: true
No longer blocks: 1664350
Webcompat Priority: --- → ?
Keywords: parity-chrome

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.

Webcompat Priority: ? → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: