single-axis-scroll-apis-programmatic.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/single-axis-scroll-apis-programmatic.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8">

<title>Single-axis scroll containers with programmatic scroll APIs</title>

<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollto">

<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollby">

<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollwidth">

<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollheight">

<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5572">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

  .scroller {

    width: 100px;

    height: 100px;

    scrollbar-width: none;

  .clip-x {

    overflow-x: clip;

    overflow-y: scroll;

  .clip-y {

    overflow-x: scroll;

    overflow-y: clip;

  .rtl {

    direction: rtl;

  .content {

    width: 300px;

    height: 300px;

</style>

<!-- LTR scroller with clipped X -->

<div class="scroller clip-x">

  <div class="content"></div>

</div>

<!-- RTL scroller with clipped X -->

<div class="scroller clip-x rtl">

  <div class="content"></div>

</div>

<!-- LTR scroller with clipped Y -->

<div class="scroller clip-y">

  <div class="content"></div>

</div>

<!-- RTL scroller with clipped Y -->

<div class="scroller clip-y rtl">

  <div class="content"></div>

</div>

<script>

function assertOverflowDimensions(scroller, label) {

  assert_equals(scroller.scrollWidth, 300,

      `${label}: scrollWidth retains overflowing content size`);

  assert_equals(scroller.scrollHeight, 300,

      `${label}: scrollHeight retains overflowing content size`);

test(() => {

  const scroller = document.querySelector('.scroller.clip-x');

  assert_equals(scroller.scrollLeft, 0,

      'LTR clipped X: scrollLeft is set to default value of 0');

  scroller.scrollTo(40, 50);

  assert_equals(scroller.scrollLeft, 0,

      'LTR clipped X: scrollTo ignores the clipped X-axis');

  assert_equals(scroller.scrollTop, 50,

      'LTR clipped X: scrollTo updates the unclipped Y-axis');

  scroller.scrollBy(20, 20);

  assert_equals(scroller.scrollLeft, 0,

      'LTR clipped X: scrollBy ignores the clipped X-axis');

  assert_equals(scroller.scrollTop, 70,

      'LTR clipped X: scrollBy incrementally updates the unclipped Y-axis (50 + 20 = 70)');

  scroller.scrollLeft = 70;

  assert_equals(scroller.scrollLeft, 0,

      'LTR clipped X: setting scrollLeft ignores the clipped X-axis');

  assert_equals(scroller.scrollTop, 70,

      'LTR clipped X: setting scrollLeft leaves the unclipped Y-axis unchanged');

  assertOverflowDimensions(scroller, 'LTR clipped X');

}, 'LTR clipped X');

test(() => {

  const scroller = document.querySelector('.scroller.clip-x.rtl');

  scroller.scrollTo(-40, 50);

  assert_equals(scroller.scrollLeft, 0,

      'RTL clipped X: scrollTo ignores the clipped X-axis (negative in RTL)');

  assert_equals(scroller.scrollTop, 50,

      'RTL clipped X: scrollTo updates the unclipped Y-axis');

  scroller.scrollBy(-20, 20);

  assert_equals(scroller.scrollLeft, 0,

      'RTL clipped X: scrollBy ignores the clipped X-axis');

  assert_equals(scroller.scrollTop, 70,

      'RTL clipped X: scrollBy incrementally updates the unclipped Y-axis (50 + 20 = 70)');

  scroller.scrollLeft = -70;

  assert_equals(scroller.scrollLeft, 0,

      'RTL clipped X: setting scrollLeft ignores the clipped X-axis');

  assert_equals(scroller.scrollTop, 70,

      'RTL clipped X: setting scrollLeft leaves the unclipped Y-axis unchanged');

  assertOverflowDimensions(scroller, 'RTL clipped X');

}, 'RTL clipped X');

test(() => {

  const scroller = document.querySelector('.scroller.clip-y');

  scroller.scrollTo(40, 50);

  assert_equals(scroller.scrollLeft, 40,

      'LTR clipped Y: scrollTo updates the unclipped X-axis');

  assert_equals(scroller.scrollTop, 0,

      'LTR clipped Y: scrollTo ignores the clipped Y-axis');

  scroller.scrollBy(20, 20);

  assert_equals(scroller.scrollLeft, 60,

      'LTR clipped Y: scrollBy incrementally updates the unclipped X-axis (40 + 20 = 60)');

  assert_equals(scroller.scrollTop, 0,

      'LTR clipped Y: scrollBy ignores the clipped Y-axis');

  scroller.scrollTop = 70;

  assert_equals(scroller.scrollLeft, 60,

      'LTR clipped Y: setting scrollTop leaves the unclipped X-axis unchanged');

  assert_equals(scroller.scrollTop, 0,

      'LTR clipped Y: setting scrollTop ignores the clipped Y-axis');

  assertOverflowDimensions(scroller, 'LTR clipped Y');

}, 'LTR clipped Y');

test(() => {

  const scroller = document.querySelector('.scroller.clip-y.rtl');

  scroller.scrollTo(-40, 50);

  assert_equals(scroller.scrollLeft, -40,

      'RTL clipped Y: scrollTo updates the unclipped X-axis (negative in RTL)');

  assert_equals(scroller.scrollTop, 0,

      'RTL clipped Y: scrollTo ignores the clipped Y-axis');

  scroller.scrollBy(-20, 20);

  assert_equals(scroller.scrollLeft, -60,

      'RTL clipped Y: scrollBy incrementally updates the unclipped X-axis (-40 + -20 = -60)');

  assert_equals(scroller.scrollTop, 0,

      'RTL clipped Y: scrollBy ignores the clipped Y-axis');

  scroller.scrollTop = 70;

  assert_equals(scroller.scrollLeft, -60,

      'RTL clipped Y: setting scrollTop leaves the unclipped X-axis unchanged');

  assert_equals(scroller.scrollTop, 0,

      'RTL clipped Y: setting scrollTop ignores the clipped Y-axis');

  assertOverflowDimensions(scroller, 'RTL clipped Y');

}, 'RTL clipped Y');

</script>