Skip to content
Permalink
Browse files

Core: Deprecated .zIndex(). Fixes #9061 - Core: Deprecate .zIndex().

  • Loading branch information...
scottgonzalez committed Mar 15, 2013
1 parent ae96519 commit 932caaf2ddf70c889003d5b42eee4f069d2dd296
@@ -14,6 +14,7 @@ var versions = {
"Autocomplete": "autocomplete/autocomplete.html",
"Button": "button/button.html",
"Core": "core/core.html",
"Core_deprecated": "core/core_deprecated.html",
"Datepicker": "datepicker/datepicker.html",
"Dialog": "dialog/dialog.html",
"Draggable": "draggable/draggable.html",
@@ -20,6 +20,7 @@
"autocomplete/autocomplete.html",
"button/button.html",
"core/core.html",
"core/core_deprecated.html",
"datepicker/datepicker.html",
"dialog/dialog.html",
"draggable/draggable.html",
@@ -117,17 +117,6 @@ <h2 id="qunit-userAgent"></h2>
<input id="dimensionlessParent-dimensionless" style="height: 0; width: 0;">
</div>

<div id="zIndex100" style="z-index: 100; position: absolute">
<div id="zIndexAutoWithParent">.</div>
</div>
<div id="zIndex100ViaCSS" class="zindex">
<div id="zIndexAutoWithParentViaCSS">.</div>
</div>
<div id="zIndex100ViaCSSPositioned" class="zindex absolute">
<div id="zIndexAutoWithParentViaCSSPositioned">.</div>
</div>
<div id="zIndexAutoNoParent"></div>

<div id="dimensions" style="float: left; height: 50px; width: 100px; margin: 1px 12px 11px 2px; border-style: solid; border-width: 3px 14px 13px 4px; padding: 5px 16px 15px 6px;"></div>

</div>
@@ -26,25 +26,6 @@ asyncTest( "focus", function() {
});
});

test( "zIndex", function() {
expect( 7 );
var el = $( "#zIndexAutoWithParent" ),
parent = el.parent();
equal( el.zIndex(), 100, "zIndex traverses up to find value" );
equal( parent.zIndex(200 ), parent, "zIndex setter is chainable" );
equal( el.zIndex(), 200, "zIndex setter changed zIndex" );

el = $( "#zIndexAutoWithParentViaCSS" );
equal( el.zIndex(), 0, "zIndex traverses up to find CSS value, not found because not positioned" );

el = $( "#zIndexAutoWithParentViaCSSPositioned" );
equal( el.zIndex(), 100, "zIndex traverses up to find CSS value" );
el.parent().zIndex( 200 );
equal( el.zIndex(), 200, "zIndex setter changed zIndex, overriding CSS" );

equal( $( "#zIndexAutoNoParent" ).zIndex(), 0, "zIndex never explicitly set in hierarchy" );
});

test( "innerWidth - getter", function() {
expect( 2 );
var el = $( "#dimensions" );
@@ -0,0 +1,136 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Core Test Suite</title>

<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit.css">
<script src="../../../external/qunit.js"></script>
<script src="../../jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
js: [ "ui/jquery.ui.core.js" ]
});
</script>

<script src="core.js"></script>
<script src="selector.js"></script>
<script src="core_deprecated.js"></script>

<script src="../swarminject.js"></script>
<style>
.zindex {
z-index: 100;
}
.absolute {
position: absolute;
}
</style>
</head>
<body>

<h1 id="qunit-header">jQuery UI Core Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">

<img src="../images/jqueryui_32x32.png" usemap="#mymap" width="10" height="10" alt="">
<map name="mymap">
<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaCoordsHref" alt="">
<area href="foo.html" id="areaNoCoordsHref" alt="">
</map>
<map name="mymap2">
<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaNoImg" alt="">
</map>

<form id="formNoTabindex"></form>
<form id="formTabindex" tabindex="1"></form>

<div>
<input id="visibleAncestor-inputTypeNone">
<input type="text" id="visibleAncestor-inputTypeText">
<input type="checkbox" id="visibleAncestor-inputTypeCheckbox">
<input type="radio" id="visibleAncestor-inputTypeRadio">
<input type="button" id="visibleAncestor-inputTypeButton" value="visibleAncestor-inputTypeButton">
<input type="hidden" id="visibleAncestor-inputTypeHidden">
<button id="visibleAncestor-button">x</button>
<select id="visibleAncestor-select">
<option>option</option>
</select>
<textarea id="visibleAncestor-textarea">x</textarea>
<object id="visibleAncestor-object" codebase="about:blank">xxx</object>
<a href="#" id="visibleAncestor-anchorWithHref">anchor</a>
<a id="visibleAncestor-anchorWithoutHref">anchor</a>
<span id="visibleAncestor-span">x</span>
<div id="visibleAncestor-div">x</div>
<span id="visibleAncestor-spanWithTabindex" tabindex="1">x</span>
<div id="visibleAncestor-divWithNegativeTabindex" tabindex="-1">x</div>
</div>

<div>
<input id="disabledElement-inputTypeNone" disabled="disabled">
<input type="text" id="disabledElement-inputTypeText" disabled="disabled">
<input type="checkbox" id="disabledElement-inputTypeCheckbox" disabled="disabled">
<input type="radio" id="disabledElement-inputTypeRadio" disabled="disabled">
<input type="button" id="disabledElement-inputTypeButton" disabled="disabled" value="disabledElement-inputTypeButton">
<input type="hidden" id="disabledElement-inputTypeHidden" disabled="disabled">
<button id="disabledElement-button" disabled="disabled"></button>
<select id="disabledElement-select" disabled="disabled"></select>
<textarea id="disabledElement-textarea" disabled="disabled"></textarea>
</div>

