test-dom-create.html

/src/dom/test-dom-create.html

https://bitbucket.org/cng1985/kissy
HTML | 179 lines | 150 code | 28 blank | 1 comment | 0 complexity | 4a5f4c90e00e8021d785a30579fdbc14 MD5 | raw file

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>dom-create Test</title>
</head>
<body>
<script src="../test/test.js"></script>
<script>
    KISSY.Test.Config.times = 1;
</script>

<h2>Test Data</h2>

<script src="../../build/seed/seed-pkg.js"></script>
<script src="../../build/ua/ua-pkg.js"></script>

<script src="dom.js"></script>
<script src="selector.js"></script>
<script src="dom-data.js"></script>
<script src="dom-class.js"></script>
<script src="dom-attr.js"></script>
<script src="dom-traversal.js"></script>
<script src="dom-create.js"></script>

<script src="../../build/sizzle/sizzle-pkg.js"></script>

<div id="test-data">
    <p id="foo">
        <a href="../kissy/" style="color:red" class="link" title="test" data-test="test">test link</a>
        <input type="text" id="test-input" readonly maxlength="20" value="hello"/>
        <input type="radio" id="test-radio" />
        <input type="radio" id="test-radio2" checked />
        <label class="test" for="test-input">label</label>
        <button type="button" tabindex="3">Submit</button>
        <textarea rows="2" cols="2">
            test
        </textarea>
    </p>
    <div id="test-div"></div>
    <table id="test-table" cellspacing="10">
        <tbody>
        <tr>
            <td rowspan="2" colspan="3">td</td>
        </tr>
        </tbody>
    </table>
    <select id="test-select">
        <option id="test-opt" value="1">0</option>
        <option>2</option>
        <option>3</option>
    </select>
    <select id="test-select2">
        <option>2</option>
    </select>
    <select id="test-select3" multiple autocomplete="off">
        <option selected>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
    <div id="test-children" class="test-parent">
        <p id="test-next"><a>1</a></p>
        <p class="test-next-p"><a class="test-a">2</a></p>
        <p class="test-next"><a id="test-parent3">3</a></p>
        <p class="test-p" id="test-prev"><em class="test-em"><span><a id="test-parent4">4</a></span></em></p>
    </div>
    <div id="test-html">
        <p class="test-p">test html</p>
    </div>
    <div id="test-sethtml">initial html</div>
    <div id="test-sethtml2">initial html</div>
    <div id="test-sethtml3">initial html</div>
</div>
<style>
    .red { background: red; width: 50px; height: 50px; }
</style>

<!-- Test Cases -->
<script>
    var S = KISSY, DOM = S.DOM;

    function test_create(test) {
        var div = DOM.create('<div>'), html = '', tag = '';

        S.each(['option', 'optgroup', 'td', 'th', 'tr', 'tbody', 'thead', 'tfoot', 'caption', 'col', 'colgroup', 'legend'], function(tag) {
            html = '<' + tag + '></' + tag + '>';

            //div.innerHTML = html;
            div.appendChild(DOM.create(html));
            S.log(tag + ' - ' + div.innerHTML);

            html = div.innerHTML.toLowerCase();
            if (!(html.indexOf('<' + tag + '>') === 0 || html.indexOf('<' + tag + ' ') === 0)) test.fail(tag);
            div.innerHTML = '';
        });

        // script
        html = tag = 'script';
        div.appendChild(DOM.create('<script><\/script>'));
        S.log(tag + ' - ' + div.innerHTML);
        html = S.trim(div.innerHTML.toLowerCase());
        if (!(html.indexOf('<' + tag + '>') === 0 || html.indexOf('<' + tag + ' ') === 0)) test.fail(tag);
        div.innerHTML = '';

        // null
        if(DOM.create() !== null) test.fail();

        // textNode
        if(DOM.create('text node').nodeType !== 3) test.fail();

        // 稍微复杂点
        if(DOM.attr(DOM.create('<img id="test-img" />'), 'id') !== 'test-img') test.fail();

        // 多个元素
        if(DOM.create('<p></p><div></div>').nodeType !== 11) test.fail();
        if(DOM.create('<p></p><div></div>').childNodes[0].tagName !== 'P') test.fail();

        // 属性支持
        if(DOM.create('<p>', { rel: '-1', 'class': 'test-p', data: 'test'}).className !== 'test-p') test.fail();
    }

    function test_html(test) {
        var t = S.get('#test-html');

        DOM.html(t, '<div>');
        if(t.firstChild.nodeName !== 'DIV') test.fail();

        DOM.html(t, '<p class="test-html">test p</p>');
        if(!DOM.hasClass(t.firstChild, 'test-html')) test.fail();
        if(DOM.text(t) !== 'test p') test.fail();

        try {
            DOM.html(t, '');
            //S.get('#test-table').innerHTML = ''; // will throw error in ie
            DOM.html('#test-table', '2');
        } catch(ex) {
            test.fail(ex);
        }

        // loadScripts
        DOM.html('#test-sethtml', '<script>KISSY.Test.echo("echo from loadScripts 1.");window.g_sethtml = 1;<\/script>', true);
        S.later(function() {
            if(window['g_sethtml'] !== 1) KISSY.Test.echo('html() is FAILED for loadScripts 1.');
        }, 500);
        
        // callback
        DOM.html('#test-sethtml2', '<script>KISSY.Test.echo("echo from loadScripts 2.");window.g_sethtml2 = 2;<\/script>', true, function() {
            test.echo('loadScripts 2 callback is fired.')
        });
        S.later(function() {
            if(window['g_sethtml2'] !== 2) KISSY.Test.echo('html() is FAILED for loadScripts 2.');
        }, 500);

        // src js
        DOM.html('#test-sethtml3', '<script src="test-dom-create.js"><\/script>', true);
        S.later(function() {
            if(window['g_testLoadScriptViaInnerHTML']) KISSY.Test.echo('test-dom-create.js callback is fired.');
        }, 500);

        // exceptions
        try {
            DOM.html(t, 1);
        } catch(ex) {
            test.fail(ex);
        }
    }

    function test_remove(test) {
        DOM.remove('.test');
        if(S.query('.test').length !== 0) test.fail();
    }

    // temp code
    DOM.create('<col width="20" />');
    

</script>
</body>
</html>