1 files changed, 101 insertions, 0 deletions
diff --git a/layout/xul/test/test_splitter.xhtml b/layout/xul/test/test_splitter.xhtml
new file mode 100644
index 0000000000..c31bd6b84e
--- /dev/null
+++ b/layout/xul/test/test_splitter.xhtml
@@ -0,0 +1,101 @@
+<?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"?>
+<?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 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
+  <script src="chrome://mochikit/content/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();
+
+    async function dragSplitter(offsetX) {
+      var splitterRect = splitter.getBoundingClientRect();
+      var splitterWidth = splitterRect.width;
+      synthesizeMouse(splitter, splitterWidth / 2, 2, {type: "mousedown"});
+      synthesizeMouse(splitter, splitterWidth / 2, 1, {type: "mousemove"});
+      await new Promise(SimpleTest.executeSoon);
+      SimpleTest.is(splitter.getAttribute("state"), "dragging", "The splitter should be dragged");
+      synthesizeMouse(splitter, offsetX, 1, {type: "mousemove"});
+      synthesizeMouse(splitter, offsetX, 1, {type: "mouseup"});
+      await new Promise(SimpleTest.executeSoon);
+      var newSplitterRect = splitter.getBoundingClientRect();
+      is(
+        offsetX > 0,
+        newSplitterRect.left > splitterRect.left,
+        `Should move in the right direction ${splitterRect.left} -> ${newSplitterRect.left}, ${offsetX}`
+      );
+    }
+
+    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");
+    }
+
+    async function runPass(isRTL, rightCollapsed, leftCollapsed) {
+      var containerWidth = splitter.parentNode.getBoundingClientRect().width;
+      await dragSplitter(containerWidth);
+      if (rightCollapsed) {
+        shouldBeCollapsed(isRTL ? "before" : "after");
+      } else {
+        shouldNotBeCollapsed();
+      }
+      await dragSplitter(-containerWidth * 2);
+      if (leftCollapsed) {
+        shouldBeCollapsed(isRTL ? "after" : "before");
+      } else {
+        shouldNotBeCollapsed();
+      }
+      await dragSplitter(containerWidth / 2);
+      // the splitter should never be collapsed in the middle
+      shouldNotBeCollapsed();
+    }
+
+    var splitter;
+    async function runTests(rtl, splitterId) {
+      splitter = document.getElementById(splitterId);
+      await runPass(rtl, false, false);
+      splitter.setAttribute("collapse", "before");
+      await runPass(rtl, rtl, !rtl);
+      splitter.setAttribute("collapse", "after");
+      await runPass(rtl, !rtl, rtl);
+      splitter.setAttribute("collapse", "both");
+      await runPass(rtl, true, true);
+    }
+
+    async function runAllTests() {
+      await runTests(false, "ltr-splitter");
+      await runTests(true, "rtl-splitter");
+      SimpleTest.finish();
+    }
+
+    addLoadEvent(function() {SimpleTest.executeSoon(runAllTests);});
+   ]]></script>
+
+  <hbox style="max-width: 200px; height: 300px; direction: ltr;">
+    <vbox style="width: 100px; height: 300px;" flex="1"/>
+    <splitter id="ltr-splitter" width="5"/>
+    <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" width="5"/>
+    <vbox style="width: 100px; height: 300px;" flex="1"/>
+  </hbox>
+
+</window>