<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:masonf@chromium.org">
<link rel=help href="https://open-ui.org/components/popover.research.explainer">
<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
<script src="resources/popover-utils.js"></script>

<script>
  function ensureShadowDom(host) {
    host.querySelectorAll('my-element').forEach(host => {
      if (host.shadowRoot)
        return; // Declarative Shadow DOM is enabled
      const template = host.firstElementChild;
      assert_true(template instanceof HTMLTemplateElement);
      const shadow = host.attachShadow({mode: 'open'});
      shadow.appendChild(template.content);
      template.remove();
    })
  }
  function findPopovers(root) {
    let popovers = [];
    if (!root)
      return popovers;
    if (root instanceof Element && root.matches('[popover]'))
      popovers.push(root);
    popovers.push(...findPopovers(root.shadowRoot));
    root.childNodes.forEach(child => {
      popovers.push(...findPopovers(child));
    })
    return popovers;
  }
  function getPopoverReferences(testId) {
    const testRoot = document.querySelector(`#${testId}`);
    assert_true(!!testRoot);
    ensureShadowDom(testRoot);
    return findPopovers(testRoot);
  }
  function showTestPopover(testId,popoverNum) {
    getPopoverReferences(testId)[popoverNum].showPopover();
  }
</script>

<div id=test1>
  <button onclick='showTestPopover("test1",0)'>Test1 Popover</button>
  <my-element>
    <template shadowrootmode=open>
      <div popover>
        <p>This should show, even though it is inside shadow DOM.</p>
      </div>
    </template>
  </my-element>
</div>

<script>
  test(function() {
    const popover = getPopoverReferences('test1')[0];
    popover.showPopover();
    assert_true(popover.matches(':popover-open'));
    assert_true(isElementVisible(popover));
    popover.hidePopover(); // Cleanup
  }, "Popovers located inside shadow DOM can still be shown");
</script>


<div id=test2>
  <button id=t2b1 onclick='showTestPopover("test2",0)'>Test 2 Popover 1</button>
  <div popover anchor=t2b1 style="top: 200px;">
    <p>Popover 1</p>
    <button id=t2b2 onclick='showTestPopover("test2",1)'>Test 2 Popover 2</button>
  </div>
  <my-element>
    <template shadowrootmode=open>
      <div popover anchor=t2b2 style="top: 400px;">
        <p>Hiding this popover will hide *all* open popovers,</p>
        <p>because t2b2 doesn't exist in this context.</p>
      </div>
    </template>
  </my-element>
</div>

<script>
  test(function() {
    const [popover1,popover2] = getPopoverReferences('test2');
    popover1.showPopover();
    assert_true(popover1.matches(':popover-open'));
    assert_true(isElementVisible(popover1));
    popover2.showPopover();
    assert_false(popover1.matches(':popover-open'), 'popover1 open'); // P1 was closed by P2
    assert_false(isElementVisible(popover1), 'popover1 visible');
    assert_true(popover2.matches(':popover-open'), 'popover2 open'); // P2 is open
    assert_true(isElementVisible(popover2), 'popover2 visible');
    popover2.hidePopover(); // Cleanup
  }, "anchor references do not cross shadow boundaries");
</script>


<div id=test3>
  <my-element>
    <template shadowrootmode=open>
      <button id=t3b1 onclick='showTestPopover("test3",0)'>Test 3 Popover 1</button>
      <div popover anchor=t3b1>
        <p>This popover will stay open when popover2 shows.</p>
        <slot></slot>
      </div>
    </template>
    <button id=t3b2 onclick='showTestPopover("test3",1)'>Test 3 Popover 2</button>
  </my-element>
  <div popover anchor=t3b2>Popover 2</div>
</div>

<script>
  promise_test(async function() {
    const [popover1,popover2] = getPopoverReferences('test3');
    popover1.showPopover();
    assert_true(popover1.matches(':popover-open'));
    assert_true(isElementVisible(popover1));
    // Showing popover2 should not close popover1, since it is a flat
    // tree ancestor of popover2's anchor button.
    popover2.showPopover();
    assert_true(popover2.matches(':popover-open'));
    assert_true(isElementVisible(popover2));
    assert_true(popover1.matches(':popover-open'));
    assert_true(isElementVisible(popover1));
    popover1.hidePopover();
    await waitForRender();
    assert_false(popover1.matches(':popover-open'));
    assert_false(isElementVisible(popover1));
    assert_false(popover2.matches(':popover-open'));
    assert_false(isElementVisible(popover2));
  }, "anchor references use the flat tree not the DOM tree");
</script>


<div id=test4>
  <button id=t4b1 onclick='showTestPopover("test4",0)'>Test 4 Popover 1</button>
  <div popover anchor=t4b1>
    <p>This should not get hidden when popover2 opens.</p>
    <my-element>
      <template shadowrootmode=open>
        <button id=t4b2 onclick='showTestPopover("test4",1)'>Test 4 Popover 2</button>
        <div popover anchor=t4b2>
          <p>This should not hide popover1.</p>
        </div>
      </template>
    </my-element>
  </div>
</div>

<script>
  promise_test(async function() {
    const [popover1,popover2] = getPopoverReferences('test4');
    popover1.showPopover();
    popover2.showPopover();
    // Both 1 and 2 should be open at this point.
    assert_true(popover1.matches(':popover-open'), 'popover1 not open');
    assert_true(isElementVisible(popover1));
    assert_true(popover2.matches(':popover-open'), 'popover2 not open');
    assert_true(isElementVisible(popover2));
    // This should hide both of them.
    popover1.hidePopover();
    await waitForRender();
    assert_false(popover1.matches(':popover-open'));
    assert_false(isElementVisible(popover1));
    assert_false(popover2.matches(':popover-open'));
    assert_false(isElementVisible(popover2));
  }, "The popover stack is preserved across shadow-inclusive ancestors");
</script>


<div id=test5>
  <template shadowrootmode=open>
    <button popovertarget=p1>Test 5 Popover 1</button>
    <div popover id=p1>Popover 1
      <p>This should not get hidden when popover2 opens.</p>
      <button popovertarget=p2>Click</button>
    </div>
    <div popover id=p2>Popover 2
      <p>This should not hide popover1.</p>
    </div>
  </template>
</div>
<script>
  promise_test(async function() {
    polyfill_declarative_shadow_dom(test5);
    const [popover1,popover2] = getPopoverReferences('test5');
    popover1.showPopover();
    popover1.querySelector('button').click(); // Use invoker to keep 2 visible
    // Both 1 and 2 should be open at this point.
    assert_true(popover1.matches(':popover-open'), 'popover1 not open');
    assert_true(isElementVisible(popover1));
    assert_true(popover2.matches(':popover-open'), 'popover2 not open');
    assert_true(isElementVisible(popover2));
    // This should hide both of them.
    popover1.hidePopover();
    await waitForRender();
    assert_false(popover1.matches(':popover-open'));
    assert_false(isElementVisible(popover1));
    assert_false(popover2.matches(':popover-open'));
    assert_false(isElementVisible(popover2));
  }, "Popover ancestor relationships are within a root, not within the document");
</script>
