<!DOCTYPE html>
<!--
 | In a scroll container, elements' translateX should be honored in RTL mode.
 |   https://www.w3.org/TR/CSS21/visufx.html
 -->
<html>
<head>
  <style>
    .scroll {
      overflow: auto;
      position: absolute;
      background-color: rgb(75, 75, 75);
      width: 540px;
      height: 320px;
    }

    .focusItem {
      overflow: hidden;
      position: absolute;
      width: 300px;
      height: 300px;
      outline: none;
    }

    .focusContent {
      overflow: hidden;
      margin: 20px;
      border: 5px solid rgb(0, 0, 0);
      width: 250px;
      height: 250px;
      line-height: 250px;
      text-align: center;
      vertical-align: middle;
      font-size: 100px;
    }

    /*
     * Update focusContent when the parent is focused.
     */
    .focusItem:focus .focusContent {
      background-color: rgb(240, 240, 240);
    }
  </style>
</head>

<body>
  <div class="scroll" dir="rtl" id="scroller">
    <!--
     | translateX() should be honored when computing items' position in rtl mode.
     | When page is rendered, A0 should be focused, the right edge of A0 should
     | be 100px from the right edge of the container, and container's scrollLeft
     | should be 0.
     -->
    <div id="start" class="focusItem" tabindex="-2" style="transform: translateX(-100px)">
      <div class="focusContent">A0</div>
    </div>
    <div class="focusItem" tabindex="-2" style="transform: translateX(-400px)">
      <div class="focusContent">A1</div>
    </div>
  </div>
</body>

<script>
  window.onload = function () {
    document.getElementById("start").focus();
    var scroller = document.getElementById("scroller");
    if (scroller.scrollLeft != 0) {
      console.log("FAIL" +
        "\nValue of: scrollLeft" +
        "\n  Actual: " + scroller.scrollLeft +
        "\nExpected: " + "0");
      document.body.style.backgroundColor = "#FF0000";
    }
    if (window.testRunner) {
      window.testRunner.notifyDone();
    }
  }
</script>
</html>