From e68827934d9d1d85bc87917ea3da14ca77801aa0 Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Tue, 20 Feb 2024 09:25:30 -0800
Subject: [PATCH] Split out popover tests using `anchor` into tentative test

This was noted here:

https://github.com/web-platform-tests/interop/issues/423#issuecomment-1951471302

Bug: 40059176
Change-Id: I58f3674d2901b8ca7df4c5d5ba8ed99c0b62a4de
---
 .../popover-shadow-dom-anchor.tentative.html  | 99 +++++++++++++++++++
 .../popovers/popover-shadow-dom.html          | 94 +-----------------
 2 files changed, 104 insertions(+), 89 deletions(-)
 create mode 100644 html/semantics/popovers/popover-shadow-dom-anchor.tentative.html
diff --git a/html/semantics/popovers/popover-shadow-dom-anchor.tentative.html b/html/semantics/popovers/popover-shadow-dom-anchor.tentative.html
new file mode 100644
index 000000000000000..7d4994b35f85237
--- /dev/null
+++ b/html/semantics/popovers/popover-shadow-dom-anchor.tentative.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel=help href="https://open-ui.org/components/popover.research.explainer">
+<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/popover-utils.js"></script>
+
+<!-- Once anchor positioning lands in the spec, the tests in this file can
+     be re-inserted into popover-shadow-dom.html. -->
+
+<script>
+  function findPopovers(root) {
+    let popovers = [];
+    if (!root)
+      return popovers;
+    if (root instanceof Element && root.matches('[popover]'))
+      popovers.push(root);
+    popovers.push(...findPopovers(root.shadowRoot));
+    root.childNodes.forEach(child => {
+      popovers.push(...findPopovers(child));
+    })
+    return popovers;
+  }
+  function getPopoverReferences(testId) {
+    const testRoot = document.querySelector(`#${testId}`);
+    assert_true(!!testRoot);
+    return findPopovers(testRoot);
+  }
+</script>
+
+<div id=test2>
+  <button id=t2b1>Test 2 Popover 1</button>
+  <div popover anchor=t2b1 style="top: 200px;">
+    <p>Popover 1</p>
+    <button id=t2b2>Test 2 Popover 2</button>
+  </div>
+  <my-element>
+    <template shadowrootmode=open>
+      <div popover anchor=t2b2 style="top: 400px;">
+        <p>Hiding this popover will hide *all* open popovers,</p>
+        <p>because t2b2 doesn't exist in this context.</p>
+      </div>
+    </template>
+  </my-element>
+</div>
+
+<script>
+  test(function() {
+    const [popover1,popover2] = getPopoverReferences('test2');
+    popover1.showPopover();
+    assert_true(popover1.matches(':popover-open'));
+    assert_true(isElementVisible(popover1));
+    popover2.showPopover();
+    assert_false(popover1.matches(':popover-open'), 'popover1 open'); // P1 was closed by P2
+    assert_false(isElementVisible(popover1), 'popover1 visible');
+    assert_true(popover2.matches(':popover-open'), 'popover2 open'); // P2 is open
+    assert_true(isElementVisible(popover2), 'popover2 visible');
+    popover2.hidePopover(); // Cleanup
+  }, "anchor references do not cross shadow boundaries");
+</script>
+
+
+<div id=test3>
+  <my-element>
+    <template shadowrootmode=open>
+      <button id=t3b1>Test 3 Popover 1</button>
+      <div popover anchor=t3b1>
+        <p>This popover will stay open when popover2 shows.</p>
+        <slot></slot>
+      </div>
+    </template>
+    <button id=t3b2>Test 3 Popover 2</button>
+  </my-element>
+  <div popover anchor=t3b2>Popover 2</div>
+</div>
+
+<script>
+  promise_test(async function() {
+    const [popover1,popover2] = getPopoverReferences('test3');
+    popover1.showPopover();
+    assert_true(popover1.matches(':popover-open'));
+    assert_true(isElementVisible(popover1));
+    // Showing popover2 should not close popover1, since it is a flat
+    // tree ancestor of popover2's anchor button.
+    popover2.showPopover();
+    assert_true(popover2.matches(':popover-open'));
+    assert_true(isElementVisible(popover2));
+    assert_true(popover1.matches(':popover-open'));
+    assert_true(isElementVisible(popover1));
+    popover1.hidePopover();
+    await waitForRender();
+    assert_false(popover1.matches(':popover-open'));
+    assert_false(isElementVisible(popover1));
+    assert_false(popover2.matches(':popover-open'));
+    assert_false(isElementVisible(popover2));
+  }, "anchor references use the flat tree not the DOM tree");
+</script>
diff --git a/html/semantics/popovers/popover-shadow-dom.html b/html/semantics/popovers/popover-shadow-dom.html
index 62aa135b56217f2..18ac500270c8909 100644
--- a/html/semantics/popovers/popover-shadow-dom.html
+++ b/html/semantics/popovers/popover-shadow-dom.html
@@ -8,17 +8,6 @@
 <script src="resources/popover-utils.js"></script>
 
 <script>