<div>
<div id="displayNoneAncestor" style="display: none;">
<input id="displayNoneAncestor-input">
<span tabindex="1" id="displayNoneAncestor-span">.</span>
</div>

<div id="visibilityHiddenAncestor" style="visibility: hidden;">
<input id="visibilityHiddenAncestor-input">
<span tabindex="1" id="visibilityHiddenAncestor-span">.</span>
</div>

<span tabindex="1" id="displayNone-span" style="display: none;">.</span>
<span tabindex="1" id="visibilityHidden-span" style="visibility: hidden;">.</span>

<input id="displayNone-input" style="display: none;">
<input id="visibilityHidden-input" style="visibility: hidden;">
</div>

<div>
<input id="inputTabindex0" tabindex="0">
<input id="inputTabindex10" tabindex="10">
<input id="inputTabindex-1" tabindex="-1">
<input id="inputTabindex-50" tabindex="-50">

<span id="spanTabindex0" tabindex="0">.</span>
<span id="spanTabindex10" tabindex="10">.</span>
<span id="spanTabindex-1" tabindex="-1">.</span>
<span id="spanTabindex-50" tabindex="-50">.</span>
</div>

<div style="width: 0; height: 0;">
<input id="dimensionlessParent">
<input id="dimensionlessParent-dimensionless" style="height: 0; width: 0;">
</div>

<div id="zIndex100" style="z-index: 100; position: absolute">
<div id="zIndexAutoWithParent">.</div>
</div>
<div id="zIndex100ViaCSS" class="zindex">
<div id="zIndexAutoWithParentViaCSS">.</div>
</div>
<div id="zIndex100ViaCSSPositioned" class="zindex absolute">
<div id="zIndexAutoWithParentViaCSSPositioned">.</div>
</div>
<div id="zIndexAutoNoParent"></div>

<div id="dimensions" style="float: left; height: 50px; width: 100px; margin: 1px 12px 11px 2px; border-style: solid; border-width: 3px 14px 13px 4px; padding: 5px 16px 15px 6px;"></div>

</div>
</body>
</html>
@@ -0,0 +1,24 @@
(function( $ ) {

module( "core - deprecated" );

test( "zIndex", function() {
expect( 7 );
var el = $( "#zIndexAutoWithParent" ),
parent = el.parent();
equal( el.zIndex(), 100, "zIndex traverses up to find value" );
equal( parent.zIndex(200 ), parent, "zIndex setter is chainable" );
equal( el.zIndex(), 200, "zIndex setter changed zIndex" );

el = $( "#zIndexAutoWithParentViaCSS" );
equal( el.zIndex(), 0, "zIndex traverses up to find CSS value, not found because not positioned" );

el = $( "#zIndexAutoWithParentViaCSSPositioned" );
equal( el.zIndex(), 100, "zIndex traverses up to find CSS value" );
el.parent().zIndex( 200 );
equal( el.zIndex(), 200, "zIndex setter changed zIndex, overriding CSS" );

equal( $( "#zIndexAutoNoParent" ).zIndex(), 0, "zIndex never explicitly set in hierarchy" );
});

})( jQuery );
@@ -78,35 +78,6 @@ $.fn.extend({
return (/fixed/).test(this.css("position")) || !scrollParent.length ? $(document) : scrollParent;
},

zIndex: function( zIndex ) {
if ( zIndex !== undefined ) {
return this.css( "zIndex", zIndex );
}

if ( this.length ) {
var elem = $( this[ 0 ] ), position, value;
while ( elem.length && elem[ 0 ] !== document ) {
// Ignore z-index if position is set to a value where z-index is ignored by the browser
// This makes behavior of this function consistent across browsers
// WebKit always returns auto if the element is positioned
position = elem.css( "position" );
if ( position === "absolute" || position === "relative" || position === "fixed" ) {
// IE returns 0 when zIndex is not specified
// other browsers return a string
// we ignore the case of nested elements with an explicit value of 0
// <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
value = parseInt( elem.css( "zIndex" ), 10 );
if ( !isNaN( value ) && value !== 0 ) {
return value;
}
}
elem = elem.parent();
}
}

return 0;
},

uniqueId: function() {
return this.each(function() {
if ( !this.id ) {
@@ -263,6 +234,35 @@ $.fn.extend({

enableSelection: function() {
return this.unbind( ".ui-disableSelection" );
},

zIndex: function( zIndex ) {
if ( zIndex !== undefined ) {
return this.css( "zIndex", zIndex );
}

if ( this.length ) {
var elem = $( this[ 0 ] ), position, value;
while ( elem.length && elem[ 0 ] !== document ) {
// Ignore z-index if position is set to a value where z-index is ignored by the browser
// This makes behavior of this function consistent across browsers
// WebKit always returns auto if the element is positioned
position = elem.css( "position" );
if ( position === "absolute" || position === "relative" || position === "fixed" ) {
// IE returns 0 when zIndex is not specified
// other browsers return a string
// we ignore the case of nested elements with an explicit value of 0
// <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
value = parseInt( elem.css( "zIndex" ), 10 );
if ( !isNaN( value ) && value !== 0 ) {
return value;
}
}
elem = elem.parent();
}
}

return 0;
}
});

0 comments on commit 932caaf

Please sign in to comment.
You can’t perform that action at this time.