Skip to content

Commit

Permalink
Split out popover tests using anchor into tentative test
Browse files Browse the repository at this point in the history 
This was noted here:

web-platform-tests/interop#423 (comment)

Bug: 40059176
Change-Id: I58f3674d2901b8ca7df4c5d5ba8ed99c0b62a4de
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5310497
Commit-Queue: Di Zhang <dizhangg@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Reviewed-by: Di Zhang <dizhangg@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1262923}
  • Loading branch information
@mfreed7 @marcoscaceres
mfreed7 authored and marcoscaceres committed Feb 23, 2024
1 parent f90dd94 commit 653d315
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 89 deletions.
99 changes: 99 additions & 0 deletions html/semantics/popovers/popover-shadow-dom-anchor.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -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>
94 changes: 5 additions & 89 deletions html/semantics/popovers/popover-shadow-dom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 653d315

Please sign in to comment.