<?xml version="1.0"?>
<!DOCTYPE window>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="RTL overflow test" width="640px" height="480px" style="direction: rtl" onload="load()" class="reftest-wait">

<hbox style="max-width: 200px; border: 1px solid red;">
<scrollbox id="sb" align="start" pack="start" orient="horizontal" flex="1">
  <button id="sb1" label="test1"/><button label="test2"/><button label="test3"/><button label="test4"/><button label="test5"/>
</scrollbox>
</hbox>

<hbox style="max-width: 200px; border: 1px solid blue">
<arrowscrollbox id="asb" align="start" pack="start" orient="horizontal" flex="1">
  <button id="asb1" label="test1"/><button label="test2"/><button label="test3"/><button label="test4"/><button label="test5"/>
</arrowscrollbox>
</hbox>

<hbox style="max-width: 200px; border: 1px solid black">
<hbox align="end" pack="end" flex="1">
  <button label="test1"/><button label="test2"/><button label="test3"/><button label="test4"/><button label="test5"/>
</hbox>
</hbox>

<script type="text/javascript">
  <![CDATA[
    function load() {
      // arrowscrollbox provides a helper ensureElementIsVisible method
      document.getElementById("asb").ensureElementIsVisible(document.getElementById("asb1"), false);

      // scrollbox doesn't provide that, so we have to do the heavy lifting directly
      var sb = document.getElementById("sb");
      var sb1 = document.getElementById("sb1");
      var rect = sb.getBoundingClientRect();
      var containerStart = rect.left;
      var containerEnd = rect.right;
      rect = sb1.getBoundingClientRect();
      var elementStart = rect.left;
      var elementEnd = rect.right;

      var amountToScroll = 0;
      if (elementStart < containerStart) {
        amountToScroll = elementStart - containerStart;
      } else if (elementEnd > containerEnd) {
        amountToScroll = elementEnd - containerEnd;
      }
      sb.scrollLeft += amountToScroll;

      document.documentElement.removeAttribute("class");
    }
  ]]>
</script>

</window>