source: Dev/trunk/src/client/dojo/tests/_base/html_box.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 6.2 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"       "http://www.w3.org/TR/html4/strict.dtd">
2<!--
3        we use a strict-mode DTD to ensure that the box model is the same for these
4        basic tests
5-->
6<html>
7        <head>
8                <title> test html.js Box utils</title>
9                <style type="text/css">
10                        /*@import "../../resources/dojo.css";*/
11                </style>
12                <script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true"></script>
13                <script type="text/javascript">
14                        require(["dojo", "doh", "dojo/domReady!"], function(dojo, doh){
15                       
16                        var margin = '1px';
17                        var border = '3px solid black';
18                        var padding = '5px';
19                        var defaultStyles = {
20                                height: '100px',
21                                width: '100px',
22                                position: 'absolute',
23                                backgroundColor: 'red'
24                        };
25                       
26                        var defaultChildStyles = {
27                                height: '20px',
28                                width: '20px',
29                                backgroundColor: 'blue'
30                        };
31                       
32                        var testStyles = [
33                                {},
34                                {margin: margin},
35                                {border: border},
36                                {padding: padding},
37                                {margin: margin, border: border},
38                                {margin: margin, padding: padding},
39                                {border: border, padding: padding},
40                                {margin: margin, border: border, padding: padding}
41                        ];
42                       
43                       
44                        function sameBox(inBox1, inBox2) {
45                                for (var i in inBox1)
46                                        if (inBox1[i] != inBox2[i]) {
47                                                console.log((arguments[2]||'box1') + '.' + i + ': ', inBox1[i], ' != ', (arguments[3]||'box2') + '.' + i + ': ', inBox2[i]);
48                                                return false;
49                                        }       
50                                return true;           
51                        }
52                       
53                        function reciprocalMarginBoxTest(inNode, inBox) {
54                                var s = inBox || dojo.marginBox(inNode);
55                                dojo.marginBox(inNode, s);
56                                var e = dojo.marginBox(inNode);
57                                return sameBox(s, e);
58                        }
59                       
60                        function fitTest(inParent, inChild) {
61                                var pcb = dojo.contentBox(inParent);
62                                return reciprocalMarginBoxTest(inChild, pcb);
63                        }
64                       
65                        function createStyledElement(inStyle, inParent, inElement, inNoDefault) {
66                                inStyle = inStyle||{};
67                                if (!inNoDefault) {
68                                        for (var i in defaultStyles)
69                                                if (!inStyle[i])
70                                                        inStyle[i] = defaultStyles[i];
71                                }                       
72                                var n = document.createElement(inElement || 'div');
73                                (inParent||document.body).appendChild(n);
74                                dojo.mixin(n.style, inStyle);
75                                return n;                               
76                        }
77                       
78                        var _testTopInc = 0;
79                        var _testTop = 150;
80                        var _testInitTop = 250;
81                        function styleIncTop(inStyle) {
82                                inStyle = dojo.mixin({}, inStyle||{});
83                                inStyle.top = (_testInitTop + _testTop*_testTopInc) + 'px';
84                                _testTopInc++;
85                                return inStyle;
86                        }
87                       
88                        function removeTestNode(inNode) {
89                                // leave nodes for inspection or don't return to delete them
90                                return;
91                                inNode = dojo.byId(inNode);
92                                inNode.parentNode.removeChild(inNode);
93                                _testTopInc--;
94                        }
95                       
96                        function testAndCallback(inTest, inAssert, inOk, inErr) {
97                                inTest.assertTrue(inAssert);
98                                if (inAssert)
99                                        inOk&&inOk();
100                                else
101                                        inErr&&inErr();
102                        }
103                       
104                        // args are (styles, parent, element name, no default)
105                        function mixCreateElementArgs(inMix, inArgs) {
106                                args = [{}];
107                                if (inArgs&&inArgs[0])
108                                        dojo.mixin(args[0], inArgs[0]);
109                                if (inMix.length)
110                                        dojo.mixin(args[0], inMix[0]||{});
111                                // parent comes from source
112                                if (inMix.length > 1)
113                                        args[1] = inMix[1];
114                                args[2] = inArgs[2];
115                                args[3] = inArgs[3];
116                                return args;
117                        }
118
119                        function createStyledNodes(inArgs, inFunc) {
120                                for (var i=0, n; (s=testStyles[i]); i++) {
121                                        n = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inArgs));
122                                        inFunc&&inFunc(n);
123                                }       
124                        }
125                       
126                        function createStyledParentChild(inParentArgs, inChildArgs, inFunc) {
127                                for (var i=0, s, p, c; (s=testStyles[i]); i++) {
128                                        p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
129                                        c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));
130                                        inFunc&&inFunc(p, c);
131                                }       
132                        }
133                       
134                        function createStyledParentChildren(inParentArgs, inChildArgs, inFunc) {
135                                for (var i=0, s, p; (s=testStyles[i]); i++)
136                                        for (var j=0, sc, c, props; (sc=testStyles[j]); j++) {
137                                                p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
138                                                c = createStyledElement.apply(this, mixCreateElementArgs([sc, p], inChildArgs));
139                                                inFunc&&inFunc(p, c);
140                                        }       
141                               
142                                for (var i=0, s, p, c; (s=testStyles[i]); i++) {
143                                        p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
144                                        c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));
145                                        inFunc&&inFunc(p, c);
146                                }       
147                        }
148                       
149                       
150                        function runFitTest(inTest, inParentStyles, inChildStyles) {
151                                createStyledParentChildren([inParentStyles], [inChildStyles], function(p, c) {
152                                        testAndCallback(inTest, fitTest(p, c), function() {removeTestNode(p); });
153                                });
154                        }
155                       
156                        doh.register("t",
157                                [
158                                        function reciprocalTests(t) {
159                                                createStyledNodes([], function(n) {
160                                                        testAndCallback(t, reciprocalMarginBoxTest(n), function() {removeTestNode(n); });
161                                                });
162                                        },
163                                        function fitTests(t) {
164                                                runFitTest(t, null, dojo.mixin({}, defaultChildStyles));
165                                        },
166                                        function fitTestsOverflow(t) {
167                                                runFitTest(t, null, dojo.mixin({overflow:'hidden'}, defaultChildStyles));
168                                                runFitTest(t, {overflow: 'hidden'}, dojo.mixin({}, defaultChildStyles));
169                                                runFitTest(t, {overflow: 'hidden'}, dojo.mixin({overflow:'hidden'}, defaultChildStyles));
170                                        },
171                                        function fitTestsFloat(t) {
172                                                runFitTest(t, null, dojo.mixin({float: 'left'}, defaultChildStyles));
173                                                runFitTest(t, {float: 'left'}, dojo.mixin({}, defaultChildStyles));
174                                                runFitTest(t, {float: 'left'}, dojo.mixin({float: 'left'}, defaultChildStyles));
175                                        },
176                                        function reciprocalTestsInline(t) {
177                                                createStyledParentChild([], [{}, null, 'span'], function(p, c) {
178                                                        c.innerHTML = 'Hello World';
179                                                        testAndCallback(t, reciprocalMarginBoxTest(c), function() {removeTestNode(c); });
180                                                });
181                                        },
182                                        function reciprocalTestsButtonChild(t) {
183                                                createStyledParentChild([], [{}, null, 'button'], function(p, c) {
184                                                        c.innerHTML = 'Hello World';
185                                                        testAndCallback(t, reciprocalMarginBoxTest(c), function() {removeTestNode(c); });
186                                                });
187                                        }
188                                ]
189                        );
190                        doh.runOnLoad();
191                        });
192                </script>
193                <style type="text/css">
194                        html, body {
195                                padding: 0px;
196                                margin: 0px;
197                                border: 0px;
198                        }
199                </style>
200        </head>
201        <body>
202        </body>
203</html>
204
Note: See TracBrowser for help on using the repository browser.