stylesheet/tests/stylesheet.html

	stylesheet.html revision f2d82649d9c0b6371cffaff1528277f9db7f0961
<!doctype html>
<html>
<head>
    <title>Test Page</title>
    <link type="text/css" rel="stylesheet" href="/assets/dpSyntaxHighlighter.css">
    <link type="text/css" id="locallink" rel="stylesheet" href="/build/console/assets/skins/sam/console.css">
    <link type="text/css" rel="stylesheet" href="/build/test/assets/test-console.css">
    <style type="text/css" id="styleblock" class="highlight-ignore">
        h1 {
            font: normal 125%/1.4 Arial, sans-serif;
        }
        .yui-skin-sam .yui-console .yui-console-content {
            font-size: 10px;
            width: 32em;
        }
        .yui-skin-sam .yui-console .yui-console-bd {
            height: 50em;
        }
        .yui-skin-sam .yui-console-entry-pass .yui-console-entry-cat {
            background: #070;
            color: #fff;
        }
        .yui-skin-sam .yui-console-entry-fail .yui-console-entry-cat {
            background: #700;
            color: #fff;
        }
        .highlight-example {
            display: inline;
            float: left;
            width: 650px;
        }
        .highlight-example h2 {
            display: none;
        }
    </style>
</head>
<body class="yui-skin-sam">
<h1>Tests</h1>
<div id="testbed"></div>

