Open Bug 1158555 Opened 6 years ago Updated 6 years ago

Selection API is inconsistent with chrome and ie in some languages

Categories

(Core :: DOM: Selection, defect)

37 Branch
defect
Not set
normal

Tracking

()

UNCONFIRMED

People

(Reporter: tonpo.vesham, Unassigned)

Details

(Keywords: intl, testcase)

Attachments

(2 files)

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36

Steps to reproduce:

Given the followig div:
<div id='textDiv'>हालाँकि</div>

var domElem = document.getElementById('textDiv');
var sel = getSelection();
var textNode = domElem.childNodes[0];
sel.collapse(textNode,0);
sel.extend(textNode,1);


console.log(sel.toString().length);

console.log(sel.getRangeAt(0).getBoundingClientRect().width);





Actual results:

In firefox (version 37.0.2 on windows 8.1 64bit and ie, ver 11.096), despite that visually there are 2 characters selected, the first sentence gives 1.

the second gives 0.


Expected results:

For the first sentence:

in chrome (42.0.2311.90 on windows), when I do
sel.toString().length

I get 2, and it's ok because the selection visually selects 2 characters (one of them is a combining mark).

Maybe there should be another method to get the same effect, however there should be a consistency.

for the second sentence I should got the actual select width.
In ie, I actually used addRange() because its 'Selection' objects has no 'extend' method
Component: Untriaged → Selection
Keywords: intl, testcase
Product: Firefox → Core
Attached file testcase.html
It's worth to say that in input element setSelectionRanage() method the browsers(chrome and firefox) behave similar.

I don't know if it's relevant but in the specification of setSelectionRange() for input element, there is the following statement:
"Characters with no visible rendering, such as U+
200D ZERO WIDTH JOINER, still count as characters. Thus, for instance, the selection can include just an invisible character, and the text insertion cursor can be placed to one side or another of such a character."
https://html.spec.whatwg.org/multipage/forms.html#dom-textarea/input-setselectionrange

And it's sound that in the input element the grapheme breaking is not took into account when selecting.

On the other hand, in svg text selectSubString method the specification say

'void selectSubString(in unsigned long charnum, in unsigned long nchars)
Causes the specified substring to be selected just as if the user selected the substring interactively.'
http://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__selectSubString

and chrome and firefox behaves completely different for the following code:

<html>
<body>
<svg height="30" width="200">
  <text id="t" x="0" y="15" fill="red">हालाँकि</text>
</svg>
</body>
</html>


then when i put the following lines in the console:
var t=document.getElementById('t');
t.selectSubString(1,2);

the two browsers select completely  different characters!
Attached file testcase_SVG.html
You need to log in before you can comment on or make changes to this bug.