From f380e8cf5973dd8c6680466504f3477f64a7edc9 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Fri, 13 Jan 2023 15:36:59 -0800
Subject: [PATCH] Move disabled check for popover*target attributes

Anne asked for this here:
https://github.com/whatwg/html/pull/8221#discussion_r1049379113

Change-Id: I129cf2768abc717292b86ea26f7522019ce36d33
---
 .../popover-target-element-disabled.html      | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 html/semantics/popovers/popover-target-element-disabled.html
diff --git a/html/semantics/popovers/popover-target-element-disabled.html b/html/semantics/popovers/popover-target-element-disabled.html
new file mode 100644
index 000000000000000..c0cc7b5dcd7eb39
--- /dev/null
+++ b/html/semantics/popovers/popover-target-element-disabled.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/pull/8221#discussion_r1049379113">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id=outerpopover popover=auto>
+  <button popovertoggletarget=innerpopover disabled>toggle popover</button>
+</div>
+<div id=innerpopover popover=auto>popover</div>
+<script>
+test(() => {
+  outerpopover.showPopover();
+  innerpopover.showPopover();
+  assert_true(innerpopover.matches(':open'),
+    'The inner popover should be able to open successfully.');
+  assert_false(outerpopover.matches(':open'),
+    'The outer popover should be closed by opening the inner one.');
+}, 'Disabled popover*target buttons should not affect the popover heirarchy.');
+</script>
+
+<div id=outerpopover2 popover=auto>
+  <button id=togglebutton2 popovertoggletarget=innerpopover2>toggle popover</button>
+</div>
+<div id=innerpopover2 popover=auto>popover</div>
+<script>
+test(() => {
+  outerpopover2.showPopover();
+  innerpopover2.showPopover();
+  assert_true(innerpopover2.matches(':open'),
+    'The inner popover should be able to open successfully.');
+  assert_true(outerpopover2.matches(':open'),
+    'The outer popover should stay open when opening the inner one.');
+
+  togglebutton2.disabled = true;
+  assert_false(innerpopover2.matches(':open'),
+    'The inner popover should be closed when the hierarchy is broken.');
+  assert_false(outerpopover2.matches(':open'),
+    'The outer popover should be closed when the hierarchy is broken.');
+}, 'Disabling popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly outer popover is closed.');
+</script>
+
+<div id=outerpopover3 popover=auto>
+  <button id=togglebutton3 popovertoggletarget=innerpopover3>toggle popover</button>
+</div>
+<div id=innerpopover3 popover=auto>popover</div>
+<script>
+test(() => {
+  outerpopover3.showPopover();
+  innerpopover3.showPopover();
+  assert_true(innerpopover3.matches(':open'),
+    'The inner popover should be able to open successfully.');
+  assert_true(outerpopover3.matches(':open'),
+    'The outer popover should stay open when opening the inner one.');
+
+  togglebutton3.disabled = true;
+  assert_false(innerpopover3.matches(':open'),
+    'The inner popover be should be closed when the hierarchy is broken.');
+  assert_false(outerpopover3.matches(':open'),
+    'The outer popover be should be closed when the hierarchy is broken.');
+}, 'Disabling popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly inner popover is closed.');
+</script>
+
+<div id=outerpopover4 popover=auto>
+  <button id=togglebutton4 popovertoggletarget=innerpopover4>toggle popover</button>
+</div>
+<div id=innerpopover4 popover=auto>popover</div>
+<form id=submitform>form</form>
+<script>
+test(() => {
+  outerpopover4.showPopover();
+  innerpopover4.showPopover();
+  assert_true(innerpopover4.matches(':open'),
+    'The inner popover should be able to open successfully.');
+  assert_true(outerpopover4.matches(':open'),
+    'The outer popover should stay open when opening the inner one.');
+
+  console.log('setting form idl');
+  togglebutton4.setAttribute('form', 'submitform');
+  console.log('done setting form idl');
+  assert_false(innerpopover4.matches(':open'),
+    'The inner popover be should be closed when the hierarchy is broken.');
+  assert_false(outerpopover4.matches(':open'),
+    'The outer popover be should be closed when the hierarchy is broken.');
+}, 'Setting the form attribute on popover*target buttons when popovers are open should close all popovers.');
+</script>
