dom/tests/dom.html

	dom.html revision b1aa31eba4fc40aa0b3fad3cf4efbac856b38705
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn<html>
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn<head>
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn<title>DOM Test Suite</title>
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn<script type="text/javascript" src="/build/yui/yui-min.js"></script>
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn<script type="text/javascript">
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn    YUI({ base: '/build/', filter: 'raw'}).use('dom', 'dom-deprecated', 'console', 'test', function(Y) {
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn        var Assert = Y.Assert,
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn            ArrayAssert = Y.ArrayAssert,
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn            suite = new Y.Test.Suite("DOM Test Suite");
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn        window.Y = Y; // export Y global for Selenium
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn        new Y.Console({ height: '50em' }).render();
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn        Y.Test.Runner.setName('DOM Tests');
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn        var doc = document.getElementById('doc'),
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn            hd = document.getElementById('hd'),
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn            bd = document.getElementById('bd'),
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn            ft = document.getElementById('ft'),
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn            mod1 = document.getElementById('mod1'),
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn            mod2 = document.getElementById('mod2'),
a7c27357b33d726a326a11e1e72f68e1546b994aSerge Hallyn            h1 = hd.getElementsByTagName('h1')[0],
            main = document.getElementById('main'),
            lorem = document.getElementById('lorem-ipsum'),
            search = document.getElementById('search'),
            search_fields = document.getElementById('search-fields'),
            search_p = document.getElementById('search-p'),
            foo = document.getElementById('foo'),
            tmp = document.createElement('div');

        suite.add( new Y.Test.Case({
            name: 'DOM',

            test_byId: function() {
                var inputs = document.getElementById('test-names').getElementsByTagName('input');

                Assert.areEqual(doc, Y.DOM.byId('doc'), 'byId("doc")');
                Assert.isNull(Y.DOM.byId('fake-id'), 'byId("fake-id")');
                Assert.isNull(Y.DOM.byId(null), 'byId(null)');
                Assert.isNull(Y.DOM.byId(), 'byId()');

                Assert.areEqual(
                    inputs[0],
                    Y.DOM.byId('test-name-id1'),
                    "Y.DOM.byId('test-name-id1')"
                );

                Assert.areEqual(
                    inputs[1],
                    Y.DOM.byId('test-name-id2'),
                    "Y.DOM.byId('test-name-id2')"
                );
            },

            test_getText: function() {
                Assert.areEqual(h1.innerHTML, Y.DOM.getText(hd), 'getText("hd")');
                Assert.areEqual('', Y.DOM.getText(tmp), 'getText(tmp)');
                Assert.areEqual('', Y.DOM.getText(null), 'getText(null)');
                Assert.areEqual('', Y.DOM.getText(), 'getText()');
            },

            test_setText: function() {
                var node = document.createElement('div'),
                    content = 'testing text content';

                document.body.appendChild(node);
                Y.DOM.setText(node, content);
                Assert.areEqual(content, Y.DOM.getText(node, content), 'setText("' + content + '")');

                content = '<div>testing text content</div>';
                Y.DOM.setText(node, content);
                Assert.areEqual(content, Y.DOM.getText(node, content), 'setText("' + content + '")');

                content = '   testing     text      content    ';
                Y.DOM.setText(node, content);
                Assert.areEqual(content, Y.DOM.getText(node, content), 'setText("' + content + '")');
            },

            test_children: function() {
                ArrayAssert.itemsAreEqual([], Y.DOM.children(tmp), 'children(tmp)');
                ArrayAssert.itemsAreEqual([], Y.DOM.children(null), 'children(null)');
                ArrayAssert.itemsAreEqual([], Y.DOM.children(), 'children()');
                ArrayAssert.itemsAreEqual([hd, bd, ft], Y.DOM.children(doc), 'children(doc)');

/*
                ArrayAssert.itemsAreEqual([mod1, mod2], Y.DOM.children(main, function(node) {
                    return node.className === 'mod';
                }), 'children(main, fn)');
*/
            },

            test_getStyle: function() {
                Assert.areEqual('left',
                        Y.DOM.getStyle(foo, 'float'), 'getStyle(foo, "float")');

                doc.style.marginBottom = '10px';

                Assert.areEqual('10px',
                        Y.DOM.getStyle(doc, 'marginBottom'), 'doc, marginBottom');

                Assert.areEqual('static',
                        Y.DOM.getStyle(doc, 'position'), 'doc, position');
            },

            test_setStyle: function() {
                Y.DOM.setStyle(ft, 'opacity', 0.5);
                Assert.areEqual(Y.DOM.getStyle(ft, 'opacity'),
                        0.5, "Y.DOM.getStyle(ft, 'opacity')");

                Y.DOM.setStyle(main, 'float', 'none');
                Assert.areEqual('none', Y.DOM.getStyle(main, 'float'),
                        'wrong style returned');

                try {
                    Y.DOM.setStyle(ft, 'width', '-1');
                } catch(e) {
                    Assert.fail('setStyle invalid width error');
                }

                try {
                    Y.DOM.setStyle(ft, 'height', '-1');
                } catch(e) {
                    Assert.fail('setStyle invalid height error');
                }

                Y.DOM.setStyle(ft, 'display', 'none');
                Assert.areEqual('none', Y.DOM.getStyle(ft, 'display'), "Y.DOM.setStyle(ft, 'display', 'none')");

                Y.DOM.setStyle(ft, 'display', null);
                Assert.areEqual('block', Y.DOM.getStyle(ft, 'display'), "Y.DOM.setStyle(ft, 'display', null)");

                Y.DOM.setStyle(ft, 'display', 'none');
                Y.DOM.setStyle(ft, 'display', '');
                Assert.areEqual('block', Y.DOM.getStyle(ft, 'display'), "Y.DOM.setStyle(ft, 'display', '')");

                Y.DOM.setStyle(ft, 'opacity', null);
                Assert.areEqual(0.75, Y.DOM.getStyle(ft, 'opacity'), "Y.DOM.setStyle(ft, 'opacity', null)");
                Y.DOM.setStyle(ft, 'opacity', 0);
                Y.DOM.setStyle(ft, 'opacity', '');
                Assert.areEqual(0.75, Y.DOM.getStyle(ft, 'opacity'), "Y.DOM.setStyle(ft, 'opacity', '')");

                Y.DOM.setStyle(ft, 'height', '100');
                Assert.areEqual('100px', Y.DOM.getStyle(ft, 'height'),
                    "Y.DOM.setStyle(ft, 'height', '100')");

                try {
                    Y.DOM.setStyle(ft, 'height', '');
                } catch(e) {
                    Assert.fail('error thrown setting height: ""');
                }

                Assert.areEqual('200px', Y.DOM.getStyle(ft, 'height'),
                    "Y.DOM.setStyle(ft, 'height', '')");

                Y.DOM.setStyle(ft, 'height', '100');
                Y.DOM.setStyle(ft, 'height');
                Assert.areEqual('100px', Y.DOM.getStyle(ft, 'height'),
                    "Y.DOM.setStyle(ft, 'height')");

                Y.DOM.setStyle(ft, 'height', null);
                Assert.areEqual('200px', Y.DOM.getStyle(ft, 'height'),
                    "Y.DOM.setStyle(ft, 'height', null)");

            },

                test_styleDefaultUnit: function() {
                    var node = Y.DOM.byId('ft'),
                        value = '20px',
                        attr = 'width',
                        num = 20;

                    attr = 'borderTopWidth';
                    Y.DOM.setStyle(node, attr, num);
                    Assert.areEqual(value, Y.DOM.getStyle(node, attr), attr + ': ' + num);

                    attr = 'opacity';
                    value = 0.5;
                    num = 0.5;
                    Y.DOM.setStyle(node, attr, num);
                    Assert.areEqual(value, Y.DOM.getStyle(node, attr), attr + ': ' + num);

                    attr = 'borderTopWidth';
                    value = '5px';
                    num = 5;
                    Y.DOM.setStyle(node, attr, num);
                    Assert.areEqual(value, Y.DOM.getStyle(node, attr), attr + ': ' + num);

                    attr = 'paddingTop';
                    num = '5';
                    value = '5px';
                    Y.DOM.setStyle(node, attr, num);
                    Assert.areEqual(value, Y.DOM.getStyle(node, attr), attr + ': ' + num);
                },

            test_create: function() {
                var html = '';
                var el = Y.DOM.create(html);
                Assert.isNull(el, html);

                var html = null;
                var el = Y.DOM.create(html);
                Assert.isNull(el, html);

                var html = '<div>fresh</div>';
                var el = Y.DOM.create(html);
                Assert.areEqual('DIV', el.tagName, html);

                html = '<input type="submit">';
                el = Y.DOM.create(html);
                Assert.areEqual('INPUT', el.tagName, html);

                html = '<input name="test-input" type="radio">';
                el = Y.DOM.create(html);
                Assert.areEqual('radio', el.type, html);
                Assert.areEqual('test-input', el.name, html);

                html = '<form></form>';
                el = Y.DOM.create(html);
                Assert.areEqual('FORM', el.tagName, html);

                html = '<label>fresh</label>';
                el = Y.DOM.create(html);
                Assert.areEqual('LABEL', el.tagName, html);

                html = '<li>fresh</li>';
                el = Y.DOM.create(html);
                Assert.areEqual('LI', el.tagName, html);

                html = '<ul><li>fresh</li></ul>';
                el = Y.DOM.create(html);
                Assert.areEqual(1, el.childNodes.length, html);

                html = '<tr></tr>';
                el = Y.DOM.create(html);
                Assert.areEqual('TR', el.tagName, html);

                html = '<td>fresh</td>';
                el = Y.DOM.create(html);
                Assert.areEqual('TD', el.tagName, html);

                html = '<th>fresh</th>';
                el = Y.DOM.create(html);
                Assert.areEqual('TH', el.tagName, html);

                html = '<thead></thead>';
                el = Y.DOM.create(html);
                Assert.areEqual('THEAD', el.tagName, html);

                html = '<caption>fresh</caption>';
                el = Y.DOM.create(html);
                Assert.areEqual('CAPTION', el.tagName, html);

                /*
                html = '<col></col>';
                el = Y.DOM.create(html);
                Assert.areEqual('COL', el.tagName, html);
                */

                html = '<colgroup></colgroup>';
                el = Y.DOM.create(html);
                Assert.areEqual('COLGROUP', el.tagName, html);

                html = '<colgroup><col><col></colgroup>';
                el = Y.DOM.create(html);
                Assert.areEqual('COLGROUP', el.tagName, html);

                html = '<button>fresh</button>';
                el = Y.DOM.create(html);
                Assert.areEqual('BUTTON', el.tagName, html);

                html = '<optgroup></optgroup>';
                el = Y.DOM.create(html);
                Assert.areEqual('OPTGROUP', el.tagName, html);

                html = '<optgroup><option>foo</option></optgroup>';
                el = Y.DOM.create(html);
                Assert.areEqual('OPTGROUP', el.tagName, html);

                html = '<dd>fresh</dd>';
                el = Y.DOM.create(html);
                Assert.areEqual('DD', el.tagName, html);

                html = '<dt>fresh</dt>';
                el = Y.DOM.create(html);
                Assert.areEqual('DT', el.tagName, html);

                html = '<select><option>foo</option><option>bar</option></select>';
                el = Y.DOM.create(html);
                Assert.areEqual('SELECT', el.tagName, html);
                Assert.areEqual(2, el.childNodes.length, html);

                html = '<table><tr><td>foo</td><td>bar</td></tr></table>';
                el = Y.DOM.create(html);
                Assert.areEqual('TABLE', el.tagName, html);
                Assert.areEqual(1, el.childNodes.length, html);

                html = '<tr><td>foo</td><td>bar</td></tr>';
                el = Y.DOM.create(html);
                Assert.areEqual('TR', el.tagName, html);
                Assert.areEqual(2, el.childNodes.length, html);

                html = '<iframe src="http://search.yahoo.com/" id="yui-iframetest"></iframe>';
                el = Y.DOM.create(html);
                Assert.areEqual('http://search.yahoo.com/', el.src, html);
                Assert.areEqual('yui-iframetest', el.id, html);

/*
                html = '<scr' + 'ipt src="http://search.yahoo.com/"></scr' + 'ipt>';
                el = Y.DOM.create(html);
                Assert.areEqual('SCRIPT', el.tagName, html);
                Assert.areEqual('http://search.yahoo.com/', el.src, html);

                html =  '<link href="http://search.yahoo.com/" rel="stylesheet">';
                el = Y.DOM.create(html);
                Assert.areEqual('LINK', el.tagName, html);
                Assert.areEqual('http://search.yahoo.com/', el.href, html);
                Assert.areEqual(el.rel, 'stylesheet', html);

*/
                html = '<option>fresh</option>';
                el = Y.DOM.create(html);
                Assert.areEqual('OPTION', el.tagName, html);

                html = '<legend>fresh</legend>';
                el = Y.DOM.create(html);
                Assert.areEqual('LEGEND', el.tagName, html);

                html = '<fieldset>fresh</fieldset>';
                el = Y.DOM.create(html);
                Assert.areEqual('FIELDSET', el.tagName, html);

                html ='<div id="default-e34f85" class="mod view_default"> <div id="default-e34f85-hd" class="hd"><h2>Yahoo! Mail Preview</h2> <span class="mod-button-wrapper"> </span> </div> <div id="default-e34f85-bd" class="bd type_mail type_mail_default"> <p class="divider-b small text-right"><a href="http://us.lrd.yahoo.com/_ylt=AhQqDwn_HdUEqFrWLI8HTGP1cSkA/SIG=10rfos93v/**http%3A//mail.yahoo.com/">Go to Yahoo! Mail</a></p> <img src="http://l.yimg.com/a/i/ww/met/mail_promo_060608.gif" alt="Yahoo! Mail avatar shows the possibilities of email" class="promo" width="300px"> <p class="x-large sign-in-link"><a href="https://us.lrd.yahoo.com/_ylt=AnGramz3WfSHqLcCWa92OGj1cSkA/SIG=12tb7s4o8/**https%3A//login.yahoo.com/config/mail%3F.intl=us%26.src=ym%26.done=http%3A//mail.yahoo.com">Sign in</a> to preview your email here.</p> <p class="med-small">The all-new Yahoo! Mail:<br>More ways to connect with everyone.</p> </div></div>';
                el = Y.DOM.create(html);
                Assert.areEqual('default-e34f85', el.id, html);

                html = '<thead><tr><td><table><tbody><tr><td>fresh</td></tr></tbody></table></td></tr></thead>';
                el = Y.DOM.create(html);
                Assert.areEqual('THEAD', el.tagName, html);


                html = '<li><a href=""></a></li>';
                el = Y.DOM.create(html);
                Assert.areEqual('A', el.firstChild.tagName, html);

                html = '<option>foo</option>';
                el = Y.DOM.create(html);
                document.getElementById('test-select').appendChild(el);
                Assert.isFalse(el.selected, 'el.selected(false)');

                html = '<option selected>foo</option>';
                el = Y.DOM.create(html);
                document.getElementById('test-select').appendChild(el);
                Assert.isTrue(el.selected, 'el.selected(true)');

                // trim leading space
                html = ' <div>foo</div>';
                el = Y.DOM.create(html);
                Assert.isTrue(el.tagName === 'DIV', html);

                html = '<iframe border="0" frameBorder="0" marginWidth="0" marginHeight="0" leftMargin="0" topMargin="0" allowTransparency="true" width="100%" height="99%"></iframe>';
                el = Y.DOM.create(html);
                Assert.areEqual(document, el.ownerDocument, html);

/*
                html = '<thead><tr><td><table><thead></thead><tbody><tr><td>fresh</td></tr></tbody></table></td></tr></thead>';
                el = Y.DOM.create(html);
                Assert.areEqual('THEAD', el.tagName, html);
*/

            },

            test_createNodes: function() {
                var html = '<div>foo</div><div id="tmp-bar">bar</div><div>baz</div>';
                var el = Y.DOM.create(html);
                Assert.areEqual(3, el.childNodes.length, html);
                Assert.areEqual('tmp-bar', el.childNodes[1].id, html);
                Assert.areEqual('foo', el.childNodes[0].innerHTML, html);

                html = '<option>foo</option><option id="tmp-bar">bar</option><option>baz</option>';
                el = Y.DOM.create(html);
                Assert.areEqual(3, el.childNodes.length, html);
                Assert.areEqual('tmp-bar', el.childNodes[1].id, html);

                html = '<option>foo</option><option selected>bar</option><option>baz</option>';
                el = Y.DOM.create(html);
                Assert.areEqual(3, el.childNodes.length, html);
                Assert.isTrue(el.childNodes[1].selected, html);

                html = '<td>foo</td><td id="tmp-bar">bar</td><td>baz</td>';
                el = Y.DOM.create(html);
                Assert.areEqual(3, el.childNodes.length, html);
                Assert.areEqual('tmp-bar', el.childNodes[1].id, html);

                html = '<tbody></tbody><tbody id="tmp-bar"></tbody><tbody></tbody>';
                el = Y.DOM.create(html);
                Assert.areEqual(3, el.childNodes.length, html);
                Assert.areEqual('tmp-bar', el.childNodes[1].id, html);
                html = '<thead><tr><td><table><tbody><tr><td>fresh</td></tr></tbody></table></td></tr></thead><tbody></tbody>';
                el = Y.DOM.create(html);
                Assert.areEqual(2, el.childNodes.length, html);

            },

            test_ancestor: function() {
                Assert.areEqual(doc, Y.DOM.ancestor(hd), 'ancestor(hd)');
                Assert.areEqual(doc, Y.DOM.ancestor(bd), 'ancestor(bd)');
                Assert.areEqual(doc, Y.DOM.ancestor(bd), 'ancestor(bd)');
                Assert.areEqual(document.body, Y.DOM.ancestor(bd, function(node) { return node.tagName === 'BODY';}), 'ancestor(bd, fn)');
                Assert.areEqual(bd, Y.DOM.ancestor(bd, null, true), 'ancestor(bd, true)');
            },


            test_insertBefore: function() {
                //Assert.areEqual(Y.DOM.insertBefore(ft, hd), Y.DOM.firstChild(doc), 'insertBefore(ft, hd)');
                //Assert.areEqual(ft, Y.DOM.firstChild(doc), 'insertBefore(ft, hd)');
            },


            test_insertAfter: function() {
                //Assert.areEqual(Y.DOM.insertAfter(hd, ft), ft.nextSibling, 'insertAfter(hd, ft)');
                //Assert.areEqual(hd, ft.nextSibling, 'insertAfter(hd, ft)');
            },

            test_getAttribute: function() {
                var node = Y.DOM.byId('doc');
                Y.DOM.setAttribute(node, 'class', 'foo');
                Assert.areEqual('foo', node.className, "Y.DOM.setAttribute(node, 'class', 'foo')");
                Assert.areEqual('foo', Y.DOM.getAttribute(node, 'class'), "Y.DOM.getAttribute(node, 'class')");
                Assert.areEqual('foo', Y.DOM.getAttribute(node, 'className'), "Y.DOM.getAttribute(node, 'className')");

                Y.DOM.setAttribute(node, 'className', 'bar');
                Assert.areEqual('bar', node.className, "node.className");

                node = Y.DOM.byId('search-p-label');
                Assert.areEqual('search-p', Y.DOM.getAttribute(node, 'for'), "Y.DOM.setAttribute(node, 'for', 'search-p')");
                Assert.areEqual('search-p', Y.DOM.getAttribute(node, 'htmlFor'), "Y.DOM.setAttribute(node, 'htmlFor', 'search-p')");
            },

            test_getValue: function() {
                // text
                var id = 'test-text-value',
                    val = 'text value';

                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-text-novalue';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                // textarea
                id = 'test-textarea-textvalue';
                val = 'textarea text';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-textarea-value';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-textarea-novalue';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                // button
                id = 'test-button-value';
                val = 'button value';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-button-novalue';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-button-textvalue';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                // select
                id = 'test-select-value';
                val = 'option value';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-select-novalue';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-select-textvalue';
                val = 'option text';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-select-emptyvalue';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-select-emptyvalue-notext';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                // option
                id = 'test-option-value';
                val = 'option value';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-option-emptyvalue';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-option-novalue';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-option-emptyvalue-notext';
                val = '';
                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-option-textvalue';
                val = 'option text';

                Assert.areEqual(val, Y.DOM.getValue(Y.DOM.byId(id)), id);

                Y.DOM.setValue(Y.DOM.byId(id), 'new value');
                Assert.areEqual('new value', Y.DOM.getValue(Y.DOM.byId(id)), id);

                id = 'test-text-emptyvalue';
                Assert.areEqual('""', Y.JSON.stringify(Y.DOM.getValue(Y.DOM.byId(id))),
                    "Y.JSON.stringify(Y.DOM.getValue(Y.DOM.byId(" + id + ")))");
            },

            test_position: function() { // basic position tests
                var node = document.createElement('div');
                ArrayAssert.itemsAreEqual([0, 0], Y.DOM.getXY(node), 'off-dom: [0, 0]');

                // off-dom is unreliable due to cascade when appended
                //Y.DOM.setXY(node, [100, 200]);
                //ArrayAssert.itemsAreEqual([100, 200], Y.DOM.getXY(node), 'off-dom: [100, 200]');

                Assert.isNull(Y.DOM.getXY(null), 'Y.DOM.getXY(null)');

                document.body.appendChild(node);
                Y.DOM.setXY(node, [100, 200]);
                var pos = Y.DOM.getXY(node);
                ArrayAssert.itemsAreEqual([100, 200], [Math.round(pos[0]), Math.round(pos[1])], 'setXY([100, 200]');
            },

            test_region: function() {
                var node = Y.DOM.byId('doc'),
                    xy = Y.DOM.getXY(node),
                    region = Y.DOM.region(node);

                Assert.isFalse(Y.DOM.region(null), 'Y.DOM.region(null)');

                Assert.areEqual(xy[0], region.left, 'region.left');
                Assert.areEqual(xy[1], region.top, 'region.top');
                Assert.areEqual(xy[0], region[0], 'region[0]');
                Assert.areEqual(xy[1], region[1], 'region[1]');
                Assert.areEqual(node.offsetWidth, region.width, 'region.width');
                Assert.areEqual(node.offsetHeight, region.height, 'region.height');
                Assert.areEqual(node.offsetHeight + xy[1], region.bottom, 'region.bottom');
                Assert.areEqual(node.offsetWidth + xy[0], region.right, 'region.right');

            },

            test_viewportRegion: function() {
                var node = Y.DOM.byId('doc'),
                    scrollX = Y.DOM.docScrollX(node),
                    scrollY = Y.DOM.docScrollY(node),
                    winHeight = Y.DOM.winHeight(node),
                    winWidth = Y.DOM.winWidth(node),
                    region = Y.DOM.viewportRegion(node);

                Assert.areEqual(scrollX, region.left, 'region.left');
                Assert.areEqual(scrollY, region.top, 'region.top');
                Assert.areEqual(scrollX, region[0], 'region[0]');
                Assert.areEqual(scrollY, region[1], 'region[1]');
                Assert.areEqual(winWidth, region.width, 'region.width');
                Assert.areEqual(winHeight, region.height, 'region.height');
                Assert.areEqual(scrollY + winHeight, region.bottom, 'region.bottom');
                Assert.areEqual(scrollX + winWidth, region.right, 'region.right');

                region = Y.DOM.viewportRegion();
                Assert.areEqual(scrollX, region.left, 'region.left');
                Assert.areEqual(scrollY, region.top, 'region.top');
                Assert.areEqual(scrollX, region[0], 'region[0]');
                Assert.areEqual(scrollY, region[1], 'region[1]');
                Assert.areEqual(winWidth, region.width, 'region.width');
                Assert.areEqual(winHeight, region.height, 'region.height');
                Assert.areEqual(scrollY + winHeight, region.bottom, 'region.bottom');
                Assert.areEqual(scrollX + winWidth, region.right, 'region.right');

            },

            test_addHTML: function() {
                var node = Y.DOM.byId('test-add');
                Y.DOM.addHTML(node, '<em>new content</em>');
                Assert.areEqual('EM', node.lastChild.nodeName, "Y.DOM.addHTML(node, '<em>new content</em>')");

                Y.DOM.addHTML(node, '<strong>new content</strong>', node.firstChild);
                Assert.areEqual('STRONG', node.firstChild.nodeName, "Y.DOM.addHTML(node, '<em>new content</em>', node.firstChild)");

                Y.DOM.addHTML(node, '<span>new content</span>', node.childNodes[1]);
                Assert.areEqual('SPAN', node.childNodes[1].nodeName, "Y.DOM.addHTML(node, '<em>new content</em>', node.childNodes[1])");

                Y.DOM.addHTML(node, 200);
                Assert.areEqual(3, node.lastChild.nodeType, "Y.DOM.addHTML(node, 200)");

                Y.DOM.addHTML(node, Y.DOM.create('<p>this is a <em>test</em></p>'));
                Assert.areEqual('P', node.lastChild.nodeName, "Y.DOM.create('<p>this is a <em>test</em></p>')");
            },

            testFirstByTag: function() {
                var tag = 'div',
                    root = document;

                Assert.areEqual(root.getElementsByTagName(tag)[0],
                    Y.DOM.firstByTag(tag, root),
                    "Y.DOM.firstByTag(" + tag + " , " + root + ")"
                );

                tag = 'input';
                root = document.getElementById('test-form');

                Assert.areEqual(root.getElementsByTagName(tag)[0],
                    Y.DOM.firstByTag(tag, root),
                    "Y.DOM.firstByTag(" + tag + " , " + root + ")"
                );

                tag = null;
                root = null;

                Assert.isNull(Y.DOM.firstByTag(tag, root),
                    "Y.DOM.firstByTag(" + tag + " , " + root + ")"
                );
            },

            testToHex: function() {
                var rgb = 'rgb(97, 11, 11)',
                    hex = Y.Color.toHex(rgb);

                Assert.areEqual("#610B0B", hex, 'toHex(' + rgb + ')');

                rgb = 'rgb(255, 255, 255)';
                hex = Y.Color.toHex(rgb);

                Assert.areEqual("#FFFFFF", hex, 'toHex(' + rgb + ')');

                rgb = '#fff';
                hex = Y.Color.toHex(rgb);

                Assert.areEqual("#FFFFFF", hex, 'toHex(' + rgb + ')');

                rgb = 'fff';
                hex = Y.Color.toHex(rgb);

                Assert.areEqual("#FFFFFF", hex, 'toHex(' + rgb + ')');

                rgb = '000';
                hex = Y.Color.toHex(rgb);

                Assert.areEqual("#000000", hex, 'toHex(' + rgb + ')');

                rgb = "rgb(97, 56, 11)" ;
                hex = Y.Color.toHex(rgb);
                Assert.areSame(hex, "#61380B", " shoudl be #61380B");

                rgb = "rgb(11, 97, 11)" ; // 0B610B
                hex = Y.Color.toHex(rgb);
                Assert.areSame(hex, "#0B610B", " shoudl be #0B610B");

                rgb = "rgb(56, 11, 97)" ; //380B61
                hex = Y.Color.toHex(rgb);
                Assert.areSame(hex, "#380B61", " shoudl be #380B61");

                rgb = "rgb(97, 11, 56)" ; //610B38
                hex = Y.Color.toHex(rgb);
                Assert.areSame(hex, "#610B38", " shoudl be #610B38");
            },

            test_inDoc: function() {
                var node = document.createElement('div');
                Assert.isFalse(Y.DOM.inDoc(node), 'new off doc');

                document.body.appendChild(node);
                Assert.isTrue(Y.DOM.inDoc(node), 'new in doc');

                document.body.removeChild(node);
                Assert.isFalse(Y.DOM.inDoc(node), 'removed');

                // test dupe ID
                node.id = 'doc';
                document.body.appendChild(node);
                Assert.isTrue(Y.DOM.inDoc(node), 'dupe id in doc');

                document.body.removeChild(node);
                Assert.isFalse(Y.DOM.inDoc(node), 'dupe if off doc');

                // test form with input name="id" (IE collision with form.id)
                Assert.isTrue(Y.DOM.inDoc(Y.DOM.byId('search')), "form.id === 'search'");

                node = null;
                Assert.isFalse(Y.DOM.inDoc(node), 'null node');

                node = document.getElementById('ft');
                node = node.cloneNode(true);
                node.id = 'ft-clone';
                Assert.isFalse(Y.DOM.inDoc(node), "clone inDoc false");
                document.body.appendChild(node);
                Assert.isTrue(Y.DOM.inDoc(node), "clone inDoc true");
            }

        }));
        Y.Test.Runner.add(suite);

        if (parent && parent != window && Y.Test.Manager) {
            Y.Test.Manager.load();
        } else {
            Y.Test.Runner.run();
        }

});
</script>
<style>

