git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojo/tests/_base/html_box.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"       "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <!--\r
   3         we use a strict-mode DTD to ensure that the box model is the same for these\r
   4         basic tests\r
   5 -->\r
   6 <html>\r
   7         <head>\r
   8                 <title> test html.js Box utils</title>\r
   9                 <style type="text/css">\r
  10                         /*@import "../../resources/dojo.css";*/\r
  11                 </style>\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
  17                         \r
  18                         var margin = '1px';\r
  19                         var border = '3px solid black';\r
  20                         var padding = '5px';\r
  21                         var defaultStyles = {\r
  22                                 height: '100px',\r
  23                                 width: '100px',\r
  24                                 position: 'absolute',\r
  25                                 backgroundColor: 'red'\r
  26                         };\r
  27                         \r
  28                         var defaultChildStyles = {\r
  29                                 height: '20px',\r
  30                                 width: '20px',\r
  31                                 backgroundColor: 'blue'\r
  32                         }\r
  33                         \r
  34                         var testStyles = [\r
  35                                 {},\r
  36                                 {margin: margin},\r
  37                                 {border: border},\r
  38                                 {padding: padding},\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
  43                         ]\r
  44                         \r
  45                         \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
  50                                                 return false;\r
  51                                         }       \r
  52                                 return true;            \r
  53                         }\r
  54                         \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
  60                         }\r
  61                         \r
  62                         function fitTest(inParent, inChild) {\r
  63                                 var pcb = dojo.contentBox(inParent);\r
  64                                 return reciprocalMarginBoxTest(inChild, pcb);\r
  65                         }\r
  66                         \r
  67                         function createStyledElement(inStyle, inParent, inElement, inNoDefault) {\r
  68                                 inStyle = inStyle||{};\r
  69                                 if (!inNoDefault) {\r
  70                                         for (var i in defaultStyles)\r
  71                                                 if (!inStyle[i])\r
  72                                                         inStyle[i] = defaultStyles[i];\r
  73                                 }                       \r
  74                                 var n = document.createElement(inElement || 'div');\r
  75                                 (inParent||document.body).appendChild(n);\r
  76                                 dojo.mixin(n.style, inStyle);\r
  77                                 return n;                               \r
  78                         }\r
  79                         \r
  80                         var _testTopInc = 0;\r
  81                         var _testTop = 150;\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
  86                                 _testTopInc++;\r
  87                                 return inStyle;\r
  88                         }\r
  89                         \r
  90                         function removeTestNode(inNode) {\r
  91                                 // leave nodes for inspection or don't return to delete them\r
  92                                 return;\r
  93                                 inNode = dojo.byId(inNode);\r
  94                                 inNode.parentNode.removeChild(inNode);\r
  95                                 _testTopInc--;\r
  96                         }\r
  97                         \r
  98                         function testAndCallback(inTest, inAssert, inComment, inOk, inErr) {\r
  99                                 inTest.assertTrue('/* ' + inComment +  '*/' + inAssert);\r
 100                                 if (inAssert)\r
 101                                         inOk&&inOk();\r
 102                                 else\r
 103                                         inErr&&inErr(); \r
 104                         }\r
 105                         \r
 106                         // args are (styles, parent, element name, no default)\r
 107                         function mixCreateElementArgs(inMix, inArgs) {\r
 108                                 args = [{}];\r
 109                                 if (inArgs&&inArgs[0])\r
 110                                         dojo.mixin(args[0], inArgs[0]);\r
 111                                 if (inMix.length)\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
 118                                 return args;    \r
 119                         };\r
 120                         \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
 124                                         inFunc&&inFunc(n);\r
 125                                 }       \r
 126                         }\r
 127                         \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
 133                                 }       \r
 134                         }\r
 135                         \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
 142                                         }       \r
 143                                 \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
 148                                 }       \r
 149                         }\r
 150                         \r
 151                         \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
 155                                 });\r
 156                         }\r
 157                         \r
 158                         dojo.addOnLoad(function(){\r
 159                                 doh.register("t", \r
 160                                         [\r
 161                                                 function reciprocalTests(t) {\r
 162                                                         createStyledNodes([], function(n) {\r
 163                                                                 testAndCallback(t, reciprocalMarginBoxTest(n), '', function() {removeTestNode(n); });\r
 164                                                         });\r
 165                                                 },\r
 166                                                 function fitTests(t) {\r
 167                                                         runFitTest(t, null, dojo.mixin({}, defaultChildStyles));\r
 168                                                 },\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
 173                                                 },\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
 178                                                 },\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
 183                                                         });\r
 184                                                 },\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
 189                                                         });\r
 190                                                 }\r
 191                                         ]\r
 192                                 );\r
 193                                 doh.run();\r
 194                         });\r
 195                 </script>\r
 196                 <style type="text/css">\r
 197                         html, body {\r
 198                                 padding: 0px;\r
 199                                 margin: 0px;\r
 200                                 border: 0px;\r
 201                         }\r
 202                 </style>\r
 203         </head>\r
 204         <body>\r
 205         </body>\r
 206 </html>\r
 207 \r