tor-browser

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

scroll-marker-hover-logical.html (1682B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: ::scroll-marker changes on hover via logical selectors</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker">
      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 <style>
     11  body {
     12    margin: 0;
     13  }
     14 
     15  #scroller {
     16    width: 600px;
     17    height: 300px;
     18    overflow: auto;
     19    scroll-marker-group: before;
     20    white-space: nowrap;
     21  }
     22 
     23  #scroller div {
     24    background: green;
     25    display: inline-block;
     26    width: 600px;
     27    height: 270px;
     28  }
     29 
     30  #scroller::scroll-marker-group {
     31    display: flex;
     32    height: 20px;
     33    width: 40px;
     34  }
     35 
     36  #scroller div::scroll-marker {
     37    content: "";
     38    width: 100px;
     39    height: 20px;
     40    display: inline-block;
     41  }
     42 
     43  #scroller div::scroll-marker:not(:hover) {
     44    background-color: green;
     45  }
     46 
     47  #scroller div::scroll-marker:is(:hover) {
     48    background-color: blue;
     49  }
     50 </style>
     51 <div id="scroller">
     52  <div id="target"></div>
     53  <div></div>
     54 </div>
     55 <script>
     56  promise_test(async t => {
     57    assert_equals(getComputedStyle(target, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "not hovered ::scroll-marker is styled via logical :not(:hover)");
     58    actions_promise = new test_driver.Actions()
     59      .pointerMove(15, 15)
     60      .send();
     61    await actions_promise;
     62    assert_equals(getComputedStyle(target, "::scroll-marker").backgroundColor, "rgb(0, 0, 255)", "::scroll-marker changes on hover via logical :is(:hover)");
     63  });
     64 </script>