1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
3 we use a strict-mode DTD to ensure that the box model is the same for these
\r
8 <title> test html.js Box utils</title>
\r
9 <style type="text/css">
\r
10 /*@import "../../resources/dojo.css";*/
\r
12 <script type="text/javascript"
\r
13 src="../../dojo.js"
\r
14 djConfig="isDebug: true"></script>
\r
15 <script type="text/javascript">
\r
16 dojo.require("doh.runner");
\r
19 var border = '3px solid black';
\r
20 var padding = '5px';
\r
21 var defaultStyles = {
\r
24 position: 'absolute',
\r
25 backgroundColor: 'red'
\r
28 var defaultChildStyles = {
\r
31 backgroundColor: 'blue'
\r
39 {margin: margin, border: border},
\r
40 {margin: margin, padding: padding},
\r
41 {border: border, padding: padding},
\r
42 {margin: margin, border: border, padding: padding}
\r
46 function sameBox(inBox1, inBox2) {
\r
47 for (var i in inBox1)
\r
48 if (inBox1[i] != inBox2[i]) {
\r
49 console.log((arguments[2]||'box1') + '.' + i + ': ', inBox1[i], ' != ', (arguments[3]||'box2') + '.' + i + ': ', inBox2[i]);
\r
55 function reciprocalMarginBoxTest(inNode, inBox) {
\r
56 var s = inBox || dojo.marginBox(inNode);
\r
57 dojo.marginBox(inNode, s);
\r
58 var e = dojo.marginBox(inNode);
\r
59 return sameBox(s, e);
\r
62 function fitTest(inParent, inChild) {
\r
63 var pcb = dojo.contentBox(inParent);
\r
64 return reciprocalMarginBoxTest(inChild, pcb);
\r
67 function createStyledElement(inStyle, inParent, inElement, inNoDefault) {
\r
68 inStyle = inStyle||{};
\r
70 for (var i in defaultStyles)
\r
72 inStyle[i] = defaultStyles[i];
\r
74 var n = document.createElement(inElement || 'div');
\r
75 (inParent||document.body).appendChild(n);
\r
76 dojo.mixin(n.style, inStyle);
\r
80 var _testTopInc = 0;
\r
82 var _testInitTop = 250;
\r
83 function styleIncTop(inStyle) {
\r
84 inStyle = dojo.mixin({}, inStyle||{});
\r
85 inStyle.top = (_testInitTop + _testTop*_testTopInc) + 'px';
\r
90 function removeTestNode(inNode) {
\r
91 // leave nodes for inspection or don't return to delete them
\r
93 inNode = dojo.byId(inNode);
\r
94 inNode.parentNode.removeChild(inNode);
\r
98 function testAndCallback(inTest, inAssert, inComment, inOk, inErr) {
\r
99 inTest.assertTrue('/* ' + inComment + '*/' + inAssert);
\r
106 // args are (styles, parent, element name, no default)
\r
107 function mixCreateElementArgs(inMix, inArgs) {
\r
109 if (inArgs&&inArgs[0])
\r
110 dojo.mixin(args[0], inArgs[0]);
\r
112 dojo.mixin(args[0], inMix[0]||{});
\r
113 // parent comes from source
\r
114 if (inMix.length > 1)
\r
115 args[1] = inMix[1];
\r
116 args[2] = inArgs[2];
\r
117 args[3] = inArgs[3]
\r
121 function createStyledNodes(inArgs, inFunc) {
\r
122 for (var i=0, n; (s=testStyles[i]); i++) {
\r
123 n = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inArgs));
\r
128 function createStyledParentChild(inParentArgs, inChildArgs, inFunc) {
\r
129 for (var i=0, s, p, c; (s=testStyles[i]); i++) {
\r
130 p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
\r
131 c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));
\r
132 inFunc&&inFunc(p, c);
\r
136 function createStyledParentChildren(inParentArgs, inChildArgs, inFunc) {
\r
137 for (var i=0, s, p; (s=testStyles[i]); i++)
\r
138 for (var j=0, sc, c, props; (sc=testStyles[j]); j++) {
\r
139 p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
\r
140 c = createStyledElement.apply(this, mixCreateElementArgs([sc, p], inChildArgs));
\r
141 inFunc&&inFunc(p, c);
\r
144 for (var i=0, s, p, c; (s=testStyles[i]); i++) {
\r
145 p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
\r
146 c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));
\r
147 inFunc&&inFunc(p, c);
\r
152 function runFitTest(inTest, inParentStyles, inChildStyles) {
\r
153 createStyledParentChildren([inParentStyles], [inChildStyles], function(p, c) {
\r
154 testAndCallback(inTest, fitTest(p, c), '', function() {removeTestNode(p); });
\r
158 dojo.addOnLoad(function(){
\r
161 function reciprocalTests(t) {
\r
162 createStyledNodes([], function(n) {
\r
163 testAndCallback(t, reciprocalMarginBoxTest(n), '', function() {removeTestNode(n); });
\r
166 function fitTests(t) {
\r
167 runFitTest(t, null, dojo.mixin({}, defaultChildStyles));
\r
169 function fitTestsOverflow(t) {
\r
170 runFitTest(t, null, dojo.mixin({overflow:'hidden'}, defaultChildStyles));
\r
171 runFitTest(t, {overflow: 'hidden'}, dojo.mixin({}, defaultChildStyles));
\r
172 runFitTest(t, {overflow: 'hidden'}, dojo.mixin({overflow:'hidden'}, defaultChildStyles));
\r
174 function fitTestsFloat(t) {
\r
175 runFitTest(t, null, dojo.mixin({float: 'left'}, defaultChildStyles));
\r
176 runFitTest(t, {float: 'left'}, dojo.mixin({}, defaultChildStyles));
\r
177 runFitTest(t, {float: 'left'}, dojo.mixin({float: 'left'}, defaultChildStyles));
\r
179 function reciprocalTestsInline(t) {
\r
180 createStyledParentChild([], [{}, null, 'span'], function(p, c) {
\r
181 c.innerHTML = 'Hello World';
\r
182 testAndCallback(t, reciprocalMarginBoxTest(c), '', function() {removeTestNode(c); });
\r
185 function reciprocalTestsButtonChild(t) {
\r
186 createStyledParentChild([], [{}, null, 'button'], function(p, c) {
\r
187 c.innerHTML = 'Hello World';
\r
188 testAndCallback(t, reciprocalMarginBoxTest(c), '', function() {removeTestNode(c); });
\r
196 <style type="text/css">
\r