<!DOCTYPE html>

<html>

<head>
  <title>Cobalt scroll test</title>
  <script src='black_box_js_test_utils.js'></script>
  <script src='pointer_event_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;">
      <div id="tile" class="tile">One</div>
    </div>
  </div>
</body>
<script>
  const expected_events = [
    // actions.move_to_element(row).pause(_SLEEP_AFTER_MOVE_TIME)
    { name: 'pointermove', id: 'tile', phase: Event.AT_TARGET },
    { name: 'pointermove', id: 'row', phase: Event.BUBBLING_PHASE },

    // actions.click_and_hold(row).pause(_SLEEP_AFTER_MOVE_TIME)
    { name: 'pointermove', id: 'tile', phase: Event.AT_TARGET },
    { name: 'pointermove', id: 'row', phase: Event.BUBBLING_PHASE },

    // actions.move_by_offset(-500, 0).pause(_SLEEP_AFTER_MOVE_TIME)
    { name: 'pointerdown', id: 'tile', phase: Event.AT_TARGET },
    { name: 'pointerdown', id: 'row', phase: Event.BUBBLING_PHASE },
    { name: 'pointercancel', id: 'tile', phase: Event.AT_TARGET },
    { name: 'pointercancel', id: 'row', phase: Event.BUBBLING_PHASE },
    { name: 'scroll', id: 'row', phase: Event.AT_TARGET },
  ]

  function checkEndState() {
    const scroll_container = document.getElementById("row");
    assertTrue(scroll_container.scrollLeft > 0);
    assertEqual(failure_count, 0);
    onEndTest();
  }

  function setAllHandlers(prefix, selector, callback) {
    setHandlers(prefix + 'down', selector, callback);
    setHandlers(prefix + 'up', selector, callback);
    setHandlers(prefix + 'move', selector, callback);
    setHandlers(prefix + 'cancel', selector, callback);
}

  window.onload = () => {
    setAllHandlers('pointer', '#row', logEvent);
    setAllHandlers('pointer', '#tile', logEvent);
    setHandlers('scroll', '#row', logEvent);
    setHandlers('scroll', '#tile', logEvent);
    setHandlers('scroll', '.app', logEvent);
    setupFinished();
  }

  window.onkeydown = (event) => {
    if (event.key == 0) {
      checkEndState();
    }
  }
</script>

</html>