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