2 we use a quirks-mode DTD to check for quirks!
\r
6 <title> test html.js Box utils</title>
\r
7 <style type="text/css">
\r
8 /*@import "../../resources/dojo.css";*/
\r
10 <script type="text/javascript"
\r
11 src="../../dojo.js"
\r
12 djConfig="isDebug: true"></script>
\r
13 <script type="text/javascript">
\r
14 dojo.require("doh.runner");
\r
17 var border = '3px solid black';
\r
18 var padding = '5px';
\r
19 var defaultStyles = {
\r
22 position: 'absolute',
\r
23 backgroundColor: 'red'
\r
26 var defaultChildStyles = {
\r
29 backgroundColor: 'blue'
\r
37 {margin: margin, border: border},
\r
38 {margin: margin, padding: padding},
\r
39 {border: border, padding: padding},
\r
40 {margin: margin, border: border, padding: padding}
\r
44 function sameBox(inBox1, inBox2) {
\r
45 for (var i in inBox1)
\r
46 if (inBox1[i] != inBox2[i]) {
\r
47 console.log((arguments[2]||'box1') + '.' + i + ': ', inBox1[i], ' != ', (arguments[3]||'box2') + '.' + i + ': ', inBox2[i]);
\r
53 function reciprocalMarginBoxTest(inNode, inBox) {
\r
54 var s = inBox || dojo.marginBox(inNode);
\r
55 dojo.marginBox(inNode, s);
\r
56 var e = dojo.marginBox(inNode);
\r
57 return sameBox(s, e);
\r
60 function fitTest(inParent, inChild) {
\r
61 var pcb = dojo.contentBox(inParent);
\r
62 return reciprocalMarginBoxTest(inChild, pcb);
\r
65 function createStyledElement(inStyle, inParent, inElement, inNoDefault) {
\r
66 inStyle = inStyle||{};
\r
68 for (var i in defaultStyles)
\r
70 inStyle[i] = defaultStyles[i];
\r
72 var n = document.createElement(inElement || 'div');
\r
73 (inParent||document.body).appendChild(n);
\r
74 dojo.mixin(n.style, inStyle);
\r
78 var _testTopInc = 0;
\r
80 var _testInitTop = 250;
\r
81 function styleIncTop(inStyle) {
\r
82 inStyle = dojo.mixin({}, inStyle||{});
\r
83 inStyle.top = (_testInitTop + _testTop*_testTopInc) + 'px';
\r
88 function removeTestNode(inNode) {
\r
89 // leave nodes for inspection or don't return to delete them
\r
91 inNode = dojo.byId(inNode);
\r
92 inNode.parentNode.removeChild(inNode);
\r
96 function testAndCallback(inTest, inAssert, inComment, inOk, inErr) {
\r
97 inTest.assertTrue('/* ' + inComment + '*/' + inAssert);
\r
104 // args are (styles, parent, element name, no default)
\r
105 function mixCreateElementArgs(inMix, inArgs) {
\r
107 if (inArgs&&inArgs[0])
\r
108 dojo.mixin(args[0], inArgs[0]);
\r
110 dojo.mixin(args[0], inMix[0]||{});
\r
111 // parent comes from source
\r
112 if (inMix.length > 1)
\r
113 args[1] = inMix[1];
\r
114 args[2] = inArgs[2];
\r
115 args[3] = inArgs[3]
\r
119 function createStyledNodes(inArgs, inFunc) {
\r
120 for (var i=0, n; (s=testStyles[i]); i++) {
\r
121 n = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inArgs));
\r
126 function createStyledParentChild(inParentArgs, inChildArgs, inFunc) {
\r
127 for (var i=0, s, p, c; (s=testStyles[i]); i++) {
\r
128 p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
\r
129 c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));
\r
130 inFunc&&inFunc(p, c);
\r
134 function createStyledParentChildren(inParentArgs, inChildArgs, inFunc) {
\r
135 for (var i=0, s, p; (s=testStyles[i]); i++)
\r
136 for (var j=0, sc, c, props; (sc=testStyles[j]); j++) {
\r
137 p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
\r
138 c = createStyledElement.apply(this, mixCreateElementArgs([sc, p], inChildArgs));
\r
139 inFunc&&inFunc(p, c);
\r
142 for (var i=0, s, p, c; (s=testStyles[i]); i++) {
\r
143 p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));
\r
144 c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));
\r
145 inFunc&&inFunc(p, c);
\r
150 function runFitTest(inTest, inParentStyles, inChildStyles) {
\r
151 createStyledParentChildren([inParentStyles], [inChildStyles], function(p, c) {
\r
152 testAndCallback(inTest, fitTest(p, c), '', function() {removeTestNode(p); });
\r
156 dojo.addOnLoad(function(){
\r
159 function reciprocalTests(t) {
\r
160 createStyledNodes([], function(n) {
\r
161 testAndCallback(t, reciprocalMarginBoxTest(n), '', function() {removeTestNode(n); });
\r
164 function fitTests(t) {
\r
165 runFitTest(t, null, dojo.mixin({}, defaultChildStyles));
\r
167 function fitTestsOverflow(t) {
\r
168 runFitTest(t, null, dojo.mixin({overflow:'hidden'}, defaultChildStyles));
\r
169 runFitTest(t, {overflow: 'hidden'}, dojo.mixin({}, defaultChildStyles));
\r
170 runFitTest(t, {overflow: 'hidden'}, dojo.mixin({overflow:'hidden'}, defaultChildStyles));
\r
172 function fitTestsFloat(t) {
\r
173 runFitTest(t, null, dojo.mixin({float: 'left'}, defaultChildStyles));
\r
174 runFitTest(t, {float: 'left'}, dojo.mixin({}, defaultChildStyles));
\r
175 runFitTest(t, {float: 'left'}, dojo.mixin({float: 'left'}, defaultChildStyles));
\r
177 function reciprocalTestsInline(t) {
\r
178 createStyledParentChild([], [{}, null, 'span'], function(p, c) {
\r
179 c.innerHTML = 'Hello World';
\r
180 testAndCallback(t, reciprocalMarginBoxTest(c), '', function() {removeTestNode(c); });
\r
183 function reciprocalTestsButtonChild(t) {
\r
184 createStyledParentChild([], [{}, null, 'button'], function(p, c) {
\r
185 c.innerHTML = 'Hello World';
\r
186 testAndCallback(t, reciprocalMarginBoxTest(c), '', function() {removeTestNode(c); });
\r
194 <style type="text/css">
\r