1906484 - Javascript contentEditable selection range.startContainer.parentElement returns previousSibling..

Status: UNCONFIRMED

(Core :: DOM: Selection, defect)

Description

[dennis-horn]

Attachment: FF range bug.txt

User Agent: Mozilla/5.0 (Android 5.0.2; Mobile; rv:127.0) Gecko/127.0 Firefox/127.0

Steps to reproduce:

HTML:
<div contenteditable="true">
<div>This is a div <span style="font-size: 125%;">with </span><span style="font-size: 150%;">editable</span> text.<br></div>
</div>

Action:

Double-clicking (or long-pressing) on the word "editable".

Script:

let selection = window.getSelection();
let range = selection.getRangeAt(0);
console.log(range.startContainer.nodeName;)     // #text
console.log(range.startContainer.textContent;)    // with
console.log(range.startContainer.parentElement.nodeName;)    //  SPAN
console.log(range.startContainer.parentElement.textContent;)   // with

Actual results:

range.startContainer returns previousSibling child #text node ("with").
range.startContainer.parentElement returns previousSibling (<span style="font-size: 125%;">).

Expected results:

range.startContainer should return range.startContainer (<span style="font-size: 150%;">, or (as Chrome does) #text node with textContent "editable".

range.startContainer.parentElement should return parentElement (div)
, or (as Chrome does) range.startContainer.parentElement (<span style="font-size: 150%;">).

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Sean Feng [:sefeng]]

hmm, I think both represent the selection correctly, I don't know how the spec specifies this.

Masayuki, do you know?

Comment 3

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

As far as I know, double-click result is UA-dependent and there is no definition about where is better position about the range boundary when UA makes a range.