<script type="text/javascript" src="/build/yui/yui.js"></script>
<script type="text/javascript">
YUI({
    base : '/build/',
    filter : 'debug',
    useBrowserConsole : false,
    logInclude : { TestRunner: true }
}).use('test','console','stylesheet',function (Y) {

var d = document,
    testbed = Y.DOM.byId('testbed'),
    suite,
    StyleAssert = {
        normalizeColor : function (c) {
            return c && (c+'').
                replace(/#([0-9a-f])([0-9a-f])([0-9a-f])(?![0-9a-f])/i,'#$1$1$2$2$3$3').
                replace(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})(?![0-9a-f])/i,
                    function (m,r,g,b) {
                        return "rgb("+parseInt(r,16)+", "+
                                      parseInt(g,16)+", "+
                                      parseInt(b,16)+")" });
        },
        areEqual : function (a,b,msg) {
            var aa = StyleAssert.normalizeColor(a),
                bb = StyleAssert.normalizeColor(b);
            if (aa !== bb) {
                throw new Y.Assert.ComparisonFailure(
                    Y.Assert._formatMessage(msg, "Values should be equal."), a, b);
            }
        }
    };

function add(el,tag,conf) {
    var child = d.createElement(tag);
    if (conf) {
        Y.mix(child,conf);
    }
    return el.appendChild(child);
}
function getNodeCount (tag,root) {
    return (root||d).getElementsByTagName(tag||'*').length;
}

suite = new Y.Test.Suite("Tests");

suite.add(new Y.Test.Case({
    name : "Test &lt;style&gt; node creation",

    setUp : function () {
        this.styleNodeCount = getNodeCount('style');
        this.linkNodeCount  = getNodeCount('link');

        this.testNode = add(testbed,'div',{id:'target'});
    },

    tearDown : function () {
        testbed.innerHTML + '';
    },

    test_createNew : function () {
        var s = new Y.StyleSheet('test');

        Y.Assert.areSame(this.styleNodeCount + 1, getNodeCount('style'));
    },

    test_createFromExistingStyle : function () {
        var s = new Y.StyleSheet('styleblock');

        Y.Assert.areSame(this.styleNodeCount, getNodeCount('style'));
    },

    test_createFromExistingLink : function () {
        var s = new Y.StyleSheet('locallink');

        Y.Assert.areSame(this.styleNodeCount, getNodeCount('style'),"style");
        Y.Assert.areSame(this.linkNodeCount, getNodeCount('link'),"link");
    },

    test_createEntireSheet : function () {
        var s = new Y.StyleSheet("#target { font-weight: bold; }");

        Y.Assert.areSame(this.styleNodeCount + 1, getNodeCount('style'));

        Y.Assert.areEqual('bold',Y.DOM.getStyle(this.testNode,'font-weight'));
    },

    test_gettingFromCache : function () {
        // By name
        var a = new Y.StyleSheet('test'),
            b = new Y.StyleSheet('test');

        Y.Assert.areSame(this.styleNodeCount, getNodeCount('style'));
        Y.Assert.areSame(a,b,"From cache by name");

        // By generated id
        b = new Y.StyleSheet(a.getId());

        Y.Assert.areSame(this.styleNodeCount, getNodeCount('style'));
        Y.Assert.areSame(a,b,"From cache by yuiSSID");

        // By node
        a = new Y.StyleSheet(d.getElementById('styleblock'));
        b = new Y.StyleSheet('styleblock');

        Y.Assert.areSame(this.styleNodeCount, getNodeCount('style'));
        Y.Assert.areSame(a,b,"From cache by node vs id");
    }
}));

suite.add(new Y.Test.Case({
    name : "Test set",

    setUp : function () {
        this.stylesheet = new Y.StyleSheet('test');

        this.testNode = add(testbed,'div',{
            id:'target',
            innerHTML:'<p>1</p><p>2</p><pre>pre</pre>'
        });
    },
    tearDown : function () {
        testbed.innerHTML = '';
        this.stylesheet.unset('#target');
        this.stylesheet.unset('#target p');
        this.stylesheet.unset('garbage in');
        this.stylesheet.unset('#target p, #target pre');
    },

    test_addSimpleSelector : function () {
        this.stylesheet.set('#target',{
            color           : '#123456',
            backgroundColor : '#eef',
            border          : '1px solid #ccc'
        });

        StyleAssert.areEqual('#123456',
                        Y.DOM.getStyle(this.testNode,'color'),
                        "color");
        StyleAssert.areEqual('#eef',
                        Y.DOM.getStyle(this.testNode,'backgroundColor'),
                        "backgroundColor");
        StyleAssert.areEqual('1px',
                        Y.DOM.getStyle(this.testNode,'borderLeftWidth'),
                        "border");
    },

    test_descendantSelector : function () {
        var before = Y.DOM.getStyle(
                        testbed.getElementsByTagName('pre')[0],'textAlign');

        this.stylesheet.set('#target p', { textAlign: 'right' });

        StyleAssert.areEqual('right',
                        Y.DOM.getStyle(
                            testbed.getElementsByTagName('p')[0],'textAlign'),
                        "#target p { text-align: right; }");

        StyleAssert.areEqual(before,
                        Y.DOM.getStyle(
                            testbed.getElementsByTagName('pre')[0],'textAlign'),
                        "#target pre should not be set (maybe auto/inherit?)");
    },

    test_garbageIn : function () {
        var x = d.getElementsByTagName('style'),i,
            id = this.stylesheet.getId(),
            before = 0;

        for (i = x.length - 1; i >= 0; --i) {
            if (Y.stamp(x[i]) === id) {
                x = x[i].sheet || x[i].styleSheet;
                before = (x.cssRules || x.rules).length;
                break;
            }
        }

        this.stylesheet.set('garbage in', { foo : 'bar' });

        Y.Assert.areEqual(before + 1, (x.cssRules||x.rules).length, "garbage rule not added");

        this.stylesheet.set('^*Q$(FUY(Q[{}_-',{ 'f*^$%{]@! \n\t' : 'boom' });

        Y.Assert.areEqual(before + 1, (x.cssRules||x.rules).length, "syntax error rule added");
    },

    test_commaSelector : function () {
        this.stylesheet.set('#target p, #target pre', { textAlign: 'right' });

        StyleAssert.areEqual('right',
                        Y.DOM.getStyle(
                            testbed.getElementsByTagName('p')[0],'textAlign'),
                        "#target p, #target pre { text-align: right }");

        StyleAssert.areEqual('right',
                        Y.DOM.getStyle(
                            testbed.getElementsByTagName('pre')[0],'textAlign'),
                        "#target p, #target pre { text-align: right }");
    }
}));

suite.add(new Y.Test.Case({
    name : "Test Enable/Disable sheet",

    setUp : function () {
        this.stylesheet = new Y.StyleSheet('test');

        this.stylesheet.enable();

        this.testNode = add(testbed,'div',{id:'target'});

        this.before = {
            color           : Y.DOM.getStyle(this.testNode,'color'),
            backgroundColor : Y.DOM.getStyle(this.testNode,'backgroundColor'),
            borderLeftWidth : Y.DOM.getStyle(this.testNode,'borderLeftWidth')
        };

    },

    tearDown : function () {
        testbed.innerHTML = '';
        this.stylesheet.enable();
        this.stylesheet.unset('#target');
        this.stylesheet.unset('#target p');
    },

    test_disableSheet : function () {
        this.stylesheet.set('#target',{
            color           : '#123456',
            backgroundColor : '#eef',
            border          : '1px solid #ccc'
        });

        StyleAssert.areEqual('#123456',
                        Y.DOM.getStyle(this.testNode,'color'),
                        "color (enabled)");
        StyleAssert.areEqual('#eef',
                        Y.DOM.getStyle(this.testNode,'backgroundColor'),
                        "backgroundColor (enabled)");
        StyleAssert.areEqual('1px',
                        Y.DOM.getStyle(this.testNode,'borderLeftWidth'),
                        "border (enabled)");

        this.stylesheet.disable();

        StyleAssert.areEqual(this.before.color,
                        Y.DOM.getStyle(this.testNode,'color'),
                        "color (disabled)");
        StyleAssert.areEqual(this.before.backgroundColor,
                        Y.DOM.getStyle(this.testNode,'backgroundColor'),
                        "backgroundColor (disabled)");
        StyleAssert.areEqual(this.before.borderLeftWidth,
                        Y.DOM.getStyle(this.testNode,'borderLeftWidth'),
                        "border (disabled)");
    },

    test_enableSheet : function () {
        this.stylesheet.disable();

        this.stylesheet.set('#target',{
            color           : '#123456',
            backgroundColor : '#eef',
            border          : '1px solid #ccc'
        });

        StyleAssert.areEqual(this.before.color,
                        Y.DOM.getStyle(this.testNode,'color'),
                        "color (disabled)");
        StyleAssert.areEqual(this.before.backgroundColor,
                        Y.DOM.getStyle(this.testNode,'backgroundColor'),
                        "backgroundColor (disabled)");
        StyleAssert.areEqual(this.before.borderLeftWidth,
                        Y.DOM.getStyle(this.testNode,'borderLeftWidth'),
                        "border (disabled)");

        this.stylesheet.enable();

        StyleAssert.areEqual('#123456',
                        Y.DOM.getStyle(this.testNode,'color'),
                        "color (enabled)");
        StyleAssert.areEqual('#eef',
                        Y.DOM.getStyle(this.testNode,'backgroundColor'),
                        "backgroundColor (enabled)");
        StyleAssert.areEqual('1px',
                        Y.DOM.getStyle(this.testNode,'borderLeftWidth'),
                        "border (enabled)");
    }
}));

suite.add(new Y.Test.Case({
    name : "Test unset",

    setUp : function () {
        this.stylesheet = new Y.StyleSheet('test');

        this.testNode = add(testbed,'div',{
            id: 'target',
            innerHTML: 'This is a test'
        });

        this.before = {
            color           : Y.DOM.getStyle(this.testNode,'color'),
            backgroundColor : Y.DOM.getStyle(this.testNode,'backgroundColor'),
            borderLeftWidth : Y.DOM.getStyle(this.testNode,'borderLeftWidth'),
            textAlign       : Y.DOM.getStyle(this.testNode,'textAlign')
        };

    },
    tearDown : function () {
        testbed.innerHTML = '';
        this.stylesheet.unset('#target');
        this.stylesheet.unset('#target p');
    },

    test_unset : function () {
        this.stylesheet.set('#target',{
            color           : '#f00',
            backgroundColor : '#eef',
            border          : '1px solid #ccc'
        });

        StyleAssert.areEqual('#f00',
                        Y.DOM.getStyle(this.testNode,'color'),
                        "color (before unset)");
        StyleAssert.areEqual('#eef',
                        Y.DOM.getStyle(this.testNode,'backgroundColor'),
                        "backgroundColor (before unset)");
        StyleAssert.areEqual('1px',
                        Y.DOM.getStyle(this.testNode,'borderLeftWidth'),
                        "border (before unset)");

        this.stylesheet.unset('#target', 'color');

        StyleAssert.areEqual(this.before.color,
                        Y.DOM.getStyle(this.testNode,'color'),
                        "color (after unset)");

        this.stylesheet.unset('#target', ['backgroundColor','border']);

        StyleAssert.areEqual(this.before.backgroundColor,
                        Y.DOM.getStyle(this.testNode,'backgroundColor'),
                        "backgroundColor (after unset)");
        StyleAssert.areEqual(this.before.borderLeftWidth,
                        Y.DOM.getStyle(this.testNode,'borderLeftWidth'),
                        "border (after unset)");
    },

    test_removeRule : function () {
        this.stylesheet.set('#target', { textAlign: 'right' });

        StyleAssert.areEqual('right',
                        Y.DOM.getStyle(this.testNode,'textAlign'),
                        "#target { text-align: right; }");

        this.stylesheet.unset('#target');
        StyleAssert.areEqual(this.before.textAlign,
                        Y.DOM.getStyle(this.testNode,'textAlign'),
                        "#target text-align still in place");
    }
}));

suite.add(new Y.Test.Case({
    name : "Test float/opacity",

    setUp : function () {
        this.stylesheet = new Y.StyleSheet('test');

        if (!Y.DOM.byId('target')) {
            this.testNode = add(testbed,'div',{
                id:'target',
                innerHTML:'<p id="p1">1</p><p id="p2">2</p><p id="p3">3</p>'
            });
        }
    },

    test_float : function () {
        this.stylesheet.set('#target',{
                            overflow: 'hidden',
                            background: '#000',
                            zoom: 1
                        }).
                        set('#target p',{
                            height:'100px',
                            width:'100px',
                            border: '5px solid #ccc',
                            background: '#fff',
                            margin: '1em'
                        }).
                        set('#p1',{ float: 'left' }).
                        set('#p2',{ cssFloat: 'left' }).
                        set('#p3',{ styleFloat: 'left' });

        Y.Assert.areEqual('left', Y.DOM.getStyle('p1','float'));
        Y.Assert.areEqual('left', Y.DOM.getStyle('p2','float'));
        Y.Assert.areEqual('left', Y.DOM.getStyle('p3','float'));
    },

    test_opacity : function () {
        this.stylesheet.set('#p1',{ opacity: .5 }).
                        set('#p2',{ opacity: .2 }).
                        set('#p3',{ opacity: 1 });

        Y.Assert.areEqual(0.5,Y.DOM.getStyle('p1','opacity'));
        Y.Assert.areEqual(0.2,Y.DOM.getStyle('p2','opacity'));
        Y.Assert.areEqual(1,Y.DOM.getStyle('p3','opacity'));
    }
}));

var yconsole = new Y.Console({
    contentBox:"log",
    newestOnTop: false
}).render();

//yconsole.hideCategory('info');
yconsole.printLogEntry = function (m) {
    if (m.category === 'section') {
        this._addToConsole(Y.Node.create("<h3>"+m.message+"</h3>"));
        return this;
    } else if (m.category === "break") {
        this._addToConsole(Y.Node.create("<br>"));
        return this;
    } else if (m.category === "info") {
        return this;
    } else {
        return Y.Console.prototype.printLogEntry.call(this,m);
    }
};

Y.log("Tests","section","TestRunner");

Y.Test.Runner.add(suite);

Y.Test.Runner.run();

});
</script>
<script type="text/javascript" src="/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript" src="/assets/dpSyntaxHighlightExample.js"></script>
</body>
</html>