/src/dom/test-dom-attr.html
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>