tor-browser

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

scroll-marker-focus-within.html (2922B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Overflow Test: focused ::scroll-marker sets :focus-within on its ::scroll-marker-group, scroller and all the ancestors</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#focus-pseudoclasses">
      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    background: red;
     17    width: 600px;
     18    height: 300px;
     19    overflow: auto;
     20    scroll-marker-group: before;
     21    white-space: nowrap;
     22  }
     23 
     24  #scroller:focus-within {
     25    background: green;
     26  }
     27 
     28  #scroller div {
     29    background: green;
     30    display: inline-block;
     31    width: 600px;
     32    height: 270px;
     33  }
     34 
     35  #scroller div:focus-within {
     36    background: red;
     37  }
     38 
     39  #scroller::scroll-marker-group {
     40    background: red;
     41    display: flex;
     42    height: 20px;
     43    width: 40px;
     44  }
     45 
     46  #scroller::scroll-marker-group:focus-within {
     47    background: green;
     48  }
     49 
     50  #scroller div::scroll-marker {
     51    content: "";
     52    width: 20px;
     53    height: 20px;
     54    background-color: red;
     55    display: inline-block;
     56  }
     57 
     58  #scroller div::scroll-marker:focus-within {
     59    background: green;
     60  }
     61 </style>
     62 <div id="scroller">
     63  <div id="target"></div>
     64  <div></div>
     65 </div>
     66 <script>
     67  promise_test(async t => {
     68    let actions_promise = new test_driver.Actions()
     69      .pointerMove(15, 15)
     70      .pointerDown()
     71      .pointerUp()
     72      .send();
     73    await actions_promise;
     74    assert_equals(getComputedStyle(scroller, "::scroll-marker-group").backgroundColor, "rgb(0, 128, 0)", "focused ::scroll-marker sets :focus-within on its ::scroll-marker-group");
     75    assert_equals(getComputedStyle(scroller).backgroundColor, "rgb(0, 128, 0)", "focused ::scroll-marker sets :focus-within on its scroller");
     76    assert_equals(getComputedStyle(target, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "focused ::scroll-marker sets :focus-within on itself");
     77    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)", "focused ::scroll-marker doesn't set :focus-within on its originating element");
     78    actions_promise = new test_driver.Actions()
     79      .pointerMove(500, 300)
     80      .pointerDown()
     81      .pointerUp()
     82      .send();
     83    await actions_promise;
     84    assert_equals(getComputedStyle(scroller, "::scroll-marker-group").backgroundColor, "rgb(255, 0, 0)", "focused ::scroll-marker resets :focus-within on its ::scroll-marker-group");
     85    assert_equals(getComputedStyle(scroller).backgroundColor, "rgb(255, 0, 0)", "focused ::scroll-marker resets :focus-within on its scroller");
     86    assert_equals(getComputedStyle(target, "::scroll-marker").backgroundColor, "rgb(255, 0, 0)", "focused ::scroll-marker resets :focus-within on itself");
     87  });
     88 </script>