1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/xul/test/test_stack.xul Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,327 @@
1.4 +<?xml version="1.0"?>
1.5 +<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
1.6 +<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
1.7 +
1.8 +<window align="start" title="XUL stack tests" onload="runTest()"
1.9 + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
1.10 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
1.11 +
1.12 + <!-- a * before an expected value means an offset from the right or bottom edge -->
1.13 + <stack id="stack">
1.14 + <hbox id="left-top" left="10" top="12" width="20" height="24"
1.15 + expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36"
1.16 + stackwidth="30" stackheight="36"/>
1.17 + <hbox id="start-top" start="10" top="12" width="20" height="24"
1.18 + expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36"
1.19 + stackwidth="30" stackheight="36"/>
1.20 + <hbox id="right-bottom" right="10" bottom="12" width="20" height="24"
1.21 + expectedleft="*30" expectedtop="*36" expectedright="*10" expectedbottom="*12"
1.22 + stackwidth="30" stackheight="36"/>
1.23 + <hbox id="end-bottom" end="10" bottom="12" width="20" height="24"
1.24 + expectedleft="*30" expectedtop="*36" expectedright="*10" expectedbottom="*12"
1.25 + stackwidth="30" stackheight="36"/>
1.26 + <hbox id="left-bottom" left="18" bottom="15" width="16" height="19"
1.27 + expectedleft="18" expectedtop="*34" expectedright="34" expectedbottom="*15"
1.28 + stackwidth="34" stackheight="34"/>
1.29 + <hbox id="start-bottom" start="18" bottom="15" width="16" height="19"
1.30 + expectedleft="18" expectedtop="*34" expectedright="34" expectedbottom="*15"
1.31 + stackwidth="34" stackheight="34"/>
1.32 + <hbox id="right-top" right="5" top="8" width="10" height="11"
1.33 + expectedleft="*15" expectedtop="8" expectedright="*5" expectedbottom="19"
1.34 + stackwidth="15" stackheight="19"/>
1.35 + <hbox id="end-top" end="5" top="8" width="10" height="11"
1.36 + expectedleft="*15" expectedtop="8" expectedright="*5" expectedbottom="19"
1.37 + stackwidth="15" stackheight="19"/>
1.38 + <hbox id="left-right" left="12" right="9" width="15" height="6"
1.39 + expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0"
1.40 + stackwidth="36" stackheight="6"/>
1.41 + <hbox id="start-right" start="12" right="9" width="15" height="6"
1.42 + expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0"
1.43 + stackwidth="36" stackheight="6"/>
1.44 + <hbox id="left-end" start="12" end="9" width="15" height="6"
1.45 + expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0"
1.46 + stackwidth="36" stackheight="6"/>
1.47 + <hbox id="start-end" start="12" end="9" width="15" height="6"
1.48 + expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0"
1.49 + stackwidth="36" stackheight="6"/>
1.50 + <hbox id="top-bottom" top="20" bottom="39" width="15" height="6"
1.51 + expectedleft="0" expectedtop="20" expectedright="*0" expectedbottom="*39"
1.52 + stackwidth="15" stackheight="65"/>
1.53 + <hbox id="left-right-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;"
1.54 + left="16" top="20" right="20" bottom="35" width="7" height="8"
1.55 + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
1.56 + stackwidth="43" stackheight="63"/>
1.57 + <hbox id="start-right-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;"
1.58 + start="16" top="20" right="20" bottom="35" width="7" height="8"
1.59 + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
1.60 + stackwidth="43" stackheight="63"/>
1.61 + <hbox id="left-end-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;"
1.62 + left="16" top="20" end="20" bottom="35" width="7" height="8"
1.63 + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
1.64 + stackwidth="43" stackheight="63"/>
1.65 + <hbox id="start-end-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;"
1.66 + start="16" top="20" end="20" bottom="35" width="7" height="8"
1.67 + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
1.68 + stackwidth="43" stackheight="63"/>
1.69 + <hbox id="left-right-top-bottom-nosize" left="16" top="20" right="20" bottom="35"
1.70 + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
1.71 + stackwidth="36" stackheight="55"/>
1.72 + <hbox id="start-right-top-bottom-nosize" start="16" top="20" right="20" bottom="35"
1.73 + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
1.74 + stackwidth="36" stackheight="55"/>
1.75 + <hbox id="left-end-top-bottom-nosize" left="16" top="20" end="20" bottom="35"
1.76 + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
1.77 + stackwidth="36" stackheight="55"/>
1.78 + <hbox id="start-end-top-bottom-nosize" start="16" top="20" end="20" bottom="35"
1.79 + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35"
1.80 + stackwidth="36" stackheight="55"/>
1.81 + <hbox id="none" width="10" height="12" expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0"
1.82 + stackwidth="10" stackheight="12"/>
1.83 + <hbox id="none-nosize" expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0"
1.84 + stackwidth="0" stackheight="0"/>
1.85 + <hbox id="style-left-right-top-bottom"
1.86 + style="left: 17px; top: 20px;" right="20" bottom="35" width="7" height="8"
1.87 + expectedleft="*27" expectedtop="*43" expectedright="*20" expectedbottom="*35"
1.88 + stackwidth="27" stackheight="43"/>
1.89 + <hbox id="style-left-right-top-bottom-nosize"
1.90 + style="left: 16px; top: 20px; right: 20px; bottom: 35px;"
1.91 + expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0"
1.92 + stackwidth="0" stackheight="0"/>
1.93 + <hbox id="left-large-right" left="20" right="1000" height="6"
1.94 + expectedleft="20" expectedtop="0" expectedright="20" expectedbottom="*0"
1.95 + stackwidth="1020" stackheight="6"/>
1.96 + <hbox id="left-top-with-margin" left="8" top="17" width="20" height="24"
1.97 + style="margin: 1px 2px 3px 4px;"
1.98 + expectedleft="12" expectedtop="18" expectedright="32" expectedbottom="42"
1.99 + stackwidth="34" stackheight="45"/>
1.100 + <hbox id="right-bottom-with-margin" right="6" bottom="15" width="10" height="14"
1.101 + style="margin: 1px 2px 3px 4px;"
1.102 + expectedleft="*18" expectedtop="*32" expectedright="*8" expectedbottom="*18"
1.103 + stackwidth="22" stackheight="33"/>
1.104 + <hbox id="left-top-right-bottom-with-margin" left="14" right="6" top="8" bottom="15" width="10" height="14"
1.105 + style="margin: 1px 2px 3px 4px;"
1.106 + expectedleft="18" expectedtop="9" expectedright="*8" expectedbottom="*18"
1.107 + stackwidth="36" stackheight="41"/>
1.108 + <hbox id="none-with-margin"
1.109 + style="margin: 1px 2px 3px 4px;"
1.110 + expectedleft="4" expectedtop="1" expectedright="*2" expectedbottom="*3"
1.111 + stackwidth="6" stackheight="4"/>
1.112 + </stack>
1.113 +
1.114 + <stack id="stack-with-size" width="12" height="14">
1.115 + <hbox id="left-top-with-stack-size" left="10" top="12" width="20" height="24"
1.116 + expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36"/>
1.117 + </stack>
1.118 +
1.119 + <stack id="stack-with-start-end" width="30">
1.120 + <hbox id="start-with-start-end" start="10" top="12" width="20" height="24"
1.121 + expectedstart="10" expectedend="30"/>
1.122 + <hbox id="end-width-start-end" end="5" top="12" width="20" height="24"
1.123 + expectedstart="5" expectedend="25"/>
1.124 + <hbox id="start-end-width-start-end" start="12" end="9" width="20" top="12" height="24"
1.125 + expectedstart="12" expectedend="21"/>
1.126 + </stack>
1.127 +
1.128 + <stack id="stack-with-border"
1.129 + style="border-left: 4px solid black; border-top: 2px solid black; border-right: 1px solid black; border-bottom: 3px solid black;">
1.130 + <hbox id="left-top-with-border" left="10" top="14" width="20" height="24"
1.131 + expectedleft="14" expectedtop="16" expectedright="34" expectedbottom="40"/>
1.132 + <hbox id="start-top-with-border" start="10" top="14" width="20" height="24"
1.133 + expectedleft="14" expectedtop="16" expectedright="34" expectedbottom="40"/>
1.134 + <hbox id="right-bottom-with-border" right="5" bottom="8" width="6" height="10"
1.135 + expectedleft="*12" expectedtop="*21" expectedright="*6" expectedbottom="*11"/>
1.136 + <hbox id="end-bottom-with-border" end="5" bottom="8" width="6" height="10"
1.137 + expectedleft="*12" expectedtop="*21" expectedright="*6" expectedbottom="*11"/>
1.138 + <hbox id="left-top-right-bottom-with-border" left="12" right="5" top="18" bottom="8"
1.139 + expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/>
1.140 + <hbox id="start-top-right-bottom-with-border" start="12" right="5" top="18" bottom="8"
1.141 + expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/>
1.142 + <hbox id="left-top-end-bottom-with-border" left="12" end="5" top="18" bottom="8"
1.143 + expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/>
1.144 + <hbox id="start-top-end-bottom-with-border" start="12" end="5" top="18" bottom="8"
1.145 + expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/>
1.146 + <hbox id="none-with-with-border"
1.147 + expectedleft="4" expectedtop="2" expectedright="*1" expectedbottom="*3"/>
1.148 + </stack>
1.149 +
1.150 + <stack id="stack-dyn"/>
1.151 + <stack id="stack-dyn-sized" width="12" height="14"/>
1.152 +
1.153 + <body xmlns="http://www.w3.org/1999/xhtml"/>
1.154 +
1.155 + <script><![CDATA[
1.156 + SimpleTest.waitForExplicitFinish();
1.157 +
1.158 + var stackRect;
1.159 + var dynStack;
1.160 +
1.161 + function compareSide(child, actual, side, dyn, direction)
1.162 + {
1.163 + var clientRect = child.getBoundingClientRect();
1.164 + var vertical = (side == "top" || side == "bottom");
1.165 + var expectedval = child.getAttribute("expected" + side);
1.166 + if (expectedval.indexOf("*") == 0)
1.167 + expectedval = (vertical ? stackRect.bottom : stackRect.right) - Number(expectedval.substring(1));
1.168 + else if (direction == "rtl")
1.169 + expectedval = (vertical ? stackRect.top : -stackRect.width + clientRect.right + clientRect.left) + Number(expectedval);
1.170 + else
1.171 + expectedval = (vertical ? stackRect.top : stackRect.left) + Number(expectedval);
1.172 +
1.173 + is(actual, expectedval, child.id + " " + side + (dyn ? " dynamic" : ""));
1.174 + }
1.175 +
1.176 + function runTest()
1.177 + {
1.178 + runTestForStack("stack", false);
1.179 + runTestForStack("stack-with-size", false);
1.180 + runTestForStartEndAttributes("stack-with-start-end", "ltr");
1.181 + runTestForStartEndAttributes("stack-with-start-end", "rtl");
1.182 +
1.183 + var stackWithSize = $("stack-with-size");
1.184 +
1.185 + var sizedStackRect = stackWithSize.getBoundingClientRect();
1.186 + is(sizedStackRect.width, 30, "stack size stretched width");
1.187 + is(sizedStackRect.height, 36, "stack size stretched height");
1.188 +
1.189 + // set -moz-stack-sizing: ignore and ensure that the stack does not grow
1.190 + // to include the child
1.191 + var item = $("left-top-with-stack-size");
1.192 + item.style.MozStackSizing = "ignore";
1.193 + var parent = item.parentNode;
1.194 + parent.removeChild(item);
1.195 + parent.appendChild(item);
1.196 +
1.197 + sizedStackRect = stackWithSize.getBoundingClientRect();
1.198 + is(sizedStackRect.width, 12, "stack size not stretched width");
1.199 + is(sizedStackRect.height, 14, "stack size not stretched height");
1.200 +
1.201 + testPositionChanges(stackWithSize, true);
1.202 + item.style.MozStackSizing = "";
1.203 + testPositionChanges(stackWithSize, false);
1.204 +
1.205 + // now test adding stack children dynamically to ensure that
1.206 + // the size of the stack adjusts accordingly
1.207 + dynStack = $("stack-dyn");
1.208 + runTestForStack("stack", true);
1.209 +
1.210 + SimpleTest.finish();
1.211 + }
1.212 +
1.213 + function runTestForStartEndAttributes(stackid, aDirection)
1.214 + {
1.215 + // Change the direction of the layout to RTL to ensure start/end are
1.216 + // working as expected
1.217 + var stack = $(stackid);
1.218 + stack.style.direction = aDirection;
1.219 +
1.220 + var stackRect = stack.getBoundingClientRect();
1.221 + var children = stack.childNodes;
1.222 + for (var c = children.length - 1; c >= 0; c--) {
1.223 + var child = children[c];
1.224 +
1.225 + // do tests only for elements that have a rtl-enabled mode
1.226 + if (!child.hasAttribute("start") && !child.hasAttribute("end"))
1.227 + continue;
1.228 +
1.229 + var childrect = child.getBoundingClientRect();
1.230 + compareSide(child, childrect.right, "end", false, aDirection);
1.231 + compareSide(child, childrect.left, "start", false, aDirection);
1.232 + }
1.233 +
1.234 + // Reset the direction
1.235 + stack.style.direction = "ltr";
1.236 + }
1.237 +
1.238 + function runTestForStack(stackid, dyn)
1.239 + {
1.240 + var stack = $(stackid);
1.241 + if (!dyn)
1.242 + stackRect = stack.getBoundingClientRect();
1.243 + var children = stack.childNodes;
1.244 + for (var c = children.length - 1; c >= 0; c--) {
1.245 + var child = children[c];
1.246 + if (dyn) {
1.247 + // for dynamic tests, get the size after appending the child as the
1.248 + // stack size will be effected by it
1.249 + dynStack.appendChild(child);
1.250 + stackRect = dynStack.getBoundingClientRect();
1.251 + is(stackRect.width, child.getAttribute("stackwidth"), child.id + " stack width" + (dyn ? " dynamic" : ""));
1.252 + is(stackRect.height, child.getAttribute("stackheight"), child.id + " stack height" + (dyn ? " dynamic" : ""));
1.253 + }
1.254 +
1.255 + var childrect = child.getBoundingClientRect();
1.256 + compareSide(child, childrect.left, "left", dyn);
1.257 + compareSide(child, childrect.top, "top", dyn);
1.258 + compareSide(child, childrect.right, "right", dyn);
1.259 + compareSide(child, childrect.bottom, "bottom", dyn);
1.260 + if (dyn)
1.261 + dynStack.removeChild(child);
1.262 + }
1.263 + }
1.264 +
1.265 + function testPositionChanges(stack, ignoreStackSizing)
1.266 + {
1.267 + var add = ignoreStackSizing ? " ignore stack sizing" : "";
1.268 +
1.269 + // ensure that changing left/top/right/bottom/start/end works
1.270 + var stackchild = document.getElementById("left-top-with-stack-size");
1.271 + stackchild.left = 18;
1.272 + is(stackchild.getBoundingClientRect().left, stack.getBoundingClientRect().left + 18, "left changed" + add);
1.273 + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 38, "left changed stack width" + add);
1.274 +
1.275 + stackchild.left = "";
1.276 + stackchild.setAttribute("start", "19");
1.277 + is(stackchild.getBoundingClientRect().left, stack.getBoundingClientRect().left + 19, "left changed" + add);
1.278 + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 39, "left changed stack width" + add);
1.279 + stackchild.removeAttribute("start");
1.280 + stackchild.left = 18;
1.281 +
1.282 + stackchild.top = 22;
1.283 + is(stackchild.getBoundingClientRect().top, stack.getBoundingClientRect().top + 22, "top changed" + add);
1.284 + is(stack.getBoundingClientRect().height, ignoreStackSizing ? 14 : 46, "left changed stack height" + add);
1.285 +
1.286 + stackchild.setAttribute("right", "6");
1.287 + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().left + 18, "right changed" + add);
1.288 + // the width is only 12 pixels in ignoreStackSizing mode, so don't check the offset
1.289 + // from the right edge in this case
1.290 + if (!ignoreStackSizing)
1.291 + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 6,
1.292 + "right changed from right edge" + add);
1.293 + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 24, "right changed stack width" + add);
1.294 +
1.295 + stackchild.removeAttribute("right");
1.296 + stackchild.setAttribute("end", "7");
1.297 + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().left + 18, "right changed" + add);
1.298 + // the width is only 12 pixels in ignoreStackSizing mode, so don't check the offset
1.299 + // from the right edge in this case
1.300 + if (!ignoreStackSizing)
1.301 + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 7,
1.302 + "right changed from right edge" + add);
1.303 + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 25, "right changed stack width" + add);
1.304 + stackchild.removeAttribute("end");
1.305 + stackchild.setAttribute("right", "6");
1.306 +
1.307 + stackchild.setAttribute("bottom", "9");
1.308 + is(stackchild.getBoundingClientRect().bottom, stack.getBoundingClientRect().top + 22, "bottom changed" + add);
1.309 + is(stack.getBoundingClientRect().height, ignoreStackSizing ? 14 : 31, "bottom changed stack height" + add);
1.310 + if (!ignoreStackSizing)
1.311 + is(stackchild.getBoundingClientRect().bottom, stack.getBoundingClientRect().bottom - 9,
1.312 + "right changed from bottom edge" + add);
1.313 +
1.314 + stackchild.left = "";
1.315 + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 6, "right changed" + add);
1.316 + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 26, "right changed no left stack width" + add);
1.317 +
1.318 + stackchild.removeAttribute("right");
1.319 + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right, "right cleared" + add);
1.320 + is(stack.getBoundingClientRect().width, 12, "right cleared stack height" + add);
1.321 +
1.322 + // reset the values
1.323 + stackchild.removeAttribute("bottom");
1.324 + stackchild.left = 10;
1.325 + stackchild.top = 12;
1.326 + }
1.327 +
1.328 +
1.329 + ]]></script>
1.330 +</window>
