khronosschoty
/
palemoon-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<?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>