Skip to content

Commit 932caaf

Browse files
scottgonzalezscottgonzalez
committed
Core: Deprecated .zIndex(). Fixes #9061 - Core: Deprecate .zIndex().
1 parent ae96519 commit 932caaf

File tree

7 files changed

+191
-59
lines changed

7 files changed

+191
-59
lines changed

‎build/tasks/testswarm.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ var versions = {
1414
"Autocomplete": "autocomplete/autocomplete.html",
1515
"Button": "button/button.html",
1616
"Core": "core/core.html",
17+
"Core_deprecated": "core/core_deprecated.html",
1718
"Datepicker": "datepicker/datepicker.html",
1819
"Dialog": "dialog/dialog.html",
1920
"Draggable": "draggable/draggable.html",

‎tests/unit/all.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"autocomplete/autocomplete.html",
2121
"button/button.html",
2222
"core/core.html",
23+
"core/core_deprecated.html",
2324
"datepicker/datepicker.html",
2425
"dialog/dialog.html",
2526
"draggable/draggable.html",

‎tests/unit/core/core.html

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -117,17 +117,6 @@ <h2 id="qunit-userAgent"></h2>
117117
<input id="dimensionlessParent-dimensionless" style="height: 0; width: 0;">
118118
</div>
119119

120-
<div id="zIndex100" style="z-index: 100; position: absolute">
121-
<div id="zIndexAutoWithParent">.</div>
122-
</div>
123-
<div id="zIndex100ViaCSS" class="zindex">
124-
<div id="zIndexAutoWithParentViaCSS">.</div>
125-
</div>
126-
<div id="zIndex100ViaCSSPositioned" class="zindex absolute">
127-
<div id="zIndexAutoWithParentViaCSSPositioned">.</div>
128-
</div>
129-
<div id="zIndexAutoNoParent"></div>
130-
131120
<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>
132121

133122
</div>

‎tests/unit/core/core.js

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,6 @@ asyncTest( "focus", function() {
2626
});
2727
});
2828

