test-dom-attr.html | searchcode

/src/dom/test-dom-attr.html

https://bitbucket.org/cng1985/kissy
HTML | 235 lines | 194 code | 40 blank | 1 comment | 0 complexity | 26369bef16ccee92e3837c73410160fa MD5 | raw file

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>dom-attr 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>

<div id="test-data">
    <p id="foo">
        <a href="../kissy/" style="color:red; border-top:1px solid #333;" 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>
    <img id="test-img" src="../../docs/assets/logo.png" alt="kissy" />
    <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>
    <br />
    <br />
    <input type="checkbox" id="test-20100728-checkbox" />test checked
</div>

<!-- Test Cases -->
<script>
    var S = KISSY, DOM = S.DOM, 
        foo = S.get('#foo'),
        a = S.get('#foo a'),
        img = S.get('#test-img'),
        input = S.get('#foo input'),
        radio = S.get('#test-radio'),
        radio2 = S.get('#test-radio2'),
        button = S.get('#foo button'),
        label = S.get('#foo label'),
        table = S.get('#test-table'),
        td = S.get('#test-table td'),
        select = S.get('#test-select'),
        select2 = S.get('#test-select2'),
        select3 = S.get('#test-select3'),
        opt = S.get('#test-opt'),
        div = S.get('#test-div'),
        opt2 = S.query('#test-select option')[1],
        area = S.get('#foo textarea');
    
    function test_attr(test) {

        ///////////////////
        // 不存在的属性：
        //alert(a.getAttribute('no-exist')); // null
        //alert(a['no-exist']); // undefined
        if (DOM.attr(a, 'no-exist') !== undefined) test.fail(); // kissy 里，对不存在的属性，统一返回 undefined


        //////////////////////
        // 对于 mapping 属性：
        //  1. readonly, checked, selected 属性只能通过 el[name] 才能正确获取
        //  2. 可以获取用 getAttribute 不一定能获取到的值，比如 tabindex 默认值
        //alert(input.readonly);
        //alert(input.readOnly); // true, 这是预期值，其它方式都有兼容性问题
        //alert(input.getAttribute('readonly'));
        //alert(input.getAttribute('readOnly'));
        if (DOM.attr(input, 'readonly') !== true) test.fail(DOM.attr(input, 'readonly'));
        //if (DOM.attr(a, 'readonly') !== undefined) test.fail();
        if (DOM.attr(radio, 'checked') !== false) test.fail();
        if (DOM.attr(input, 'value') !== 'hello') test.fail();
        //alert(a.getAttribute('style'));
        //alert(DOM.attr(a, 'style'));
        if (!S.isString(DOM.attr(a, 'style'))) test.fail();
        if (DOM.attr(opt, 'selected') !== true) test.fail();


        ///////////////////////////
        // 对于非 mapping 属性：
        // ie 下可以用 a.name 或 a['name'] 获取，其它浏览器下不能，即便有值也返回 undefined
        //alert(a['data-test']);
        //alert(a.getAttribute('data-test'));
        if (DOM.attr(a, 'data-test') !== 'test') test.fail();


        /////////////////////
        // ie bugs fix:
        if (DOM.attr(label, 'class') !== 'test') test.fail(); // ie7- 要用 className
        if (DOM.attr(label, 'for') !== 'test-input') test.fail(); // ie7- 要用 htmlFor

        // href - http://www.glennjones.net/Post/809/getAttributehrefbug.htm
        //alert(a.href); // 在所有浏览器下，a.href 和 a['href'] 都返回绝对地址
        //alert(a.getAttribute('href')); // ie7- 下，会返回绝对地址
        if (DOM.attr(a, 'href') !== '../kissy/') test.fail();
        if (DOM.attr(img, 'src') !== '../../docs/assets/logo.png') test.fail();

        // colspan / rowspan:
        if (DOM.attr(td, 'rowspan') != 2) test.fail();
        //if($.attr(td, 'rowspan') != 2) test.fail(); // jquery has bug in ie7-


        ///////////////////
        // 普通属性的获取：
        if (DOM.attr(a, 'title') !== 'test') test.fail();


        ///////////////////
        // 属性的设置：
        // normal
        DOM.attr(a, 'data-set', 'test-xx');
        if (DOM.attr(a, 'data-set') !== 'test-xx') test.fail();
        // style
        DOM.attr(td, 'style', 'padding: 10px; border: 1px solid #333;');


        ///////////////////
        // 异常参数测试：
        DOM.attr();
        DOM.attr(undefined,'name');
        DOM.attr(undefined,'name', '');


        ///////////////////
        // batch 测试：
        if(DOM.attr('input', 'id') !== 'hidepasses') test.fail();
        DOM.attr('#test-data div', 'data-test', 'test');
        if(DOM.attr('#test-data div', 'data-test') !== 'test') test.fail();
        DOM.attr([td], 'style', 'background: #eee; padding: 10px');


        ////////////////////
        // 测试 checked 的 setter
        var checkbox2 = S.get('#test-20100728-checkbox');
        checkbox2.checked = false;

        DOM.attr(checkbox2, 'checked', true);
        if(DOM.attr(checkbox2, 'checked') !== true) test.fail('attr checked');
        DOM.removeAttr(checkbox2, 'checked');
        if(DOM.attr(checkbox2, 'checked') !== false) test.fail('removeAttr checked');
    }

    function test_removeAttr(test) {
        // normal
        DOM.attr(label, 'test-remove', 'xx');
        if (DOM.attr(label, 'test-remove') !== 'xx') test.fail();
        DOM.removeAttr(label, 'test-remove');
        if (DOM.attr(label, 'test-remove') !== undefined) test.fail();

        // style
        DOM.removeAttr(a, 'style');
        //alert(DOM.attr(a, 'style'));
        if (DOM.attr(a, 'style')) test.fail();
    }

    function test_val(test) {
        // normal
        if (DOM.val(input) !== 'hello') test.fail();

        // area
        if (DOM.val(area).length !== 25) test.fail();

        // option
        if(DOM.val(opt) != 1) test.fail();
        if(DOM.val(opt2) != 2) test.fail();

        // select
        if(DOM.val(select) != 1) test.fail();
        if(DOM.val(select2) != 2) test.fail();
        if(DOM.val(select3).toString() != '1,2') test.fail();

        // radio
        if(DOM.val(radio) != 'on') test.fail();
        if(DOM.val(radio2) != 'on') test.fail();

        // set value
        DOM.val(a, 'test');
        if(DOM.val(a) !== 'test') test.fail();
        DOM.removeAttr(a, 'value');

        // select set value
        DOM.val(select, '3');
        if(DOM.val(select) != 3) test.fail();
        DOM.val(select, 0); // restore

        // select set value
        DOM.val(select, 3);
        if(DOM.val(select) != 3) test.fail();
        DOM.val(select, 0); // restore

        DOM.val(select3, ['2','3']);
        if(DOM.val(select3).length != 2) test.fail();
    }

    function test_text(test) {
        DOM.text(div, 'hello, are you ok?');
        if(DOM.text(div) !== 'hello, are you ok?') test.fail();
    }
    
</script>

</body>
</html>