interesttarget-basic-delays.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/the-button-element/interest-target/interesttarget-basic-delays.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. This is just a single, basic test of the delays for `interesttarget`.

// The `interesttarget-hide-delay` and `interesttarget-show-delay` tests take a

// much more in-depth look at *how* the features work, but due to some nuances

// (please read the "NOTE" sections in those tests), they could end up passing

// on browsers that don't actually support this feature. So this test takes

// considerably longer, but should only pass on browsers that implement the

// `interesttarget` attribute.

const invokerDelays = 2000; // The CSS delay setting. Should be long enough to ensure it works, even on slow bots.

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

promise_test(async (t) => {

  assert_true(hoverWaitTime >= 2*invokerDelays,'invokerDelays is the value from CSS, hoverWaitTime should be longer than that');

  let {popover:div, invoker, unrelated} = createPopoverAndInvokerForHoverTests(t, invokerDelays, invokerDelays);

  div.removeAttribute('popover'); // No longer a popover

  let events = [];

  div.addEventListener('interest',() => events.push('interest'));

  div.addEventListener('loseinterest',() => events.push('loseinterest'));

  // Quickly do the entire test.

  await mouseOverAndRecord(invoker);

  const checkpoint1 = [...events];

  await waitForHoverTime(hoverWaitTime);

  const checkpoint2 = [...events];

  await mouseOverAndRecord(unrelated);

  const checkpoint3 = [...events];

  await waitForHoverTime(hoverWaitTime);

  const checkpoint4 = [...events];

  // Now test for expectations.

  assert_array_equals(checkpoint1,[],'After initial hover, no events fired yet');

  assert_array_equals(checkpoint2,['interest'],'After wait time, interest gets fired');

  assert_array_equals(checkpoint3,['interest'],'After initial de-hover, no events fired yet');

  assert_array_equals(checkpoint4,['interest','loseinterest'],'After wait time, loseinterest gets fired');

},'Basic hover interest and loseinterest behavior');

</script>