testing/web-platform/tests/css/css-scroll-snap/snap-to-empty-sized-element.html
author dadaa <daisuke.akatsuka@birchill.co.jp>
Wed, 09 Jul 2025 04:53:58 +0000 (15 hours ago)
changeset 795836 a5500d271fe3a1fefb4d81d96fc4abd00d9eade7
parent 753485 4901f46fe69df84b27dbfe5f043c4954799a77b8
permissions -rw-r--r--
Bug 1957280: Limit user's mouse amount for tree component r=places-reviewers,reusable-components-reviewers,masayuki,mstriemer Differential Revision: https://phabricator.services.mozilla.com/D251224
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<title>Resnap to empty sized element</title>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f"/>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1914178">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#scroller {
  height: 500px;
  width: 500px;
  overflow: scroll;
  scroll-snap-type: y proximity;
}

#scroller::after {
  display: block;
  content: "";
  scroll-snap-align: end;
}

li {
  height: 100px;
}
</style>
<ul id="scroller">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<script>
test(t => {
  const scroller = document.getElementById("scroller");
  // Scroll to the last child in the scroll container.
  document.querySelector("#scroller > :last-child").scrollIntoView();

  const scrollTop = scroller.scrollTop;
  assert_greater_than(scrollTop, 0);

  // Append a new element into the scroll container.
  const li = document.createElement("li");
  scroller.appendChild(li);

  // The ::after pseudo content should be the snap target, even if the size
  // is empty.
  assert_equals(scroller.scrollTop, scrollTop + 100);
}, "Resnap to empty sized element");
</script>