Remove hover-triggered behaviors from the Pop-Up API
Rather than keeping all of this complexity in the codebase, based
on the decision [1] to "punt" this behavior to V2 of the API, I'm
going to remove it all. This CL can be reverted to bring it back.
This CL mostly reverts the CLs below, but some functionality is
left in place, such as the CSS time interpolation code. But for
the most part, this reverts these CLs:
1. https://chromium-review.googlesource.com/c/chromium/src/+/3763422
2. https://chromium-review.googlesource.com/c/chromium/src/+/3760885
3. https://chromium-review.googlesource.com/c/chromium/src/+/3781406
4. https://chromium-review.googlesource.com/c/chromium/src/+/3812260
5. https://chromium-review.googlesource.com/c/chromium/src/+/3811136
[1] https://github.com/openui/open-ui/issues/526
Bug: 1307772
Change-Id: I6c8e4c9d2cf1ef0d36df71767b26122f65ea5b5b
Fixed: 1349910
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3842343
Reviewed-by: David Baron <dbaron@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1037917}
diff --git a/html/semantics/popups/popup-css-properties.tentative.html b/html/semantics/popups/popup-css-properties.tentative.html
deleted file mode 100644
index ac5e9f7..0000000
--- a/html/semantics/popups/popup-css-properties.tentative.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>Pop-up API CSS parsing with computed values</title>
-<link rel="author" href="mailto:masonf@chromium.org">
-<link rel=help href="https://open-ui.org/components/popUp.research.explainer">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/parsing-testcommon.js"></script>
-<script src="/css/support/computed-testcommon.js"></script>
-<script src="/css/support/interpolation-testcommon.js"></script>
-
-<div id=target></div>
-<div id=scratch></div>
-
-<script>
-function testprop(prop) {
- // Computed values:
- test_computed_value(prop, '0s');
- test_computed_value(prop, '0ms', '0s');
- test_computed_value(prop, '32s');
- test_computed_value(prop, '123ms', '0.123s');
-
- // Valid values:
- test_valid_value(prop, '0s');
- test_valid_value(prop, '0ms');
- test_valid_value(prop, '32s');
- test_valid_value(prop, '123ms');
- test_valid_value(prop, 'inherit');
-
- // Invalid values:
- test_invalid_value(prop, '0');
- test_invalid_value(prop, 'foo');
- test_invalid_value(prop, '-1s');
- test_invalid_value(prop, 'none');
- test_invalid_value(prop, 'auto');
-
- // Animations:
- test_interpolation({
- property: prop,
- from: '1s',
- to: '2000ms',
- }, [
- {at: -1.5, expect: '0s'}, // Clamping at 0
- {at: -0.3, expect: '0.7s'},
- {at: 0, expect: '1s'},
- {at: 0.5, expect: '1.5s'},
- {at: 1, expect: '2s'},
- {at: 1.5, expect: '2.5s'},
- ]);
-}
-
-testprop('pop-up-show-delay');
-testprop('pop-up-hide-delay');
-</script>
diff --git a/html/semantics/popups/popup-hover-hide.tentative.html b/html/semantics/popups/popup-hover-hide.tentative.html
deleted file mode 100644
index 16acd68..0000000
--- a/html/semantics/popups/popup-hover-hide.tentative.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<title>The pop-up-hide-delay CSS property</title>
-<link rel="author" href="mailto:masonf@chromium.org">
-<link rel=help href="https://open-ui.org/components/popup.research.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/popup-utils.js"></script>
-
-<style>
- [popup] {
- top:100px;
- pop-up-hide-delay: 100ms;
- }
- [popuphovertarget] {
- top:200px;
- pop-up-show-delay: 100ms;
- }
- #unrelated {top: 300px;}
- div {
- /* Fixed position everything to ensure nothing overlaps */
- position: fixed;
- }
-</style>
-<div id=unrelated>Unrelated element</div>
-
-<div popup id=example1>Pop-up</div>
-<div popuphovertarget=example1 id=invoker1>Hover me</div>
-
-<script>
-const hoverDelays = 100; // This needs to match the style block above.
-const hoverWaitTime = 200; // How long to wait to cover the delay for sure.
-
-// NOTE about testing methodology:
-// This test checks whether pop-ups are hidden *after* the appropriate de-hover
-// delay. The delay used for testing is kept low, to avoid this test taking too
-// long, but that means that sometimes on a slow bot/client, the delay can
-// elapse before we are able to check the pop-up status. And that can make this
-// test flaky. To avoid that, the msSinceMouseOver() function is used to check
-// that not-too-much time has passed, and if it has, the test is simply skipped.
-
-const unrelated = document.getElementById('unrelated');
-
-function getComputedStyleTimeMs(element,property) {
- // Times are in seconds, so just strip off the 's'.
- return Number(getComputedStyle(element)[property].slice(0,-1))*1000;
-}
-
-promise_test(async (t) => {
- await mouseOver(unrelated);
- const popUp = document.getElementById('example1');
- assert_false(popUp.matches(':top-layer'));
- popUp.showPopUp();
- assert_true(popUp.matches(':top-layer'));
- await waitForHoverTime(hoverWaitTime);
- assert_false(popUp.matches(':top-layer'));
- assert_true(msSinceMouseOver() >= hoverWaitTime,'waitForHoverTime should wait the specified time');
- assert_true(hoverWaitTime > hoverDelays,'hoverDelays is the value from CSS, hoverWaitTime should be longer than that');
- assert_equals(getComputedStyleTimeMs(invoker1,'popUpShowDelay'),hoverDelays,'pop-up-show-delay is incorrect');
- assert_equals(getComputedStyleTimeMs(popUp,'popUpHideDelay'),hoverDelays,'pop-up-hide-delay is incorrect');
-},`The pop-up-hide-delay causes a pop-up to be hidden after a delay`);
-
-promise_test(async (t) => {
- await mouseOver(unrelated);
- const popUp = document.getElementById('example1');
- assert_false(popUp.matches(':top-layer'));
- popUp.showPopUp();
- await mouseOver(popUp);
- await waitForHoverTime(hoverWaitTime);
- assert_true(popUp.matches(':top-layer'),'hovering the pop-up should keep it showing');
- await mouseOver(unrelated);
- let showing = popUp.matches(':top-layer');
- if (msSinceMouseOver() >= hoverDelays)
- return; // The WPT runner was too slow.
- assert_true(showing,'hovering unrelated element shouldn\'t immediately hide the pop-up');
- await waitForHoverTime(hoverWaitTime);
- assert_false(popUp.matches(':top-layer'),'hovering unrelated element should hide pop-up after delay');
-},`hovering the pop-up keeps it from being hidden`);
-
-promise_test(async (t) => {
- await mouseOver(unrelated);
- const popUp = document.getElementById('example1');
- const invoker = document.getElementById('invoker1');
- assert_false(popUp.matches(':top-layer'));
- await mouseOver(invoker);
- await waitForHoverTime(hoverWaitTime);
- assert_true(popUp.matches(':top-layer'));
- await waitForHoverTime(hoverWaitTime);
- assert_true(popUp.matches(':top-layer'),'While still hovering the invoker, pop-up should not be hidden');
- await mouseOver(popUp);
- await waitForHoverTime(hoverWaitTime);
- await mouseOver(invoker);
- await waitForHoverTime(hoverWaitTime);
- assert_true(popUp.matches(':top-layer'),'Moving hover between invoker and pop-up should keep pop-up from being hidden');
- await mouseOver(unrelated);
- await waitForHoverTime(hoverWaitTime);
- assert_false(popUp.matches(':top-layer'),'Moving hover to unrelated should finally hide the pop-up');
-},`hovering a popuphovertarget invoking element keeps the pop-up from being hidden`);
-</script>
-
-<div popup id=example2>Pop-up</div>
-<button popuptoggletarget=example2><span><span data-note=nested_element id=invoker2>Click me</span></span></button>
-
-<script>
-promise_test(async (t) => {
- await mouseOver(unrelated);
- const popUp = document.getElementById('example2');
- const invoker = document.getElementById('invoker2');
- assert_equals(getComputedStyleTimeMs(popUp,'popUpHideDelay'),hoverDelays,'pop-up-hide-delay is incorrect');
- assert_false(popUp.matches(':top-layer'));
- await mouseOver(invoker);
- popUp.showPopUp();
- await waitForHoverTime(hoverWaitTime);
- assert_true(popUp.matches(':top-layer'),'While hovering an invoker element, pop-up should not be hidden');
- await mouseOver(popUp);
- await waitForHoverTime(hoverWaitTime);
- await mouseOver(invoker);
- await waitForHoverTime(hoverWaitTime);
- assert_true(popUp.matches(':top-layer'),'Moving hover between invoker and pop-up should keep pop-up from being hidden');
- await mouseOver(unrelated);
- await waitForHoverTime(hoverWaitTime);
- assert_false(popUp.matches(':top-layer'),'Moving hover to unrelated should finally hide the pop-up');
-},`hovering a popuptoggletarget invoking element keeps the pop-up from being hidden`);
-</script>
diff --git a/html/semantics/popups/popup-popuphovertarget-attribute.tentative.html b/html/semantics/popups/popup-popuphovertarget-attribute.tentative.html
deleted file mode 100644
index e845b0d..0000000
--- a/html/semantics/popups/popup-popuphovertarget-attribute.tentative.html
+++ /dev/null
@@ -1,169 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<title>The popuphovertarget attribute</title>
-<link rel="author" href="mailto:masonf@chromium.org">
-<link rel=help href="https://open-ui.org/components/popup.research.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/popup-utils.js"></script>
-
-<body>
-<style>
-.unrelated {top:0;}
-.invoker {top:100px; width:fit-content; height:fit-content;}
-[popup] {top: 200px;}
-.offset-child {top:300px; left:300px;}
-</style>
-
-<script>
-const popUpShowDelay = 100; // The CSS delay setting.
-const hoverWaitTime = 200; // How long to wait to cover the delay for sure.
-let nextId = 0;
-async function makePopUpAndInvoker(test, popUpType, invokerType, delayMs) {
- delayMs = delayMs || popUpShowDelay;
- const popUp = Object.assign(document.createElement('div'),{popUp: popUpType, id: `pop-up-${nextId++}`});
- document.body.appendChild(popUp);
- popUp.textContent = 'Pop-up';
- let invoker = document.createElement('div');
- invoker.setAttribute('class','invoker');
- invoker.setAttribute('popuphovertarget',popUp.id);
- invoker.setAttribute('style',`pop-up-show-delay: ${delayMs}ms; pop-up-hide-delay: 1000s;`);
- document.body.appendChild(invoker);
- const actualHoverDelay = Number(getComputedStyle(invoker)['popUpShowDelay'].slice(0,-1))*1000;
- assert_equals(actualHoverDelay,delayMs,'pop-up-show-delay is incorrect');
- const originalInvoker = invoker;
- const reassignPopupFn = (p) => originalInvoker.setAttribute('popuphovertarget',p.id);
- switch (invokerType) {
- case 'plain':
- // Invoker is just a div.
- invoker.textContent = 'Invoker';
- break;
- case 'nested':
- // Invoker is just a div containing a div.
- const child1 = invoker.appendChild(document.createElement('div'));
- child1.textContent = 'Invoker';
- break;
- case 'nested-offset':
- // Invoker is a child of the element wearing the 'popuphovertarget' attribute,
- // and is not contained within the bounds of the popuphovertarget element.
- invoker.textContent = 'Invoker';
- // Reassign invoker to the child:
- invoker = invoker.appendChild(document.createElement('div'));
- invoker.textContent = 'Invoker child';
- invoker.setAttribute('class','offset-child');
- break;
- case 'none':
- // No invoker.
- invoker.remove();
- break;
- default:
- assert_unreached(`Invalid invokerType ${invokerType}`);
- }
- const unrelated = document.createElement('div');
- document.body.appendChild(unrelated);
- unrelated.textContent = 'Unrelated';
- unrelated.setAttribute('class','unrelated');
- test.add_cleanup(async () => {
- popUp.remove();
- invoker.remove();
- originalInvoker.remove();
- unrelated.remove();
- await waitForRender();
- });
- await mouseOver(unrelated); // Start by mousing over the unrelated element
- await waitForRender();
- return {popUp,invoker,reassignPopupFn};
-}
-
-// NOTE about testing methodology:
-// This test checks whether pop-ups are triggered *after* the appropriate hover
-// delay. The delay used for testing is kept low, to avoid this test taking too
-// long, but that means that sometimes on a slow bot/client, the hover delay can
-// elapse before we are able to check the pop-up status. And that can make this
-// test flaky. To avoid that, the msSinceMouseOver() function is used to check
-// that not-too-much time has passed, and if it has, the test is simply skipped.
-
-["auto","hint","manual"].forEach(type => {
- ["plain","nested","nested-offset"].forEach(invokerType => {
- promise_test(async (t) => {
- const {popUp,invoker} = await makePopUpAndInvoker(t,type,invokerType);
- assert_false(popUp.matches(':top-layer'));
- await mouseOver(invoker);
- let showing = popUp.matches(':top-layer');
- // See NOTE above.
- if (msSinceMouseOver() < popUpShowDelay)
- assert_false(showing,'pop-up should not show immediately');
- await waitForHoverTime(hoverWaitTime);
- assert_true(msSinceMouseOver() >= hoverWaitTime,'waitForHoverTime should wait the specified time');
- assert_true(popUp.matches(':top-layer'),'pop-up should show after delay');
- assert_true(hoverWaitTime > popUpShowDelay,'popUpShowDelay is the CSS setting, hoverWaitTime should be longer than that');
- popUp.hidePopUp(); // Cleanup
- },`popuphovertarget attribute shows a pop-up with popup=${type}, invokerType=${invokerType}`);
-
- promise_test(async (t) => {
- const longerHoverDelay = hoverWaitTime*2;
- const {popUp,invoker} = await makePopUpAndInvoker(t,type,invokerType,longerHoverDelay);
- await mouseOver(invoker);
- let showing = popUp.matches(':top-layer');
- // See NOTE above.
- if (msSinceMouseOver() >= longerHoverDelay)
- return; // The WPT runner was too slow.
- assert_false(showing,'pop-up should not show immediately');
- await waitForHoverTime(hoverWaitTime);
- showing = popUp.matches(':top-layer');
- if (msSinceMouseOver() >= longerHoverDelay)
- return; // The WPT runner was too slow.
- assert_false(showing,'pop-up should not show after not long enough of a delay');
- },`hoverpopup pop-up-show-delay is respected (popup=${type}, invokerType=${invokerType})`);
-
- promise_test(async (t) => {
- const {popUp,invoker} = await makePopUpAndInvoker(t,type,invokerType);
- popUp.showPopUp();
- assert_true(popUp.matches(':top-layer'));
- await mouseOver(invoker);
- assert_true(popUp.matches(':top-layer'),'pop-up should stay showing on mouseover');
- await waitForHoverTime(hoverWaitTime);
- assert_true(popUp.matches(':top-layer'),'pop-up should stay showing after delay');
- popUp.hidePopUp(); // Cleanup
- },`popuphovertarget attribute does nothing when pop-up is already showing (popup=${type}, invokerType=${invokerType})`);
-
- promise_test(async (t) => {
- const {popUp,invoker} = await makePopUpAndInvoker(t,type,invokerType);
- await mouseOver(invoker);
- let showing = popUp.matches(':top-layer');
- popUp.remove();
- // See NOTE above.
- if (msSinceMouseOver() >= popUpShowDelay)
- return; // The WPT runner was too slow.
- assert_false(showing,'pop-up should not show immediately');
- await waitForHoverTime(hoverWaitTime);
- assert_false(popUp.matches(':top-layer'),'pop-up should not show even after a delay');
- // Now put it back in the document and make sure it doesn't trigger.
- document.body.appendChild(popUp);
- await waitForHoverTime(hoverWaitTime);
- assert_false(popUp.matches(':top-layer'),'pop-up should not show even when returned to the document');
- },`popuphovertarget attribute does nothing when pop-up is moved out of the document (popup=${type}, invokerType=${invokerType})`);
-
- promise_test(async (t) => {
- const {popUp,invoker,reassignPopupFn} = await makePopUpAndInvoker(t,type,invokerType);
- const popUp2 = Object.assign(document.createElement('div'),{popUp: type, id: 'foobar'});
- document.body.appendChild(popUp2);
- t.add_cleanup(() => popUp2.remove());
- await mouseOver(invoker);
- let eitherShowing = popUp.matches(':top-layer') || popUp2.matches(':top-layer');
- reassignPopupFn(popUp2);
- // See NOTE above.
- if (msSinceMouseOver() >= popUpShowDelay)
- return; // The WPT runner was too slow.
- assert_false(eitherShowing,'pop-up should not show immediately');
- await waitForHoverTime(hoverWaitTime);
- assert_false(popUp.matches(':top-layer'),'pop-up #1 should not show since popuphovertarget was reassigned');
- assert_false(popUp2.matches(':top-layer'),'pop-up #2 should not show since popuphovertarget was reassigned');
- },`popuphovertarget attribute does nothing when target changes (popup=${type}, invokerType=${invokerType})`);
- });
-});
-</script>
