<!DOCTYPE html>
<html dir="rtl">
<!--
 | Absolute positioned elements in the containing block are included in the
 | scrolling area.
 |   https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface
 |   https://www.w3.org/TR/cssom-view-1/#scrolling-area
 -->
<head>
  <style>
    body {
      font-family: Roboto;
      font-size: 16px;
      background-color: #FF0000;
    }

    .overflow-scroll {
      right: 50px;
      width: 150px;
      height: 150px;
      overflow: scroll;
      position: relative;
      background-color: #808080;
    }

    .content-positioned {
      width: 35px;
      height: 35px;
      margin: 3px;
      border: 5px solid #00FF00;
      padding: 7px;
      position: absolute;
      background-color: #0000FF;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    function runTest() {
      var error = "";
      var scroller = document.getElementById("scroller");
      if (scroller.scrollWidth != 187) {
        error += "\nValue of: scrollWidth"
               + "\n  Actual: " + scroller.scrollWidth
               + "\nExpected: " + 187;
      }
      if (scroller.scrollHeight != 150) {
        error += "\nValue of: scrollHeight"
               + "\n  Actual: " + scroller.scrollHeight
               + "\nExpected: " + 150;
      }
      return error;
    }

    window.onload = function() {
      var error = runTest();
      if (error) {
        console.log("FAIL" + error);
      } else {
        document.body.style.backgroundColor = "rgba(0,0,0,0)";
      }

      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    }
  </script>
</head>
<body>
  <div id="scroller" class="overflow-scroll">
    <div class="content-positioned" style="transform: translateX(25px)"></div>
    <div class="content-positioned" style="transform: translateX(-50px)"></div>
    <div class="content-positioned" style="transform: translateX(-125px)"></div>
  </div>
</body>
</html>