JSFiddle - React, Tailwind, and code Playground

by ericf

HTML

<script src="http://yui.yahooapis.com/3.5.0pr2/build/yui/yui-min.js"></script>
<div id="style" style="z-index: auto"></div>
<div id="style-10" style="z-index: 10"></div>
<div id="css"></div>

<div id="style-10-position" style="z-index: 10; position: relative"></div>
<div id="css-position"></div>
<div id="css-position-100"></div>

<div id="console" class="yui3-skin-sam"></div>

CSS

#css {
    z-index: 100;
}

#css-position {
    position: relative;
}

#css-position-100 {
    z-index: 100;
    position: relative;
}

JavaScript

YUI().use('node', 'test', 'test-console', function (Y) {

    var Assert = Y.Assert,
        
        style   = Y.one('#style'),
        style10 = Y.one('#style-10'),
        css     = Y.one('#css'),
        
        style10Position = Y.one('#style-10-position'),
        cssPosition     = Y.one('#css-position'),
        cssPosition100  = Y.one('#css-position-100'),
        
        newNode        = Y.Node.create('<div id="new"></div>'),
        newNodeStyle20 = Y.Node.create('<div id="new" style="z-index: 20;"></div>'),
        
        suite = new Y.Test.Suite('z-index Test Suite');
    
    function parse(zIndex) {
        if (zIndex && Y.Lang.isString(zIndex) && zIndex !== 'auto') {
            zIndex = parseInt(zIndex, 10);
        }
        
        return zIndex;
    }
    
    suite.add(new Y.Test.Case({
        name: 'No CSS Position',
        
        '#style should have z-index style: auto': function () {
            Assert.areSame('auto', style.getStyle('zIndex'), 'getStyle does not return correct value.');
        },
        
        '#style should have z-index computed-style: auto': function () {
            Assert.areSame('auto', style.getComputedStyle('zIndex'), 'getComputedStyle does not return correct value.');
        },
        
        '#style-10 should have z-index style: 10': function () {
            Assert.areSame(10, parse(style10.getStyle('zIndex')), 'getStyle does not return correct value.');
        },
        
        '#style-10 should have z-index computed-style: 10': function () {
            Assert.areSame(10, parse(style10.getComputedStyle('zIndex')), 'getComputedStyle does not return correct value.');
        },
        
        '#css should have z-index style: 100': function () {
            Assert.areSame(100, parse(css.getStyle('zIndex')), 'getStyle does not return correct value.');
        },
        
        '#css should have z-index computed-style: 100': function () {
            Assert.areSame(100,...