tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

scroll-marker-with-content-visibility-hidden-crash.html (1544B)

      1 <!doctype html>
      2 <html class="test-wait">
      3 <meta charset="utf-8">
      4 <title>::scroll-markers with content-visibility: hidden ancestors, getBoundingClientRect crash</title>
      5 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo">
      6 <link rel="help" href="https://crbug.com/398717539">
      7 <link rel="author" href="mailto:vmpstr@chromium.org">
      8 <link rel="assert" content="Test should not crash when interacting with c-v hidden elements with scroll markers">
      9 <style>
     10 #scroller {
     11  position: relative;
     12  width: 500px;
     13  height: 200px;
     14  overflow: auto;
     15  scroll-marker-group: after;
     16  columns: 1;
     17 
     18  &::scroll-marker-group {
     19    height: 20px;
     20    width: 200px;
     21  }
     22 }
     23 
     24 .item {
     25  content-visibility: hidden;
     26  width: 100%;
     27  height: 100%;
     28  &::scroll-marker {
     29    display: inline-block;
     30    content: "";
     31    width: 10px;
     32    height: 10px;
     33    border: 1px solid black;
     34    border-radius: 50%;
     35  }
     36 
     37  &::scroll-marker:target-current {
     38    background: blue;
     39  }
     40 }
     41 
     42 </style>
     43 
     44 <div id=scroller>
     45  <div id=e1 class=item>item 1</div>
     46  <div class=item>item 2</div>
     47  <div class=item>item 3</div>
     48  <div class=item>item 4</div>
     49  <div class=item>item 5</div>
     50 </div>
     51 
     52 <script>
     53 onload = requestAnimationFrame(() => requestAnimationFrame(() => {
     54  e1.getBoundingClientRect();
     55 
     56  requestAnimationFrame(() => {
     57    e1.style.contentVisibility = "visible";
     58    requestAnimationFrame(() => {
     59      e1.style.contentVisibility = "hidden";
     60 
     61      requestAnimationFrame(() => { document.documentElement.className = "" });
     62    });
     63  });
     64 }));
     65 </script>