Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/external/wpt/css/css-scroll-snap/unreachable-snap-positions-003.html 

<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=0.5">
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#unreachable" />
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1905247">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.content {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  max-width: 800px;
  border: 2px solid black;
  /* padding-bottom so you can see the scrollbar: */
  padding-bottom: 10px;
}
.item {
  width: 500px;
  height: 200px;
  border: 3px solid orange;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: inline-block;
}
</style>

<div id="scroller" class="content">
  <!-- There's intentionally no whitespace between these tags, so that they're
       laid out flush with each other with no space character between them. -->
    <div class="item" style="width: 610px; background:teal"></div
    ><div class="item" style="width: 200px; background:pink"></div>
</div>

<script>
test(() => {
  scroller.scrollLeft = 6;
  assert_equals(scroller.scrollLeft, 10);
}, "Snaps to the positions defined by the element as much as possible");
</script>