togglePopover.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/popovers/togglePopover.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

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

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

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

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

<div id=popover popover=auto>popover</div>

<div id=popover2 popover=auto>popover</div>

<script>

test(() => {

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

    'Popover should be closed when the test starts.');

  assert_true(popover.togglePopover(),

    'togglePopover() should return true.');

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

    'togglePopover() should open the popover.');

  assert_true(popover.togglePopover(/*force=*/true),

    'togglePopover(true) should return true.');

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

    'togglePopover(true) should open the popover.');

  assert_false(popover.togglePopover(),

    'togglePopover() should return false.');

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

    'togglePopover() should close the popover.');

  assert_false(popover.togglePopover(/*force=*/false),

    'togglePopover(false) should return false.');

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

    'togglePopover(false) should close the popover.');

}, 'togglePopover should toggle the popover and return true or false as specified.');

test(() => {

  const popover = document.getElementById('popover2');

  popover.addEventListener('beforetoggle', event => event.preventDefault(), {once: true});

  assert_false(popover.togglePopover(/*force=*/true),

    'togglePopover(true) should return false when the popover does not get opened.');

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

  // We could also add a test for the return value of togglePopover(false),

  // but every way to prevent that from hiding the popover also throws an

  // exception, so the return value is not testable.

}, `togglePopover's return value should reflect what the end state is, not just the force parameter.`);

test(() => {

  const popover = document.createElement('div');

  document.body.appendChild(popover);

  assert_throws_dom('NotSupportedError', () => popover.togglePopover(),

    'togglePopover() should throw an exception when the element has no popover attribute.');

  assert_throws_dom('NotSupportedError', () => popover.togglePopover(true),

    'togglePopover(true) should throw an exception when the element has no popover attribute.');

  assert_throws_dom('NotSupportedError', () => popover.togglePopover(false),

    'togglePopover(false) should throw an exception when the element has no popover attribute.');

  popover.setAttribute('popover', 'auto');

  popover.remove();

  assert_throws_dom('InvalidStateError', () => popover.togglePopover(),

    'togglePopover() should throw an exception when the element is disconnected.');

  assert_throws_dom('InvalidStateError', () => popover.togglePopover(true),

    'togglePopover(true) should throw an exception when the element is disconnected.');

  assert_throws_dom('InvalidStateError', () => popover.togglePopover(false),

    'togglePopover(false) should throw an exception when the element is disconnected.');

  document.body.appendChild(popover);

  // togglePopover(false) should not throw just because the popover is already hidden.

  popover.togglePopover(false);

  popover.showPopover();

  // togglePopover(true) should not throw just because the popover is already showing.

  popover.togglePopover(true);

  // cleanup

  popover.hidePopover();

}, 'togglePopover should throw an exception when there is no popover attribute.');

</script>