<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <?xml-stylesheet href="/tests/SimpleTest/test.css" type="text/css"?> <?xml-stylesheet href="data:text/css, hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?> <!-- XUL <splitter> collapsing tests --> <window title="XUL splitter collapsing tests" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" orient="horizontal"> <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"/> <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"/> <!-- test results are displayed in the html:body --> <body xmlns="http://www.w3.org/1999/xhtml"> </body> <!-- test code goes here --> <script type="application/javascript"><![CDATA[ SimpleTest.waitForExplicitFinish(); function dragSplitter(offsetX, callback) { var splitterWidth = splitter.boxObject.width; synthesizeMouse(splitter, splitterWidth / 2, 2, {type: "mousedown"}); synthesizeMouse(splitter, splitterWidth / 2, 1, {type: "mousemove"}); SimpleTest.executeSoon(function() { SimpleTest.is(splitter.getAttribute("state"), "dragging", "The splitter should be dragged"); synthesizeMouse(splitter, offsetX, 1, {type: "mousemove"}); synthesizeMouse(splitter, offsetX, 1, {type: "mouseup"}); SimpleTest.executeSoon(callback); }); } function shouldBeCollapsed(where) { SimpleTest.is(splitter.getAttribute("state"), "collapsed", "The splitter should be collapsed"); SimpleTest.is(splitter.getAttribute("substate"), where, "The splitter should be collapsed " + where); } function shouldNotBeCollapsed() { SimpleTest.is(splitter.getAttribute("state"), "", "The splitter should not be collapsed"); } function runPass(rightCollapsed, leftCollapsed, callback) { var containerWidth = container.boxObject.width; var isRTL = getComputedStyle(splitter, null).direction == "rtl"; dragSplitter(containerWidth, function() { if (rightCollapsed) { shouldBeCollapsed(isRTL ? "before" : "after"); } else { shouldNotBeCollapsed(); } dragSplitter(-containerWidth * 2, function() { if (leftCollapsed) { shouldBeCollapsed(isRTL ? "after" : "before"); } else { shouldNotBeCollapsed(); } dragSplitter(containerWidth / 2, function() { // the splitter should never be collapsed in the middle shouldNotBeCollapsed(); callback(); }); }); }); } var splitter, container; function runLTRTests(callback) { splitter = document.getElementById("ltr-splitter"); container = splitter.parentNode; splitter.setAttribute("collapse", "before"); runPass(false, true, function() { splitter.setAttribute("collapse", "after"); runPass(true, false, function() { splitter.setAttribute("collapse", "both"); runPass(true, true, callback); }); }); } function runRTLTests(callback) { splitter = document.getElementById("rtl-splitter"); container = splitter.parentNode; splitter.setAttribute("collapse", "before"); runPass(true, false, function() { splitter.setAttribute("collapse", "after"); runPass(false, true, function() { splitter.setAttribute("collapse", "both"); runPass(true, true, callback); }); }); } function runTests() { runLTRTests(function() { runRTLTests(function() { SimpleTest.finish(); }); }); } addLoadEvent(function() {SimpleTest.executeSoon(runTests);}); ]]></script> <hbox style="max-width: 200px; height: 300px; direction: ltr;"> <vbox style="width: 100px; height: 300px;" flex="1"/> <splitter id="ltr-splitter"/> <vbox style="width: 100px; height: 300px;" flex="1"/> </hbox> <hbox style="max-width: 200px; height: 300px; direction: rtl;"> <vbox style="width: 100px; height: 300px;" flex="1"/> <splitter id="rtl-splitter"/> <vbox style="width: 100px; height: 300px;" flex="1"/> </hbox> </window>