tor-browser

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

scroll-marker-next-focus.html (2575B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS Test: next focus search start after ::scroll-marker activation is from its ultimate originating element</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-next-focus">
      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    overflow: auto;
     17    scroll-marker-group: before;
     18  }
     19 
     20  #scroller::scroll-marker-group {
     21    height: 10px;
     22    width: 150px;
     23  }
     24 
     25  section {
     26    background: red;
     27  }
     28 
     29  section:focus {
     30    background: green;
     31  }
     32 
     33  section::scroll-marker {
     34    content: "Section";
     35    background: red;
     36    width: 50px;
     37    height: 10px;
     38  }
     39 
     40  section::scroll-marker:focus {
     41    background: green;
     42  }
     43 
     44  button {
     45    background: red;
     46    height: 30px;
     47  }
     48 
     49  button:focus {
     50    background: green;
     51  }
     52 </style>
     53 <button>Before</button>
     54 <div id="scroller">
     55  <section id="first_section" tabindex=0>Section 1</section>
     56  <section id="second_section" tabindex=-1>
     57    Section 2
     58    <button id="target">Focusable</button>
     59  </section>
     60  <section tabindex=0>Section 3</section>
     61 </div>
     62 <button>After</button>
     63 <script>
     64  promise_test(async t => {
     65    await new test_driver.Actions()
     66      .pointerMove(5, 35)
     67      .pointerDown()
     68      .pointerUp()
     69      .send();
     70    assert_equals(getComputedStyle(first_section, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "the first ::scroll-marker gets activated upon clicking");
     71    const kTab = '\uE004';
     72    await new test_driver.Actions()
     73      .keyDown(kTab)
     74      .keyUp(kTab)
     75      .send();
     76    assert_equals(getComputedStyle(first_section).backgroundColor, "rgb(0, 128, 0)", "next focus search start after the first ::scroll-marker activation is from its ultimate originating element");
     77 
     78    await new test_driver.Actions()
     79      .pointerMove(55, 35)
     80      .pointerDown()
     81      .pointerUp()
     82      .send();
     83    assert_equals(getComputedStyle(second_section, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "the second ::scroll-marker gets activated upon clicking");
     84    await new test_driver.Actions()
     85      .keyDown(kTab)
     86      .keyUp(kTab)
     87      .send();
     88    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)", "next focus search start after the second ::scroll-marker activation is from its ultimate originating element");
     89  });
     90 </script>