Open
Bug 818515
Opened 12 years ago
Updated 4 years ago
document.getSelection().getRangeAt(0).cloneContents() differs when .contentEditable = true/false
Categories
(Core :: DOM: Selection, defect, P5)
Tracking
()
UNCONFIRMED
People
(Reporter: cvenkel.miran, Unassigned)
Details
Attachments
(1 file)
|
2.74 KB,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/17.0 Firefox/17.0
Build ID: 20121119183901
Steps to reproduce:
say I have:
<some cointainer contentEditable ....>
<font color="blue">color</font>
</some container>
and select 'color'
function selHTML() {
/*IE works regardles of contentEditable state*/
// I allways get '<font color="blue">color</font>'
if (window.ActiveXObject)
{
var c = document.selection.createRange();
return c.htmlText;
}
/*FF, it works same as IE if contentEditable = false, otherwise it returns 'color'*/
var x=document.createElement("div");
x.appendChild(document.getSelection().getRangeAt(0).cloneContents());
return x.innerHTML;
}
Actual results:
see above comments
Expected results:
I think the FF stuff should work the same as IE
Could you attach a minimal testcase, please?
Flags: needinfo?(cvenkel.miran)
|
Reporter | |
Comment 2•12 years ago
|
||
(In reply to Loic from comment #1)
> Could you attach a minimal testcase, please?
OK, working on it ...
Flags: needinfo?(cvenkel.miran)
|
|
Reporter | |
Comment 3•12 years ago
|
||
| hide testcase | ||
TEST CASE:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
<script language="javascript" type="text/javascript">
function selHTML()
{
/*ie*/
if (window.ActiveXObject)
{
var c = document.selection.createRange();
return c.htmlText;
}
/*FF in ostalo*/
var x=document.createElement("div");
x.appendChild(document.getSelection().getRangeAt(0).cloneContents());
//[].slice.call(x.querySelectorAll("[src],[href]"))
//.forEach(function(a){a.href=a.href; a.src=a.src;;});
return x.innerHTML;
}
function switchState(sender)
{
if (document.getElementById("container").contentEditable == 'true')
{
document.getElementById("container").contentEditable = 'false';
sender.value = "contentEditable = false, click to change";
}
else
{
document.getElementById("container").contentEditable = 'true';
sender.value = "contentEditable = true, click to change";
}
alert(document.getElementById("container").contentEditable);
}
</script>
</head>
<body>
<div>
<input type ="button" onclick="switchState(this)" value ="contentEditable = false, click to change" />
<input type ="button" onclick="alert(selHTML());" value ="check html under selected 'color'" />
</div>
<div id ="container" style ="border: 1px solid black;">
gfhzsdr<font color="blue">color</font>tzerzte
</div>
<div>
<br />
1. load this page, select exactly 'color', click 'check...' , I have no idea what are the rules here but you might get alerted 'color'
<br />
2. deselect 'color', reselect, click check, you might now get HTML for colored text !, combine test with refresh & deselect & reselect 'color'.
<br />
In all cases you should get same result (HTML prefered), but you will not.In IE you do, allways HTML
<br />
<br />
If you will switch contentEditable, same thing : select,check,deselect, reselect,check,... various results ...
</div>
<script language="javascript" type="text/javascript">
document.getElementById("container").contentEditable = 'false';
</script>
</body>
</html>
|
|
Reporter | |
Comment 5•12 years ago
|
||
I think I found rules how this is not working:
1. select EXACTLY with mouse from start to end of 'color' ---> 'color'
2. Now you can deselect, reselect same as at 1 and you will get allways only 'color'
3.click drag from star of 'color', now if you drag anywhere out of 'color' text, drag/drop back to end of color text, it will work, you will get HTML
|
|
Reporter | |
Comment 6•12 years ago
|
||
I mean in previous post, in both cases you have same selection, with different result clicking 'check ...' button on test case.
|
||
Comment 7•12 years ago
|
||
Using the latest Nightly (User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:20.0) Gecko/20121210 Firefox/20.0; Build ID: 20121210030747) and the steps from comment 5 I always get this message: <font color="blue">color</font>
|
||
Comment 8•12 years ago
|
||
Confirming that it works as described in comment #5: “color” if I selected carefully; “<font color="blue">color</font>” if I have dragged over the word edge. 2012-12-11-03-08-55-mozilla-central-firefox-20.0a1.en-US.linux-x86_64
OS: Windows 7 → All
|
|
||
Updated•9 years ago
|
Component: Untriaged → Selection
Product: Firefox → Core
|
||
Comment 9•4 years ago
|
||
Bulk-downgrade of unassigned, untouched DOM/Storage bug's priority.
If you have reason to believe, this is wrong, please write a comment and ni :jstutte.
Severity: normal → S4
Priority: -- → P5
You need to log in
before you can comment on or make changes to this bug.
Description
•