html/semantics/interactive-elements/the-popup-element/popup-light-dismiss-on-scroll.tentative.html

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Popup 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">
<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>

<popup id=popup1>This is popup 1<div id=anchor></div></popup>
<popup id=popup2 anchor=anchor>This is popup 2</popup>
<button onclick='popup1.show();popup2.show();'>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>
  async_test(t => {
    popup1.addEventListener('hide',e => {
      assert_false(popup2.open);
      t.done();
    })
    assert_false(popup1.open);
    assert_false(popup2.open);
    popup1.show();
    popup2.show();
    assert_true(popup1.open);
    assert_true(popup2.open);
    scroller.scrollTo(0, 100);
  },'Scrolling light-dismisses all popups');
</script>