<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="/tests/SimpleTest/test.css" type="text/css"?>

<window title="Focus Tests"
        onload="setTimeout(runTests, 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>      

<!-- Only the elements with class="focusable" should be focusable -->

<vbox id="buttonbox">
<hbox>
  <button id="tn" label="no tabindex" class="focusable"/>
  <button id="t-1" label="tabindex = -1" tabindex="-1" class="focusable"/>
  <button id="t0" label="tabindex = 0" tabindex="0" class="focusable"/>
  <button id="t2" label="tabindex = 2" tabindex="2" class="focusable"/>
</hbox>
<hbox>
  <button id="nofocus-tn" style="-moz-user-focus: none;" label="no tabindex"/>
  <button id="nofocus-t-1" style="-moz-user-focus: none;" label="tabindex = -1" tabindex="-1"/>
  <button id="nofocus-t0" style="-moz-user-focus: none;" label="tabindex = 0" tabindex="0" class="focusable"/>
  <button id="nofocus-t2" style="-moz-user-focus: none;" label="tabindex = 2" tabindex="2" class="focusable"/>
</hbox>
<hbox>
  <button id="focus-tn" style="-moz-user-focus: normal;" label="no tabindex" class="focusable"/>
  <button id="focus-t-1" style="-moz-user-focus: normal;" label="tabindex = -1" tabindex="-1" class="focusable"/>
  <button id="focus-t0" style="-moz-user-focus: normal;" label="tabindex = 0" tabindex="0" class="focusable"/>
  <button id="focus-t2" style="-moz-user-focus: normal;" label="tabindex = 2" tabindex="2" class="focusable"/>
</hbox>
<hbox>
  <button id="disabled-tn" label="no tabindex" disabled="true"/>
  <button id="disabled-t-1" label="tabindex = -1" tabindex="-1" disabled="true"/>
  <button id="disabled-t0" label="tabindex = 0" tabindex="0" disabled="true"/>
  <button id="disabled-t2" label="tabindex = 2" tabindex="2" disabled="true"/>
</hbox>
</vbox>
<vbox>
<hbox>
  <dropmarker id="nocontrol-tn" value="no tabindex"/>
  <dropmarker id="nocontrol-t-1" value="tabindex = -1" tabindex="-1"/>
  <dropmarker id="nocontrol-t0" value="tabindex = 0" tabindex="0"/>
  <dropmarker id="nocontrol-t2" value="tabindex = 2" tabindex="2"/>
</hbox>
<hbox>
  <dropmarker id="nocontrol-focus-tn" style="-moz-user-focus: normal;" value="no tabindex" class="focusable"/>
  <dropmarker id="nocontrol-focus-t-1" style="-moz-user-focus: normal;" value="tabindex = -1" tabindex="-1" class="focusable"/>
  <dropmarker id="nocontrol-focus-t0" style="-moz-user-focus: normal;" value="tabindex = 0" tabindex="0" class="focusable"/>
  <dropmarker id="nocontrol-focus-t2" style="-moz-user-focus: normal;" value="tabindex = 2" tabindex="2" class="focusable"/>
</hbox>
<hbox>
  <dropmarker id="nocontrol-nofocus-tn" style="-moz-user-focus: none;" value="no tabindex"/>
  <dropmarker id="nocontrol-nofocus-t-1" style="-moz-user-focus: none;" value="tabindex = -1" tabindex="-1"/>
  <dropmarker id="nocontrol-nofocus-t0" style="-moz-user-focus: none;" value="tabindex = 0" tabindex="0"/>
  <dropmarker id="nocontrol-nofocus-t2" style="-moz-user-focus: none;" value="tabindex = 2" tabindex="2"/>
</hbox>
</vbox>

<script class="testbody" type="application/javascript">
<![CDATA[

SimpleTest.waitForExplicitFinish();

function runTests()
{
  synthesizeKey("VK_TAB", { });
  var cd = document.commandDispatcher;

  testElements(cd, document.getElementsByTagName("button"));
  // hide buttons so that images aren't scrolled out of view
  $("buttonbox").hidden = true;
  testElements(cd, document.getElementsByTagName("dropmarker"));

  SimpleTest.finish();
}

function testElements(cd, elems)
{
  for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    synthesizeMouse(elem, 4, 4, { });
    var expected = (elem.className == "focusable") ? elem : null;
    is(cd.focusedElement, expected, "check focus " + elem.id);
  }
}

]]>
</script>

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

</window>