-  function ensureShadowDom(host) {
-    host.querySelectorAll('my-element').forEach(host => {
-      if (host.shadowRoot)
-        return; // Declarative Shadow DOM is enabled
-      const template = host.firstElementChild;
-      assert_true(template instanceof HTMLTemplateElement);
-      const shadow = host.attachShadow({mode: 'open'});
-      shadow.appendChild(template.content);
-      template.remove();
-    })
-  }
   function findPopovers(root) {
     let popovers = [];
     if (!root)
@@ -34,16 +23,12 @@
   function getPopoverReferences(testId) {
     const testRoot = document.querySelector(`#${testId}`);
     assert_true(!!testRoot);
-    ensureShadowDom(testRoot);
     return findPopovers(testRoot);
   }
-  function showTestPopover(testId,popoverNum) {
-    getPopoverReferences(testId)[popoverNum].showPopover();
-  }
 </script>
 
 <div id=test1>
-  <button onclick='showTestPopover("test1",0)'>Test1 Popover</button>
+  <button>Test1 Popover</button>
   <my-element>
     <template shadowrootmode=open>
       <div popover>
@@ -64,83 +49,14 @@
 </script>
 
 
-<div id=test2>
-  <button id=t2b1 onclick='showTestPopover("test2",0)'>Test 2 Popover 1</button>
-  <div popover anchor=t2b1 style="top: 200px;">
-    <p>Popover 1</p>
-    <button id=t2b2 onclick='showTestPopover("test2",1)'>Test 2 Popover 2</button>
-  </div>
-  <my-element>
-    <template shadowrootmode=open>
-      <div popover anchor=t2b2 style="top: 400px;">
-        <p>Hiding this popover will hide *all* open popovers,</p>
-        <p>because t2b2 doesn't exist in this context.</p>
-      </div>
-    </template>
-  </my-element>
-</div>
-
-<script>
-  test(function() {
-    const [popover1,popover2] = getPopoverReferences('test2');
-    popover1.showPopover();
-    assert_true(popover1.matches(':popover-open'));
-    assert_true(isElementVisible(popover1));
-    popover2.showPopover();
-    assert_false(popover1.matches(':popover-open'), 'popover1 open'); // P1 was closed by P2
-    assert_false(isElementVisible(popover1), 'popover1 visible');
-    assert_true(popover2.matches(':popover-open'), 'popover2 open'); // P2 is open
-    assert_true(isElementVisible(popover2), 'popover2 visible');
-    popover2.hidePopover(); // Cleanup
-  }, "anchor references do not cross shadow boundaries");
-</script>
-
-
-<div id=test3>
-  <my-element>
-    <template shadowrootmode=open>
-      <button id=t3b1 onclick='showTestPopover("test3",0)'>Test 3 Popover 1</button>
-      <div popover anchor=t3b1>
-        <p>This popover will stay open when popover2 shows.</p>
-        <slot></slot>
-      </div>
-    </template>
-    <button id=t3b2 onclick='showTestPopover("test3",1)'>Test 3 Popover 2</button>
-  </my-element>
-  <div popover anchor=t3b2>Popover 2</div>
-</div>
-
-<script>
-  promise_test(async function() {
-    const [popover1,popover2] = getPopoverReferences('test3');
-    popover1.showPopover();
-    assert_true(popover1.matches(':popover-open'));
-    assert_true(isElementVisible(popover1));
-    // Showing popover2 should not close popover1, since it is a flat
-    // tree ancestor of popover2's anchor button.
-    popover2.showPopover();
-    assert_true(popover2.matches(':popover-open'));
-    assert_true(isElementVisible(popover2));
-    assert_true(popover1.matches(':popover-open'));
-    assert_true(isElementVisible(popover1));
-    popover1.hidePopover();
-    await waitForRender();
-    assert_false(popover1.matches(':popover-open'));
-    assert_false(isElementVisible(popover1));
-    assert_false(popover2.matches(':popover-open'));
-    assert_false(isElementVisible(popover2));
-  }, "anchor references use the flat tree not the DOM tree");
-</script>
-
-
 <div id=test4>
-  <button id=t4b1 onclick='showTestPopover("test4",0)'>Test 4 Popover 1</button>
-  <div popover anchor=t4b1>
+  <button>Test 4 Popover 1</button>
+  <div popover>
     <p>This should not get hidden when popover2 opens.</p>
     <my-element>
       <template shadowrootmode=open>
-        <button id=t4b2 onclick='showTestPopover("test4",1)'>Test 4 Popover 2</button>
-        <div popover anchor=t4b2>
+        <button id=t4b2>Test 4 Popover 2</button>
+        <div popover>
           <p>This should not hide popover1.</p>
         </div>
       </template>
