interestfor-basic-delays.tentative.html (2500B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <link rel="author" href="mailto:masonf@chromium.org"> 4 <link rel="help" href="https://open-ui.org/components/interest-invokers.explainer"> 5 <meta name="timeout" content="long"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="resources/invoker-utils.js"></script> 12 13 <body> 14 <script> 15 // NOTE. This is just a single, basic test of the delays for `interestfor`. 16 // The `interest-delay-end` and `interest-delay-start` tests take a 17 // much more in-depth look at *how* the features work, but due to some nuances 18 // (please read the "NOTE" sections in those tests), they could end up passing 19 // on browsers that don't actually support this feature. So this test takes 20 // considerably longer, but should only pass on browsers that implement the 21 // `interestfor` attribute. 22 23 const invokerDelays = 2000; // The CSS delay setting. Should be long enough to ensure it works, even on slow bots. 24 const hoverWaitTime = 4000; // How long to wait to cover the delay for sure. 25 26 promise_test(async (t) => { 27 assert_true(hoverWaitTime >= 2*invokerDelays,'invokerDelays is the value from CSS, hoverWaitTime should be longer than that'); 28 let {popover:div, invoker, unrelated} = await createPopoverAndInvokerForHoverTests(t, invokerDelays, invokerDelays); 29 div.removeAttribute('popover'); // No longer a popover 30 let events = []; 31 div.addEventListener('interest',() => events.push('interest')); 32 div.addEventListener('loseinterest',() => events.push('loseinterest')); 33 // Quickly do the entire test. 34 await hoverOver(invoker); 35 const checkpoint1 = [...events]; 36 await waitForHoverTime(hoverWaitTime); 37 const checkpoint2 = [...events]; 38 await hoverOver(unrelated); 39 const checkpoint3 = [...events]; 40 await waitForHoverTime(hoverWaitTime); 41 const checkpoint4 = [...events]; 42 // Now test for expectations. 43 assert_array_equals(checkpoint1,[],'After initial hover, no events fired yet'); 44 assert_array_equals(checkpoint2,['interest'],'After wait time, interest gets fired'); 45 assert_array_equals(checkpoint3,['interest'],'After initial de-hover, no events fired yet'); 46 assert_array_equals(checkpoint4,['interest','loseinterest'],'After wait time, loseinterest gets fired'); 47 },'Basic hover interest and loseinterest behavior'); 48 </script>