<!DOCTYPE html>
<html>
<!--
 | Scaled 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 {
      width: 150px;
      height: 150px;
      overflow: scroll;
      background-color: #808080;
    }

    .content {
      width: 400px;
      height: 400px;
      transform: scale(0.5);
      background-color: #0000FF;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    function runTest() {
      var error = "";
      var scroller = document.getElementById("scroller");
      if (scroller.scrollWidth != 300) {
        error += "\nValue of: scrollWidth"
               + "\n  Actual: " + scroller.scrollWidth
               + "\nExpected: " + 300;
      }
      if (scroller.scrollHeight != 300) {
        error += "\nValue of: scrollHeight"
               + "\n  Actual: " + scroller.scrollHeight
               + "\nExpected: " + 300;
      }
      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"></div>
  </div>
</body>
</html>