diff options
Diffstat (limited to 'layout/xul/test/test_stack.xul')
| -rw-r--r-- | layout/xul/test/test_stack.xul | 327 |
1 files changed, 327 insertions, 0 deletions
diff --git a/layout/xul/test/test_stack.xul b/layout/xul/test/test_stack.xul new file mode 100644 index 000000000..781a6f298 --- /dev/null +++ b/layout/xul/test/test_stack.xul @@ -0,0 +1,327 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?> + +<window align="start" title="XUL stack tests" onload="runTest()" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> + + <!-- a * before an expected value means an offset from the right or bottom edge --> + <stack id="stack"> + <hbox id="left-top" left="10" top="12" width="20" height="24" + expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36" + stackwidth="30" stackheight="36"/> + <hbox id="start-top" start="10" top="12" width="20" height="24" + expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36" + stackwidth="30" stackheight="36"/> + <hbox id="right-bottom" right="10" bottom="12" width="20" height="24" + expectedleft="*30" expectedtop="*36" expectedright="*10" expectedbottom="*12" + stackwidth="30" stackheight="36"/> + <hbox id="end-bottom" end="10" bottom="12" width="20" height="24" + expectedleft="*30" expectedtop="*36" expectedright="*10" expectedbottom="*12" + stackwidth="30" stackheight="36"/> + <hbox id="left-bottom" left="18" bottom="15" width="16" height="19" + expectedleft="18" expectedtop="*34" expectedright="34" expectedbottom="*15" + stackwidth="34" stackheight="34"/> + <hbox id="start-bottom" start="18" bottom="15" width="16" height="19" + expectedleft="18" expectedtop="*34" expectedright="34" expectedbottom="*15" + stackwidth="34" stackheight="34"/> + <hbox id="right-top" right="5" top="8" width="10" height="11" + expectedleft="*15" expectedtop="8" expectedright="*5" expectedbottom="19" + stackwidth="15" stackheight="19"/> + <hbox id="end-top" end="5" top="8" width="10" height="11" + expectedleft="*15" expectedtop="8" expectedright="*5" expectedbottom="19" + stackwidth="15" stackheight="19"/> + <hbox id="left-right" left="12" right="9" width="15" height="6" + expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0" + stackwidth="36" stackheight="6"/> + <hbox id="start-right" start="12" right="9" width="15" height="6" + expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0" + stackwidth="36" stackheight="6"/> + <hbox id="left-end" start="12" end="9" width="15" height="6" + expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0" + stackwidth="36" stackheight="6"/> + <hbox id="start-end" start="12" end="9" width="15" height="6" + expectedleft="12" expectedtop="0" expectedright="*9" expectedbottom="*0" + stackwidth="36" stackheight="6"/> + <hbox id="top-bottom" top="20" bottom="39" width="15" height="6" + expectedleft="0" expectedtop="20" expectedright="*0" expectedbottom="*39" + stackwidth="15" stackheight="65"/> + <hbox id="left-right-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;" + left="16" top="20" right="20" bottom="35" width="7" height="8" + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" + stackwidth="43" stackheight="63"/> + <hbox id="start-right-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;" + start="16" top="20" right="20" bottom="35" width="7" height="8" + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" + stackwidth="43" stackheight="63"/> + <hbox id="left-end-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;" + left="16" top="20" end="20" bottom="35" width="7" height="8" + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" + stackwidth="43" stackheight="63"/> + <hbox id="start-end-top-bottom" style="left: 5px; top: 5px; right: 8px; bottom: 8px;" + start="16" top="20" end="20" bottom="35" width="7" height="8" + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" + stackwidth="43" stackheight="63"/> + <hbox id="left-right-top-bottom-nosize" left="16" top="20" right="20" bottom="35" + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" + stackwidth="36" stackheight="55"/> + <hbox id="start-right-top-bottom-nosize" start="16" top="20" right="20" bottom="35" + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" + stackwidth="36" stackheight="55"/> + <hbox id="left-end-top-bottom-nosize" left="16" top="20" end="20" bottom="35" + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" + stackwidth="36" stackheight="55"/> + <hbox id="start-end-top-bottom-nosize" start="16" top="20" end="20" bottom="35" + expectedleft="16" expectedtop="20" expectedright="*20" expectedbottom="*35" + stackwidth="36" stackheight="55"/> + <hbox id="none" width="10" height="12" expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0" + stackwidth="10" stackheight="12"/> + <hbox id="none-nosize" expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0" + stackwidth="0" stackheight="0"/> + <hbox id="style-left-right-top-bottom" + style="left: 17px; top: 20px;" right="20" bottom="35" width="7" height="8" + expectedleft="*27" expectedtop="*43" expectedright="*20" expectedbottom="*35" + stackwidth="27" stackheight="43"/> + <hbox id="style-left-right-top-bottom-nosize" + style="left: 16px; top: 20px; right: 20px; bottom: 35px;" + expectedleft="0" expectedtop="0" expectedright="*0" expectedbottom="*0" + stackwidth="0" stackheight="0"/> + <hbox id="left-large-right" left="20" right="1000" height="6" + expectedleft="20" expectedtop="0" expectedright="20" expectedbottom="*0" + stackwidth="1020" stackheight="6"/> + <hbox id="left-top-with-margin" left="8" top="17" width="20" height="24" + style="margin: 1px 2px 3px 4px;" + expectedleft="12" expectedtop="18" expectedright="32" expectedbottom="42" + stackwidth="34" stackheight="45"/> + <hbox id="right-bottom-with-margin" right="6" bottom="15" width="10" height="14" + style="margin: 1px 2px 3px 4px;" + expectedleft="*18" expectedtop="*32" expectedright="*8" expectedbottom="*18" + stackwidth="22" stackheight="33"/> + <hbox id="left-top-right-bottom-with-margin" left="14" right="6" top="8" bottom="15" width="10" height="14" + style="margin: 1px 2px 3px 4px;" + expectedleft="18" expectedtop="9" expectedright="*8" expectedbottom="*18" + stackwidth="36" stackheight="41"/> + <hbox id="none-with-margin" + style="margin: 1px 2px 3px 4px;" + expectedleft="4" expectedtop="1" expectedright="*2" expectedbottom="*3" + stackwidth="6" stackheight="4"/> + </stack> + + <stack id="stack-with-size" width="12" height="14"> + <hbox id="left-top-with-stack-size" left="10" top="12" width="20" height="24" + expectedleft="10" expectedtop="12" expectedright="30" expectedbottom="36"/> + </stack> + + <stack id="stack-with-start-end" width="30"> + <hbox id="start-with-start-end" start="10" top="12" width="20" height="24" + expectedstart="10" expectedend="30"/> + <hbox id="end-width-start-end" end="5" top="12" width="20" height="24" + expectedstart="5" expectedend="25"/> + <hbox id="start-end-width-start-end" start="12" end="9" width="20" top="12" height="24" + expectedstart="12" expectedend="21"/> + </stack> + + <stack id="stack-with-border" + style="border-left: 4px solid black; border-top: 2px solid black; border-right: 1px solid black; border-bottom: 3px solid black;"> + <hbox id="left-top-with-border" left="10" top="14" width="20" height="24" + expectedleft="14" expectedtop="16" expectedright="34" expectedbottom="40"/> + <hbox id="start-top-with-border" start="10" top="14" width="20" height="24" + expectedleft="14" expectedtop="16" expectedright="34" expectedbottom="40"/> + <hbox id="right-bottom-with-border" right="5" bottom="8" width="6" height="10" + expectedleft="*12" expectedtop="*21" expectedright="*6" expectedbottom="*11"/> + <hbox id="end-bottom-with-border" end="5" bottom="8" width="6" height="10" + expectedleft="*12" expectedtop="*21" expectedright="*6" expectedbottom="*11"/> + <hbox id="left-top-right-bottom-with-border" left="12" right="5" top="18" bottom="8" + expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/> + <hbox id="start-top-right-bottom-with-border" start="12" right="5" top="18" bottom="8" + expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/> + <hbox id="left-top-end-bottom-with-border" left="12" end="5" top="18" bottom="8" + expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/> + <hbox id="start-top-end-bottom-with-border" start="12" end="5" top="18" bottom="8" + expectedleft="16" expectedtop="20" expectedright="*6" expectedbottom="*11"/> + <hbox id="none-with-with-border" + expectedleft="4" expectedtop="2" expectedright="*1" expectedbottom="*3"/> + </stack> + + <stack id="stack-dyn"/> + <stack id="stack-dyn-sized" width="12" height="14"/> + + <body xmlns="http://www.w3.org/1999/xhtml"/> + + <script><![CDATA[ + SimpleTest.waitForExplicitFinish(); + + var stackRect; + var dynStack; + + function compareSide(child, actual, side, dyn, direction) + { + var clientRect = child.getBoundingClientRect(); + var vertical = (side == "top" || side == "bottom"); + var expectedval = child.getAttribute("expected" + side); + if (expectedval.indexOf("*") == 0) + expectedval = (vertical ? stackRect.bottom : stackRect.right) - Number(expectedval.substring(1)); + else if (direction == "rtl") + expectedval = (vertical ? stackRect.top : -stackRect.width + clientRect.right + clientRect.left) + Number(expectedval); + else + expectedval = (vertical ? stackRect.top : stackRect.left) + Number(expectedval); + + is(+actual, expectedval, child.id + " " + side + (dyn ? " dynamic" : "")); + } + + function runTest() + { + runTestForStack("stack", false); + runTestForStack("stack-with-size", false); + runTestForStartEndAttributes("stack-with-start-end", "ltr"); + runTestForStartEndAttributes("stack-with-start-end", "rtl"); + + var stackWithSize = $("stack-with-size"); + + var sizedStackRect = stackWithSize.getBoundingClientRect(); + is(sizedStackRect.width, 30, "stack size stretched width"); + is(sizedStackRect.height, 36, "stack size stretched height"); + + // set -moz-stack-sizing: ignore and ensure that the stack does not grow + // to include the child + var item = $("left-top-with-stack-size"); + item.style.MozStackSizing = "ignore"; + var parent = item.parentNode; + parent.removeChild(item); + parent.appendChild(item); + + sizedStackRect = stackWithSize.getBoundingClientRect(); + is(sizedStackRect.width, 12, "stack size not stretched width"); + is(sizedStackRect.height, 14, "stack size not stretched height"); + + testPositionChanges(stackWithSize, true); + item.style.MozStackSizing = ""; + testPositionChanges(stackWithSize, false); + + // now test adding stack children dynamically to ensure that + // the size of the stack adjusts accordingly + dynStack = $("stack-dyn"); + runTestForStack("stack", true); + + SimpleTest.finish(); + } + + function runTestForStartEndAttributes(stackid, aDirection) + { + // Change the direction of the layout to RTL to ensure start/end are + // working as expected + var stack = $(stackid); + stack.style.direction = aDirection; + + var stackRect = stack.getBoundingClientRect(); + var children = stack.childNodes; + for (var c = children.length - 1; c >= 0; c--) { + var child = children[c]; + + // do tests only for elements that have a rtl-enabled mode + if (!child.hasAttribute("start") && !child.hasAttribute("end")) + continue; + + var childrect = child.getBoundingClientRect(); + compareSide(child, childrect.right, "end", false, aDirection); + compareSide(child, childrect.left, "start", false, aDirection); + } + + // Reset the direction + stack.style.direction = "ltr"; + } + + function runTestForStack(stackid, dyn) + { + var stack = $(stackid); + if (!dyn) + stackRect = stack.getBoundingClientRect(); + var children = stack.childNodes; + for (var c = children.length - 1; c >= 0; c--) { + var child = children[c]; + if (dyn) { + // for dynamic tests, get the size after appending the child as the + // stack size will be effected by it + dynStack.appendChild(child); + stackRect = dynStack.getBoundingClientRect(); + is(String(stackRect.width), child.getAttribute("stackwidth"), child.id + " stack width" + (dyn ? " dynamic" : "")); + is(String(stackRect.height), child.getAttribute("stackheight"), child.id + " stack height" + (dyn ? " dynamic" : "")); + } + + var childrect = child.getBoundingClientRect(); + compareSide(child, childrect.left, "left", dyn); + compareSide(child, childrect.top, "top", dyn); + compareSide(child, childrect.right, "right", dyn); + compareSide(child, childrect.bottom, "bottom", dyn); + if (dyn) + dynStack.removeChild(child); + } + } + + function testPositionChanges(stack, ignoreStackSizing) + { + var add = ignoreStackSizing ? " ignore stack sizing" : ""; + + // ensure that changing left/top/right/bottom/start/end works + var stackchild = document.getElementById("left-top-with-stack-size"); + stackchild.left = 18; + is(stackchild.getBoundingClientRect().left, stack.getBoundingClientRect().left + 18, "left changed" + add); + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 38, "left changed stack width" + add); + + stackchild.left = ""; + stackchild.setAttribute("start", "19"); + is(stackchild.getBoundingClientRect().left, stack.getBoundingClientRect().left + 19, "left changed" + add); + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 39, "left changed stack width" + add); + stackchild.removeAttribute("start"); + stackchild.left = 18; + + stackchild.top = 22; + is(stackchild.getBoundingClientRect().top, stack.getBoundingClientRect().top + 22, "top changed" + add); + is(stack.getBoundingClientRect().height, ignoreStackSizing ? 14 : 46, "left changed stack height" + add); + + stackchild.setAttribute("right", "6"); + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().left + 18, "right changed" + add); + // the width is only 12 pixels in ignoreStackSizing mode, so don't check the offset + // from the right edge in this case + if (!ignoreStackSizing) + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 6, + "right changed from right edge" + add); + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 24, "right changed stack width" + add); + + stackchild.removeAttribute("right"); + stackchild.setAttribute("end", "7"); + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().left + 18, "right changed" + add); + // the width is only 12 pixels in ignoreStackSizing mode, so don't check the offset + // from the right edge in this case + if (!ignoreStackSizing) + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 7, + "right changed from right edge" + add); + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 25, "right changed stack width" + add); + stackchild.removeAttribute("end"); + stackchild.setAttribute("right", "6"); + + stackchild.setAttribute("bottom", "9"); + is(stackchild.getBoundingClientRect().bottom, stack.getBoundingClientRect().top + 22, "bottom changed" + add); + is(stack.getBoundingClientRect().height, ignoreStackSizing ? 14 : 31, "bottom changed stack height" + add); + if (!ignoreStackSizing) + is(stackchild.getBoundingClientRect().bottom, stack.getBoundingClientRect().bottom - 9, + "right changed from bottom edge" + add); + + stackchild.left = ""; + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right - 6, "right changed" + add); + is(stack.getBoundingClientRect().width, ignoreStackSizing ? 12 : 26, "right changed no left stack width" + add); + + stackchild.removeAttribute("right"); + is(stackchild.getBoundingClientRect().right, stack.getBoundingClientRect().right, "right cleared" + add); + is(stack.getBoundingClientRect().width, 12, "right cleared stack height" + add); + + // reset the values + stackchild.removeAttribute("bottom"); + stackchild.left = 10; + stackchild.top = 12; + } + + + ]]></script> +</window> |