Identify z-index and write it into the document

This is definitely a "can you write my code" question, but hopefully for a good cause. SuzyUk posted an interesting issue relating to pseudo elements Stacking Context in IE9 [webmasterworld.com] and I've set up a test suite to try to track the variables.

My trouble is most developer tools don't report pseudo elements, and there a lots of variables that need to be tested. It occurred to me that getting the z-index of the positioned elements and writing it out into the document would reduce the time taken to identify that variable for each element - and how it differs between browsers. When I ran into troubles trying to write the script myself I discovered ff/ie differences with zIndex. So I was hoping someone who has all this at their finger tips might be willing to whip up a quick script to save me some time.

The html for the test suite is:
<div class="testgroup one">
<div class="container">
<div class="mytest onea "><p>My p <em>My em</em></p></div>
<div class="mytest oneb"><p>My p <em>My em</em></p></div>
</div>
<div class="container">
<div class="mytest twoa "><p>My p <em>My em</em></p></div>
<div class="mytest twob"><p>My p <em>My em</em></p></div>
</div>
-where the pseudo element is em:after.

My ideal would be for the z-index to be written into the document something like this:

<div class="container">
container= 1
<div class="mytest onea "><p>My p <em>My em</em></p></div>
onea=2, p=3, em=4, em:after=5
<div class="mytest oneb"><p>My p <em>My em</em></p></div>
oneb=3, p=4, em=5, em:after=6

Presentation isn't an issue as this is a test suite, it would just be fantastic to have the z-index written out for each element so I don't have to track it manually. Any help really appreciated.


<!DOCTYPE html>
<head>
<style type="text/css">
.container { z-index: 1; position: relative;}
.mytest { z-index: 2; position: relative;}
</style>
<title>Test</title>
</head>
<body>
<div class="testgroup one">
  <div class="container"> 
    <div class="mytest onea ">
      <p>
        My p <em>My em</em>
      </p>
    </div>
    <div class="mytest oneb">
      <p>
        My p <em>My em</em>
      </p>
    </div> 
  </div><!--end container --> 
  <div class="container"> 
    <div class="mytest twoa ">
      <p>
        My p <em>My em</em>
      </p>
    </div> 
    <div class="mytest twob">
      <p>
        My p <em>My em</em>
      </p>
    </div> 
  </div><!--end container --> 
</div>
<script type="text/javascript" charset="utf-8"
    src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
</script>
<script type="text/javascript">
YUI().use('node', function(Y) {
  /**
   * @param n The node to get the z-index value for. This method will also be
   * called on each child node of this node.
   */
  function getZ(n) {
    var clss = n.getAttribute('class'),   // the classname of the element
      tag = Y.Node.getDOMNode(n).tagName, // the tagname of the element
      z = n.getComputedStyle('zIndex');  // the computed z-index value
    // iterate recursively through child nodes
    n.get('children').each(getZ);
    if (clss && clss.length > 0) {
      n.prepend(clss + "= " + z);
    }
    else {
      // no classname was available for the node so we'll use the tagname
      // instead and append it to the closest div parent instead of
      // prepending it to the current node.
      n.ancestor('div').append(tag + "= " + z);
    }
  }
  Y.all('.container').each(getZ);
});
</script>
</body>
</html>

Identify z-index and write it into the document

Help with a test suite

alt131

Fotiman

alt131

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week