summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/popovers
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:14:29 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:14:29 +0000
commitfbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8 (patch)
tree4c1ccaf5486d4f2009f9a338a98a83e886e29c97 /testing/web-platform/tests/html/semantics/popovers
parentReleasing progress-linux version 124.0.1-1~progress7.99u1. (diff)
downloadfirefox-fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8.tar.xz
firefox-fbaf0bb26397aa498eb9156f06d5a6fe34dd7dd8.zip
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/semantics/popovers')
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom-anchor.tentative.html99
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.html94
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popovertarget-reflection.html8
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/resources/popover-utils.js8
4 files changed, 114 insertions, 95 deletions
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();
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-08 23:02:06 +0000