diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.tentative.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.tentative.html')
| -rw-r--r-- | testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.tentative.html | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.tentative.html new file mode 100644 index 0000000000..72bbe1e893 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.tentative.html @@ -0,0 +1,168 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel=help href="https://open-ui.org/components/popup.research.explainer"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<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) + 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); + 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> + <my-element> + <template shadowroot=open> + <div popover> + <p>This should show, even though it is inside shadow DOM.</p> + </div> + </template> + </my-element> +</div> + +<script> + test(function() { + const popover = getPopoverReferences('test1')[0]; + popover.showPopover(); + assert_true(popover.matches(':open')); + assert_true(isElementVisible(popover)); + popover.hidePopover(); // Cleanup + }, "Popovers located inside shadow DOM can still be shown"); +</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 shadowroot=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(':open')); + assert_true(isElementVisible(popover1)); + popover2.showPopover(); + assert_false(popover1.matches(':open'), 'popover1 open'); // P1 was closed by P2 + assert_false(isElementVisible(popover1), 'popover1 visible'); + assert_true(popover2.matches(':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 shadowroot=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(':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(':open')); + assert_true(isElementVisible(popover2)); + assert_true(popover1.matches(':open')); + assert_true(isElementVisible(popover1)); + popover1.hidePopover(); + await waitForRender(); + assert_false(popover1.matches(':open')); + assert_false(isElementVisible(popover1)); + assert_false(popover2.matches(':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> + <p>This should not get hidden when popover2 opens.</p> + <my-element> + <template shadowroot=open> + <button id=t4b2 onclick='showTestPopover("test4",1)'>Test 4 Popover 2</button> + <div popover anchor=t4b2> + <p>This should not hide popover1.</p> + </div> + </template> + </my-element> + </div> +</div> + +<script> + promise_test(async function() { + const [popover1,popover2] = getPopoverReferences('test4'); + popover1.showPopover(); + popover2.showPopover(); + // Both 1 and 2 should be open at this point. + assert_true(popover1.matches(':open'), 'popover1 not open'); + assert_true(isElementVisible(popover1)); + assert_true(popover2.matches(':open'), 'popover2 not open'); + assert_true(isElementVisible(popover2)); + // This should hide both of them. + popover1.hidePopover(); + await waitForRender(); + assert_false(popover1.matches(':open')); + assert_false(isElementVisible(popover1)); + assert_false(popover2.matches(':open')); + assert_false(isElementVisible(popover2)); + }, "The popover stack is preserved across shadow-inclusive ancestors"); +</script> |