29-
test( "zIndex", function() {
30-
expect( 7 );
31-
var el = $( "#zIndexAutoWithParent" ),
32-
parent = el.parent();
33-
equal( el.zIndex(), 100, "zIndex traverses up to find value" );
34-
equal( parent.zIndex(200 ), parent, "zIndex setter is chainable" );
35-
equal( el.zIndex(), 200, "zIndex setter changed zIndex" );
36-
37-
el = $( "#zIndexAutoWithParentViaCSS" );
38-
equal( el.zIndex(), 0, "zIndex traverses up to find CSS value, not found because not positioned" );
39-
40-
el = $( "#zIndexAutoWithParentViaCSSPositioned" );
41-
equal( el.zIndex(), 100, "zIndex traverses up to find CSS value" );
42-
el.parent().zIndex( 200 );
43-
equal( el.zIndex(), 200, "zIndex setter changed zIndex, overriding CSS" );
44-
45-
equal( $( "#zIndexAutoNoParent" ).zIndex(), 0, "zIndex never explicitly set in hierarchy" );
46-
});
47-
4829
test( "innerWidth - getter", function() {
4930
expect( 2 );
5031
var el = $( "#dimensions" );

‎tests/unit/core/core_deprecated.html

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Core Test Suite</title>
6+
7+
<script src="../../jquery.js"></script>
8+
<link rel="stylesheet" href="../../../external/qunit.css">
9+
<script src="../../../external/qunit.js"></script>
10+
<script src="../../jquery.simulate.js"></script>
11+
<script src="../testsuite.js"></script>
12+
<script>
13+
TestHelpers.loadResources({
14+
js: [ "ui/jquery.ui.core.js" ]
15+
});
16+
</script>
17+
18+
<script src="core.js"></script>
19+
<script src="selector.js"></script>
20+
<script src="core_deprecated.js"></script>
21+
22+
<script src="../swarminject.js"></script>
23+
<style>
24+
.zindex {
25+
z-index: 100;
26+
}
27+
.absolute {
28+
position: absolute;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
34+
<h1 id="qunit-header">jQuery UI Core Test Suite</h1>
35+
<h2 id="qunit-banner"></h2>
36+
<div id="qunit-testrunner-toolbar"></div>
37+
<h2 id="qunit-userAgent"></h2>
38+
<ol id="qunit-tests"></ol>
39+
<div id="qunit-fixture">
40+
41+
<img src="../images/jqueryui_32x32.png" usemap="#mymap" width="10" height="10" alt="">
42+
<map name="mymap">
43+
<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaCoordsHref" alt="">
44+
<area href="foo.html" id="areaNoCoordsHref" alt="">
45+
</map>
46+
<map name="mymap2">
47+
<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaNoImg" alt="">
48+
</map>
49+
50+
<form id="formNoTabindex"></form>
51+
<form id="formTabindex" tabindex="1"></form>
52+
53+
<div>
54+
<input id="visibleAncestor-inputTypeNone">
55+
<input type="text" id="visibleAncestor-inputTypeText">
56+
<input type="checkbox" id="visibleAncestor-inputTypeCheckbox">
57+
<input type="radio" id="visibleAncestor-inputTypeRadio">
58+
<input type="button" id="visibleAncestor-inputTypeButton" value="visibleAncestor-inputTypeButton">
59+
<input type="hidden" id="visibleAncestor-inputTypeHidden">
60+
<button id="visibleAncestor-button">x</button>
61+
<select id="visibleAncestor-select">
62+
<option>option</option>
63+
</select>
64+
<textarea id="visibleAncestor-textarea">x</textarea>
65+
<object id="visibleAncestor-object" codebase="about:blank">xxx</object>
66+
<a href="#" id="visibleAncestor-anchorWithHref">anchor</a>
67+
<a id="visibleAncestor-anchorWithoutHref">anchor</a>
68+
<span id="visibleAncestor-span">x</span>
69+
<div id="visibleAncestor-div">x</div>
70+
<span id="visibleAncestor-spanWithTabindex" tabindex="1">x</span>
71+
<div id="visibleAncestor-divWithNegativeTabindex" tabindex="-1">x</div>
72+
</div>
73+
74+
<div>
75+
<input id="disabledElement-inputTypeNone" disabled="disabled">
76+
<input type="text" id="disabledElement-inputTypeText" disabled="disabled">
77+
<input type="checkbox" id="disabledElement-inputTypeCheckbox" disabled="disabled">
78+
<input type="radio" id="disabledElement-inputTypeRadio" disabled="disabled">
79+
<input type="button" id="disabledElement-inputTypeButton" disabled="disabled" value="disabledElement-inputTypeButton">
80+
<input type="hidden" id="disabledElement-inputTypeHidden" disabled="disabled">
81+
<button id="disabledElement-button" disabled="disabled"></button>
82+
<select id="disabledElement-select" disabled="disabled"></select>
83+
<textarea id="disabledElement-textarea" disabled="disabled"></textarea>
84+
</div>
85+
86+
<div>
87+
<div id="displayNoneAncestor" style="display: none;">
88+
<input id="displayNoneAncestor-input">
89+
<span tabindex="1" id="displayNoneAncestor-span">.</span>
90+
</div>
91+
92+
<div id="visibilityHiddenAncestor" style="visibility: hidden;">
93+
<input id="visibilityHiddenAncestor-input">
94+
<span tabindex="1" id="visibilityHiddenAncestor-span">.</span>
95+
</div>
96+
97+
<span tabindex="1" id="displayNone-span" style="display: none;">.</span>
98+
<span tabindex="1" id="visibilityHidden-span" style="visibility: hidden;">.</span>
99+
100+
<input id="displayNone-input" style="display: none;">
101+
<input id="visibilityHidden-input" style="visibility: hidden;">
102+
</div>
103+
104+
<div>
105+
<input id="inputTabindex0" tabindex="0">
106+
<input id="inputTabindex10" tabindex="10">
107+
<input id="inputTabindex-1" tabindex="-1">
108+
<input id="inputTabindex-50" tabindex="-50">
109+
110+
<span id="spanTabindex0" tabindex="0">.</span>
111+
<span id="spanTabindex10" tabindex="10">.</span>
112+
<span id="spanTabindex-1" tabindex="-1">.</span>
113+
<span id="spanTabindex-50" tabindex="-50">.</span>
114+
</div>
115+
116+
<div style="width: 0; height: 0;">
117+
<input id="dimensionlessParent">
118+
<input id="dimensionlessParent-dimensionless" style="height: 0; width: 0;">
119+
</div>
120+
121+
<div id="zIndex100" style="z-index: 100; position: absolute">
122+
<div id="zIndexAutoWithParent">.</div>
123+
</div>
124+
<div id="zIndex100ViaCSS" class="zindex">
125+
<div id="zIndexAutoWithParentViaCSS">.</div>
126+
</div>
127+
<div id="zIndex100ViaCSSPositioned" class="zindex absolute">
128+
<div id="zIndexAutoWithParentViaCSSPositioned">.</div>
129+
</div>
130+
<div id="zIndexAutoNoParent"></div>
131+
132+
<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>
133+
134+
</div>
135+
</body>
136+
</html>

‎tests/unit/core/core_deprecated.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
(function( $ ) {
2+
3+
module( "core - deprecated" );
4+
5+
test( "zIndex", function() {
6+
expect( 7 );
7+
var el = $( "#zIndexAutoWithParent" ),
8+
parent = el.parent();
9+
equal( el.zIndex(), 100, "zIndex traverses up to find value" );
10+
equal( parent.zIndex(200 ), parent, "zIndex setter is chainable" );
11+
equal( el.zIndex(), 200, "zIndex setter changed zIndex" );
12+
13+
el = $( "#zIndexAutoWithParentViaCSS" );
14+
equal( el.zIndex(), 0, "zIndex traverses up to find CSS value, not found because not positioned" );
15+
16+
el = $( "#zIndexAutoWithParentViaCSSPositioned" );
17+
equal( el.zIndex(), 100, "zIndex traverses up to find CSS value" );
18+
el.parent().zIndex( 200 );
19+
equal( el.zIndex(), 200, "zIndex setter changed zIndex, overriding CSS" );
20+
21+
equal( $( "#zIndexAutoNoParent" ).zIndex(), 0, "zIndex never explicitly set in hierarchy" );
22+
});
23+
24+
})( jQuery );

‎ui/jquery.ui.core.js

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -78,35 +78,6 @@ $.fn.extend({
7878
return (/fixed/).test(this.css("position")) || !scrollParent.length ? $(document) : scrollParent;
7979
},
8080

81-
zIndex: function( zIndex ) {
82-
if ( zIndex !== undefined ) {
83-
return this.css( "zIndex", zIndex );
84-
}
85-
86-
if ( this.length ) {
87-
var elem = $( this[ 0 ] ), position, value;
88-
while ( elem.length && elem[ 0 ] !== document ) {
89-
// Ignore z-index if position is set to a value where z-index is ignored by the browser
90-
// This makes behavior of this function consistent across browsers
91-
// WebKit always returns auto if the element is positioned
92-
position = elem.css( "position" );
93-
if ( position === "absolute" || position === "relative" || position === "fixed" ) {
94-
// IE returns 0 when zIndex is not specified
95-
// other browsers return a string
96-
// we ignore the case of nested elements with an explicit value of 0
97-
// <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
98-
value = parseInt( elem.css( "zIndex" ), 10 );
99-
if ( !isNaN( value ) && value !== 0 ) {
100-
return value;
101-
}
102-
}
103-
elem = elem.parent();
104-
}
105-
}
106-
107-
return 0;
108-
},
109-
11081
uniqueId: function() {
11182
return this.each(function() {
11283
if ( !this.id ) {
@@ -263,6 +234,35 @@ $.fn.extend({
263234

264235
enableSelection: function() {
265236
return this.unbind( ".ui-disableSelection" );
237+
},
238+
239+
zIndex: function( zIndex ) {
240+
if ( zIndex !== undefined ) {
241+
return this.css( "zIndex", zIndex );
242+
}
243+
244+
if ( this.length ) {
245+
var elem = $( this[ 0 ] ), position, value;
246+
while ( elem.length && elem[ 0 ] !== document ) {
247+
// Ignore z-index if position is set to a value where z-index is ignored by the browser
248+
// This makes behavior of this function consistent across browsers
249+
// WebKit always returns auto if the element is positioned
250+
position = elem.css( "position" );
251+
if ( position === "absolute" || position === "relative" || position === "fixed" ) {
252+
// IE returns 0 when zIndex is not specified
253+
// other browsers return a string
254+
// we ignore the case of nested elements with an explicit value of 0
255+
// <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
256+
value = parseInt( elem.css( "zIndex" ), 10 );
257+
if ( !isNaN( value ) && value !== 0 ) {
258+
return value;
259+
}
260+
}
261+
elem = elem.parent();
262+
}
263+
}
264+
265+
return 0;
266266
}
267267
});
268268

0 commit comments

Comments
 (0)