Preparation code

<style type="text/css">
#test { display: block; background-color: red; width: 20px; height: 20px; }
#area{ display: block; width: 150px; height: 150px; }
</style>
<dit id="area"><div id="test"></div></div>
<script type="text/javascript">
    var node = document.getElementById('test');

    function test(fn){
        return fn(clear(node));
    }

    function clear(node){
        node.removeAttribute('style');
        return node;
    }

    function suite1(node){
        node.style.position = 'relative';
        for(var style = node.style, i = 0; i < 100; i++){
            style.left = style.top = i + 'px';
        }
    }

    function suite2(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.marginLeft = style.marginTop = i + 'px';
        }
    }

    function suite3(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.cssText = 'position:relative;top:'+i+'px;left:'+i+'px;';
        }
    }

    function suite4(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.cssText='-webkit-transform:translate3d('+i+'px, '+i+'px,0)';
        }
    }

    function suite5(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.webkitTransform='translate('+i+'px, '+i+'px)';
        }
    }

    function suite6(node){
        for(var style = node.style, i = 0; i < 100; i++){
            style.webkitTransform='translate3d('+i+'px, '+i+'px,0)';
        }
    }
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

test(suite1);

test(suite2);

test(suite3);

test(suite4);

test(suite5);

test(suite6);

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments