<?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"?>
<!--
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="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="chrome://mochikit/content/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>