layout/xul/test/test_splitter.xhtml

   1 <?xml version="1.0"?>
   2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
   3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
   4 <?xml-stylesheet href="data:text/css, * { flex-shrink: 0 } hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?>
   5 <!--
   6 XUL <splitter> collapsing tests
   7 -->
   8 <window title="XUL splitter collapsing tests"
   9         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  10         orient="horizontal">
  11   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
  12   <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
  13
  14   <!-- test results are displayed in the html:body -->
  15   <body xmlns="http://www.w3.org/1999/xhtml">
  16   </body>
  17
  18   <!-- test code goes here -->
  19   <script type="application/javascript"><![CDATA[
  20     SimpleTest.waitForExplicitFinish();
  21
  22     async function dragSplitter(offsetX) {
  23       info(`Dragging splitter ${splitter.id} to ${offsetX}`);
  24
  25       const splitterRect = splitter.getBoundingClientRect();
  26       const splitterWidth = splitterRect.width;
  27       synthesizeMouse(splitter, splitterWidth / 2, 2, {type: "mousedown"});
  28       synthesizeMouse(splitter, splitterWidth / 2, 1, {type: "mousemove"});
  29       await new Promise(SimpleTest.executeSoon);
  30       is(splitter.getAttribute("state"), "dragging", "The splitter should be dragged");
  31       synthesizeMouse(splitter, offsetX, 1, {type: "mousemove"});
  32       synthesizeMouse(splitter, offsetX, 1, {type: "mouseup"});
  33       await new Promise(SimpleTest.executeSoon);
  34       const newSplitterRect = splitter.getBoundingClientRect();
  35       is(
  36         offsetX > 0,
  37         newSplitterRect.left > splitterRect.left,
  38         `Should move in the right direction ${splitterRect.left} -> ${newSplitterRect.left}, ${offsetX}`
  39       );
  40     }
  41
  42     function shouldBeCollapsed(where) {
  43       is(splitter.getAttribute("state"), "collapsed", "The splitter should be collapsed");
  44       is(splitter.getAttribute("substate"), where, "The splitter should be collapsed " + where);
  45     }
  46
  47     function shouldNotBeCollapsed() {
  48       is(splitter.getAttribute("state"), "", "The splitter should not be collapsed");
  49     }
  50
  51     async function runPass(isRTL, rightCollapsed, leftCollapsed) {
  52       const containerWidth = splitter.parentNode.getBoundingClientRect().width;
  53       await dragSplitter(containerWidth);
  54       if (rightCollapsed) {
  55         shouldBeCollapsed(isRTL ? "before" : "after");
  56       } else {
  57         shouldNotBeCollapsed();
  58       }
  59       await dragSplitter(-containerWidth * 2);
  60       if (leftCollapsed) {
  61         shouldBeCollapsed(isRTL ? "after" : "before");
  62       } else {
  63         shouldNotBeCollapsed();
  64       }
  65       await dragSplitter(containerWidth / 2);
  66       // the splitter should never be collapsed in the middle
  67       shouldNotBeCollapsed();
  68     }
  69
  70     var splitter;
  71     var activeBox = null;
  72     function setActiveBox(element) {
  73       if (activeBox) {
  74         activeBox.style.display = "none";
  75       }
  76       if (element) {
  77         element.style.display = "";
  78         element.getBoundingClientRect();
  79       }
  80       activeBox = element;
  81     }
  82
  83     async function runTests(rtl, splitterId) {
  84       info(`Running tests for ${splitterId}`);
  85       splitter = document.getElementById(splitterId);
  86       setActiveBox(splitter.parentNode);
  87       await runPass(rtl, false, false);
  88       splitter.setAttribute("collapse", "before");
  89       await runPass(rtl, rtl, !rtl);
  90       splitter.setAttribute("collapse", "after");
  91       await runPass(rtl, !rtl, rtl);
  92       splitter.setAttribute("collapse", "both");
  93       await runPass(rtl, true, true);
  94     }
  95
  96     async function runAllTests() {
  97       await runTests(false, "ltr-splitter");
  98       await runTests(true, "rtl-splitter");
  99       SimpleTest.finish();
 100     }
 101
 102     addLoadEvent(function() {SimpleTest.executeSoon(runAllTests);});
 103    ]]></script>
 104
 105   <hbox style="display: none; width: 200px; height: 300px; direction: ltr;">
 106   <vbox style="height: 300px; flex: 1 auto"/>
 107     <splitter id="ltr-splitter" style="width: 5px"/>
 108     <vbox style="height: 300px; flex: 1 auto;"/>
 109   </hbox>
 110
 111   <hbox style="display: none; width: 200px; height: 300px; direction: rtl;">
 112     <vbox style="height: 300px; flex: 1 auto" />
 113     <splitter id="rtl-splitter" style="width: 5px"/>
 114     <vbox style="height: 300px; flex: 1 auto" />
 115   </hbox>
 116
 117 </window>