tor-browser

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

scroll-marker-controls-scroll-tracking-002.html (2080B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: scroll tracking for ::scroll-marker when scroller is not next to the origin</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/css/css-transitions/support/helper.js"></script>
      8 <style>
      9  #scroller {
     10    overflow: scroll;
     11    scroll-marker-group: before;
     12    height: 100px;
     13    position: absolute;
     14    top: 200%;
     15    left: 200%;
     16  }
     17 
     18  #scroller::scroll-marker-group {
     19    border: 3px solid black;
     20    display: flex;
     21    width: 100px;
     22    height: 20px;
     23  }
     24 
     25  #scroller div {
     26    width: 100px;
     27    height: 100px;
     28  }
     29 
     30  #scroller div::scroll-marker {
     31    content: '';
     32    background-color: red;
     33    display: inline-flex;
     34    width: 10px;
     35    height: 10px;
     36    border-radius: 50%;
     37  }
     38 
     39  #scroller div::scroll-marker:target-current {
     40    background-color: green;
     41  }
     42 </style>
     43 <div id='scroller'>
     44  <div></div>
     45  <div id='target'></div>
     46 </div>
     47 <script>
     48  function assertPseudoElementProperty(originatingElement, pseudoType, backgroundColor) {
     49    const pseudoStyle = getComputedStyle(originatingElement, pseudoType);
     50    const pseudoBackgroundColor = pseudoStyle.getPropertyValue('background-color');
     51    assert_equals(pseudoBackgroundColor, backgroundColor, pseudoType +
     52      " background-color should be " + backgroundColor.toString() +
     53      " but was " + pseudoBackgroundColor.toString());
     54  }
     55  promise_test(async () => {
     56    document.documentElement.scrollTop = 1000;
     57    await waitForAnimationFrames(2);
     58    assertPseudoElementProperty(target, "::scroll-marker", "rgb(255, 0, 0)");
     59  }, "::scroll-marker is not active when its originating element is not scrolled into the view");
     60  promise_test(async () => {
     61    scroller.scrollTop = 150;
     62    await waitForAnimationFrames(2);
     63    assertPseudoElementProperty(target, "::scroll-marker", "rgb(0, 128, 0)");
     64  }, "::scroll-marker is active when its originating element is scrolled into the view");
     65 </script>