scroll-start-vertical-lr.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-snap-2/scroll-start/scroll-start-vertical-lr.tentative.html - WPT Dashboard Interop Dashboard

<!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>

  <style>

    .spacer {

      width: 500px;

      height: 500px;

      border: solid 1px green;

    .scroller {

      width: 100px;

      height: 100px;

      border: solid 1px black;

      overflow: scroll;

      writing-mode: vertical-lr;

  </style>

  <div id="lengthscroller" class="scroller" style="scroll-start: 100px">

    <div class="spacer"></div>

  </div>

  <div id="percentscroller" class="scroller" style="scroll-start: 25%">

    <div class="spacer"></div>

  </div>

  <div id="calcscroller" class="scroller" style="scroll-start: calc(50px)">

    <div class="spacer"></div>

  </div>

  <div id="startscroller" class="scroller" style="scroll-start: start">

    <div class="spacer"></div>

  </div>

  <div id="centerscroller" class="scroller" style="scroll-start: center">

    <div class="spacer"></div>

  </div>

  <div id="endscroller" class="scroller" style="scroll-start: end">

    <div class="spacer"></div>

  </div>

  <div id="topscroller" class="scroller" style="scroll-start: 100px top">

    <div class="spacer"></div>

  </div>

  <div id="bottomscroller" class="scroller" style="scroll-start: 100px bottom">

    <div class="spacer"></div>

  </div>

  <div id="leftscroller" class="scroller" style="scroll-start: left 100px">

    <div class="spacer"></div>

  </div>

  <div id="rightscroller" class="scroller" style="scroll-start: right 100px">

    <div class="spacer"></div>

  </div>

  <div id="clampedscroller" class="scroller" style="scroll-start: 1000px 1000px">

    <div class="spacer"></div>

  </div>

  <script>

    promise_test(async (t) => {

      let length_scroller = document.getElementById("lengthscroller");

      assert_equals(length_scroller.scrollLeft, 100,

        "scroll-start: <length> sets initial scroll position");

      let percent_scroller = document.getElementById("percentscroller");

      const percent_scroll_left = 0.25 * (percent_scroller.scrollWidth -

        percent_scroller.clientWidth);

      assert_approx_equals(percent_scroller.scrollLeft, percent_scroll_left, 1,

        "scroll-start: <percent> sets initial scroll position");

      let calc_scroller = document.getElementById("calcscroller");

      assert_equals(calc_scroller.scrollLeft, 50,

        "scroll-start: <calc> sets initial scroll position");

      let start_scroller = document.getElementById("startscroller");

      assert_equals(start_scroller.scrollLeft, 0,

        "scroll-start: start sets initial scroll position");

      let center_scroller = document.getElementById("centerscroller");

      const center_scroll_top = 0.5 * (center_scroller.scrollHeight -

        center_scroller.clientHeight);

      assert_approx_equals(center_scroller.scrollLeft, center_scroll_top, 1,

        "scroll-start: center sets initial scroll position");

      let end_scroller = document.getElementById("endscroller");

      const end_scroll_top = end_scroller.scrollWidth -

        end_scroller.clientWidth;

      assert_equals(end_scroller.scrollLeft, end_scroll_top,

        "scroll-start:  end sets initial scroll position");

      let top_scroller = document.getElementById("topscroller");

      assert_equals(top_scroller.scrollLeft, 100,

        "scroll-start: top sets initial scroll position");

      assert_equals(top_scroller.scrollTop, 0,

        "scroll-start: top sets initial scroll position");

      let bottom_scroller = document.getElementById("bottomscroller");

      const bottom_scroll_top = bottom_scroller.scrollHeight -

        bottom_scroller.clientHeight;

      assert_equals(bottom_scroller.scrollLeft, 100,

        "scroll-start: bottom sets initial scroll position");

      assert_equals(bottom_scroller.scrollTop, bottom_scroll_top,

        "scroll-start: top sets initial scroll position");

      let left_scroller = document.getElementById("leftscroller");

      assert_equals(left_scroller.scrollTop, 100,

        "scroll-start: left sets initial scroll position");

      assert_equals(left_scroller.scrollLeft, 0,

        "scroll-start: left sets initial scroll position");

      let right_scroller = document.getElementById("rightscroller");

      const right_scroll_top = right_scroller.scrollWidth -

        right_scroller.clientWidth;

      assert_equals(right_scroller.scrollTop, 100,

        "scroll-start: right sets initial scroll position");

      assert_equals(right_scroller.scrollLeft, right_scroll_top,

        "scroll-start: right sets initial scroll position");

      let clamped_scroller = document.getElementById("clampedscroller");

      const clamped_scroll_top = clamped_scroller.scrollWidth -

        clamped_scroller.clientWidth;

      const clamped_scroll_left = clamped_scroller.scrollHeight -

        clamped_scroller.clientHeight;

      assert_equals(clamped_scroller.scrollTop, clamped_scroll_top,

        "scroll-start is clamped to max vertical scroll offset");

      assert_equals(clamped_scroller.scrollLeft, clamped_scroll_left,

        "scroll-start is clamped to max horizontal scroll offset");

    }, "scroll-start sets initial scroll offset correctly in vertical " +

    "writing modes");

  </script>

</body>