<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.outer {
  height: 400px;
  width: 1000px;
}
.content {
  height: 1000px;
  width: 1200px;
}
#container {
  overflow: scroll;
}
#non_scrollable {
  overflow: none;
}
</style>

<div id='non_scrollable' class='outer'>
  <div class='content'></div>
</div>
<div id='container' class='outer'>
  <div class='content'></div>
</div>

<script>
const container = document.getElementById('container');
const non_scrollable = document.getElementById('non_scrollable');

function setUpForWindow() {
  window.scrollTo(100, 100);
  container.scrollTo(0, 0);
  assert_equals(window.scrollY, 100);
  assert_equals(window.scrollX, 100);
}

function setUpForContainer() {
  window.scrollTo(0, 0);
  container.scrollTo(100, 100);
  assert_equals(container.scrollTop, 100);
  assert_equals(container.scrollLeft, 100);
}

function smoothScroll(pixels_to_scroll, start_x, start_y, gesture_source_type, direction, speed_in_pixels_s) {
  return new Promise((resolve, reject) => {
    chrome.gpuBenchmarking.smoothScrollBy(pixels_to_scroll, resolve, start_x, start_y, gesture_source_type, direction, speed_in_pixels_s);
  });
}

function waitForAnimationEnd() {
  const MAX_FRAME = 500;
  var last_changed_frame = 0;
  var last_window_x = window.scrollX;
  var last_window_y = window.scrollY;
  var last_container_x = container.scrollLeft;
  var last_container_y = container.scrollTop;
  return new Promise((resolve, reject) => {
    function tick(frames) {
    // We requestAnimationFrame either for 500 frames or until 5 frames with
    // no change have been observed.
      if (frames >= MAX_FRAME || frames - last_changed_frame > 5) {
        resolve();
      } else {
        if (window.scrollX != last_window_x ||
            window.scrollY != last_window_y ||
            container.scrollLeft != last_container_x ||
            container.scrollTop != last_container_y) {
          last_changed_frame = frames;
          last_window_x = window.scrollX;
          last_window_y = window.scrollY;
          last_container_x = container.scrollLeft;
          last_container_y = container.scrollTop;
        }
        requestAnimationFrame(tick.bind(this, frames + 1));
      }
    }
    tick(0);
  });
}

function test_boundary_prevents_y(source_type) {
  container.style.overscrollBehaviorX = 'auto';
  container.style.overscrollBehaviorY = 'none';
  setUpForWindow();
  return smoothScroll(200, 200, 500, source_type, "up", 4000)
  .then(waitForAnimationEnd)
  .then(() => {
    assert_equals(window.scrollY, 100);})
  .then(
    smoothScroll.bind(this, 200, 200, 500, source_type, "left", 4000))
  .then(waitForAnimationEnd)
  .then(() => {
    assert_equals(window.scrollX, 0);
  });
}

function test_boundary_prevents_x(source_type) {
  container.style.overscrollBehaviorX = 'none';
  container.style.overscrollBehaviorY = 'auto';
  setUpForWindow();
  return smoothScroll(200, 200, 500, source_type, 'left', 4000)
  .then(waitForAnimationEnd)
  .then(() => {
    assert_equals(window.scrollX, 100);})
  .then(
    smoothScroll.bind(this, 200, 200, 500, source_type, 'up', 4000))
  .then(waitForAnimationEnd)
  .then(() => {
    assert_equals(window.scrollY, 0);
  });
}

function test_boundary_allows_inner(source_type) {
  container.style.overscrollBehaviorX = 'none';
  container.style.overscrollBehaviorY = 'none';
  setUpForContainer();
  return smoothScroll(200, 200, 500, source_type, 'upleft', 4000)
  .then(waitForAnimationEnd)
  .then(() => {
    assert_equals(container.scrollTop, 0);
    assert_equals(container.scrollLeft, 0);
  });
}

function test_boundary_on_nonscrollable_allows_propagation(source_type) {
  non_scrollable.style.overscrollBehaviorX = 'none';
  non_scrollable.style.overscrollBehaviorY = 'none';
  window.scrollTo(0, 0);
  return smoothScroll(200, 200, 300, source_type, 'right', 4000)
  .then(waitForAnimationEnd)
  .then(() => {
    assert_greater_than(window.scrollX, 100);})
  .then(
    smoothScroll.bind(this, 200, 200, 300, source_type, 'down', 4000))
  .then(waitForAnimationEnd)
  .then(() => {
    assert_greater_than(window.scrollY, 100);
  });
}

const TOUCH_SOURCE_TYPE = 1; // TOUCH_INPUT from synthetic_gesture_params.h
const WHEEL_SOURCE_TYPE = 2; // TOUCH_INPUT from synthetic_gesture_params.h
promise_test(t => {
    return test_boundary_prevents_y(WHEEL_SOURCE_TYPE);
  }, 'overscroll-behavior-y: none should only prevent scroll propagation on y axis with: wheel.');
promise_test(t => {
    return test_boundary_prevents_x(WHEEL_SOURCE_TYPE);
  }, 'overscroll-behavior-x: none should only prevent scroll propagation on x axis with: wheel.');
promise_test(t => {
    return test_boundary_allows_inner(WHEEL_SOURCE_TYPE);
  }, 'overscroll-behavior should not affect scrolling inside the applied container with: wheel.');
promise_test(t => {
    return test_boundary_on_nonscrollable_allows_propagation(WHEEL_SOURCE_TYPE);
  }, 'overscroll-behavior on non-scrollable area should not affect scroll propagation with: wheel.');

const IS_MAC = navigator.platform.indexOf('Mac') == 0;
if (!IS_MAC) {
  promise_test(t => {
      return test_boundary_prevents_y(TOUCH_SOURCE_TYPE);
    }, 'overscroll-behavior-y: none should only prevent scroll propagation on y axis with: touch.');
  promise_test(t => {
      return test_boundary_prevents_x(TOUCH_SOURCE_TYPE);
    }, 'overscroll-behavior-x: none should only prevent scroll propagation on x axis with: touch.');
  promise_test(t => {
      return test_boundary_on_nonscrollable_allows_propagation(TOUCH_SOURCE_TYPE);
    }, 'overscroll-behavior on non-scrollable area should not affect scroll propagation with: touch.');
}
</script>