dom/tests/selector_new.html

	selector_new.html revision 7289c7e9304aade9ca236958a0a79812e59ef7a9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Selector Test Suite</title>

<script type="text/javascript" src="/build/yui/yui.js"></script>
<script>
YUI({ base: '/build/', filter: 'raw' }).use('console', 'test', function(Y) {
    var testSuite = new Y.Test.Suite("Selector Test Suite"),
        doc = document,
        $ = Y.Selector.query;

    Y.config.useBrowserConsole = false;

    testSuite.runTest = function(expected, selector, root, firstOnly) {
        expected = expected || [];

        var actual = $(selector, root, firstOnly),
            actualLength = (actual && actual.length) ? actual.length : 0;
            msg = 'expected: ' + expected.length + ', actual: ' + actualLength;

        if (firstOnly) {
            expected = expected[0] ? expected[0] : null;
            Y.Assert.areEqual(expected, actual, msg);
        } else {
            Y.ArrayAssert.itemsAreEqual(expected, actual, msg);
        }
    };

    testSuite.css1DocAllCases = {name: 'CSS1 Document QueryAll'};
    testSuite.css1BodyAllCases = {name: 'CSS1 Body QueryAll'};
    testSuite.css1ElementAllCases = {name: 'CSS1 Element QueryAll'};
    testSuite.css1DocCases = {name: 'CSS1 Document Query'};
    testSuite.css1BodyCases = {name: 'CSS1 Body Query'};
    testSuite.css1ElementCases = {name: 'CSS1 Element Query'};

    testSuite.css1Cases = {
        nullInput: function(root, firstOnly) {
            var q = '';
            testSuite.runTest([], q, root, firstOnly);

            q = null;
            testSuite.runTest([], q, root, firstOnly);

            q = null;
            testSuite.runTest([], q, null, firstOnly);
        },

        tag: {
            'h1': doc.getElementsByTagName('h1'),
            'h2': doc.getElementsByTagName('h2'),
            'fake': []
        },

        className: {
            '.h2': doc.getElementsByTagName('h2'),
            '.heading': function() {
                return Y.DOM.byTag('*', doc.body, function(node) {
                    return Y.DOM.hasClass(node, 'heading');
                });
            },

            '.fake-class': []
        },

        id: {
            '#only-h1': doc.getElementsByTagName('h1'),
            '#fake-id': []
        },

        combo: {
            'h1.heading': function() {
                return Y.DOM.byTag('h1', doc.body, function(node) {
                    return Y.DOM.hasClass(node, 'heading');
                });

            },

            'h1#only-h1': doc.getElementsByTagName('h1'),
            '#only-h1.heading': doc.getElementsByTagName('h1'),
            'h1#only-h1.heading': doc.getElementsByTagName('h1'),
            '.heading#only-h1': doc.getElementsByTagName('h1'),
            '.heading.first-child': doc.getElementsByTagName('h1'),
            'div.heading': [],
            'h1.heading.first-child': doc.getElementsByTagName('h1'),
            'faketag.heading-of-body.first-child': [],
            'h1.heading#fake-id': [],
            'h1.fake-class#only-h1': [],
            'faketag.fake-class#only-h1': []
        },

        group: {
            'h2, h2': doc.getElementsByTagName('h2'),

            'h1, h2': function() {
                return Y.DOM.byTag('*', doc.body, function(node) {
                    return (node.tagName === 'H1' || node.tagName === 'H2');
                });
            },

            'h1, .heading': function() {
                return Y.DOM.byTag('*', doc.body, function(node) {
                    return (node.tagName === 'H1' || Y.DOM.hasClass(node, 'heading'));
                });
            },

            'h2, h1': function() {
                return Y.DOM.byTag('*', doc.body, function(node) {
                    return (node.tagName === 'H2' || node.tagName === 'H1');
                });
            },

            'h2.heading, h1.heading': function() {
                return Y.DOM.byTag('*', doc.body, function(node) {
                    return (node.tagName === 'H2' || node.tagName === 'H1');
                });
            },

            'h1, ': doc.getElementsByTagName('h1')
        },

        complex: {
            'h1 em': Y.DOM.byId('only-h1').getElementsByTagName('em'),
            'div div h1': doc.getElementsByTagName('h1'),
            '#first-child-of-body div h1': doc.getElementsByTagName('h1'),
            'div h1': doc.getElementsByTagName('h1'),
            '.first-child h1': doc.getElementsByTagName('h1'),
            'body .first-child h1': doc.getElementsByTagName('h1'),
            'html .first-child h1': doc.getElementsByTagName('h1'),
            'foo .first-child h1': [],
            'html #only-body #only-h1 em': Y.DOM.byId('only-h1').getElementsByTagName('em'),
            '#only-body h1': doc.getElementsByTagName('h1')
        }
    };

    //create the console
    testSuite.reader = new Y.Console({
        node: '#test-logger',
        newestOnTop : false
    }).render();

    Y.each(testSuite.css1Cases, function(test, testCase) {
        testCase = 'test' + testCase.charAt(0).toUpperCase() + testCase.substr(1);
        if (typeof test === 'function') {
            testSuite.css1DocCases[testCase] = function() {
                test(doc);
            };

            testSuite.css1BodyCases[testCase] = function() {
                test(doc.body);
            };

            testSuite.css1ElementCases[testCase] = function() {
                test(Y.DOM.byId('test-root'));
            };

            testSuite.css1DocAllCases[testCase] = function() {
                test(doc, true);
            };

            testSuite.css1BodyAllCases[testCase] = function() {
                test(doc.body, true);
            };

            testSuite.css1ElementAllCases[testCase] = function() {
                test(Y.DOM.byId('test-root'), true);
            };
        } else {
            Y.each(test, function(fn, query) {
                var expected = (fn.item || fn.slice) ? fn : fn(query);
                testCase = 'test: ' + query;

                testSuite.css1DocCases[testCase] = function() {
                    testSuite.runTest(expected, query, doc, true);
                };

                testSuite.css1BodyCases[testCase] = function() {
                    testSuite.runTest(expected, query, doc.body, true);
                };

                testSuite.css1ElementCases[testCase] = function() {
                    testSuite.runTest(expected, query, Y.DOM.byId('test-root'), true);
                };

                testSuite.css1DocAllCases[testCase] = function() {
                    testSuite.runTest(expected, query, doc);
                };

                testSuite.css1BodyAllCases[testCase] = function() {
                    testSuite.runTest(expected, query, doc.body);
                };

                testSuite.css1ElementAllCases[testCase] = function() {
                    testSuite.runTest(expected, query, Y.DOM.byId('test-root'));
                };
            });
        }
    });

    testSuite.add(new Y.Test.Case(testSuite.css1DocAllCases));
    testSuite.add(new Y.Test.Case(testSuite.css1BodyAllCases));
    testSuite.add(new Y.Test.Case(testSuite.css1ElementAllCases));

    testSuite.add(new Y.Test.Case(testSuite.css1DocCases));
    testSuite.add(new Y.Test.Case(testSuite.css1BodyCases));
    testSuite.add(new Y.Test.Case(testSuite.css1ElementCases));

    Y.Test.Runner.add(testSuite);
    Y.Test.Runner.run();
});
</script>
</head>
<body class="yui-skin-sam" id="only-body">

<div id="first-child-of-body">
    <div class="first-child" id="test-root">
        <h1 class="heading h1 first-child" id="only-h1"><em>Selector Test Suite</em></h1>
        <h2 class="heading h2">Testing 1</h2>
        <h2 class="heading h2">Testing 2</h2>
        <h2 class="heading h2">Testing 3</h2>
    </div>
</div>

<style type="text/css">
/* TODO: how to keep in head and have override dynamic stylesheets? */
.yui-skin-sam .yui-console-bd {
    height: auto !important;
}

.yui-console-entry-src {
    display: none;
}

.yui-console-entry-pass .yui-console-entry-cat {
    background-color: green !important;
}

.yui-console-entry-fail .yui-console-entry-cat {
    background-color: red !important;
}

.yui-skin-sam .yui-console-entry {
    padding: 0 !important;
}

.yui-skin-sam .yui-console-entry .yui-console-entry-content {
    margin:0 !important;
}
</style>
<div id="test-logger" class="last-child child-of-body"></div>
</body>
</html>