popover-nested-in-button.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/popovers/popover-nested-in-button.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8" />

<link rel="author" href="mailto:masonf@chromium.org">

<link rel=help href="https://github.com/whatwg/html/pull/10770">

<link rel=help href="https://issues.chromium.org/issues/379241451">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="resources/popover-utils.js"></script>

<button id=case1 popovertarget=popover>Button

  <div popover id=popover>

    <span class=descendant>Popover</span>

  </div>

</button>

<button id=case2 popovertarget=case2 popover>Self link</button>

<button popovertarget=case3>Button

  <div popover id=case3>

    <span class=descendant>Popover</span>

  </div>

</button>

<script>

promise_test(async t => {

  const invoker = document.querySelector('#case1');

  const popover = invoker.querySelector('[popover]');

  const descendant = invoker.querySelector('.descendant');

  assert_false(popover.matches(':popover-open'));

  invoker.click();

  assert_true(popover.matches(':popover-open'));

  popover.click();

  assert_true(popover.matches(':popover-open'),'Should still be open');

  descendant.click();

  assert_true(popover.matches(':popover-open'),'Should still be open, even for descendant');

  popover.hidePopover();

},'clicking a popover nested inside a button should not re-invoke the popover');

promise_test(async t => {

  const element = document.querySelector('#case2');

  assert_false(element.matches(':popover-open'));

  element.showPopover();

  assert_true(element.matches(':popover-open'));

  element.click(); // This is a click on the button, which is also the popover

  assert_false(element.matches(':popover-open'));

  element.hidePopover();

},'corner case: invoker that is also a popover');

promise_test(async t => {

  const popover = document.querySelector('#case3');

  const outerInvoker = popover.parentElement;

  const descendant = popover.querySelector('.descendant');

  const innerInvoker = popover.appendChild(document.createElement('button'));

  innerInvoker.popoverTargetElement = popover;

  assert_false(popover.matches(':popover-open'));

  outerInvoker.click();

  assert_true(popover.matches(':popover-open'));

  descendant.click();

  assert_true(popover.matches(':popover-open'),'descendant doesn\'t close popover');

  innerInvoker.click();

  assert_false(popover.matches(':popover-open'),'inner invoker still works');

},'invoker inside popover still works, even with weird nesting');

</script>