html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Popup should *not* light dismiss on scroll</title>
<link rel="author" href="mailto:masonf@chromium.org">
<link rel=help href="https://open-ui.org/components/popup.research.explainer">
<link rel=help href="https://github.com/openui/open-ui/issues/240">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id=scroller>
  Scroll me<br><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  ut labore et dolore magna aliqua. Enim ut sem viverra aliquet eget sit amet tellus. Massa
  sed elementum tempus egestas sed sed risus pretium. Felis bibendum ut tristique et egestas
  quis. Tortor dignissim convallis aenean et. Eu mi bibendum neque egestas congue quisque
</div>

<div popup=popup id=popup1>
  This is popup 1
  <div popup=popup id=popup2 anchor=anchor>
    This is popup 2
  </div>
</div>
<button onclick='popup1.showPopup();popup2.showPopup();'>Open popups</button>

<style>
  #popup1 { top:50px; left: 50px; }
  #popup2 { top:150px; left: 50px; }
  #scroller {
    height: 150px;
    width: 150px;
    overflow-y: scroll;
    border: 1px solid black;
  }
</style>

<script>
  const popups = document.querySelectorAll('[popup]');
  function assertAll(showing) {
    for(let popup of popups) {
      assert_equals(popup.matches(':popup-open'),showing);
    }
  }
  async_test(t => {
    for(let popup of popups) {
      popup.addEventListener('hide',e => {
        assert_unreached('Scrolling should not light-dismiss a popup');
      });
    }
    assertAll(/*showing*/false);
    popups[0].showPopup();
    popups[1].showPopup();
    assertAll(/*showing*/true);
    scroller.scrollTo(0, 100);
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        assertAll(/*showing*/true);
        t.done();
      });
    });
  },'Scrolling should not light-dismiss popups');
</script>