<?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,window > |people { display: none }" type="text/css"?>
<!--
  XUL Widget Test for tabindex
  -->
<window title="tabindex" width="500" height="600"
        onfocus="runTest()"
        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>  

<people id="famouspeople" xmlns="">
    <person name="Napoleon Bonaparte" gender="male"/>
    <person name="Cleopatra" gender="female"/>
    <person name="Julius Caesar" gender="male"/>
    <person name="Ferdinand Magellan" gender="male"/>
    <person name="Laura Secord" gender="female"/>
</people>

<tree id="tree" datasources="#famouspeople" ref="*" querytype="xml" flex="1">
  <treecols>
    <treecol label="Name" flex="1" sort="?name"/>
    <treecol label="Gender" flex="1" sort="?gender"/>
  </treecols>
  <template>
    <query/>
    <rule>
      <action>
        <treechildren id="treechildren-strings">
          <treeitem uri="?">
            <treerow>
              <treecell label="?name"/>
              <treecell label="?gender"/>
            </treerow>
          </treeitem>
        </treechildren>
      </action>
    </rule>
  </template>
</tree>

<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 runTest()
{
  var tree = $("tree");
  var col = tree.columns[0].element;
  synthesizeMouse(col, 12, 2, { });
  checkRowOrder(tree, ["Cleopatra", "Ferdinand Magellan", "Julius Caesar", "Laura Secord", "Napoleon Bonaparte"], "acsending");

  synthesizeMouse(col, 12, 2, { });
  checkRowOrder(tree, ["Napoleon Bonaparte", "Laura Secord", "Julius Caesar", "Ferdinand Magellan", "Cleopatra"], "descending");

  synthesizeMouse(col, 12, 2, { });
  checkRowOrder(tree, ["Napoleon Bonaparte", "Laura Secord", "Julius Caesar", "Ferdinand Magellan", "Cleopatra"], "natural");

  SimpleTest.finish();
}

function checkRowOrder(tree, expected, testid)
{
  var index = 0;
  var item = tree.firstChild.nextSibling.nextSibling.firstChild;
  while (item && index < expected.length) {
    if (item.firstChild.firstChild.getAttribute("label") != expected[index++])
      break;
    item = item.nextSibling;
  }
  ok(index == expected.length && !item, testid + " row order");
}

]]>

</script>

</window>
