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

   1 <!--\r
   2         we use a quirks-mode DTD to check for quirks!\r
   3 -->\r
   4 <html>\r
   5         <head>\r
   6                 <title> test html.js Box utils</title>\r
   7                 <style type="text/css">\r
   8                         /*@import "../../resources/dojo.css";*/\r
   9                 </style>\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
  15                         \r
  16                         var margin = '1px';\r
  17                         var border = '3px solid black';\r
  18                         var padding = '5px';\r
  19                         var defaultStyles = {\r
  20                                 height: '100px',\r
  21                                 width: '100px',\r
  22                                 position: 'absolute',\r
  23                                 backgroundColor: 'red'\r
  24                         };\r
  25                         \r
  26                         var defaultChildStyles = {\r
  27                                 height: '20px',\r
  28                                 width: '20px',\r
  29                                 backgroundColor: 'blue'\r
  30                         }\r
  31                         \r
  32                         var testStyles = [\r
  33                                 {},\r
  34                                 {margin: margin},\r
  35                                 {border: border},\r
  36                                 {padding: padding},\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
  41                         ]\r
  42                         \r
  43                         \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
  48                                                 return false;\r
  49                                         }       \r
  50                                 return true;            \r
  51                         }\r
  52                         \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
  58                         }\r
  59                         \r
  60                         function fitTest(inParent, inChild) {\r
  61                                 var pcb = dojo.contentBox(inParent);\r
  62                                 return reciprocalMarginBoxTest(inChild, pcb);\r
  63                         }\r
  64                         \r
  65                         function createStyledElement(inStyle, inParent, inElement, inNoDefault) {\r
  66                                 inStyle = inStyle||{};\r
  67                                 if (!inNoDefault) {\r
  68                                         for (var i in defaultStyles)\r
  69                                                 if (!inStyle[i])\r
  70                                                         inStyle[i] = defaultStyles[i];\r
  71                                 }                       \r
  72                                 var n = document.createElement(inElement || 'div');\r
  73                                 (inParent||document.body).appendChild(n);\r
  74                                 dojo.mixin(n.style, inStyle);\r
  75                                 return n;                               \r
  76                         }\r
  77                         \r
  78                         var _testTopInc = 0;\r
  79                         var _testTop = 150;\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
  84                                 _testTopInc++;\r
  85                                 return inStyle;\r
  86                         }\r
  87                         \r
  88                         function removeTestNode(inNode) {\r
  89                                 // leave nodes for inspection or don't return to delete them\r
  90                                 return;\r
  91                                 inNode = dojo.byId(inNode);\r
  92                                 inNode.parentNode.removeChild(inNode);\r
  93                                 _testTopInc--;\r
  94                         }\r
  95                         \r
  96                         function testAndCallback(inTest, inAssert, inComment, inOk, inErr) {\r
  97                                 inTest.assertTrue('/* ' + inComment +  '*/' + inAssert);\r
  98                                 if (inAssert)\r
  99                                         inOk&&inOk();\r
 100                                 else\r
 101                                         inErr&&inErr(); \r
 102                         }\r
 103                         \r
 104                         // args are (styles, parent, element name, no default)\r
 105                         function mixCreateElementArgs(inMix, inArgs) {\r
 106                                 args = [{}];\r
 107                                 if (inArgs&&inArgs[0])\r
 108                                         dojo.mixin(args[0], inArgs[0]);\r
 109                                 if (inMix.length)\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
 116                                 return args;    \r
 117                         };\r
 118                         \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
 122                                         inFunc&&inFunc(n);\r
 123                                 }       \r
 124                         }\r
 125                         \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
 131                                 }       \r
 132                         }\r
 133                         \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
 140                                         }       \r
 141                                 \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
 146                                 }       \r
 147                         }\r
 148                         \r
 149                         \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
 153                                 });\r
 154                         }\r
 155                         \r
 156                         dojo.addOnLoad(function(){\r
 157                                 doh.register("t", \r
 158                                         [\r
 159                                                 function reciprocalTests(t) {\r
 160                                                         createStyledNodes([], function(n) {\r
 161                                                                 testAndCallback(t, reciprocalMarginBoxTest(n), '', function() {removeTestNode(n); });\r
 162                                                         });\r
 163                                                 },\r
 164                                                 function fitTests(t) {\r
 165                                                         runFitTest(t, null, dojo.mixin({}, defaultChildStyles));\r
 166                                                 },\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
 171                                                 },\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
 176                                                 },\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
 181                                                         });\r
 182                                                 },\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
 187                                                         });\r
 188                                                 }\r
 189                                         ]\r
 190                                 );\r
 191                                 doh.run();\r
 192                         });\r
 193                 </script>\r
 194                 <style type="text/css">\r
 195                         html, body {\r
 196                                 padding: 0px;\r
 197                                 margin: 0px;\r
 198                                 border: 0px;\r
 199                         }\r
 200                 </style>\r
 201         </head>\r
 202         <body>\r
 203         </body>\r
 204 </html>\r
 205 \r