<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="/tests/SimpleTest/test.css" type="text/css"?>
<!--
  XUL Widget Test for scale
  -->
<window title="scale" width="500" height="600"
        onload="setTimeout(testtag_scale, 0);"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/javascript" src="/MochiKit/packed.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>  
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>  

<hbox>
  <vbox>
    <scale id="scale-horizontal-normal"/>
    <scale id="scale-horizontal-reverse" dir="reverse"/>
  </vbox>
  <scale id="scale-vertical-normal" orient="vertical"/>
  <scale id="scale-vertical-reverse" orient="vertical" dir="reverse"/>
</hbox>

<body xmlns="http://www.w3.org/1999/xhtml">
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
</body>

<script>
<![CDATA[

SimpleTest.waitForExplicitFinish();

function testtag_scale()
{
  testtag_scale_inner("scale-horizontal-normal", true, false);
  testtag_scale_inner("scale-horizontal-reverse", true, true);
  testtag_scale_inner("scale-vertical-normal", false, false);
  testtag_scale_inner("scale-vertical-reverse", false, true);

  SimpleTest.finish();
}

function testtag_scale_inner(elementid, horiz, reverse)
{
  var testid = (horiz ? "horizontal " : "vertical ") +
               (reverse ? "reverse " : "normal ");

  var element = document.getElementById(elementid);

  testtag_scale_States(element, 0, "", 0, 100, testid + "initial");

  element.min = 0;
  element.max = 10;
  testtag_scale_States(element, 0, "", 0, 10, testid + "first set");

  element.decrease();
  is(element.value, 0, testid + "decrease");
  element.increase();
  is(element.value, 1, testid + "increase");
  element.value = 0;
  is(element.value, 0, testid + "set value");

  testtag_scale_Increments(element, 0, 10, 6, 7, testid + "increase decrease");

  // check if changing the min and max adjusts the value to fit in range
  element.min = 5;
  testtag_scale_States(element, 5, "5", 5, 10, testid + "change min");
  element.value = 15;
  is(element.value, 10, testid + "change minmax value set too high");
  element.max = 8;
  is(element.value, 8, testid + "change max");
  element.value = 2;
  is(element.value, 5, testid + "change minmax set too low");

  // check negative values
  element.min = -15;
  element.max = -5;
  testtag_scale_States(element, -5, "-5", -15, -5, testid + "minmax negative");
  element.value = -15;
  is(element.value, -15, testid + "change max negative");
  testtag_scale_Increments(element, -15, -5, 7, 8, testid + "increase decrease negative");

  // check case when min is negative and max is positive
  element.min = -10;
  element.max = 35;
  testtag_scale_States(element, -10, "-10", -10, 35, testid + "minmax mixed sign");
  testtag_scale_Increments(element, -10, 35, 25, 30, testid + "increase decrease mixed sign");

  testtag_scale_UI(element, testid, horiz, reverse);
}

function testtag_scale_UI(element, testid, horiz, reverse)
{
  element.min = 0;
  element.max = 20;
  element.value = 7;
  element.increment = 2;
  element.pageIncrement = 4;

  element.focus();

  var leftIncrements = horiz && reverse;
  var upDecrements = !horiz && !reverse;
  synthesizeKeyExpectEvent("VK_LEFT", { }, element, "change", testid + "key left");
  is(element.value, leftIncrements ? 9 : 5, testid + " key left");
  synthesizeKeyExpectEvent("VK_RIGHT", { }, element, "change", testid + "key right");
  is(element.value, 7, testid + " key right");
  synthesizeKeyExpectEvent("VK_UP", { }, element, "change", testid + "key up");
  is(element.value, upDecrements ? 5 : 9, testid + " key up");
  synthesizeKeyExpectEvent("VK_DOWN", { }, element, "change", testid + "key down");
  is(element.value, 7, testid + " key down");

  synthesizeKeyExpectEvent("VK_PAGE_UP", { }, element, "change", testid + "key page up");
  is(element.value, upDecrements ? 3 : 11, testid + " key page up");
  synthesizeKeyExpectEvent("VK_PAGE_DOWN", { }, element, "change", testid + "key page down");
  is(element.value, 7, testid + " key page down");

  synthesizeKeyExpectEvent("VK_HOME", { }, element, "change", testid + "key home");
  is(element.value, reverse ? 20 : 0, testid + " key home");
  synthesizeKeyExpectEvent("VK_END", { }, element, "change", testid + "key end");
  is(element.value, reverse ? 0 : 20, testid + " key end");

  testtag_scale_UI_Mouse(element, testid, horiz, reverse, 4);

  element.min = 4;
  element.pageIncrement = 3;
  testtag_scale_UI_Mouse(element, testid + " with min", horiz, reverse, 3);

  element.pageIncrement = 30;
  testtag_scale_UI_Mouse(element, testid + " with min past", horiz, reverse, 30);
}

function testtag_scale_UI_Mouse(element, testid, horiz, reverse, pinc)
{
  var initial = reverse ? 8 : 12;
  var newval = initial + (reverse ? pinc : -pinc);
  var endval = initial;
  // in the pinc == 30 case, the page increment is large enough that it would
  // just cause the thumb to reach the end of the scale. Make sure that the
  // mouse click does not go past the end.
  if (pinc == 30) {
    newval = reverse ? 20 : 4;
    endval = reverse ? 4 : 20;
  }
  element.value = initial;

  var hmove = horiz ? 25 : 10;
  var vmove = horiz ? 10 : 25;

  var leftFn = function () { return reverse ? element.value < newval + 3 : element.value > newval - 3; }
  var rightFn = function () { return reverse ? element.value < endval - 3 : element.value < endval + 3; }
  
  // check that clicking the mouse on the trough moves the thumb properly
  synthesizeMouseExpectEvent(element, hmove, vmove, { }, element, "change", testid + "mouse on left movetoclick=default");

  if (navigator.platform.indexOf("Mac") >= 0) {
    if (pinc == 30)
      ok(element.value > 4, testid + " mouse on left movetoclick=default");
    else
      ok(leftFn, testid + " mouse on left movetoclick=default");
  }
  else {
    is(element.value, newval, testid + " mouse on left movetoclick=default");
  }

  var rect = element.getBoundingClientRect();
  synthesizeMouseExpectEvent(element, rect.right - rect.left - hmove,
                             rect.bottom - rect.top - vmove, { },
                             element, "change", testid + " mouse on right movetoclick=default");

  if (navigator.platform.indexOf("Mac") >= 0) {
    if (pinc == 30)
      ok(element.value < 20, testid + " mouse on right movetoclick=default");
    else
      ok(rightFn, testid + " mouse on right movetoclick=default");
  }
  else {
    is(element.value, endval, testid + " mouse on right movetoclick=default");
  }

  element.setAttribute("movetoclick", "true");
  element.value = initial;

  synthesizeMouseExpectEvent(element, hmove, vmove, { }, element, "change", testid + "mouse on left movetoclick=true");
  if (pinc == 30)
    ok(element.value > 4, testid + " mouse on left movetoclick=true");
  else
    ok(leftFn, testid + " mouse on left movetoclick=true");

  var rect = element.getBoundingClientRect();
  synthesizeMouseExpectEvent(element, rect.right - rect.left - hmove,
                             rect.bottom - rect.top - vmove, { },
                             element, "change", testid + " mouse on right movetoclick=true");
  if (pinc == 30)
    ok(element.value < 20, testid + " mouse on right movetoclick=true");
  else
    ok(rightFn, testid + " mouse on right movetoclick=true");

  element.setAttribute("movetoclick", "false");
  element.value = initial;

  synthesizeMouseExpectEvent(element, hmove, vmove, { }, element, "change", testid + "mouse on left movetoclick=false");
  is(element.value, newval, testid + " mouse on left movetoclick=false");

  var rect = element.getBoundingClientRect();
  synthesizeMouseExpectEvent(element, rect.right - rect.left - hmove,
                             rect.bottom - rect.top - vmove, { },
                             element, "change", testid + " mouse on right movetoclick=false");
  is(element.value, endval, testid + " mouse on right movetoclick=false");

  element.removeAttribute("movetoclick");

  element.value = reverse ? element.max : element.min;

  synthesizeMouse(element, 8, 8, { type: "mousedown" });
  synthesizeMouse(element, horiz ? 2000 : 8, horiz ? 8 : 2000, { type: "mousemove" });
  is(element.value, reverse ? element.min : element.max, testid + " move mouse too far after end");
  synthesizeMouse(element, 2, 2, { type: "mouseup" });

  synthesizeMouse(element, rect.width - 8, rect.height - 8, { type: "mousedown" });
  synthesizeMouse(element, horiz ? -2000 : rect.width - 8, horiz ? rect.height - 8 : -2000, { type: "mousemove" });
  is(element.value, reverse ? element.max : element.min, testid + " move mouse too far before start");

  synthesizeMouse(element, 2, 2, { type: "mouseup" });

  // now check if moving outside in both directions works. On Windows,
  // it should snap back to the original location.
  element.value = reverse ? element.max : element.min;

  var expected = (navigator.platform.indexOf("Win") >= 0) ? element.value :
                  (reverse ? element.min : element.max);
  synthesizeMouse(element, 7, 7, { type: "mousedown" });
  synthesizeMouse(element, 2000, 2000, { type: "mousemove" });
  is(element.value, expected, testid + " move mouse ouside in both directions");
  synthesizeMouse(element, 2, 2, { type: "mouseup" });
}

function testtag_scale_States(element, evalue, evalueattr, emin, emax, testid)
{
  is(element.getAttribute("value"), evalueattr, testid + " value attribute");
  is(element.value, evalue, testid + " value");
  is(element.min, emin, testid + " min");
  is(element.max, emax, testid + " max");
}

function testtag_scale_Increments(element, min, max, increment, pageIncrement, testid)
{
  // check the increase and decrease methods
  element.increment = increment;
  element.increase();
  is(element.value, min + increment, testid + " increase 1");
  element.increase();
  is(element.value, max, testid + " increase 2");
  element.decrease();
  is(element.value, max - increment, testid + " decrease 1");
  element.decrease();
  is(element.value, min, testid + " decrease 2");

  // check the increasePage and decreasePage methods
  element.pageIncrement = pageIncrement;
  element.increasePage();
  is(element.value, min + pageIncrement, testid + " increasePage 1");
  element.increasePage();
  is(element.value, max, testid + " increasePage 2");
  element.decreasePage();
  is(element.value, max - pageIncrement, testid + " decreasePage 1");
  element.decreasePage();
  is(element.value, min, testid + " decreasePage 2");
}

]]>

</script>

</window>
