1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!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} = await 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 hoverOver(invoker);
const checkpoint1 = [...events];
await waitForHoverTime(hoverWaitTime);
const checkpoint2 = [...events];
await hoverOver(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>
|
