<!doctype html>
<meta name="timeout" content="long">
<title>vertical-scroll test for touch-action</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/feature-policy/experimental-features/resources/common.js"></script>
<script src="/feature-policy/experimental-features/resources/vertical-scroll.js"></script>
<style>
html, body {
  height: 100%;
  width: 100%;
}

iframe {
  width: 90%;
  height: 90%;
  margin: 0;
  padding: 0;
}

.spacer {
  width: 100%;
  height: 100%;
  margin: 100%;
}
</style>
<iframe></iframe>
<br/>
<p>Spacers below to make page scrollable</p>
<br/>
<div class="spacer"></div>
<div class="spacer"></div>
<p> EOF </p>

<script>
  "use strict";

  let url = url_base + "vertical-scroll-scrollable-content.html";
  let iframeElement = document.querySelector("iframe");

  // Wait for the helper scripts to load.
  promise_test(async() => {
    if (window.input_api_ready)
      return Promise.resolve();
    await new Promise( (r) => {
      window.resolve_on_input_api_ready = r;
    });
  }, "Make sure input injection API is ready.");

  // Sanity-check: Verify we can scroll using the test-API (empty <iframe>).
  promise_test(async() => {
    window.scrollTo(0, 0);

    await inject_input("down");
    assert_greater_than(window.scrollY, 0, "Page must have scrolled down.");

    await inject_input("right");
    assert_greater_than(window.scrollX, 0, "Page must have scrolled right.");
  }, "Verify that the page normally scrolls.");

  // Sanity-check: <iframe> normally scrolls.
  promise_test(async() => {
    // Make sure <window> can scroll both towards right and bottom.
    window.scrollTo(0, 0);

    await loadUrlInIframe(iframeElement, url);
    iframeElement.contentWindow.scrollTo(0, 0);

    await inject_input("down");
    assert_greater_than(
      iframeElement.contentWindow.scrollY,
      0,
      "<iframe> must have scrolled down.");


    // Apply the scroll gesture.
    await inject_input("right");
    assert_greater_than(
      iframeElement.contentWindow.scrollX,
      0,
      "<iframe> must have scrolled right.");

  }, "Verify that the <iframe> normally scrolls.");

  // Disable 'vertical-scroll': <iframe> should only scroll horizontally.
  promise_test(async() => {
    window.scrollTo(0, 0);

    // Disallow vertical scroll and reload the <iframe>.
    setFeatureState(iframeElement, "vertical-scroll", "'none'");
    await loadUrlInIframe(iframeElement, url);
    iframeElement.contentWindow.scrollTo(0, 0);

    // Apply the scroll gesture. Main frame should and <iframe> should not
    // scroll vertically.
    await inject_input("down");
    assert_equals(iframeElement.contentWindow.scrollY,
                  0,
                  "<iframe> must not scroll vertically.");
    assert_greater_than(window.scrollY,
                        0,
                       "Page must scroll vertically.");

    window.scrollTo(0, 0);
    iframeElement.contentWindow.scrollTo(0, 0);

    await inject_input("right");
    assert_greater_than(iframeElement.contentWindow.scrollX,
                        0,
                        "<iframe> must have scrolled right.");
  }, "When 'vertical-scroll' is disabled in a document, scrollable contents " +
     "can only *horizontally* scroll.");
</script>