<!DOCTYPE html>
<html>
<head>
<title>This tests that we scroll the correct(second) container horizontally.</title>
<style>
  .slider{
    overflow-x: scroll;
  }

  .scrollable {
    width: 2000px;
    height: 500px;
    border: 1px solid green;  
  }
</style>
</head>
<body>
<div class=slider id=firstcontainer>
  <div class=scrollable>This should not scroll while the bottom green box is being hovered.</div>
</div>
<div class=slider id=secondcontainer>
  <div class=scrollable></div>
</div>
<script src="../../../resources/ui-helper.js"></script>
<script>
  async function runTest() {
    await UIHelper.startMonitoringWheelEvents();
    // Scroll vertically to reach the bottom scrollable container.
    eventSender.mouseMoveTo(10, 499);
    eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none');
    eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
    eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
    eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
    await UIHelper.waitForScrollCompletion();

    // Scroll horizontally to check if we scroll the bottom scrollable container.
    await UIHelper.startMonitoringWheelEvents();
    eventSender.mouseMoveTo(10, 510);
    eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none');
    eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
    eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
    eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none'); 
    await UIHelper.waitForScrollCompletion();
      
    var firstOffset = document.getElementById("firstcontainer").scrollLeft;
    var secondOffset = document.getElementById("secondcontainer").scrollLeft;
    document.body.innerText = !firstOffset && secondOffset ? "PASS" : "FAIL";  
    testRunner.notifyDone();
  }

  if (window.eventSender && window.testRunner) {
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
    window.addEventListener('load', runTest);
  }
</script>
</body>
</html>
