<!DOCTYPE html>

<html>

<head>
  <title>Cobalt scroll test</title>
  <script src='black_box_js_test_utils.js'></script>
  <style>
    .app {
      position: absolute;
      width: 80rem;
      height: 45rem;
      overflow: hidden;
      padding: 20px;
      z-index: 1;
    }

    .row {
      position: relative;
      overflow: auto;
      height: 20rem;
      width: 80rem;
    }

    .tile {
      position: absolute;
      height: 10rem;
      width: 200rem;
      background: linear-gradient(0.25turn, #f4aca9, #ebf8e1, #bce6f3);
    }
  </style>
</head>

<body>
  <div class="app" style="overflow:auto;">
    <div id="row" class="row" style="height: 20rem; pointer-events: none;">
      <div id="top_one" class="tile">One</div>
    </div>
  </div>
</body>
<script>
  const scroll_container = document.getElementById("row");

  function checkState(key) {
    assertTrue(scroll_container.scrollLeft == 0);
    if (key == 2) {
      onEndTest();
    }
  }

  window.onload = () => {
    setupFinished();
  }

  window.onkeydown = (event) => {
    if (event.key == 0 || event.key == 2) {
      checkState(event.key);
    } else if (event.key == 1) {
      scroll_container.style.pointerEvents = 'auto';
    }
  }
</script>

</html>