<!DOCTYPE html>
<html>
<!--
 | Grand descendants that are not visible (e.g. inside overflow hidden) should
 | not be 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
 |   https://www.w3.org/TR/css-overflow-3/#scrollable
 -->
<head>
  <style>
    body {
      background-color: #FF0000;
    }

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

    .content-big {
      width: 200px;
      height: 200px;
      overflow: hidden;
      background-color: #00FF00;
    }

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

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