interestfor-delay-end.tentative.html (6116B)
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 <meta name=variant content=?method=hover> 14 <meta name=variant content=?method=focus> 15 16 <body> 17 <script> 18 // The invokerMethod parameter is provided by variants, to 19 // effectively split this (slow) test into multiple runs. 20 const urlParams = new URLSearchParams(window.location.search); 21 invokerMethod = urlParams.get('method'); 22 description = `method ${invokerMethod}`; 23 24 // NOTE about testing methodology: 25 // This test uses popovers as an invoker target, and checks whether they are 26 // hidden *after* the appropriate de-hover delay. The delay used for testing is 27 // kept low, to avoid this test taking too long, but that means that sometimes 28 // on a slow bot/client, the hover delay can elapse before we are able to check 29 // the popover status. And that can make this test flaky. To avoid that, the 30 // msSinceMouseOver() function is used to check that not-too-much time has 31 // passed, and if it has, the test is simply skipped. Because of this 32 // methodology, many/most of these tests will pass on browsers that do not 33 // implement `interestfor`. See the `interestfor-basic-delays` test. 34 const invokerHideDelay = 100; // The CSS delay setting. 35 const hoverWaitTime = 200; // How long to wait to cover the delay for sure. 36 37 async function makeTestParts(t) { 38 // This ensures the tests in this file don't succeed sometimes, due to the above NOTE. 39 assert_true(HTMLAnchorElement.prototype.hasOwnProperty('interestForElement'),'interestfor is not supported'); 40 let {popover, invoker, unrelated} = await createPopoverAndInvokerForHoverTests(t, /*showdelayMs*/ 0, invokerHideDelay); 41 let specificInvokerElement; 42 invoker.innerHTML = '<span><span>Click me</span></span>'; 43 specificInvokerElement = invoker.firstElementChild.firstElementChild; 44 assert_true(!!specificInvokerElement,'invalid'); 45 assert_false(popover.matches(':popover-open'),'popover should start closed'); 46 await hoverOrFocus(invokerMethod,invoker); // Always start with the focus/mouse over the invoker, which will invoke the popover immediately 47 assert_true(popover.matches(':popover-open'),'popover should be open'); 48 return {popover, invoker, unrelated, specificInvokerElement}; 49 } 50 51 promise_test(async (t) => { 52 const {popover,invoker} = await makeTestParts(t); 53 const token = await mouseOverOrFocusAndRecord(t,invokerMethod,invoker); 54 await waitForHoverTime(hoverWaitTime); 55 assert_true(msSinceMouseOver(token) >= hoverWaitTime,'waitForHoverTime should wait the specified time'); 56 assert_true(hoverWaitTime > invokerHideDelay,'invokerHideDelay is the value from CSS, hoverWaitTime should be longer than that'); 57 },'Test the harness'); 58 59 promise_test(async (t) => { 60 const {popover,invoker,unrelated} = await makeTestParts(t); 61 const token = await mouseOverOrFocusAndRecord(t,invokerMethod,unrelated); 62 let showing = popover.matches(':popover-open'); 63 if (msSinceMouseOver(token) < invokerHideDelay) { 64 // Only check if the WPT runner wasn't too slow. 65 assert_true(showing,'interest shouldn\'t be immediately lost'); 66 } 67 await hoverOrFocus(invokerMethod,unrelated); 68 await waitForHoverTime(hoverWaitTime); 69 assert_false(popover.matches(':popover-open'),'interest should be lost after delay'); 70 },`The interest-delay-end causes interest to be lost after a delay, ${description}`); 71 72 promise_test(async (t) => { 73 const {popover,invoker,unrelated} = await makeTestParts(t); 74 // First hover/focus unrelated. 75 const token = await mouseOverOrFocusAndRecord(t,invokerMethod,unrelated); 76 // Then immediately re-hover/focus the invoker. 77 await hoverOrFocus(invokerMethod,invoker); 78 if (msSinceMouseOver(token) >= invokerHideDelay) 79 return; // The WPT runner was too slow. 80 let showing1 = popover.matches(':popover-open'); 81 await waitForHoverTime(hoverWaitTime); 82 let showing2 = popover.matches(':popover-open'); 83 assert_true(showing1 && showing2,'interest should not be lost'); 84 },`Hide delay is cancelled if hover/focus returns, ${description}`); 85 86 promise_test(async (t) => { 87 const {popover,invoker,unrelated} = await makeTestParts(t); 88 await hoverOrFocus(invokerMethod,popover); 89 await waitForHoverTime(hoverWaitTime); 90 assert_true(popover.matches(':popover-open'),'hovering the interest for element should keep it showing'); 91 const token = await mouseOverOrFocusAndRecord(t,invokerMethod,unrelated); 92 let showing = popover.matches(':popover-open'); 93 if (msSinceMouseOver(token) >= invokerHideDelay) 94 return; // The WPT runner was too slow. 95 assert_true(showing,'subsequently hovering unrelated element shouldn\'t immediately cause interest lost'); 96 await hoverOrFocus(invokerMethod,unrelated); 97 await waitForHoverTime(hoverWaitTime); 98 assert_false(popover.matches(':popover-open'),'hovering unrelated element should cause interest lost after delay'); 99 },`hovering/focusing the interest for element keeps the invoker from losing interest, ${description}`); 100 101 promise_test(async (t) => { 102 const {popover,invoker,unrelated,specificInvokerElement} = await makeTestParts(t); 103 await hoverOrFocus(invokerMethod,popover); 104 await waitForHoverTime(hoverWaitTime); 105 await hoverOrFocus(invokerMethod,specificInvokerElement); 106 await waitForHoverTime(hoverWaitTime); 107 assert_true(popover.matches(':popover-open'),'Moving hover between invoker and target should not cause interest lost'); 108 await hoverOrFocus(invokerMethod,unrelated); 109 await waitForHoverTime(hoverWaitTime); 110 assert_false(popover.matches(':popover-open'),'Moving hover to unrelated should cause interest lost'); 111 },`moving hover/focus between the invoker and the target prevents interest lost, ${description}`); 112 </script>