Setting selection to edge of node makes WebKit report inconsistent range
Assume the following DOM tree:
<div id="edit" contenteditable="true">
this content <a id="link" href="http://www.google.com/">contains</a> a link
</div>
Then create a range right after the anchor:
var r = document.createRange();
var link = document.getElementById('link');
r.setStartAfter(link);
r.setEndAfter(link);
As expected, its commonAncestorContainer is the element with id edit:
console.log(r.commonAncestorContainer); /* => <div id="edit"
contenteditable="true">…</div> */
Set the selection to this range:
var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);
Now query the window for the current selection range and check its
commonAncestorContainer:
var r2 = s.getRangeAt(0);
console.log(r2.commonAncestorContainer);
You will find that in Firefox the result is as expected; the same element
with id edit.
In WebKit browsers though, the selection range ancestor container suddenly
is the text node inside the anchor; "contains".
Click here for a live demo.
Is there any potential rationale behind this behavior? Any reason to
assume that it is not a WebKit bug??
Thanks for your $.02.
No comments:
Post a Comment