tor-browser

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

scroll-button-and-scroll-marker-not-in-event-path.html (2749B)

      1 <!DOCTYPE html>
      2 <title>CSS Overflow Test: ::scroll-button and ::scroll-marker pseudo-elements are not present in event path</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons">
      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    height: 100px;
     17    width: 100px;
     18    overflow: scroll;
     19    scroll-marker-group: before;
     20  }
     21 
     22  #scroller::scroll-marker-group {
     23    height: 10px;
     24  }
     25 
     26  #target {
     27    height: 100px;
     28    width: 200px;
     29  }
     30 
     31  #scroller::scroll-button(right) {
     32    content: "";
     33    height: 10px;
     34    width: 10px;
     35  }
     36 
     37  #target::scroll-marker {
     38    content: "";
     39    height: 10px;
     40    width: 10px;
     41    display: block;
     42  }
     43 </style>
     44 <div id="scroller">
     45  <div id="target"></div>
     46 </div>
     47 <script>
     48  const scrollButtonHalfHeight = 5;
     49  const scrollButtonHalfWidth = 5;
     50  const scrollMarkerHalfHeight = 5;
     51  const scrollMarkerHalfWidth = 5;
     52  const scrollerBottom = scroller.getBoundingClientRect().bottom;
     53 
     54  let scrollerActualEventPath = null;
     55  scroller.addEventListener("click", (e) => {
     56    scrollerActualEventPath = e.composedPath();
     57  });
     58 
     59  const scrollerExpectedEventPath = [scroller, document.body, document.documentElement, document, window];
     60  promise_test(async t => {
     61    // Click on the ::scroll-button pseudo-element.
     62    const scrollButtonX = scrollButtonHalfWidth;
     63    const scrollButtonY = scrollerBottom + scrollButtonHalfHeight;
     64    await new test_driver.Actions()
     65      .pointerMove(scrollButtonX, scrollButtonY)
     66      .pointerDown()
     67      .pointerUp()
     68      .send();
     69    assert_array_equals(scrollerActualEventPath, scrollerExpectedEventPath, "::scroll-button pseudo-element should not be in the event path");
     70  });
     71 
     72  let targetActualEventPath = null;
     73  target.addEventListener("click", (e) => {
     74    targetActualEventPath = e.composedPath();
     75  });
     76 
     77  const targetExpectedEventPath = [target, scroller, document.body, document.documentElement, document, window];
     78  promise_test(async t => {
     79    // Click on the ::scroll-marker pseudo-element.
     80    const scrollMarkerX = scrollMarkerHalfWidth;
     81    const scrollMarkerY = scrollMarkerHalfHeight;
     82    await new test_driver.Actions()
     83      .pointerMove(scrollMarkerX, scrollMarkerY)
     84      .pointerDown()
     85      .pointerUp()
     86      .send();
     87    assert_array_equals(targetActualEventPath, targetExpectedEventPath, "::scroll-marker pseudo-element should not be in the event path");
     88  });
     89 </script>