h1, h2, h3, h4, h5, h6, p, ul, ol, li {
    Xmargin:0;
    Xpadding:0;
}

form {
    width: 30em;
}

#doc {
    border:5px solid #000;
    margin:10px;
    padding:10px;
}

#hd {
    background:#ccc;
}

#foo {
    float:left; /* required for getStyle test */
}

#ft {
    height:200px;
    opacity: 0.75;
}
.yui3-skin-sam .yui-console-entry-pass .yui-console-entry-cat {
    background: #070;
    color: #fff;
}
.yui3-skin-sam .yui-console-entry-fail .yui-console-entry-cat {
    background: #700;
    color: #fff;
}
</style>

<style type="text/css">

</style>
</head>
<body class="yui3-skin-sam">
    <div id="doc">
        <div id="hd"><h1>Page Header</h1></div>
        <div id="bd">
            <div id="main" class="main">
                <h2 id="foo">Section Header</h2>
                <select id="test-select"><option>choose</option></select>
                <em class="lorem ipsum ipsum" id="lorem-ipsum">lorem ipsum</em>
                <div class="mod" id="mod1">
                    <div class="hd">
                        <h3>Module Header</h3>
                    </div>
                    <div class="bd">
                        <p>Fusce feugiat diam. Vestibulum elementum dui in augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pulvinar.</p>
                    </div>
                    <div class="ft"><a href="#">more</a></div>
                </div>
                <div class="mod" id="mod2">
                    <div class="hd">
                        <h3>Module Header</h3>
                    </div>
                    <div class="bd">
                        <form action="#" method="get" id="search">
                            <fieldset id="search-fields">
                                <legend>Search</legend>
                                <label for="search-p" id="search-p-label">Query</label>
                                <input type="text" name="p" id="search-p">
                                <input name="id">
                                <input type="submit" value="search">
                            </fieldset>
                        </form>
                    </div>
                    <div class="ft"><a href="http://www.developer.yahoo.com">more</a></div>
                </div>
            </div>
            <form id="test-form" class="test-class" action="#">
                <input id="test-text-value" value="text value">
                <input id="test-text-novalue" name=>
                <input id="test-text-emptyvalue">


                <textarea id="test-textarea-value" value="textarea value"></textarea>
                <textarea id="test-textarea-novalue"></textarea>
                <textarea id="test-textarea-textvalue">textarea text</textarea>

                <button id="test-button-value" value="button value">button</button>
                <button id="test-button-novalue"></button>
                <button id="test-button-textvalue">button text</button>

                <select id="test-select-value">
                    <option id="test-option-value" value="option value">option text</option>
                    <option id="test-option-textvalue">option text</option>
                    <option id="test-option-emptyvalue" value="">empty value</option>
                    <option id="test-option-emptyvalue-notext" value=""></option>
                    <option id="test-option-novalue"></option>
                </select>

                <select id="test-select-textvalue">
                    <option>option text</option>
                </select>

                <select id="test-select-emptyvalue">
                    <option value="">option text</option>
                </select>
                <select id="test-select-emptyvalue-notext">
                    <option value=""></option>
                </select>
            </form>
            <form id="test-names">
                <input id="test-name-id1" name="test-name-id2" >
                <input id="test-name-id2" name="test-name-id1">
            </form>
            <div id="test-add">test</div>
        </div>
        <div id="ft">
            <p>In hac habitasse platea dictumst. Sed sit amet ligula vitae justo consequat facilisis. Integer tortor. Integer erat. In hac habitasse platea dictumst. Phasellus convallis quam vitae turpis aliquam lobortis. Aliquam scelerisque condimentum lectus. Proin semper adipiscing leo. Nulla facilisi.</p>
        </div>
    </div>
</body>
</html>