Bug 1823424 [wpt PR 39083] - Close popover stack when popovertarget attribute changes, a=testonly

Automatic update from web-platform-tests
Close popover stack when popovertarget attribute changes

If the popovertarget attribute is changed on an element in a way which
breaks the connection keeping multiple popovers open, then this patch
will close all open popovers. This was pointed out here:
whatwg/html#9048 (comment)

Bug: 1307772, 1408546
Change-Id: I0a42260e97b7ef3fde01f416ef090b50994b8c5d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4354171
Commit-Queue: Joey Arhar <[email protected]>
Reviewed-by: Mason Freed <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1120013}

--

wpt-commits: 699803ffbe61479119ee4dd8622635b6b0ef715e
wpt-pr: 39083

Author: josepharhar

testing/web-platform/tests/html/semantics/popovers/popover-target-element-disabled.html

@@ -124,3 +124,53 @@
     'The outer popover be should be closed when the hierarchy is broken.');
 }, 'Disconnecting popover*target buttons when popovers are open should close all popovers.');
 </script>
+
+<div id=outerpopover7 popover=auto>
+  <button id=togglebutton7 popovertarget=innerpopover7>toggle popover</button>
+</div>
+<div id=innerpopover7 popover=auto>popover</div>
+<script>
+test(() => {
+  outerpopover7.showPopover();
+  innerpopover7.showPopover();
+  assert_true(innerpopover7.matches(':open'),
+    'The inner popover should be able to open successfully.');
+  assert_true(outerpopover7.matches(':open'),
+    'The outer popover should stay open when opening the inner one.');
+
+  togglebutton7.setAttribute('popovertarget', 'otherpopover7');
+  assert_false(innerpopover7.matches(':open'),
+    'The inner popover be should be closed when the hierarchy is broken.');
+  assert_false(outerpopover7.matches(':open'),
+    'The outer popover be should be closed when the hierarchy is broken.');
+}, 'Changing the popovertarget attribute to break the chain should close all popovers.');
+</script>
+
+<div id=outerpopover8 popover=auto>
+  <div id=middlepopover8 popover=auto>
+    <div id=innerpopover8 popover=auto>hello</div>
+  </div>
+</div>
+<div id=otherpopover8 popover=auto>other popover</div>
+<button id=togglebutton8 popovertarget=middlepopover8>other button</div>
+<script>
+test(() => {
+  outerpopover8.showPopover();
+  middlepopover8.showPopover();
+  innerpopover8.showPopover();
+  assert_true(innerpopover8.matches(':open'),
+    'The inner popover should be able to open successfully.');
+  assert_true(middlepopover8.matches(':open'),
+    'The middle popover should stay open when opening the inner one.');
+  assert_true(outerpopover8.matches(':open'),
+    'The outer popover should stay open when opening the inner one.');
+
+  togglebutton8.setAttribute('popovertarget', 'otherpopover8');
+  assert_true(innerpopover8.matches(':open'),
+    'The inner popover should remain open.');
+  assert_true(middlepopover8.matches(':open'),
+    'The middle popover should remain open.');
+  assert_true(outerpopover8.matches(':open'),
+    'The outer popover should remain open.');
+}, `Modifying popovertarget on a button which doesn't break the chain shouldn't close any popovers.`);
+</script>