Skip to content

Commit 8d286b7

Browse files
mfreed7moz-wptsync-bot
mfreed7
authored and
moz-wptsync-bot
committed
Bug 1924174 [wpt PR 48580] - Add implicit anchor relationship for popover invokers, a=testonly
Automatic update from web-platform-tests Add implicit anchor relationship for popover invokers When PopoverAnchorRelationships is enabled, include popover invokers as "implicit anchor elements" for anchor positioning. This also adds a test of the behavior when nesting <select> within other top layer elements, and vice versa. Bug: 364669918 Change-Id: Ie1d362a41e3aec72d62dbfe378e65ea9a262c324 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5846489 Auto-Submit: Mason Freed <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1367631} -- wpt-commits: 39246a878f6b2e8cd4387896d05318f9e0e1e85a wpt-pr: 48580
1 parent 45e57b5 commit 8d286b7

File tree

2 files changed

+132
-0
lines changed

2 files changed

+132
-0
lines changed

‎testing/web-platform/tests/css/css-anchor-position/popover-implicit-anchor.tentative.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<title>Popover invokers form an implicit anchor reference</title>
3+
<link rel="author" href="mailto:[email protected]">
4+
<link rel="help" href="https://www.w3.org/TR/css-anchor-position-1/#implicit">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/resources/testdriver.js"></script>
8+
<script src="/resources/testdriver-actions.js"></script>
9+
<script src="/resources/testdriver-vendor.js"></script>
10+
<script src="/html/semantics/popovers/resources/popover-utils.js"></script>
11+
12+
<button id=button popovertarget=popover>Button</button>
13+
<div popover id=popover>Popover</div>
14+
15+
<style>
16+
#button {
17+
position:relative;
18+
top:100px;
19+
left:100px;
20+
}
21+
#popover {
22+
border:1px solid black;
23+
inset: auto;
24+
margin:0;
25+
padding:0;
26+
position-area: top left;
27+
}
28+
body { margin: 0; }
29+
</style>
30+
31+
<script>
32+
promise_test(async (t) => {
33+
assert_false(popover.matches(':popover-open'));
34+
await clickOn(button);
35+
assert_true(popover.matches(':popover-open'));
36+
// Popover should be anchored to the button.
37+
assert_equals(popover.offsetLeft + popover.offsetWidth, 100);
38+
assert_equals(popover.offsetTop + popover.offsetHeight, 100);
39+
}, 'Popover invokers form an implicit anchor reference');
40+
</script>

‎testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-inside-top-layer.tentative.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!doctype html>
2+
<meta charset=utf-8>
3+
<title>appearance:base select nested inside top layer elements</title>
4+
<link rel=author href="mailto:[email protected]">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/resources/testdriver.js"></script>
8+
<script src="/resources/testdriver-vendor.js"></script>
9+
<script src="/resources/testdriver-actions.js"></script>
10+
<script src="../../../popovers/resources/popover-utils.js"></script>
11+
12+
<div id=popover1 popover>popover1
13+
<select id=select1>
14+
<option>option</option>
15+
<option>option
16+
<div popover id=popover2>popover2</div>
17+
</option>
18+
</select>
19+
</div>
20+
21+
<dialog id=dialog1>dialog1
22+
<select id=select2>
23+
<option>option</option>
24+
<option>option
25+
<dialog id=dialog2>dialog2</dialog>
26+
</option>
27+
</select>
28+
</dialog>
29+
30+
<style>
31+
select, ::picker(select) {
32+
appearance: base-select;
33+
}
34+
</style>
35+
36+
<script>
37+
promise_test(async (t) => {
38+
const popover = document.querySelector('#popover1');
39+
const select = document.querySelector('#select1');
40+
assert_true(!!popover && !!select,'precondition');
41+
t.add_cleanup(() => popover.hidePopover());
42+
43+
popover.showPopover();
44+
assert_true(popover.matches(':popover-open'));
45+
await clickOn(select);
46+
assert_true(select.matches(':open'),'the select should be showing');
47+
assert_true(popover.matches(':popover-open'),'and the popover should also still be showing');
48+
},'select can be nested inside a popover');
49+
50+
promise_test(async (t) => {
51+
const popover1 = document.querySelector('#popover1');
52+
const popover2 = document.querySelector('#popover2');
53+
const select = document.querySelector('#select1');
54+
assert_true(!!popover1 && !!popover2 && !!select,'precondition');
55+
t.add_cleanup(() => popover1.hidePopover());
56+
57+
popover1.showPopover();
58+
await clickOn(select);
59+
popover2.showPopover();
60+
assert_true(select.matches(':open'),'the select should be showing');
61+
assert_true(popover1.matches(':popover-open'),'and the outer popover should also still be showing');
62+
assert_true(popover2.matches(':popover-open'),'and the inner popover should also still be showing');
63+
},'a popover can be nested inside select');
64+
65+
promise_test(async (t) => {
66+
const dialog = document.querySelector('#dialog1');
67+
const select = document.querySelector('#select2');
68+
assert_true(!!dialog && !!select,'precondition');
69+
t.add_cleanup(() => dialog.close());
70+
71+
dialog.showModal();
72+
assert_true(dialog.matches('[open]:modal'));
73+
await clickOn(select);
74+
assert_true(select.matches(':open'),'the select should be showing');
75+
assert_true(dialog.matches('[open]:modal'),'and the dialog should also still be showing');
76+
},'select can be nested inside a modal dialog');
77+
78+
promise_test(async (t) => {
79+
const dialog1 = document.querySelector('#dialog1');
80+
const dialog2 = document.querySelector('#dialog2');
81+
const select = document.querySelector('#select2');
82+
assert_true(!!dialog1 && dialog2 && !!select,'precondition');
83+
t.add_cleanup(() => {dialog1.close();dialog2.close()});
84+
85+
dialog1.showModal();
86+
await clickOn(select);
87+
dialog2.showModal();
88+
assert_true(select.matches(':open'),'the select should be showing');
89+
assert_true(dialog1.matches('[open]:modal'),'and the outer dialog should also still be showing');
90+
assert_true(dialog2.matches('[open]:modal'),'and the inner dialog should also still be showing');
91+
},'a modal dialog can be nested inside select');
92+
</script>

0 commit comments

Comments
 (0)