1 files changed, 88 insertions, 0 deletions
diff --git a/layout/xul/test/test_splitter_sibling.xhtml b/layout/xul/test/test_splitter_sibling.xhtml
new file mode 100644
index 0000000000..a2e00890c5
--- /dev/null
+++ b/layout/xul/test/test_splitter_sibling.xhtml
@@ -0,0 +1,88 @@
+<?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"?>
+<window title="XUL splitter resizebefore/after 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"/>
+
+  <body xmlns="http://www.w3.org/1999/xhtml">
+  </body>
+
+  <hbox style="width: 200px; height: 200px; direction: ltr; display: none">
+    <vbox style="height: 200px; width: 40px" />
+    <splitter id="ltr-splitter-before" style="width: 5px" resizebefore="sibling" resizeafter="none"/>
+    <vbox style="height: 200px;" flex="1"/>
+  </hbox>
+
+  <hbox style="width: 200px; height: 200px; direction: rtl; display: none">
+    <vbox style="height: 200px; width: 40px" />
+    <splitter id="rtl-splitter-before" style="width: 5px" resizebefore="sibling" resizeafter="none"/>
+    <vbox style="height: 200px;" flex="1"/>
+  </hbox>
+
+  <hbox style="width: 200px; height: 200px; direction: ltr; display: none">
+    <vbox style="height: 200px;" flex="1"/>
+    <splitter id="ltr-splitter-after" style="width: 5px" resizeafter="sibling" resizebefore="none"/>
+    <vbox style="height: 200px; width: 40px" />
+  </hbox>
+
+  <hbox style="width: 200px; height: 200px; direction: rtl; display: none">
+    <vbox style="height: 200px;" flex="1"/>
+    <splitter id="rtl-splitter-after" style="width: 5px" resizeafter="sibling" resizebefore="none"/>
+    <vbox style="height: 200px; width: 40px" />
+  </hbox>
+
+  <script><![CDATA[
+    async function dragSplitter(splitter, offsetX) {
+      info(`Dragging splitter ${splitter.id} to ${offsetX}`);
+
+      const splitterRect = splitter.getBoundingClientRect();
+      const splitterWidth = splitterRect.width;
+      synthesizeMouse(splitter, splitterWidth / 2, 2, {type: "mousedown"});
+      synthesizeMouse(splitter, splitterWidth / 2, 1, {type: "mousemove"});
+      await new Promise(SimpleTest.executeSoon);
+      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);
+      const newSplitterRect = splitter.getBoundingClientRect();
+      is(
+        offsetX > 0,
+        newSplitterRect.left > splitterRect.left,
+        `Should move in the right direction ${splitterRect.left} -> ${newSplitterRect.left}, ${offsetX}`
+      );
+    }
+
+    add_task(async function() {
+      for (let splitter of document.querySelectorAll("splitter")) {
+        info(`Testing ${splitter.id}`);
+        splitter.parentNode.style.display = "";
+        const isBefore = splitter.getAttribute("resizebefore") == "sibling";
+        const isRtl = getComputedStyle(splitter).direction == "rtl";
+
+        const resizableElement = isBefore ? splitter.previousElementSibling : splitter.nextElementSibling;
+        const nonResizableElement = isBefore ? splitter.nextElementSibling : splitter.previousElementSibling;
+        const oldWidth = resizableElement.getBoundingClientRect().width;
+
+        await dragSplitter(splitter, 10);
+
+        is(nonResizableElement.style.width, "", "Shouldn't have set width");
+        isnot(resizableElement.style.width, "40px", "Should've changed width");
+
+        const newWidth = resizableElement.getBoundingClientRect().width;
+
+        info(`Went from ${oldWidth} -> ${newWidth}\n`);
+
+        if (isRtl == isBefore) {
+          ok(newWidth < oldWidth, "Should've shrunk");
+        } else {
+          ok(newWidth > oldWidth, "Should've grown");
+        }
+        splitter.parentNode.style.display = "none";
+      }
+    });
+   ]]></script>
+</window>