tor-browser

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

scroll-marker-activation-focus-behaviour-tabs-mode.tentative.html (1638B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: ::scroll-marker retains focus on ::scroll-marker with scroll-marker-group mode set to tabs</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-activation">
      5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12122#issuecomment-2920507737">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/resources/testdriver.js"></script>
      9 <script src="/resources/testdriver-actions.js"></script>
     10 <script src="/resources/testdriver-vendor.js"></script>
     11 <style>
     12  body {
     13    margin: 0;
     14  }
     15 
     16  #scroller {
     17    width: 600px;
     18    height: 300px;
     19    overflow: auto;
     20    scroll-marker-group: before tabs;
     21    white-space: nowrap;
     22  }
     23 
     24  #scroller div {
     25    background: green;
     26    display: inline-block;
     27    width: 600px;
     28    height: 200px;
     29  }
     30 
     31  #scroller::scroll-marker-group {
     32    display: flex;
     33    height: 20px;
     34    width: 40px;
     35  }
     36 
     37  #scroller div::scroll-marker {
     38    content: "";
     39    width: 100px;
     40    height: 20px;
     41    background-color: green;
     42    display: inline-block;
     43  }
     44 
     45  #scroller div::scroll-marker:focus {
     46    background-color: blue;
     47  }
     48 </style>
     49 <div id="scroller">
     50  <div id="target"></div>
     51  <div></div>
     52 </div>
     53 <script>
     54  promise_test(async t => {
     55    actions_promise = new test_driver.Actions()
     56      .pointerMove(15, 15)
     57      .pointerDown()
     58      .pointerUp()
     59      .send();
     60    await actions_promise;
     61    assert_equals(getComputedStyle(target, "::scroll-marker").backgroundColor, "rgb(0, 0, 255)", "::scroll-marker activation retains focus");
     62  });
     63 </script>