<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" href="mailto:[email protected]">
<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>
Codebase Browser
chromium