wpt / css / css-overflow / scroll-markers / scroll-marker-with-content-visibility-hidden-crash.html

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

TestTest Source

/css/css-overflow/scroll-markers/scroll-marker-with-content-visibility-hidden-crash.html

<!doctype html>
<html class="test-wait">
<meta charset="utf-8">
<title>::scroll-markers with content-visibility: hidden ancestors, getBoundingClientRect crash</title>
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo">
<link rel="help" href="https://crbug.com/398717539">
<link rel="author" href="mailto:vmpstr@chromium.org">
<link rel="assert" content="Test should not crash when interacting with c-v hidden elements with scroll markers">
<style>
#scroller {
  position: relative;
  width: 500px;
  height: 200px;
  overflow: auto;
  scroll-marker-group: after;
  columns: 1;

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

.item {
  content-visibility: hidden;
  width: 100%;
  height: 100%;
  &::scroll-marker {
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid black;
    border-radius: 50%;
  }

  &::scroll-marker:target-current {
    background: blue;
  }
}

</style>

<div id=scroller>
  <div id=e1 class=item>item 1</div>
  <div class=item>item 2</div>
  <div class=item>item 3</div>
  <div class=item>item 4</div>
  <div class=item>item 5</div>
</div>

<script>
onload = requestAnimationFrame(() => requestAnimationFrame(() => {
  e1.getBoundingClientRect();

  requestAnimationFrame(() => {
    e1.style.contentVisibility = "visible";
    requestAnimationFrame(() => {
      e1.style.contentVisibility = "hidden";

      requestAnimationFrame(() => { document.documentElement.className = "" });
    });
  });
}));
</script>