wpt / css / css-overflow / scroll-markers / scroll-marker-focus-scroll-crash.html

Status: PASS | Duration: 166ms | Subtests: 1/1 | Open test on wpt.live | wpt.fyi

TestTest Source

/css/css-overflow/scroll-markers/scroll-marker-focus-scroll-crash.html

<!DOCTYPE html>
<html class="test-wait">
<meta charset="utf-8">
<link rel="help" href="crbug.com/421471058">
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
  body {
    margin: 0;
  }

  #scroller {
    width: 600px;
    height: 300px;
    overflow: auto;
    scroll-marker-group: before;
    white-space: nowrap;
  }

  #scroller div {
    background: blue;
    display: inline-block;
    width: 600px;
    height: 270px;
  }

  #scroller::scroll-marker-group {
    height: 20px;
    width: 200px;
  }

  #scroller div::scroll-marker {
    content: "Marker";
    width: 100px;
    height: 20px;
    display: inline-block;
  }

  #scroller::scroll-button(left) {
    content: "<";
  }
</style>
<div id="scroller">
  <div></div>
  <div></div>
</div>
<script>
  async function run() {
    const kTab = '\uE004';
    await new test_driver.Actions()
      .keyDown(kTab)
      .keyUp(kTab)
      .send();
    // With a focused scroll marker, scroll to next target.
    document.querySelector('#scroller').scrollLeft = 600;
    document.documentElement.classList.remove('test-wait');
  }
  run();
</script>

</html>