Bug 38984 – document.documentElement cannot be replaced

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: DOM

[gildas]

I have an issue when I run this script after a page is loaded into the web developer console on chrome and safari : 

doc = document.documentElement.cloneNode(true); 
document.replaceChild(doc, document.documentElement); 

It should replace the document element by its clone and remain intact. Most of the time, the page becomes blank or style sheets are not interpreted.

For example, on http://groups.google.com/a/chromium.org/group/chromium-extensions/browse_thread/thread/2f56dc162846c27b/017a1f103d5bf795#017a1f103d5bf795. 

All I get is a blank page with only 3 "script" elements in the "head" of and no "body" element in the document on chrome. On safari, I see is an additional "script" element after the 3 "style" elements.

This bug does not happen with firefox 3.6.3, opera 10.53 and ie8 for the same URL.

[gildas]

Bug confirmed on Windows XP SP 3.

See here : http://groups.google.com/a/chromium.org/group/chromium-extensions/browse_thread/thread/2f56dc162846c27b/017a1f103d5bf795#017a1f103d5bf795

[Alexey Proskuryakov]

Do you have a complete test case that demonstrates a specific problem?

[gildas]

(In reply to comment #2)
> Do you have a complete test case that demonstrates a specific problem?

Sorry, I didn't read carefully the bug reporting guidelines. I didn't know I had to attach a test case. I have switched "Component" to "New Bugs".

[Alexey Proskuryakov]

You don't have to, but having a test case - or steps to reproduce with a live Web site - makes it much clearer what problem is being discussed.

[gildas]

(In reply to comment #4)
> You don't have to, but having a test case - or steps to reproduce with a live Web site - makes it much clearer what problem is being discussed.

Ok,

Here are the detailed steps to reproduce the bug.

1 - open a new window/tab
2 - enter this URL : http://groups.google.com/a/chromium.org/group/chromium-extensions/browse_thread/thread/2f56dc162846c27b#
3 - wait until the page is fully loaded
4 - open the web developer javascript console (ctrl-shift-j on chrome, ctrl-option-i on safari)
5 - type into the input console : document.replaceChild(document.documentElement.cloneNode(true), document.documentElement); 
6 - press enter
7 - the page becomes blank

Expected result : the page should not become blank. It should remain intact since this script replace document.documentElement by its clone.

[Alexey Proskuryakov]

Confirmed with r59249.

One more question: why is this important? WebKit isn't really prepared for such drastic changes to an existing document, so this may not be an easy fix.

[gildas]

(In reply to comment #6)
> Confirmed with r59249.
> 
> One more question: why is this important? WebKit isn't really prepared for such drastic changes to an existing document, so this may not be an easy fix.

Actually, I have done an extension for chrome which does heavy DOM modifications to embed all external resources into the page. Here is the extension link :
https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle/publish-accepted

It's really better to do all those DOM modifications in a cloned DOM for speed issue (because the browser do not have to render DOM modifications). The extension have no issues to embed images, css, frames resources but when the extension try to embed an external script into the documentElement node, the issue appears. In this case, the only way I found to bypass this issue is to work directly on the document.documentElement.

I think it may be a small bug since scripts are the only resources that cause this issue. 

Also, I think Rich Text Editors may suffer from this issue.

[gildas]

> Actually, I have done an extension for chrome which does heavy DOM modifications to embed all external resources into the page. Here is the extension link :
> https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle/publish-accepted
> 

Sorry for the mistake, The good URL is https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle

[Chris Dary]

Just a "me too" here - I'm having issues due to this particular bug as well.

[Chris Dary]

(In reply to comment #9)
> Just a "me too" here - I'm having issues due to this particular bug as well.

I might as well say where so you don't think this is a huge edge case: In the Readability bookmarklet, I was looking to speed up the "reload". Rather than just doing a real reload, I decided to cache the DOM object before I make any changes and then reload it after the fact.

It works on all browsers except webkit-based ones.

[Anne van Kesteren]

Seems to work fine these days.

[gildas]

I confirm I cannot reproduce this bug anymore. Moreover, I ported it recently for Safari. The code of the annotation editor integrated in SingleFile uses this technique and it works totally fine.