tor-browser

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

scroll-markers-focus-on-scrolling.html (2434B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: scroll tracking for ::scroll-marker </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="/resources/testdriver.js"></script>
      8 <script src="/resources/testdriver-actions.js"></script>
      9 <script src="/resources/testdriver-vendor.js"></script>
     10 <script src="/css/css-transitions/support/helper.js"></script>
     11 <style>
     12  * {
     13    padding: 0;
     14    margin: 0;
     15  }
     16 
     17  #scroller {
     18    overflow: scroll;
     19    scroll-marker-group: before;
     20    height: 100px;
     21  }
     22 
     23  #scroller::scroll-marker-group {
     24    border: 3px solid black;
     25    display: flex;
     26    width: 100px;
     27    height: 20px;
     28  }
     29 
     30  #scroller div {
     31    width: 100px;
     32    height: 100px;
     33  }
     34 
     35  #scroller div::scroll-marker {
     36    content: "";
     37    background-color: red;
     38    display: inline-flex;
     39    width: 10px;
     40    height: 10px;
     41    border-radius: 50%;
     42  }
     43 
     44  #scroller div::scroll-marker:target-current {
     45    background-color: green;
     46  }
     47 
     48  #scroller div::scroll-marker:focus {
     49    opacity: 0.5;
     50  }
     51 </style>
     52 <div id="scroller">
     53  <div></div>
     54  <div id="target"></div>
     55 </div>
     56 <script>
     57  function assertPseudoElementProperty(originatingElement, pseudoType, opacity) {
     58    const pseudoStyle = getComputedStyle(originatingElement, pseudoType);
     59    const pseudoOpacity = pseudoStyle.getPropertyValue("opacity");
     60    assert_equals(pseudoOpacity, opacity, pseudoType +
     61                  " opacity should be " + opacity.toString() +
     62                  " but was " + pseudoOpacity.toString());
     63  }
     64  promise_test(async () => {
     65    scroller.scrollTop = 150;
     66    assertPseudoElementProperty(target, "::scroll-marker", "1");
     67  }, "active ::scroll-marker doesn't have focus on scroll if previous ::scroll-marker didn't have it");
     68  promise_test(async () => {
     69    /* Click the first ::scroll-marker to give it focus. */
     70    let actions_promise = new test_driver.Actions()
     71      .pointerMove(7, 7)
     72      .pointerDown()
     73      .pointerUp()
     74      .pointerDown()
     75      .pointerUp()
     76      .send();
     77    await actions_promise;
     78    await waitForAnimationFrames(2);
     79    scroller.scrollTop = 150;
     80    await waitForAnimationFrames(2);
     81    assertPseudoElementProperty(target, "::scroll-marker", "0.5");
     82  }, "active ::scroll-marker saves focus on scroll if previous ::scroll-marker had it");
     83 </script>