--- /dev/null
+<!--\r
+ we use a quirks-mode DTD to check for quirks!\r
+-->\r
+<html>\r
+ <head>\r
+ <title> test html.js Box utils</title>\r
+ <style type="text/css">\r
+ /*@import "../../resources/dojo.css";*/\r
+ </style>\r
+ <script type="text/javascript" \r
+ src="../../dojo.js" \r
+ djConfig="isDebug: true"></script>\r
+ <script type="text/javascript">\r
+ dojo.require("doh.runner");\r
+ \r
+ var margin = '1px';\r
+ var border = '3px solid black';\r
+ var padding = '5px';\r
+ var defaultStyles = {\r
+ height: '100px',\r
+ width: '100px',\r
+ position: 'absolute',\r
+ backgroundColor: 'red'\r
+ };\r
+ \r
+ var defaultChildStyles = {\r
+ height: '20px',\r
+ width: '20px',\r
+ backgroundColor: 'blue'\r
+ }\r
+ \r
+ var testStyles = [\r
+ {},\r
+ {margin: margin},\r
+ {border: border},\r
+ {padding: padding},\r
+ {margin: margin, border: border},\r
+ {margin: margin, padding: padding},\r
+ {border: border, padding: padding},\r
+ {margin: margin, border: border, padding: padding} \r
+ ]\r
+ \r
+ \r
+ function sameBox(inBox1, inBox2) {\r
+ for (var i in inBox1)\r
+ if (inBox1[i] != inBox2[i]) {\r
+ console.log((arguments[2]||'box1') + '.' + i + ': ', inBox1[i], ' != ', (arguments[3]||'box2') + '.' + i + ': ', inBox2[i]);\r
+ return false;\r
+ } \r
+ return true; \r
+ }\r
+ \r
+ function reciprocalMarginBoxTest(inNode, inBox) {\r
+ var s = inBox || dojo.marginBox(inNode);\r
+ dojo.marginBox(inNode, s);\r
+ var e = dojo.marginBox(inNode);\r
+ return sameBox(s, e);\r
+ }\r
+ \r
+ function fitTest(inParent, inChild) {\r
+ var pcb = dojo.contentBox(inParent);\r
+ return reciprocalMarginBoxTest(inChild, pcb);\r
+ }\r
+ \r
+ function createStyledElement(inStyle, inParent, inElement, inNoDefault) {\r
+ inStyle = inStyle||{};\r
+ if (!inNoDefault) {\r
+ for (var i in defaultStyles)\r
+ if (!inStyle[i])\r
+ inStyle[i] = defaultStyles[i];\r
+ } \r
+ var n = document.createElement(inElement || 'div');\r
+ (inParent||document.body).appendChild(n);\r
+ dojo.mixin(n.style, inStyle);\r
+ return n; \r
+ }\r
+ \r
+ var _testTopInc = 0;\r
+ var _testTop = 150;\r
+ var _testInitTop = 250;\r
+ function styleIncTop(inStyle) {\r
+ inStyle = dojo.mixin({}, inStyle||{});\r
+ inStyle.top = (_testInitTop + _testTop*_testTopInc) + 'px';\r
+ _testTopInc++;\r
+ return inStyle;\r
+ }\r
+ \r
+ function removeTestNode(inNode) {\r
+ // leave nodes for inspection or don't return to delete them\r
+ return;\r
+ inNode = dojo.byId(inNode);\r
+ inNode.parentNode.removeChild(inNode);\r
+ _testTopInc--;\r
+ }\r
+ \r
+ function testAndCallback(inTest, inAssert, inComment, inOk, inErr) {\r
+ inTest.assertTrue('/* ' + inComment + '*/' + inAssert);\r
+ if (inAssert)\r
+ inOk&&inOk();\r
+ else\r
+ inErr&&inErr(); \r
+ }\r
+ \r
+ // args are (styles, parent, element name, no default)\r
+ function mixCreateElementArgs(inMix, inArgs) {\r
+ args = [{}];\r
+ if (inArgs&&inArgs[0])\r
+ dojo.mixin(args[0], inArgs[0]);\r
+ if (inMix.length)\r
+ dojo.mixin(args[0], inMix[0]||{});\r
+ // parent comes from source\r
+ if (inMix.length > 1)\r
+ args[1] = inMix[1];\r
+ args[2] = inArgs[2];\r
+ args[3] = inArgs[3] \r
+ return args; \r
+ };\r
+ \r
+ function createStyledNodes(inArgs, inFunc) {\r
+ for (var i=0, n; (s=testStyles[i]); i++) {\r
+ n = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inArgs));\r
+ inFunc&&inFunc(n);\r
+ } \r
+ }\r
+ \r
+ function createStyledParentChild(inParentArgs, inChildArgs, inFunc) {\r
+ for (var i=0, s, p, c; (s=testStyles[i]); i++) {\r
+ p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));\r
+ c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));\r
+ inFunc&&inFunc(p, c);\r
+ } \r
+ }\r
+ \r
+ function createStyledParentChildren(inParentArgs, inChildArgs, inFunc) {\r
+ for (var i=0, s, p; (s=testStyles[i]); i++)\r
+ for (var j=0, sc, c, props; (sc=testStyles[j]); j++) {\r
+ p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));\r
+ c = createStyledElement.apply(this, mixCreateElementArgs([sc, p], inChildArgs));\r
+ inFunc&&inFunc(p, c);\r
+ } \r
+ \r
+ for (var i=0, s, p, c; (s=testStyles[i]); i++) {\r
+ p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs));\r
+ c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs));\r
+ inFunc&&inFunc(p, c);\r
+ } \r
+ }\r
+ \r
+ \r
+ function runFitTest(inTest, inParentStyles, inChildStyles) {\r
+ createStyledParentChildren([inParentStyles], [inChildStyles], function(p, c) {\r
+ testAndCallback(inTest, fitTest(p, c), '', function() {removeTestNode(p); });\r
+ });\r
+ }\r
+ \r
+ dojo.addOnLoad(function(){\r
+ doh.register("t", \r
+ [\r
+ function reciprocalTests(t) {\r
+ createStyledNodes([], function(n) {\r
+ testAndCallback(t, reciprocalMarginBoxTest(n), '', function() {removeTestNode(n); });\r
+ });\r
+ },\r
+ function fitTests(t) {\r
+ runFitTest(t, null, dojo.mixin({}, defaultChildStyles));\r
+ },\r
+ function fitTestsOverflow(t) {\r
+ runFitTest(t, null, dojo.mixin({overflow:'hidden'}, defaultChildStyles));\r
+ runFitTest(t, {overflow: 'hidden'}, dojo.mixin({}, defaultChildStyles));\r
+ runFitTest(t, {overflow: 'hidden'}, dojo.mixin({overflow:'hidden'}, defaultChildStyles));\r
+ },\r
+ function fitTestsFloat(t) {\r
+ runFitTest(t, null, dojo.mixin({float: 'left'}, defaultChildStyles));\r
+ runFitTest(t, {float: 'left'}, dojo.mixin({}, defaultChildStyles));\r
+ runFitTest(t, {float: 'left'}, dojo.mixin({float: 'left'}, defaultChildStyles));\r
+ },\r
+ function reciprocalTestsInline(t) {\r
+ createStyledParentChild([], [{}, null, 'span'], function(p, c) {\r
+ c.innerHTML = 'Hello World';\r
+ testAndCallback(t, reciprocalMarginBoxTest(c), '', function() {removeTestNode(c); });\r
+ });\r
+ },\r
+ function reciprocalTestsButtonChild(t) {\r
+ createStyledParentChild([], [{}, null, 'button'], function(p, c) {\r
+ c.innerHTML = 'Hello World';\r
+ testAndCallback(t, reciprocalMarginBoxTest(c), '', function() {removeTestNode(c); });\r
+ });\r
+ }\r
+ ]\r
+ );\r
+ doh.run();\r
+ });\r
+ </script>\r
+ <style type="text/css">\r
+ html, body {\r
+ padding: 0px;\r
+ margin: 0px;\r
+ border: 0px;\r
+ }\r
+ </style>\r
+ </head>\r
+ <body>\r
+ </body>\r
+</html>\r
+\r
projects / eow / blobdiff