Ticket #3454: box.html

File box.html, 3.0 kB (added by bill, 19 months ago)

test of speeds of various functions

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4        <head>
5                <title>HTML Box benchmarks</title>
6                <script type="text/javascript" src="../../dojo/dojo.js"></script>
7                <style type="text/css">
8                        div {
9                                background: gray;
10                                padding: 10px;
11                                border: 2px solid black;
12                                margin: 10px;
13                        }
14                </style>
15                <script type="text/javascript">
16                        function test(description, func){
17                                var divs = dojo.query("div");
18                                var t0 = new Date().getTime();
19                                divs.forEach(func);
20                                var t1 = new Date().getTime();
21                                dojo.byId("results").innerHTML = description + ": " + (t1 - t0) + " msec to call " + count + " times";
22                                h++;
23                                w++;
24                        }
25                        h=50;
26                        w=100;
27                       
28                        if(dojo.isMoz){
29                                dojo._getBorderBox = function(node, computedStyle){
30                                        var s = computedStyle||dojo.getComputedStyle(node);
31                                        // Mozilla has unexplained negative l/t offsets in some cases (e.g. positioned & parents with border)
32                                        // the computed l/t styles are generally more correct
33                                        return { l:(parseFloat(s.left)||node.offsetLeft), t:(parseFloat(s.top)||node.offsetTop), w: node.offsetWidth, h: node.offsetHeight };
34                                }
35                        } else {
36                                dojo._getBorderBox = function(node, computedStyle){
37                                        return { l:node.offsetLeft, t:node.offsetTop, w: node.offsetWidth, h: node.offsetHeight };
38                                }
39                        }
40
41                        dojo._setBorderBox = function(node, leftPx, topPx, widthPx, heightPx, computedStyle){
42                                var s = computedStyle || dojo.getComputedStyle(node);
43                                // Some elements have special padding, margin, and box-model settings.
44                                // To use box functions with some elements you may need to set padding, margin explicitly.
45                                // Controlling box-model is harder, in a pinch you might set dojo.boxModel.
46                                // TABLE and BUTTON come up regularly, so we include tests for them here.
47                                var tn = node.tagName, pb = ((dojo.boxModel == "border-box")||(tn=="TABLE")||(tn=="BUTTON") ? dojo._nilExtents : dojo._getPadBorderExtents(node, s));
48                                if(widthPx>=0){
49                                        widthPx = Math.max(widthPx - pb.w, 0);
50                                }
51                                if(heightPx>=0){
52                                        heightPx = Math.max(heightPx - pb.h, 0);
53                                }
54                                dojo._setBox(node, leftPx, topPx, widthPx, heightPx);
55                        }
56                       
57                </script>
58        </head>
59        <body class=tundra>
60                <button onclick="test('get margin box', dojo.marginBox);">get margin box</button>
61                <button onclick="test('set margin box', function(div){dojo.marginBox(div, {h: h, w: w});});">set margin box</button>
62                <button onclick="test('get content box', dojo.marginBox);">get content box</button>
63                <button onclick="test('set content box', function(div){dojo.contentBox(div, {h: h, w: w});});">set content box</button>
64                <button onclick="test('get border box', dojo._getBorderBox);">get border box</button>
65                <button onclick="test('set border box', function(div){dojo._setBorderBox(div, 0,0,w,h);});">set border box</button>
66                <h3 id="results"></h3>
67
68                <script language='javascript'>
69                        var count=1000;
70                        document.write("<h2>Currently Creating "+count+" divs</h2>");
71                        for(var i=0;i<count;i++){
72                                document.write("<div>hello</div>");
73                        }
74                </script>
75        </body>
76</html>