layout/xul/test/test_stack.xul

   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(String(stackRect.width), child.getAttribute("stackwidth"), child.id + " stack width" + (dyn ? " dynamic" : ""));
 249           is(String(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>