interesttarget-has-interest-pseudo.tentative.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/the-button-element/interest-target/interesttarget-has-interest-pseudo.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">

<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>

<div id=unrelated>Unrelated</div>

<button id=button interesttarget=target>Button</button>

<div id=target>Target</div>

<style>

  button {

    interest-target-delay: 0s;

</style>

<script>

promise_test(async (t) => {

  let hasInterest = false;

  target.addEventListener('interest',() => (hasInterest=true));

  target.addEventListener('loseinterest',() => (hasInterest=false));

  assert_false(button.matches(':has-interest'));

  assert_false(target.matches(':has-interest'));

  assert_false(hasInterest);

  await hoverOver(button);

  assert_true(button.matches(':has-interest'),'hovering button shows interest');

  assert_false(target.matches(':has-interest'),'target never matches the pseudo class');

  assert_true(hasInterest,'event was fired');

  await hoverOver(target);

  assert_true(button.matches(':has-interest'),'hovering the target maintains interest');

  assert_false(target.matches(':has-interest'),'target never matches the pseudo class');

  assert_true(hasInterest,'loseinterest event was not yet fired');

  await hoverOver(unrelated);

  assert_false(button.matches(':has-interest'),'hovering unrelated loses interest');

  assert_false(target.matches(':has-interest'),'target never matches the pseudo class');

  assert_false(hasInterest,'loseinterest event was fired');

},'The :has-interest pseudo class matches when an element has interest');

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

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

promise_test(async (t) => {

  t.add_cleanup(() => button.removeAttribute('style'));

  button.setAttribute('style',`interest-target-delay: ${invokerDelayMs}ms`);

  assert_false(button.matches(':has-interest'));

  await mouseOverAndRecord(button);

  const immediate_result = button.matches(':has-interest');

  if (msSinceMouseOver() < invokerDelayMs) {

    assert_false(immediate_result,':has-interest should not match before the show delay elapses');

  await waitForHoverTime(hoverWaitTime);

  assert_true(button.matches(':has-interest'),':has-interest should match after hover delay');

  await mouseOverAndRecord(unrelated);

  const immediate_result2 = button.matches(':has-interest');

  if (msSinceMouseOver() < invokerDelayMs) {

    assert_true(immediate_result2,':has-interest should still match before the hide delay elapses');

  await waitForHoverTime(hoverWaitTime);

  assert_false(button.matches(':has-interest'),':has-interest should not match after de-hover delay');

},'The :has-interest pseudo class only matches after delays, once interest is shown');

</script>