Remove "resize" as a <popup> light dismiss trigger
This ended up being a confusing part of the implementation of
<popup>: it was easy to accidentally resize the popup, causing
it to light dismiss. For example, adding a :hover style that
adds a border to the popup or an element might cause a light
dismiss. And the rationale for this being a trigger in the
first place was an implementation concern - avoiding
expensive relayout in the case that the popup is anchor-
positioned to something on the page.
Bug: 1168738
Change-Id: Ic5a3e616941ace8b47b4abc02dbf786aa78521c4
Fixed: 1252176
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3180152
Commit-Queue: Mason Freed <masonf@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Reviewed-by: Dan Clark <daniec@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#924911}
diff --git a/html/semantics/interactive-elements/the-popup-element/popup-light-dismiss-resize.tentative.html b/html/semantics/interactive-elements/the-popup-element/popup-light-dismiss-resize.tentative.html
deleted file mode 100644
index cec65f7..0000000
--- a/html/semantics/interactive-elements/the-popup-element/popup-light-dismiss-resize.tentative.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<title>Popup light dismiss behavior</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="/resources/testdriver.js"></script>
-<script src="/resources/testdriver-actions.js"></script>
-<script src="/resources/testdriver-vendor.js"></script>
-
-<button popup=popup>Popup 1</button>
-<popup id=popup><span>Inside popup 1</span></popup>
-
-<style>
- popup { border: 5px solid red; top: 50px; }
-</style>
-
-<script>
- const popup = document.querySelector('#popup');
-
- function waitForHide() {
- return new Promise(function(resolve) {
- popup.addEventListener('hide', () => resolve(), {'once': true});
- });
- }
-
- promise_test(async () => {
- return new Promise(async resolve => {
- popup.show();
- assert_true(popup.open,'popup should be open');
- popup.style.width = "250px";
- assert_true(popup.open,'popup should be hidden asynchronously');
- await waitForHide(); // Wait for the popup to be hidden
- assert_false(popup.open,'popup should close when resized');
- popup.style.width = ""; // Reset
- resolve();
- });
- },'Popup should be closed by an explicit resize of the popup');
-
- promise_test(async () => {
- return new Promise(async resolve => {
- popup.show();
- assert_true(popup.open,'popup should be open');
- const popupText = popup.querySelector('span');
- const originalText = popupText.textContent;
- popupText.textContent = "This is a test, which is longer than the original";
- assert_true(popup.open,'popup should be hidden asynchronously');
- await waitForHide(); // Wait for the popup to be hidden
- assert_false(popup.open,'popup should close when text content forces its size to change');
- popupText.textContent = originalText; // Reset
- resolve();
- });
- },'Popup should be closed by an implicit resize of the popup');
-</script>
