From d5d8622329e379e449b54ab8805f043d1e6ec02a Mon Sep 17 00:00:00 2001 From: Elijah Manor Date: Wed, 8 Aug 2012 15:31:59 -0500 Subject: Fix weird clone bug and add a unit test to verify --- src/manipulation.js | 10 ++++++++-- test/unit/manipulation.js | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/manipulation.js b/src/manipulation.js index 3cfc97c3b..457975a59 100644 --- a/src/manipulation.js +++ b/src/manipulation.js @@ -585,11 +585,17 @@ jQuery.extend({ var srcElements, destElements, i, - clone; + clone, + fix8908; if ( jQuery.support.html5Clone || jQuery.isXMLDoc(elem) || !rnoshimcache.test( "<" + elem.nodeName + ">" ) ) { - clone = elem.cloneNode( true ); + // Fixes #8909 - By accessing one of the cloned element's computed styles it breaks the + // connection with the source element's styles in IE9/10 + if ( elem.nodeType === 1 && window.getComputedStyle ) { + fix8908 = ( window.getComputedStyle( elem, null ) || {} ).backgroundImage; + } + clone = elem.cloneNode( true ); // IE<=8 does not properly clone detached, unknown element nodes } else { fragmentDiv.innerHTML = elem.outerHTML; diff --git a/test/unit/manipulation.js b/test/unit/manipulation.js index 4038f1a74..60a0830c7 100644 --- a/test/unit/manipulation.js +++ b/test/unit/manipulation.js @@ -1907,3 +1907,39 @@ test("checked state is cloned with clone()", function(){ elem.checked = true; equal( jQuery(elem).clone().attr("id","clone")[0].checked, true, "Checked true state correctly cloned" ); }); + +test( "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)", function() { + expect( 8 ); + + var baseUrl = document.location.href.replace( /([^\/]*)$/, "" ); + var styles = [ + { name: "background-attachment", value: [ "fixed" ], expected: [ "scroll" ] }, + { name: "background-color", value: [ "rgb(255, 0, 0)", "rgb(255,0,0)" ], expected: [ "transparent" ] }, + { name: "background-image", value: [ 'url("test.png")', 'url(' + baseUrl + 'test.png)', 'url("' + baseUrl + 'test.png")' ], expected: [ "none" ] }, + { name: "background-position", value: [ "5% 5%" ], expected: [ "0% 0%" ] }, + { name: "background-repeat", value: [ "repeat-y" ], expected: [ "repeat" ] }, + { name: "background-clip", value: [ "content-box" ], expected: [ "border-box" ] }, + { name: "background-origin", value: [ "content-box" ], expected: [ "padding-box" ] }, + { name: "background-size", value: [ "80px 60px" ], expected: [] } + ]; + + jQuery.each( styles, function(index, style) { + var $source, source, $clone; + + style.expected = style.expected.concat( [ "", "auto" ] ); + $source = jQuery( "
" ); + source = $source[ 0 ]; + if ( source.style[ style.name ] === undefined ) { + ok( true, style.name + ": style isn't supported and therefore not an issue" ); + return true; + } + $source.css( style.name, style.value[0] ); + $clone = $source.clone(); + $clone.css( style.name, "" ); + + ok( ~jQuery.inArray( $source.css( style.name ), style.value ), + "Clearning clone.css() doesn't affect source.css(): " + style.name + + "; result: " + $source.css( style.name ) + + "; expected: " + style.value.join( "," ) ); + }); +}); \ No newline at end of file -- cgit v1.2.3