Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Follow-up for #8908 fix #1036

Closed
wants to merge 4 commits into from

6 participants

Oleg Gaidarenko Dave Methvin Elijah Manor Corey Frang Mike Sherov Rick Waldron
Oleg Gaidarenko
Collaborator

@elijahmanor, @dmethvin
Didn't mean to step on any toes here, but unfortunately fix for #8908 is incomplete

First of all, this comment is incorrect, it should 8908 not 8909, simple typo there is.
This assignment is redundant, JSHint is now ok without it.

But what more important, this lines, by my opinion, should be in cloneFixAttribute function, although function name might be confusing.

  1. There is no reason to use getComputedStyle on xml nodes.
  2. You would not have to check for nodeType, cloneFixAttribute already do that.
  3. This fix would not fix issue like that, although, it helps for childrens of disconnected and cloned parent element, but only in IE9.

You might already talked about this, and some perfomance decrease might be an issue, but it felt important to bring this up.

Dave Methvin
Owner

Most of this looks good to me! Renaming the function does make its goal clearer. On your point 3, the bug in http://jsfiddle.net/3bAvn/ is currently fixed by this patch isn't it? Why remove the patch in css.js?

Oleg Gaidarenko
Collaborator
On your point 3, the bug in http://jsfiddle.net/3bAvn/ is currently fixed by this patch isn't it?

nope, this is a main reason why i opened this pull, but not only that test case is problem, current fix is not fixes even
cloned parent, check this in IE10.

I updated pull to address this issue too, now things are much more simpler.

Elijah Manor

Hmm, @orkel I'm not seeing an issue in that last jsFiddle you mentioned. I add some more console.logs and here is a screenshot in IE10 from browserstack and in a VM I have locally http://cl.ly/image/31311T392M0D via http://jsfiddle.net/3s8EH/5/

I do see the issue you mentioned above about the children having a problem. I updated your jsFiddle a little and yes, it shows the same issue about children having the same issue (as @dmethvin thought there could be an issue the other day) http://jsfiddle.net/4uK6R/

Oleg Gaidarenko
Collaborator
Hmm, @orkel I'm not seeing an issue in that last jsFiddle you mentioned. I add some more console.logs and here is a screenshot in IE10 from browserstack and in a VM I have locally http://cl.ly/image/31311T392M0D via http://jsfiddle.net/3s8EH/5/

That's weird, indeed, browserstacks ie10 does not show it, but mine ie10 does. Judging by Wikipedia article i have last stable version...

Corey Frang
Owner

This needs a rebase

Oleg Gaidarenko
Collaborator

@gnarf37 done.
@elijahmanor could you confirm resolve of the issue?

