<!DOCTYPE html>
<html dir="rtl">
<!--
 | Absolutely positioned elements in a positioned container should be scrolled.
 |   https://www.w3.org/TR/CSS21/visufx.html
 |
 | Unfortunately, major browsers handle scrollLeft differently when dir=rtl.
 | Follow the spec and treat scrollLeft == 0 as the rightmost position with
 | scrollLeft values going negative as the user scrolls left.
 |   https://lists.w3.org/Archives/Public/www-style/2012Aug/0156.html
 -->
<head>
  <style>
    body {
      font-family: Roboto;
      font-size: 16px;
      background-color: #FF0000;
    }

    .overflow-scroll {
      width: 150px;
      height: 100px;
      overflow: scroll;
      background-color: #000000;
    }

    .container {
      width: 300px;
      height: 75px;
      overflow: hidden;
      position: relative;
      background-color: #808080;
    }

    .content {
      width: 50px;
      height: 50px;
      position: absolute;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    window.onload = function() {
      var scroller = document.getElementById("scroller");
      scroller.scrollLeft = -50;
      if (scroller.scrollLeft != -50) {
        console.log("FAIL" +
          "\nValue of: scrollLeft" +
          "\n  Actual: " + scroller.scrollLeft +
          "\nExpected: " + "-50");
      } else {
        document.body.style.backgroundColor = "#FFFFFF";
      }
      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    }
  </script>
</head>
<body>
  <div id="scroller" class="overflow-scroll">
    <div class="container">
      <div class="content"
           style="background-color: #FF0000; transform: translateX(0px)"></div>
      <div class="content"
           style="background-color: #00FF00; transform: translateX(-75px)"></div>
      <div class="content"
           style="background-color: #0000FF; transform: translateX(-150px)"></div>
    </div>
  </div>
</body>
</html>