tor-browser

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

popover-light-dismiss-on-scroll.html (2157B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <meta charset="utf-8" />
      4 <title>Popover should *not* light dismiss on scroll</title>
      5 <link rel="author" href="mailto:masonf@chromium.org">
      6 <link rel=help href="https://open-ui.org/components/popover.research.explainer">
      7 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
      8 <link rel=help href="https://github.com/openui/open-ui/issues/240">
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 
     12 <div id=scroller>
     13  Scroll me<br><br>
     14  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
     15  ut labore et dolore magna aliqua. Enim ut sem viverra aliquet eget sit amet tellus. Massa
     16  sed elementum tempus egestas sed sed risus pretium. Felis bibendum ut tristique et egestas
     17  quis. Tortor dignissim convallis aenean et. Eu mi bibendum neque egestas congue quisque
     18 </div>
     19 
     20 <div popover id=popover1>
     21  This is popover 1
     22  <div popover id=popover2 anchor=anchor>
     23    This is popover 2
     24  </div>
     25 </div>
     26 <button onclick='popover1.showPopover();popover2.showPopover();'>Open popovers</button>
     27 
     28 <style>
     29  #popover1 { top:50px; left: 50px; }
     30  #popover2 { top:150px; left: 50px; }
     31  #scroller {
     32    height: 150px;
     33    width: 150px;
     34    overflow-y: scroll;
     35    border: 1px solid black;
     36  }
     37 </style>
     38 
     39 <script>
     40  const popovers = document.querySelectorAll('[popover]');
     41  function assertAll(showing) {
     42    for(let popover of popovers) {
     43      assert_equals(popover.matches(':popover-open'),showing);
     44    }
     45  }
     46  async_test(t => {
     47    for(let popover of popovers) {
     48      popover.addEventListener('beforetoggle',e => {
     49        if (e.newState !== "closed")
     50          return;
     51        assert_unreached('Scrolling should not light-dismiss a popover');
     52      });
     53    }
     54    assertAll(/*showing*/false);
     55    popovers[0].showPopover();
     56    popovers[1].showPopover();
     57    assertAll(/*showing*/true);
     58    scroller.scrollTo(0, 100);
     59    requestAnimationFrame(() => {
     60      requestAnimationFrame(() => {
     61        assertAll(/*showing*/true);
     62        t.done();
     63      });
     64    });
     65  },'Scrolling should not light-dismiss popovers');
     66 </script>