Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Follow-up for #8908 fix #1036

Closed
wants to merge 4 commits into from

6 participants

@markelog
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.

@dmethvin
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?

@markelog
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.

@elijahmanor

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/

@markelog
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...

@gnarf
Owner

This needs a rebase

@markelog
Collaborator

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

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

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

cc @rwldrn @dmethvin to confirm

@rwaldron Collaborator

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

@dmethvin 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.

@rwaldron 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)

@markelog 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))
+ ok( true, style.name + ": style isn't supported and therefore not an issue" );
+ ok( true );
+ return true;
+ }
+
+ $source.css( style.name, style.value[ 0 ] );
+ $children.css( style.name, style.value[ 0 ] );
+
+ $clone = $source.clone();
+ $clonedChildren = $clone.children();
+
+ $clone.css( style.name, "" );
+ $clonedChildren.css( style.name, "" );
+
+ window.setTimeout(function() {
+ ok( ~jQuery.inArray( $source.css( style.name ), style.value ),
@gnarf Owner
gnarf added a note

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
@gnarf
Owner

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

@markelog
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.

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

Sorry, not me, @elijahmanor did.

@mikesherov
Collaborator

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

@dmethvin
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?

@markelog
Collaborator
@orkel can you rebase?

done

@dmethvin dmethvin closed this in 643ecf9
@tp9 tp9 referenced this pull request from a commit
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
Commits on Dec 12, 2012
  1. @markelog

    Fixes #8908

    markelog authored
  2. @markelog

    Simplify fix for #8908

    markelog authored
  3. @markelog

    More simple

    markelog authored
  4. @markelog

    Revert lost comment

    markelog authored
This page is out of date. Refresh to see the latest.
View
15 src/css.js
@@ -212,6 +212,12 @@ jQuery.extend({
value += "px";
}
+ // Fixes #8908, it can be done more correctly by specifing setters in cssHooks,
+ // but it would mean to define eight (for every problematic property) identical functions
+ if ( value === "" && name.indexOf("background") === 0 ) {
+ value = " ";
+ }
+
// If a hook was provided, use that value, otherwise just set the specified value
if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {
@@ -544,15 +550,6 @@ jQuery.each([ "height", "width" ], function( i, name ) {
};
});
-if ( !jQuery.support.clearCloneStyle ) {
- // #8908, this part for IE9 only; see gh-886
- jQuery.cssHooks.backgroundPosition = {
- set: function( elem, value ) {
- return value === "" ? "0% 0%" : value;
- }
- };
-}
-
if ( !jQuery.support.opacity ) {
jQuery.cssHooks.opacity = {
get: function( elem, computed ) {
View
10 src/manipulation.js
@@ -433,7 +433,7 @@ function cloneCopyEvent( src, dest ) {
}
}
-function cloneFixAttributes( src, dest ) {
+function fixCloneNodeIssues( src, dest ) {
var nodeName, data, e;
// We do not need to do anything for non-Elements
@@ -565,12 +565,8 @@ jQuery.extend({
inPage = jQuery.contains( elem.ownerDocument, elem );
if ( jQuery.support.html5Clone || jQuery.isXMLDoc(elem) || !rnoshimcache.test( "<" + elem.nodeName + ">" ) ) {
- // Break the original-clone style connection in IE9/10 (#8909)
- if ( !jQuery.support.clearCloneStyle && elem.nodeType === 1 ) {
- i = ( window.getComputedStyle( elem, null ) || {} ).backgroundPosition;
- }
-
clone = elem.cloneNode( true );
+
// IE<=8 does not properly clone detached, unknown element nodes
} else {
fragmentDiv.innerHTML = elem.outerHTML;
@@ -588,7 +584,7 @@ jQuery.extend({
for ( i = 0; (node = srcElements[i]) != null; ++i ) {
// Ensure that the destination node is not null; Fixes #9587
if ( destElements[i] ) {
- cloneFixAttributes( node, destElements[i] );
+ fixCloneNodeIssues( node, destElements[i] );
}
}
}
View
4 src/support.js
@@ -169,10 +169,6 @@ jQuery.support = (function() {
}
}
- div.style.backgroundClip = "content-box";
- div.cloneNode( true ).style.backgroundClip = "";
- support.clearCloneStyle = div.style.backgroundClip === "content-box";
-
// Run tests that need a body at doc ready
jQuery(function() {
var container, div, tds, marginDiv,
View
77 test/unit/css.js
@@ -923,4 +923,81 @@ test( "css opacity consistency across browsers (#12685)", function() {
equal( Math.round( el.css("opacity") * 100 ), 20, "remove opacity override" );
});
+asyncTest( "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)", 16, function() {
+ var baseUrl = document.location.href.replace( /([^\/]*)$/, "" ),
+ styles = [{
+ name: "backgroundAttachment",
+ value: ["fixed"],
+ expected: [ "scroll" ]
+ },{
+ name: "backgroundColor",
+ value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
+ expected: ["transparent"]
+ }, {
+ // Firefox returns auto's value
+ name: "backgroundImage",
+ value: [ "url('test.png')", "url(" + baseUrl + "test.png)", "url(\"" + baseUrl + "test.png\")" ],
+ expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
+ }, {
+ name: "backgroundPosition",
+ value: ["5% 5%"],
+ expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
+ }, {
+ // Firefox returns no-repeat
+ name: "backgroundRepeat",
+ value: ["repeat-y"],
+ expected: [ "repeat", "no-repeat" ]
+ }, {
+ name: "backgroundClip",
+ value: ["padding-box"],
+ expected: ["border-box"]
+ }, {
+ name: "backgroundOrigin",
+ value: ["content-box"],
+ expected: ["padding-box"]
+ }, {
+ name: "backgroundSize",
+ value: ["80px 60px"],
+ expected: [ "auto auto" ]
+ }];
+
+ jQuery.each( styles, function(index, style) {
+ var $clone, $clonedChildren,
+ $source = jQuery( "#firstp" ),
+ source = $source[ 0 ],
+ $children = $source.children();
+
+ style.expected = style.expected.concat( [ "", "auto" ] );
+
+ if ( source.style[ style.name ] === undefined ) {
+ ok( true, style.name + ": style isn't supported and therefore not an issue" );
+ ok( true );
+ return true;
+ }
+
+ $source.css( style.name, style.value[ 0 ] );
+ $children.css( style.name, style.value[ 0 ] );
+
+ $clone = $source.clone();
+ $clonedChildren = $clone.children();
+
+ $clone.css( style.name, "" );
+ $clonedChildren.css( style.name, "" );
+
+ window.setTimeout(function() {
+ ok( jQuery.inArray( $source.css( style.name ) !== -1, style.value ),
+ "Clearing clone.css() doesn't affect source.css(): " + style.name +
+ "; result: " + $source.css( style.name ) +
+ "; expected: " + style.value.join( "," ) );
+
+ ok( jQuery.inArray( $children.css( style.name ) !== -1, style.value ),
+ "Clearing clonedChildren.css() doesn't affect children.css(): " + style.name +
+ "; result: " + $children.css( style.name ) +
+ "; expected: " + style.value.join( "," ) );
+ }, 100 );
+ });
+
+ window.setTimeout( start, 1000 );
+});
+
}
View
67 test/unit/manipulation.js
@@ -2127,73 +2127,6 @@ test( "checked state is cloned with clone()", function() {
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( 16 );
-
- var baseUrl = document.location.href.replace( /([^\/]*)$/, "" ),
- styles = [{
- name: "backgroundAttachment",
- value: ["fixed"],
- expected: [ "scroll" ]
- },{
- name: "backgroundColor",
- value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
- expected: ["transparent"]
- }, {
- // Firefox returns auto's value
- name: "backgroundImage",
- value: [ "url('test.png')", "url(" + baseUrl + "test.png)", "url(\"" + baseUrl + "test.png\")" ],
- expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
- }, {
- name: "backgroundPosition",
- value: ["5% 5%"],
- expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
- }, {
- // Firefox returns no-repeat
- name: "backgroundRepeat",
- value: ["repeat-y"],
- expected: [ "repeat", "no-repeat" ]
- }, {
- name: "backgroundClip",
- value: ["padding-box"],
- expected: ["border-box"]
- }, {
- name: "backgroundOrigin",
- value: ["content-box"],
- expected: ["padding-box"]
- }, {
- name: "backgroundSize",
- value: ["80px 60px"],
- expected: [ "auto auto" ]
- }];
-
- 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" );
- ok( true );
- 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 ),
- "Clearing clone.css() doesn't affect source.css(): " + style.name +
- "; result: " + $source.css( style.name ) +
- "; expected: " + style.value.join(",") );
- ok( ~jQuery.inArray( $clone.css( style.name ), style.expected ),
- "Cloned element was reset to its default value: " + style.name +
- "; result: " + $clone.css( style.name ) +
- "; expected: " + style.expected.join(",") );
- });
-});
-
test( "manipulate mixed jQuery and text (#12384, #12346)", function() {
expect( 2 );
Something went wrong with that request. Please try again.