From fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 03:14:29 +0200
Subject: Merging upstream version 125.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../popover-shadow-dom-anchor.tentative.html       | 99 ++++++++++++++++++++++
 .../semantics/popovers/popover-shadow-dom.html     | 94 ++------------------
 .../popovers/popovertarget-reflection.html         |  8 +-
 .../semantics/popovers/resources/popover-utils.js  |  8 +-
 4 files changed, 114 insertions(+), 95 deletions(-)
 create mode 100644 testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom-anchor.tentative.html

(limited to 'testing/web-platform/tests/html/semantics/popovers')
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom-anchor.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom-anchor.tentative.html
new file mode 100644
index 0000000000..7c87d2d039
--- /dev/null
+++ b/testing/web-platform/tests/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=test1>
+  <button id=t2b1>Test 1 Popover 1</button>
+  <div popover anchor=t2b1 style="top: 200px;">
+    <p>Popover 1</p>
+    <button id=t2b2>Test 1 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('test1');
+    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=test2>
+  <my-element>
+    <template shadowrootmode=open>
+      <button id=t3b1>Test 2 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 2 Popover 2</button>
+  </my-element>
+  <div popover anchor=t3b2>Popover 2</div>
+</div>
+
+<script>
+  promise_test(async function() {
+    const [popover1,popover2] = getPopoverReferences('test2');
+    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/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.html b/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.html
index 62aa135b56..18ac500270 100644
--- a/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.html
+++ b/testing/web-platform/tests/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>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popovertarget-reflection.html b/testing/web-platform/tests/html/semantics/popovers/popovertarget-reflection.html
index d0750fdd4c..b4f99631ab 100644
--- a/testing/web-platform/tests/html/semantics/popovers/popovertarget-reflection.html
+++ b/testing/web-platform/tests/html/semantics/popovers/popovertarget-reflection.html
@@ -11,7 +11,7 @@
 
 <script>
 test(() => {
-   assert_equals(mybutton.popoverTargetElement.id, "mypopover",
+  assert_equals(mybutton.popoverTargetElement.id, "mypopover",
     'Setting element.popoverTargetElement to a valid element should work');
 
   mybutton.popoverTargetElement = null;
@@ -33,13 +33,13 @@ test(() => {
     'Assigning to element.popoverTargetElement should set the popovertarget attribute.');
 
   mybutton.setAttribute("popovertarget", 'invalid');
-    assert_equals(mybutton.popoverTargetElement, null,
+  assert_equals(mybutton.popoverTargetElement, null,
     'Setting the popovertarget attribute to a localName that is not attr should remove the existing element from element.popoverTargetElement.');
 
   mybutton.popoverTargetElement = mypopover;
   mybutton.setAttribute("popovertarget", "");
-  assert_equals(mybutton.popoverTargetElement.id, "mypopover",
-    'Setting the popovertarget attribute to empty string right after explicitly setting attribute element should have no effect.');
+  assert_equals(mybutton.popoverTargetElement, null,
+    'Setting the popovertarget attribute to empty string right after setting explicit element does remove the explicit element.');
 
   mybutton.setAttribute("popovertarget", "mypopover");
   assert_equals(mybutton.popoverTargetElement.id, "mypopover",
diff --git a/testing/web-platform/tests/html/semantics/popovers/resources/popover-utils.js b/testing/web-platform/tests/html/semantics/popovers/resources/popover-utils.js
index bfc1f89ec1..96ac7e03f0 100644
--- a/testing/web-platform/tests/html/semantics/popovers/resources/popover-utils.js
+++ b/testing/web-platform/tests/html/semantics/popovers/resources/popover-utils.js
@@ -7,9 +7,13 @@ function waitForTick() {
 }
 
 async function clickOn(element) {
-  const actions = new test_driver.Actions();
   await waitForRender();
-  await actions.pointerMove(0, 0, {origin: element})
+  let rect = element.getBoundingClientRect();
+  let actions = new test_driver.Actions();
+  // FIXME: Switch to pointerMove(0, 0, {origin: element}) once
+  // https://github.com/web-platform-tests/wpt/issues/41257 is fixed.
+  await actions
+      .pointerMove(Math.round(rect.x + rect.width / 2), Math.round(rect.y + rect.height / 2), {})
       .pointerDown({button: actions.ButtonType.LEFT})
       .pointerUp({button: actions.ButtonType.LEFT})
       .send();
-- 
cgit v1.2.3

