test-dom-style.html | searchcode

/src/dom/test-dom-style.html

https://github.com/lxmtalk/kissy
HTML | 230 lines | 184 code | 45 blank | 1 comment | 0 complexity | c08e2cd97ad8de05da3a76e2a6e9ea19 MD5 | raw file

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

<h2>Test Data</h2>

<script src="../../build/kissy/kissy-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-style.js"></script>
<script src="dom-style-ie.js"></script>
<script src="dom-attr.js"></script>
<script src="dom-create.js"></script>

<script src="../../third-party/jquery/jquery-1.4.2.js"></script>
<script src="../../third-party/yui2/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="../../third-party/yui3/yui-min.js"></script>
<script src="../../third-party/ext-core/ext-core.js"></script>

<div id="test-data">
    <div id="test-div" style="padding-left: 2pt; background: transparent; float: left; border: 5px solid rgba(0,0,0,.201);"></div>
    <style>
        #test2 {
            border: 1px solid #ccc;
            width: 80%;
            height: 20px;
        }

        .shadow {
            background-color: #fff;
            -moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 3px 3px;
            -webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 3px 3px;
            filter: progid:DXImageTransform.Microsoft.Shadow(direction = 155, Color = #dadada, Strength = 3), progid:DXImageTransform.Microsoft.DropShadow(Color = #22aaaaaa, OffX = -2, OffY = -2);
        }
    </style>
    <div id="test2"></div>
    <img id="test-img" src="../../docs/assets/logo.png" alt="kissy" />
    <div id="test-filter" class="shadow" style="height: 80px; width: 120px; border:1px solid #ccc;"></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>
    <div id="test3">for test show/hide/toggle</div>
</div>

<iframe src="test-dom-offset-iframe.html"
        id="testIframe"
        style="border:1px solid black; position:absolute; top:500px; left:500px; background:white;"
        width="200"
        frameborder="0"
        scrolling="no"
        ></iframe>

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

    function test_css(test) {
        var elem = S.get('#test-div');

        // getter
        if(DOM.css(elem, 'float') !== 'left') test.fail();
        if(DOM.css(elem, 'position') !== 'static') test.fail();
        if(DOM.css(elem, 'backgroundColor') !== 'transparent') test.fail();
        if(DOM.css(elem, 'backgroundPosition') !== '0% 0%') test.fail();
        if(DOM.css(elem, 'fontSize') !== '12px') test.fail();

        if(UA.ie < 9) if(DOM.css(elem, 'border-right-width') !== 'medium') test.fail(DOM.css(elem, 'border-right-width'));
        else if(DOM.css(elem, 'border-right-width') !== '5px') test.fail();

        if(DOM.css(elem, 'paddingLeft') !== '2pt') test.fail();
        if(DOM.css(elem, 'padding-left') !== '2pt') test.fail();
        if(DOM.css(elem, 'padding-right') !== '0px') test.fail();

        if(DOM.css(elem, 'opacity') !== '1') test.fail('opacity');

        // 当返回 auto 时，要将 auto 转换为 pixel
        if(DOM.css('#test-div', 'height') == 'auto') test.fail();


        // setter
        try {
            DOM.css(elem, 'height', '-20px');
        } catch(ex) {
            test.fail();
        }

        DOM.css(elem, 'float', 'right');
        if(DOM.css(elem, 'float') !== 'right') test.fail();

        DOM.css(elem.parentNode, 'font-size', '100%');
        if(DOM.css(elem, 'font-size') !== '12px') test.fail();

        DOM.css(elem, 'opacity', '0.2');
        if(DOM.css(elem, 'opacity') !== '0.2') test.fail('opacity 0.2');

        DOM.css(elem, 'border', '2px dashed red');
        if(DOM.css(elem, 'borderWidth') !== '2px') test.fail();

        DOM.css(elem, {
            marginLeft: '20px',
            opacity: '0.8',
            border: '2px solid #ccc'
        });
        if(DOM.css(elem, 'opacity') !== '0.8') test.fail('opacity 0.8');

        // test filter  #issue5
        //jQuery('#test-filter').css('opacity', .5);
        DOM.css('#test-filter', 'opacity', .5);
        //S.log(S.get('#test-filter').style.filter);
    }

    function test_width(test) {
        var elem = S.get('#test2');

        //if(DOM.width(elem) !== $(elem).width()) test.fail();
    }

    function test_height(test) {
        var elem = S.get('#test2');

        //if(DOM.height(elem) !== $(elem).height()) test.fail();
    }

    function test_show(test) {
        var elem = S.get('#test3');

        DOM.css(elem, 'display', 'none');
        DOM.show(elem);
        if(DOM.css(elem, 'display') === 'none') test.fail();

        DOM.removeAttr(elem, 'style');
    }

    function test_hide(test) {
        var elem = S.get('#test3');

        DOM.hide(elem);
        if(DOM.css(elem, 'display') !== 'none') test.fail();

        DOM.removeAttr(elem, 'style');
    }

    function test_toggle(test) {
        var elem = S.get('#test3');

        DOM.toggle(elem);
        if(DOM.css(elem, 'display') !== 'none') test.fail(DOM.css(elem, 'display'));

        DOM.toggle(elem);
        if(DOM.css(elem, 'display') === 'none') test.fail(DOM.css(elem, 'display'));

        DOM.removeAttr(elem, 'style');
    }

    function test_addStyleSheet(test) {
        DOM.addStyleSheet('#test-div { padding: 100px; color: blue }');
        DOM.addStyleSheet('#test-div { padding: 100px; color: blue }', 'test-style');
        DOM.addStyleSheet('#test-div { padding: 100px; color: blue }', '#test-style');

        if (UA.opera) {
            if (DOM.css('#test-div', 'color') !== '#0000ff') test.fail();
        } else {
            if (UA.ie < 9) {
                if (DOM.css('#test-div', 'color') !== 'blue') test.fail();
            } else {
                if (DOM.css('#test-div', 'color') !== 'rgb(0, 0, 255)') test.fail();
            }
        }
    }

    // temp code
    //alert(!(document.defaultView || { }).getComputedStyle && document.documentElement.currentStyle);
    var t = S.get('#test-div');
    //alert(document.defaultView.getComputedStyle(t, null)['paddingLeft']);
    //alert(jQuery(t).css('paddingLeft'));
    //alert(jQuery(t).css('padding-left'));
    //alert(DOM.css(t, 'borderWidth'));
    //alert(jQuery(t).css('borderWidth'));

    // kissy 会将 auto 转换为绝对数值，和 yui3 保持一致，让 ie 与其它浏览器一致
    //alert(t.style.height);
    //alert(DOM.css(t, 'height'));
    //alert(jQuery(t).css('height'));
    //alert(Ext.get(t).getStyle('height'));

    // 测试百分比
    //YUI().use('node', function(Y) {
        //t = S.get('#test2');

        // ext 返回 80%
        // jquery 多 4px
        // yui3 是对的
//        alert('kissy: ' + DOM.css(t, 'width') +
//              ' jquery: ' + jQuery(t).css('width') +
//              ' ext: ' + Ext.get(t).getStyle('width') +
//              //' ext: ' + Ext.get(t).getWidth(true) +
//              ' yui3: ' + Y.one(t).getStyle('width')
//             );
//        alert('KISSY.DOM.width = ' + DOM.width(t));
    //});

    // 测试 DOM.height(iframe)
    //alert(jQuery('#testIframe').height());
    //alert(DOM.height('#testIframe'));

</script>

</body>
</html>