Open Bug 818515 Opened 12 years ago Updated 3 years ago

document.getSelection().getRangeAt(0).cloneContents() differs when .contentEditable = true/false

Categories

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

17 Branch
x86_64
All
defect

Tracking

()

UNCONFIRMED

People

(Reporter: cvenkel.miran, Unassigned)

Details

Attachments

(1 file)

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)
(In reply to Loic from comment #1)
> Could you attach a minimal testcase, please?

OK, working on it ...
Flags: needinfo?(cvenkel.miran)
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>
Attached file Reporter's testcase
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
I mean in previous post, in both cases you have same selection, with different result clicking 'check ...' button on test case.
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>
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
Component: Untriaged → Selection
Product: Firefox → Core

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.

Attachment

General

Creator:
Created:
Updated:
Size: