<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> CSS Scroll Snap 2 Test: scroll-start-*</title>
  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
</head>

<body onload="runTest()">
  <style>
    #scroller {
      height: 100px;
      width: 100px;
      overflow: scroll;
      scroll-start: 10vh 200px;
    }

    .spacer {
      width: 200vw;
      height: 200vh;
      border: solid 1px green;
    }
  </style>
  <div id="scroller">
    <div class="spacer" id="spacer"></div>
  </div>
  <script>
    function runTest() {
      // scroll position declared by scroll-start.
      const scroll_start_top = 0.1 * window.innerHeight;
      const scroll_start_left = 200;

      // target position of the programmatic scroll.
      const target_scroll_top = 100;
      const target_scroll_left = 100;

      promise_test(async (t) => {
        // verify that we are starting from the offsets indicated by scroll start.
        assert_equals(scroller.scrollTop, scroll_start_top,
          "scroll-start: <length> sets initial scroll position vertically");
        assert_equals(scroller.scrollLeft, scroll_start_left,
          "scroll-start: <length> sets initial scroll position horizontally");

        // verify that the programmatic scroll should result in an actual scroll.
        assert_not_equals(target_scroll_top, scroll_start_top,
          "programmatic scroll should not be a nop vertically");
        assert_not_equals(target_scroll_left, scroll_start_left,
          "programmatic scroll should not be a nop horizontally");

        scroller.scrollTop = target_scroll_top;
        scroller.scrollLeft = target_scroll_left;
        // verify that programmtic scroll succeeded.
        assert_equals(scroller.scrollTop, target_scroll_top,
          "programmatic scroll succeeds vertically");
        assert_equals(scroller.scrollLeft, target_scroll_left,
          "programmatic scroll succeeds horizontally");

        // Trigger a layout change.
        scroller.style.height = "200px";
        scroller.style.width = "200px";
        let spacer = document.getElementById("spacer");
        spacer.style.height = "300vh";
        spacer.style.width = "300vw";
        assert_equals(getComputedStyle(spacer)["height"],
          `${3 * window.innerHeight}px`);
        assert_equals(getComputedStyle(spacer)["width"],
          `${3 * window.innerWidth}px`);

        // Verify that the layout change did not affect the scroll position.
        assert_equals(scroller.scrollTop, target_scroll_top,
          "layout change after programmatic scroll doesn't apply scroll-start " +
          "vertically");
        assert_equals(scroller.scrollLeft, target_scroll_left,
          "layout change after programmatic scroll doesn't apply scroll-start " +
          "horizontally");
      }, "scroll-start is not applied after a programmatic scroll");
    }
  </script>
</body>