The Tor Browser / file comparison
comparison: layout/xul/test/test_stack.xul
layout/xul/test/test_stack.xul
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
equal
deleted
inserted
replaced
| -1:000000000000 | 0:5a3596212529 |
|---|---|
| 1 <?xml version="1.0"?> | |
| 2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?> | |
| 3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?> | |
| 4 | |
| 5 <window align="start" title="XUL stack tests" onload="runTest()" | |
| 6 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> | |
| 7 <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> | |
| 8 | |
| 9 <!-- a * before an expected value means an offset from the right or bottom edge --> | |
| 10 <stack id="stack"> | |
| 11 <hbox id="left-top" left="10" top="12" width="20" height="24" | |
| 12 expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36" | |
| 13 stackwidth="30" stackheight="36"/> | |
| 14 <hbox id="start-top" start="10" top="12" width="20" height="24" | |
| 15 expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36" | |
| 16 stackwidth="30" stackheight="36"/> | |
| 17 <hbox id="right-bottom" right="10" bottom="12" width="20" height="24" | |
| 18 expectedleft="*30" expectedtop="*36" expectedright="*10" expectedbottom="*12" | |
| 19 stackwidth="30" stackheight="36"/> | |
| 20 <hbox id="end-bottom" end="10" bottom="12" width="20" height="24" | |
| 21 expectedleft="*30" expectedtop="*36" expectedright="*10" expectedbottom="*12" | |
| 22 stackwidth="30" stackheight="36"/> | |
| 23 <hbox id="left-bottom" left="18" bottom="15" width="16" height="19" | |
| 24 expectedleft="18" expectedtop="*34" expectedright="34" expectedbottom="*15" | |
| 25 stackwidth="34" stackheight="34"/> | |
| 26 <hbox id="start-bottom" start="18" bottom="15" width="16" height="19" | |
| 27 expectedleft="18" expectedtop="*34" expectedright="34" expectedbottom="*15" | |
| 28 stackwidth="34" stackheight="34"/> | |
| 29 <hbox id="right-top" right="5" top="8" width="10" height="11" | |
| 30 expectedleft="*15" expectedtop="8" expectedright="*5" expectedbottom="19" | |
| 31 stackwidth="15" stackheight="19"/> | |
| 32 <hbox id="end-top" end="5" top="8" width="10" height="11" | |
| 33 expectedleft="*15" expectedtop="8" expectedright="*5" expectedbottom="19" | |
| 34 stackwidth="15" stackheight="19"/> | |
| 35 <hbox id="left-right" left="12" right="9" width="15" height="6" | |
| 36 expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0" | |
| 37 stackwidth="36" stackheight="6"/> | |
| 38 <hbox id="start-right" start="12" right="9" width="15" height="6" | |
| 39 expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0" | |
| 40 stackwidth="36" stackheight="6"/> | |
| 41 <hbox id="left-end" start="12" end="9" width="15" height="6" | |
| 42 expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0" | |
| 43 stackwidth="36" stackheight="6"/> | |
| 44 <hbox id="start-end" start="12" end="9" width="15" height="6" | |
| 45 expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0" | |
| 46 stackwidth="36" stackheight="6"/> | |
| 47 <hbox id="top-bottom" top="20" bottom="39" width="15" height="6" | |
| 48 expectedleft="0" expectedtop="20" expectedright="*0" expectedbottom="*39" | |
| 49 stackwidth="15" stackheight="65"/> | |
| 50 <hbox id="left-right-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;" | |
| 51 left="16" top="20" right="20" bottom="35" width="7" height="8" | |
| 52 expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" | |
| 53 stackwidth="43" stackheight="63"/> | |
| 54 <hbox id="start-right-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;" | |
| 55 start="16" top="20" right="20" bottom="35" width="7" height="8" | |
| 56 expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" | |
| 57 stackwidth="43" stackheight="63"/> | |
| 58 <hbox id="left-end-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;" | |
| 59 left="16" top="20" end="20" bottom="35" width="7" height="8" | |
| 60 expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" | |
| 61 stackwidth="43" stackheight="63"/> | |
| 62 <hbox id="start-end-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;" | |
| 63 start="16" top="20" end="20" bottom="35" width="7" height="8" | |
| 64 expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" | |
| 65 stackwidth="43" stackheight="63"/> | |
| 66 <hbox id="left-right-top-bottom-nosize" left="16" top="20" right="20" bottom="35" | |
| 67 expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" | |
| 68 stackwidth="36" stackheight="55"/> | |
| 69 <hbox id="start-right-top-bottom-nosize" start="16" top="20" right="20" bottom="35" | |
| 70 expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" | |
| 71 stackwidth="36" stackheight="55"/> | |
| 72 <hbox id="left-end-top-bottom-nosize" left="16" top="20" end="20" bottom="35" | |
| 73 expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" | |
| 74 stackwidth="36" stackheight="55"/> | |
| 75 <hbox id="start-end-top-bottom-nosize" start="16" top="20" end="20" bottom="35" | |
| 76 expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" | |
| 77 stackwidth="36" stackheight="55"/> | |
| 78 <hbox id="none" width="10" height="12" expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0" | |
| 79 stackwidth="10" stackheight="12"/> | |
| 80 <hbox id="none-nosize" expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0" | |
| 81 stackwidth="0" stackheight="0"/> | |
| 82 <hbox id="style-left-right-top-bottom" | |
| 83 style="left: 17px; top: 20px;" right="20" bottom="35" width="7" height="8" | |
| 84 expectedleft="*27" expectedtop="*43" expectedright="*20" expectedbottom="*35" | |
| 85 stackwidth="27" stackheight="43"/> | |
| 86 <hbox id="style-left-right-top-bottom-nosize" | |
| 87 style="left: 16px; top: 20px; right: 20px; bottom: 35px;" | |
| 88 expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0" | |
| 89 stackwidth="0" stackheight="0"/> | |
| 90 <hbox id="left-large-right" left="20" right="1000" height="6" | |
| 91 expectedleft="20" expectedtop="0" expectedright="20" expectedbottom="*0" | |
| 92 stackwidth="1020" stackheight="6"/> | |
| 93 <hbox id="left-top-with-margin" left="8" top="17" width="20" height="24" | |
| 94 style="margin: 1px 2px 3px 4px;" | |
| 95 expectedleft="12" expectedtop="18" expectedright="32" expectedbottom="42" | |
| 96 stackwidth="34" stackheight="45"/> | |
| 97 <hbox id="right-bottom-with-margin" right="6" bottom="15" width="10" height="14" | |
| 98 style="margin: 1px 2px 3px 4px;" | |
| 99 expectedleft="*18" expectedtop="*32" expectedright="*8" expectedbottom="*18" | |
| 100 stackwidth="22" stackheight="33"/> | |
| 101 <hbox id="left-top-right-bottom-with-margin" left="14" right="6" top="8" bottom="15" width="10" height="14" | |
| 102 style="margin: 1px 2px 3px 4px;" | |
| 103 expectedleft="18" expectedtop="9" expectedright="*8" expectedbottom="*18" | |
| 104 stackwidth="36" stackheight="41"/> | |
| 105 <hbox id="none-with-margin" | |
| 106 style="margin: 1px 2px 3px 4px;" | |
| 107 expectedleft="4" expectedtop="1" expectedright="*2" expectedbottom="*3" | |
| 108 stackwidth="6" stackheight="4"/> | |
| 109 </stack> | |
| 110 | |
| 111 <stack id="stack-with-size" width="12" height="14"> | |
| 112 <hbox id="left-top-with-stack-size" left="10" top="12" width="20" height="24" | |
| 113 expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36"/> | |
| 114 </stack> | |
| 115 | |
| 116 <stack id="stack-with-start-end" width="30"> | |
| 117 <hbox id="start-with-start-end" start="10" top="12" width="20" height="24" | |
| 118 expectedstart="10" expectedend="30"/> | |
| 119 <hbox id="end-width-start-end" end="5" top="12" width="20" height="24" | |
| 120 expectedstart="5" expectedend="25"/> | |
| 121 <hbox id="start-end-width-start-end" start="12" end="9" width="20" top="12" height="24" | |
| 122 expectedstart="12" expectedend="21"/> | |
| 123 </stack> | |
| 124 | |
| 125 <stack id="stack-with-border" | |
| 126 style="border-left: 4px solid black; border-top: 2px solid black; border-right: 1px solid black; border-bottom: 3px solid black;"> | |
| 127 <hbox id="left-top-with-border" left="10" top="14" width="20" height="24" | |
| 128 expectedleft="14" expectedtop="16" expectedright="34" expectedbottom="40"/> | |
| 129 <hbox id="start-top-with-border" start="10" top="14" width="20" height="24" | |
| 130 expectedleft="14" expectedtop="16" expectedright="34" expectedbottom="40"/> | |
| 131 <hbox id="right-bottom-with-border" right="5" bottom="8" width="6" height="10" | |
| 132 expectedleft="*12" expectedtop="*21" expectedright="*6" expectedbottom="*11"/> | |
| 133 <hbox id="end-bottom-with-border" end="5" bottom="8" width="6" height="10" | |
| 134 expectedleft="*12" expectedtop="*21" expectedright="*6" expectedbottom="*11"/> | |
| 135 <hbox id="left-top-right-bottom-with-border" left="12" right="5" top="18" bottom="8" | |
| 136 expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/> | |
| 137 <hbox id="start-top-right-bottom-with-border" start="12" right="5" top="18" bottom="8" | |
| 138 expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/> | |
| 139 <hbox id="left-top-end-bottom-with-border" left="12" end="5" top="18" bottom="8" | |
| 140 expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/> | |
| 141 <hbox id="start-top-end-bottom-with-border" start="12" end="5" top="18" bottom="8" | |
| 142 expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/> | |
| 143 <hbox id="none-with-with-border" | |
| 144 expectedleft="4" expectedtop="2" expectedright="*1" expectedbottom="*3"/> | |
| 145 </stack> | |
| 146 | |
| 147 <stack id="stack-dyn"/> | |
| 148 <stack id="stack-dyn-sized" width="12" height="14"/> | |
| 149 | |
| 150 <body xmlns="http://www.w3.org/1999/xhtml"/> | |
| 151 | |
| 152 <script><![CDATA[ | |
| 153 SimpleTest.waitForExplicitFinish(); | |
| 154 | |
| 155 var stackRect; | |
| 156 var dynStack; | |
| 157 | |
| 158 function compareSide(child, actual, side, dyn, direction) | |
| 159 { | |
| 160 var clientRect = child.getBoundingClientRect(); | |
| 161 var vertical = (side == "top" || side == "bottom"); | |
| 162 var expectedval = child.getAttribute("expected" + side); | |
| 163 if (expectedval.indexOf("*") == 0) | |
| 164 expectedval = (vertical ? stackRect.bottom : stackRect.right) - Number(expectedval.substring(1)); | |
| 165 else if (direction == "rtl") | |
| 166 expectedval = (vertical ? stackRect.top : -stackRect.width + clientRect.right + clientRect.left) + Number(expectedval); | |
| 167 else | |
| 168 expectedval = (vertical ? stackRect.top : stackRect.left) + Number(expectedval); | |
| 169 | |
| 170 is(actual, expectedval, child.id + " " + side + (dyn ? " dynamic" : "")); | |
| 171 } | |
| 172 | |
| 173 function runTest() | |
| 174 { | |
| 175 runTestForStack("stack", false); | |
| 176 runTestForStack("stack-with-size", false); | |
| 177 runTestForStartEndAttributes("stack-with-start-end", "ltr"); | |
| 178 runTestForStartEndAttributes("stack-with-start-end", "rtl"); | |
| 179 | |
| 180 var stackWithSize = $("stack-with-size"); | |
| 181 | |
| 182 var sizedStackRect = stackWithSize.getBoundingClientRect(); | |
| 183 is(sizedStackRect.width, 30, "stack size stretched width"); | |
| 184 is(sizedStackRect.height, 36, "stack size stretched height"); | |
| 185 | |
| 186 // set -moz-stack-sizing: ignore and ensure that the stack does not grow | |
| 187 // to include the child | |
| 188 var item = $("left-top-with-stack-size"); | |
| 189 item.style.MozStackSizing = "ignore"; | |
| 190 var parent = item.parentNode; | |
| 191 parent.removeChild(item); | |
| 192 parent.appendChild(item); | |
| 193 | |
| 194 sizedStackRect = stackWithSize.getBoundingClientRect(); | |
| 195 is(sizedStackRect.width, 12, "stack size not stretched width"); | |
| 196 is(sizedStackRect.height, 14, "stack size not stretched height"); | |
| 197 | |
| 198 testPositionChanges(stackWithSize, true); | |
| 199 item.style.MozStackSizing = ""; | |
| 200 testPositionChanges(stackWithSize, false); | |
| 201 | |
| 202 // now test adding stack children dynamically to ensure that | |
| 203 // the size of the stack adjusts accordingly | |
| 204 dynStack = $("stack-dyn"); | |
| 205 runTestForStack("stack", true); | |
| 206 | |
| 207 SimpleTest.finish(); | |
| 208 } | |
| 209 | |
| 210 function runTestForStartEndAttributes(stackid, aDirection) | |
| 211 { | |
| 212 // Change the direction of the layout to RTL to ensure start/end are | |
| 213 // working as expected | |
| 214 var stack = $(stackid); | |
| 215 stack.style.direction = aDirection; | |
| 216 | |
| 217 var stackRect = stack.getBoundingClientRect(); | |
| 218 var children = stack.childNodes; | |
| 219 for (var c = children.length - 1; c >= 0; c--) { | |
| 220 var child = children[c]; | |
| 221 | |
| 222 // do tests only for elements that have a rtl-enabled mode | |
| 223 if (!child.hasAttribute("start") && !child.hasAttribute("end")) | |
| 224 continue; | |
| 225 | |
| 226 var childrect = child.getBoundingClientRect(); | |
| 227 compareSide(child, childrect.right, "end", false, aDirection); | |
| 228 compareSide(child, childrect.left, "start", false, aDirection); | |
| 229 } | |
| 230 | |
| 231 // Reset the direction | |
| 232 stack.style.direction = "ltr"; | |
| 233 } | |
| 234 | |
| 235 function runTestForStack(stackid, dyn) | |
| 236 { | |
| 237 var stack = $(stackid); | |
| 238 if (!dyn) | |
| 239 stackRect = stack.getBoundingClientRect(); | |
| 240 var children = stack.childNodes; | |
| 241 for (var c = children.length - 1; c >= 0; c--) { | |
| 242 var child = children[c]; | |
| 243 if (dyn) { | |
| 244 // for dynamic tests, get the size after appending the child as the | |
| 245 // stack size will be effected by it | |
| 246 dynStack.appendChild(child); | |
| 247 stackRect = dynStack.getBoundingClientRect(); | |
| 248 is(stackRect.width, child.getAttribute("stackwidth"), child.id + " stack width" + (dyn ? " dynamic" : "")); | |
| 249 is(stackRect.height, child.getAttribute("stackheight"), child.id + " stack height" + (dyn ? " dynamic" : "")); | |
| 250 } | |
| 251 | |
| 252 var childrect = child.getBoundingClientRect(); | |
| 253 compareSide(child, childrect.left, "left", dyn); | |
| 254 compareSide(child, childrect.top, "top", dyn); | |
| 255 compareSide(child, childrect.right, "right", dyn); | |
| 256 compareSide(child, childrect.bottom, "bottom", dyn); | |
| 257 if (dyn) | |
| 258 dynStack.removeChild(child); | |
| 259 } | |
| 260 } | |
| 261 | |
| 262 function testPositionChanges(stack, ignoreStackSizing) | |
| 263 { | |
| 264 var add = ignoreStackSizing ? " ignore stack sizing" : ""; | |
| 265 | |
| 266 // ensure that changing left/top/right/bottom/start/end works | |
| 267 var stackchild = document.getElementById("left-top-with-stack-size"); | |
| 268 stackchild.left = 18; | |
| 269 is(stackchild.getBoundingClientRect().left, stack.getBoundingClientRect().left + 18, "left changed" + add); | |
| 270 is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 38, "left changed stack width" + add); | |
| 271 | |
| 272 stackchild.left = ""; | |
| 273 stackchild.setAttribute("start", "19"); | |
| 274 is(stackchild.getBoundingClientRect().left, stack.getBoundingClientRect().left + 19, "left changed" + add); | |
| 275 is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 39, "left changed stack width" + add); | |
| 276 stackchild.removeAttribute("start"); | |
| 277 stackchild.left = 18; | |
| 278 | |
| 279 stackchild.top = 22; | |
| 280 is(stackchild.getBoundingClientRect().top, stack.getBoundingClientRect().top + 22, "top changed" + add); | |
| 281 is(stack.getBoundingClientRect().height, ignoreStackSizing ? 14 : 46, "left changed stack height" + add); | |
| 282 | |
| 283 stackchild.setAttribute("right", "6"); | |
| 284 is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().left + 18, "right changed" + add); | |
| 285 // the width is only 12 pixels in ignoreStackSizing mode, so don't check the offset | |
| 286 // from the right edge in this case | |
| 287 if (!ignoreStackSizing) | |
| 288 is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 6, | |
| 289 "right changed from right edge" + add); | |
| 290 is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 24, "right changed stack width" + add); | |
| 291 | |
| 292 stackchild.removeAttribute("right"); | |
| 293 stackchild.setAttribute("end", "7"); | |
| 294 is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().left + 18, "right changed" + add); | |
| 295 // the width is only 12 pixels in ignoreStackSizing mode, so don't check the offset | |
| 296 // from the right edge in this case | |
| 297 if (!ignoreStackSizing) | |
| 298 is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 7, | |
| 299 "right changed from right edge" + add); | |
| 300 is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 25, "right changed stack width" + add); | |
| 301 stackchild.removeAttribute("end"); | |
| 302 stackchild.setAttribute("right", "6"); | |
| 303 | |
| 304 stackchild.setAttribute("bottom", "9"); | |
| 305 is(stackchild.getBoundingClientRect().bottom, stack.getBoundingClientRect().top + 22, "bottom changed" + add); | |
| 306 is(stack.getBoundingClientRect().height, ignoreStackSizing ? 14 : 31, "bottom changed stack height" + add); | |
| 307 if (!ignoreStackSizing) | |
| 308 is(stackchild.getBoundingClientRect().bottom, stack.getBoundingClientRect().bottom - 9, | |
| 309 "right changed from bottom edge" + add); | |
| 310 | |
| 311 stackchild.left = ""; | |
| 312 is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 6, "right changed" + add); | |
| 313 is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 26, "right changed no left stack width" + add); | |
| 314 | |
| 315 stackchild.removeAttribute("right"); | |
| 316 is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right, "right cleared" + add); | |
| 317 is(stack.getBoundingClientRect().width, 12, "right cleared stack height" + add); | |
| 318 | |
| 319 // reset the values | |
| 320 stackchild.removeAttribute("bottom"); | |
| 321 stackchild.left = 10; | |
| 322 stackchild.top = 12; | |
| 323 } | |
| 324 | |
| 325 | |
| 326 ]]></script> | |
| 327 </window> |
