interesttarget-hide-delay.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/the-button-element/interest-target/interesttarget-hide-delay.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8" />

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

<link rel="help" href="https://open-ui.org/components/interest-invokers.explainer">

<meta name="timeout" content="long">

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

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

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

<script src="/resources/testdriver-actions.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

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

<body>

<script>

// NOTE about testing methodology:

// This test uses popovers as an invoker target, and checks whether they are

// hidden *after* the appropriate de-hover delay. The delay used for testing is

// kept low, to avoid this test taking too long, but that means that sometimes

// on a slow bot/client, the hover delay can elapse before we are able to check

// the popover status. And that can make this test flaky. To avoid that, the

// msSinceMouseOver() function is used to check that not-too-much time has

// passed, and if it has, the test is simply skipped. Because of this

// methodology, many/most of these tests will pass on browsers that do not

// implement `interesttarget`. See the `interesttarget-basic-delays` test.

const invokerHideDelay = 100; // The CSS delay setting.

const hoverWaitTime = 200; // How long to wait to cover the delay for sure.

async function makeTestParts(t) {

  // This ensures the tests in this file don't succeed sometimes, due to the above NOTE.

  assert_true(HTMLAnchorElement.prototype.hasOwnProperty('interestTargetElement'),'interesttarget is not supported');

  let {popover, invoker, unrelated} = createPopoverAndInvokerForHoverTests(t, 0, invokerHideDelay);

  let mouseOverInvoker;

  invoker.innerHTML = '<span><span>Click me</span></span>';

  mouseOverInvoker = invoker.firstElementChild.firstElementChild;

  assert_true(!!mouseOverInvoker);

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

  await mouseOverAndRecord(invoker); // Always start with the mouse over the invoker, which will invoke the popover immediately

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

  return {popover, invoker, unrelated, mouseOverInvoker};

promise_test(async (t) => {

  const {popover,invoker} = await makeTestParts(t);

  await mouseOverAndRecord(invoker);

  await waitForHoverTime(hoverWaitTime);

  assert_true(msSinceMouseOver() >= hoverWaitTime,'waitForHoverTime should wait the specified time');

  assert_true(hoverWaitTime > invokerHideDelay,'invokerHideDelay is the value from CSS, hoverWaitTime should be longer than that');

},'Test the harness');

promise_test(async (t) => {

  const {popover,invoker,unrelated} = await makeTestParts(t);

  await mouseOverAndRecord(unrelated);

  let showing = popover.matches(':popover-open');

  if (msSinceMouseOver() < invokerHideDelay) {

    // Only check if the WPT runner wasn't too slow.

    assert_true(showing,'interest shouldn\'t be immediately lost');

  await mouseOverAndRecord(unrelated);

  await waitForHoverTime(hoverWaitTime);

  assert_false(popover.matches(':popover-open'),'interest should be lost after delay');

},`The interest-target-hide-delay causes interest to be lost after a delay`);

promise_test(async (t) => {

  const {popover,invoker,unrelated} = await makeTestParts(t);

  await mouseOverAndRecord(popover);

  await waitForHoverTime(hoverWaitTime);

  assert_true(popover.matches(':popover-open'),'hovering the interest target element should keep it showing');

  await mouseOverAndRecord(unrelated);

  let showing = popover.matches(':popover-open');

  if (msSinceMouseOver() >= invokerHideDelay)

    return; // The WPT runner was too slow.

  assert_true(showing,'subsequently hovering unrelated element shouldn\'t immediately cause interest lost');

  await mouseOverAndRecord(unrelated);

  await waitForHoverTime(hoverWaitTime);

  assert_false(popover.matches(':popover-open'),'hovering unrelated element should cause interest lost after delay');

},`hovering the interest target element keeps the invoker from losing interest`);

promise_test(async (t) => {

  const {popover,invoker,unrelated,mouseOverInvoker} = await makeTestParts(t);

  await mouseOverAndRecord(popover);

  await waitForHoverTime(hoverWaitTime);

  await mouseOverAndRecord(mouseOverInvoker);

  await waitForHoverTime(hoverWaitTime);

  assert_true(popover.matches(':popover-open'),'Moving hover between invoker and target should not cause interest lost');

  await mouseOverAndRecord(unrelated);

  await waitForHoverTime(hoverWaitTime);

  assert_false(popover.matches(':popover-open'),'Moving hover to unrelated should cause interest lost');

},`moving hover between the invoker and the target prevents interest lost`);

</script>