src/css.js
... ...
@@ -196,6 +196,12 @@ jQuery.extend({
196 196
 				value += "px";
197 197
 			}
198 198
 
  199
+			// Fixes #8908, it can be done more correctly by specifing setters in cssHooks,
  200
+			// but it would mean to define eight (for every problematic property) identical functions
  201
+			if ( value === "" && ~name.indexOf("background") ) {
5
Corey Frang Owner
gnarf added a note November 25, 2012

Though most of us can read the ~name.indexOf I think we prefer name.indexOf() !== -1 for readability.

cc @rwldrn @dmethvin to confirm

Rick Waldron Collaborator

It's less obvious to someone unfamiliar with bitwise operators.

Dave Methvin Owner

Yeah the bitwise op is not as obvious. In this case we're looking for strings starting with "background" right? So you could check for 0 and use !name.indexOf() but checking for -1 is probably the most obvious.

Rick Waldron Collaborator

If we're looking for "background" at the beginning, then the condition should just be that: name.indexOf("background") === 0. The intention won't be mistaken and we're spared the cost of coercion (though likely negligible)

Oleg Gaidarenko Collaborator
name.indexOf("background") === 0

and it saves two bytes... done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
test/unit/css.js
((26 lines not shown))
  909
+			ok( true, style.name +  ": style isn't supported and therefore not an issue" );
  910
+			ok( true );
  911
+			return true;
  912
+		}
  913
+
  914
+		$source.css( style.name, style.value[ 0 ] );
  915
+		$children.css( style.name, style.value[ 0 ] );
  916
+
  917
+		$clone = $source.clone();
  918
+		$clonedChildren = $clone.children();
  919
+
  920
+		$clone.css( style.name, "" );
  921
+		$clonedChildren.css( style.name, "" );
  922
+
  923
+		window.setTimeout(function() {
  924
+			ok( ~jQuery.inArray( $source.css( style.name ), style.value ),
1
Corey Frang Owner
gnarf added a note November 25, 2012

There are two uses of ~ here instead of !== -1 as well. I know they were pre-existing, but we should probably fix these...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Corey Frang
Owner

Random question - should that test be in css or manipulation? cc @mikesherov

Oleg Gaidarenko
Collaborator

@gnarf37

Though most of us can read the ~name.indexOf I think we prefer name.indexOf() !== -1 for readability.

judging by the source, you use >= or <, but never !== -1 just like ~, personally, i dont care, gzip-size is the same.

Random question - should that test be in css or manipulation?

Well, i changed css module, so i added tests to it.

Oleg Gaidarenko
Collaborator
Well, i changed css module, so i added tests to it.

Sorry, not me, @elijahmanor did.

Mike Sherov
Collaborator

@gnarf37, I think it belongs in either one, but probably better in css.js for dependency sake.

Dave Methvin
Owner

Now that gh-1034 landed I tried rebasing this but it was showing conflicts I couldn't figure out offhand. @orkel can you rebase?

Oleg Gaidarenko
Collaborator
@orkel can you rebase?

done

Dave Methvin dmethvin closed this in 643ecf9 December 13, 2012
tp9 referenced this pull request from a commit January 02, 2013
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
15  src/css.js
@@ -212,6 +212,12 @@ jQuery.extend({
212 212
 				value += "px";
213 213
 			}
214 214
 
  215
+			// Fixes #8908, it can be done more correctly by specifing setters in cssHooks,
  216
+			// but it would mean to define eight (for every problematic property) identical functions
  217
+			if ( value === "" && name.indexOf("background") === 0 ) {
  218
+				value = " ";
  219
+			}
  220
+
215 221
 			// If a hook was provided, use that value, otherwise just set the specified value
216 222
 			if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {
217 223
 
@@ -544,15 +550,6 @@ jQuery.each([ "height", "width" ], function( i, name ) {
544 550
 	};
545 551
 });
546 552
 
547  
-if ( !jQuery.support.clearCloneStyle ) {
548  
-	// #8908, this part for IE9 only; see gh-886
549  
-	jQuery.cssHooks.backgroundPosition = {
550  
-		set: function( elem, value ) {
551  
-			return value === "" ? "0% 0%" : value;
552  
-		}
553  
-	};
554  
-}
555  
-
556 553
 if ( !jQuery.support.opacity ) {
557 554
 	jQuery.cssHooks.opacity = {
558 555
 		get: function( elem, computed ) {
10  src/manipulation.js
@@ -433,7 +433,7 @@ function cloneCopyEvent( src, dest ) {
433 433
 	}
434 434
 }
435 435
 
436  
-function cloneFixAttributes( src, dest ) {
  436
+function fixCloneNodeIssues( src, dest ) {
437 437
 	var nodeName, data, e;
438 438
 
439 439
 	// We do not need to do anything for non-Elements
@@ -565,12 +565,8 @@ jQuery.extend({
565 565
 			inPage = jQuery.contains( elem.ownerDocument, elem );
566 566
 
567 567
 		if ( jQuery.support.html5Clone || jQuery.isXMLDoc(elem) || !rnoshimcache.test( "<" + elem.nodeName + ">" ) ) {
568  
-			// Break the original-clone style connection in IE9/10 (#8909)
569  
-			if ( !jQuery.support.clearCloneStyle && elem.nodeType === 1 ) {
570  
-				i = ( window.getComputedStyle( elem, null ) || {} ).backgroundPosition;
571  
-			}
572  
-
573 568
 			clone = elem.cloneNode( true );
  569
+
574 570
 		// IE<=8 does not properly clone detached, unknown element nodes
575 571
 		} else {
576 572
 			fragmentDiv.innerHTML = elem.outerHTML;
@@ -588,7 +584,7 @@ jQuery.extend({
588 584
 			for ( i = 0; (node = srcElements[i]) != null; ++i ) {
589 585
 				// Ensure that the destination node is not null; Fixes #9587
590 586
 				if ( destElements[i] ) {
591  
-					cloneFixAttributes( node, destElements[i] );
  587
+					fixCloneNodeIssues( node, destElements[i] );
592 588
 				}
593 589
 			}
594 590
 		}
4  src/support.js
@@ -169,10 +169,6 @@ jQuery.support = (function() {
169 169
 		}
170 170
 	}
171 171
 
172  
-	div.style.backgroundClip = "content-box";
173  
-	div.cloneNode( true ).style.backgroundClip = "";
174  
-	support.clearCloneStyle = div.style.backgroundClip === "content-box";
175  
-
176 172
 	// Run tests that need a body at doc ready
177 173
 	jQuery(function() {
178 174
 		var container, div, tds, marginDiv,
77  test/unit/css.js
@@ -923,4 +923,81 @@ test( "css opacity consistency across browsers (#12685)", function() {
923 923
 		equal( Math.round( el.css("opacity") * 100 ), 20, "remove opacity override" );
924 924
 });
925 925
 
  926
+asyncTest( "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)", 16, function() {
  927
+	var baseUrl = document.location.href.replace( /([^\/]*)$/, "" ),
  928
+	styles = [{
  929
+			name: "backgroundAttachment",
  930
+			value: ["fixed"],
  931
+			expected: [ "scroll" ]
  932
+		},{
  933
+			name: "backgroundColor",
  934
+			value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
  935
+			expected: ["transparent"]
  936
+		}, {
  937
+			// Firefox returns auto's value
  938
+			name: "backgroundImage",
  939
+			value: [ "url('test.png')", "url(" + baseUrl + "test.png)", "url(\"" + baseUrl + "test.png\")" ],
  940
+			expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
  941
+		}, {
  942
+			name: "backgroundPosition",
  943
+			value: ["5% 5%"],
  944
+			expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
  945
+		}, {
  946
+			// Firefox returns no-repeat
  947
+			name: "backgroundRepeat",
  948
+			value: ["repeat-y"],
  949
+			expected: [ "repeat", "no-repeat" ]
  950
+		}, {
  951
+			name: "backgroundClip",
  952
+			value: ["padding-box"],
  953
+			expected: ["border-box"]
  954
+		}, {
  955
+			name: "backgroundOrigin",
  956
+			value: ["content-box"],
  957
+			expected: ["padding-box"]
  958
+		}, {
  959
+			name: "backgroundSize",
  960
+			value: ["80px 60px"],
  961
+			expected: [ "auto auto" ]
  962
+	}];
  963
+
  964
+	jQuery.each( styles, function(index, style) {
  965
+		var $clone, $clonedChildren,
  966
+			$source = jQuery( "#firstp" ),
  967
+			source = $source[ 0 ],
  968
+			$children = $source.children();
  969
+
  970
+		style.expected = style.expected.concat( [ "", "auto" ] );
  971
+
  972
+		if ( source.style[ style.name ] === undefined ) {
  973
+			ok( true, style.name +  ": style isn't supported and therefore not an issue" );
  974
+			ok( true );
  975
+			return true;
  976
+		}
  977
+
  978
+		$source.css( style.name, style.value[ 0 ] );
  979
+		$children.css( style.name, style.value[ 0 ] );
  980
+
  981
+		$clone = $source.clone();
  982
+		$clonedChildren = $clone.children();
  983
+
  984
+		$clone.css( style.name, "" );
  985
+		$clonedChildren.css( style.name, "" );
  986
+
  987
+		window.setTimeout(function() {
  988
+			ok( jQuery.inArray( $source.css( style.name ) !== -1, style.value ),
  989
+				"Clearing clone.css() doesn't affect source.css(): " + style.name +
  990
+				"; result: " + $source.css( style.name ) +
  991
+				"; expected: " + style.value.join( "," ) );
  992
+
  993
+			ok( jQuery.inArray( $children.css( style.name ) !== -1, style.value ),
  994
+				"Clearing clonedChildren.css() doesn't affect children.css(): " + style.name +
  995
+				"; result: " + $children.css( style.name ) +
  996
+				"; expected: " + style.value.join( "," ) );
  997
+		}, 100 );
  998
+	});
  999
+
  1000
+	window.setTimeout( start, 1000 );
  1001
+});
  1002
+
926 1003
 }
67  test/unit/manipulation.js
@@ -2127,73 +2127,6 @@ test( "checked state is cloned with clone()", function() {
2127 2127
 	equal( jQuery(elem).clone().attr("id","clone")[ 0 ].checked, true, "Checked true state correctly cloned" );
2128 2128
 });
2129 2129
 
2130  
-test( "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)", function() {
2131  
-
2132  
-	expect( 16 );
2133  
-
2134  
-	var baseUrl = document.location.href.replace( /([^\/]*)$/, "" ),
2135  
-	styles = [{
2136  
-			name: "backgroundAttachment",
2137  
-			value: ["fixed"],
2138  
-			expected: [ "scroll" ]
2139  
-		},{
2140  
-			name: "backgroundColor",
2141  
-			value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
2142  
-			expected: ["transparent"]
2143  
-		}, {
2144  
-			// Firefox returns auto's value
2145  
-			name: "backgroundImage",
2146  
-			value: [ "url('test.png')", "url(" + baseUrl + "test.png)", "url(\"" + baseUrl + "test.png\")" ],
2147  
-			expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
2148  
-		}, {
2149  
-			name: "backgroundPosition",
2150  
-			value: ["5% 5%"],
2151  
-			expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
2152  
-		}, {
2153  
-			// Firefox returns no-repeat
2154  
-			name: "backgroundRepeat",
2155  
-			value: ["repeat-y"],
2156  
-			expected: [ "repeat", "no-repeat" ]
2157  
-		}, {
2158  
-			name: "backgroundClip",
2159  
-			value: ["padding-box"],
2160  
-			expected: ["border-box"]
2161  
-		}, {
2162  
-			name: "backgroundOrigin",
2163  
-			value: ["content-box"],
2164  
-			expected: ["padding-box"]
2165  
-		}, {
2166  
-			name: "backgroundSize",
2167  
-			value: ["80px 60px"],
2168  
-			expected: [ "auto auto" ]
2169  
-	}];
2170  
-
2171  
-	jQuery.each( styles, function( index, style ) {
2172  
-		var $source, source, $clone;
2173  
-
2174  
-		style.expected = style.expected.concat([ "", "auto" ]);
2175  
-		$source = jQuery( "<div />" );
2176  
-		source = $source[ 0 ];
2177  
-		if ( source.style[ style.name ] === undefined ) {
2178  
-			ok( true, style.name +  ": style isn't supported and therefore not an issue" );
2179  
-			ok( true );
2180  
-			return true;
2181  
-		}
2182  
-		$source.css( style.name, style.value[ 0 ] );
2183  
-		$clone = $source.clone();
2184  
-		$clone.css( style.name, "" );
2185  
-
2186  
-		ok( ~jQuery.inArray( $source.css( style.name ), style.value ),
2187  
-			"Clearing clone.css() doesn't affect source.css(): " + style.name +
2188  
-			"; result: " + $source.css( style.name ) +
2189  
-			"; expected: " + style.value.join(",") );
2190  
-		ok( ~jQuery.inArray( $clone.css( style.name ), style.expected ),
2191  
-			"Cloned element was reset to its default value: " + style.name +
2192  
-			"; result: " + $clone.css( style.name ) +
2193  
-			"; expected: " + style.expected.join(",") );
2194  
-	});
2195  
-});
2196  
-
2197 2130
 test( "manipulate mixed jQuery and text (#12384, #12346)", function() {
2198 2131
 
2199 2132
 	expect( 2 );
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.