Fix weird clone bug and add a unit test to verify

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( "<div />" );
+		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