diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/popovers/popover-shadow-dom.html | 94 |
1 files changed, 5 insertions, 89 deletions
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> |