+++ /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