Bug 15562 - getComputedStyle returns "auto" for zIndex property even after it has been set
Summary: getComputedStyle returns "auto" for zIndex property even after it has been set
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML DOM (show other bugs)
Version: 523.x (Safari 3)
Hardware: All OS X 10.4
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2007-10-19 07:27 PDT by Marcus Better
Modified: 2013-10-06 10:42 PDT (History)
8 users (show)

See Also:


Attachments
Test case (1.07 KB, text/html)
2007-10-19 07:29 PDT, Marcus Better
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Marcus Better 2007-10-19 07:27:10 PDT
If a style attribute is set in script, that should become the computed value for the attribute. The getComputedStyle function should therefore return the new value. However this is not the case with WebKit.
Comment 1 Marcus Better 2007-10-19 07:29:14 PDT
Created attachment 16730 [details]
Test case

This checks the computed and inline zIndex style attributes for an element without an explicit style. Then the attribute is given a value with JavaScript. We then check if the computed style has been changed to reflect this.
Comment 2 Marcus Better 2007-10-19 07:29:47 PDT
Test result on Firefox 2.0.0.7:

Before:
computed: auto
inline:
Setting z-index to 10...
computed: 10
inline: 10
SUCCESS!
Comment 3 Marcus Better 2007-10-19 07:31:11 PDT
Test result on WebKit r26570 nightly:

Before:
computed: auto
inline: 
Setting z-index to 10...
computed: auto
inline: 10
FAILURE! Computed and inline style differ
Comment 4 Mark Rowe (bdash) 2007-10-20 09:08:46 PDT
This is related to the fact that the div on which the z-index is set is unpositioned.  Adding "            e.style.position = "relative";" before retrieving the final computed style results in the expected value being returned.
Comment 5 Mark Rowe (bdash) 2007-10-20 09:19:30 PDT
See http://bugs.webkit.org/show_bug.cgi?id=14321#c4 for why it returns auto when the element is not positioned.  Mitz, should we consider matching Firefox's behaviour here?
Comment 6 Dave Hyatt 2007-10-20 15:32:29 PDT
I don't think we should.  This is a bug in Firefox I believe.  The computed result of z-index for an unpositioned element is auto, not the value specified in the stylesheet (since that value is going to be completely ignored when rendering).

cc'ing Hixie to see what he thinks.
Comment 7 Ian 'Hixie' Hickson 2007-10-23 01:06:17 PDT
Actually the computed value of 'z-index' is, according to CSS2.1, always the specified value. The _used value_ is the one that depends on the other properties
in this case.
Comment 8 Eric Seidel 2007-12-31 21:18:13 PST
This is required by Acid3.  In fact, Hixie seems to have used this for 8 acid 3 tests. :(
Comment 9 Eric Seidel 2008-01-01 01:39:28 PST
Test 32: FAIL (underlying problems prevent this test from running properly)
Test 33: FAIL (underlying problems prevent this test from running properly)
Test 34: FAIL (underlying problems prevent this test from running properly)
Test 35: FAIL (underlying problems prevent this test from running properly)
Test 36: FAIL (underlying problems prevent this test from running properly)
Test 37: FAIL (underlying problems prevent this test from running properly)
Test 38: FAIL (underlying problems prevent this test from running properly)

I lied, it's only 7 Acid3 tests which depend on this bug.  It's kinda lame that 7 tests would exploit this bug, but oh well.
Comment 10 Ian 'Hixie' Hickson 2008-01-01 05:51:03 PST
Wow, that was totally accidental. I only used z-index because it was the only CSS2 property I could find that only took keywords and integers, which sidesteps many of the issues with getting stringified computed values. If you have any other suggestions for how to write that part of the test harness in a way that is justifiable using 2004-or-earlier CRs or RECs, I'm happy to oblige.
Comment 11 Ian 'Hixie' Hickson 2008-01-01 14:24:48 PST
Note that it's going to be 16 tests by the time I'm doing with this series of tests.
Comment 12 Eric Seidel 2008-01-30 01:10:52 PST
Acid3 no longer depends on this
Comment 13 Michael Yagudaev 2011-08-18 08:12:30 PDT
Ok I believe I figured out the reason for this bug. 

If you read the css3 specification for z-index (http://www.w3.org/TR/CSS2/visuren.html#z-index) it says that the default value for a z-index is auto. Now, if an element is not applied with a position type that is non-static (i.e. position is relative, absolute or fixed), static is default for position so the z-index will have no effect on the element. So it seems webkit does not bother calculating this z-index and just returns the default, which is auto.

The work around to fix this therefore is
[selector]
{
   position: relative;
}

If you want to get the value of the container then use:
[selector]
{
   position: relative;
   z-index: inherit;
}

The above is really useful when implementing loading spinners for your content (e.g. a spinner that appears on top of a dialog, simply get the z-index and increment by one).
Comment 14 Michael Yagudaev 2011-08-20 18:20:43 PDT
Posted a short article on how to get the z-index cross browsers, which also includes a jsfiddle example you can play around with:
http://www.yagudaev.com/programming/javascript/20-getting-reliable-z-index-cross-browser

(In reply to comment #13)
> Ok I believe I figured out the reason for this bug. 
> 
> If you read the css3 specification for z-index (http://www.w3.org/TR/CSS2/visuren.html#z-index) it says that the default value for a z-index is auto. Now, if an element is not applied with a position type that is non-static (i.e. position is relative, absolute or fixed), static is default for position so the z-index will have no effect on the element. So it seems webkit does not bother calculating this z-index and just returns the default, which is auto.
> 
> The work around to fix this therefore is
> [selector]
> {
>    position: relative;
> }
> 
> If you want to get the value of the container then use:
> [selector]
> {
>    position: relative;
>    z-index: inherit;
> }
> 
> The above is really useful when implementing loading spinners for your content (e.g. a spinner that appears on top of a dialog, simply get the z-index and increment by one).