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 <masonf@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1367631}
web-platform-tests · Oct 11, 2024 · 39246a8 · 39246a8
1 parent b330bd7
commit 39246a8
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 0 deletions.
diff --git a/css/css-anchor-position/popover-implicit-anchor.tentative.html b/css/css-anchor-position/popover-implicit-anchor.tentative.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Popover invokers form an implicit anchor reference</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-anchor-position-1/#implicit">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/html/semantics/popovers/resources/popover-utils.js"></script>
+
+<button id=button popovertarget=popover>Button</button>
+<div popover id=popover>Popover</div>
+
+<style>
+#button {
+  position:relative;
+  top:100px;
+  left:100px;
+}
+#popover {
+  border:1px solid black;
+  inset: auto;
+  margin:0;
+  padding:0;
+  position-area: top left;
+}
+body { margin: 0; }
+</style>
+
+<script>
+promise_test(async (t) => {
+  assert_false(popover.matches(':popover-open'));
+  await clickOn(button);
+  assert_true(popover.matches(':popover-open'));
+  // Popover should be anchored to the button.
+  assert_equals(popover.offsetLeft + popover.offsetWidth, 100);
+  assert_equals(popover.offsetTop + popover.offsetHeight, 100);
+}, 'Popover invokers form an implicit anchor reference');
+</script>
diff --git a/...ntics/forms/the-select-element/customizable-select/select-inside-top-layer.tentative.html b/...ntics/forms/the-select-element/customizable-select/select-inside-top-layer.tentative.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>appearance:base select nested inside top layer elements</title>
+<link rel=author href="mailto:masonf@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="../../../popovers/resources/popover-utils.js"></script>
+
+<div id=popover1 popover>popover1
+  <select id=select1>
+    <option>option</option>
+    <option>option
+      <div popover id=popover2>popover2</div>
+    </option>
+  </select>
+</div>
+
+<dialog id=dialog1>dialog1
+  <select id=select2>
+    <option>option</option>
+    <option>option
+      <dialog id=dialog2>dialog2</dialog>
+    </option>
+  </select>
+</dialog>
+
+<style>
+  select, ::picker(select) {
+    appearance: base-select;
+  }
+</style>
+
+<script>
+promise_test(async (t) => {
+  const popover = document.querySelector('#popover1');
+  const select = document.querySelector('#select1');
+  assert_true(!!popover && !!select,'precondition');
+  t.add_cleanup(() => popover.hidePopover());
+
+  popover.showPopover();
+  assert_true(popover.matches(':popover-open'));
+  await clickOn(select);
+  assert_true(select.matches(':open'),'the select should be showing');
+  assert_true(popover.matches(':popover-open'),'and the popover should also still be showing');
+},'select can be nested inside a popover');
+
+promise_test(async (t) => {
+  const popover1 = document.querySelector('#popover1');
+  const popover2 = document.querySelector('#popover2');
+  const select = document.querySelector('#select1');
+  assert_true(!!popover1 && !!popover2 && !!select,'precondition');
+  t.add_cleanup(() => popover1.hidePopover());
+
+  popover1.showPopover();
+  await clickOn(select);
+  popover2.showPopover();
+  assert_true(select.matches(':open'),'the select should be showing');
+  assert_true(popover1.matches(':popover-open'),'and the outer popover should also still be showing');
+  assert_true(popover2.matches(':popover-open'),'and the inner popover should also still be showing');
+},'a popover can be nested inside select');
+
+promise_test(async (t) => {
+  const dialog = document.querySelector('#dialog1');
+  const select = document.querySelector('#select2');
+  assert_true(!!dialog && !!select,'precondition');
+  t.add_cleanup(() => dialog.close());
+
+  dialog.showModal();
+  assert_true(dialog.matches('[open]:modal'));
+  await clickOn(select);
+  assert_true(select.matches(':open'),'the select should be showing');
+  assert_true(dialog.matches('[open]:modal'),'and the dialog should also still be showing');
+},'select can be nested inside a modal dialog');
+
+promise_test(async (t) => {
+  const dialog1 = document.querySelector('#dialog1');
+  const dialog2 = document.querySelector('#dialog2');
+  const select = document.querySelector('#select2');
+  assert_true(!!dialog1 && dialog2 && !!select,'precondition');
+  t.add_cleanup(() => {dialog1.close();dialog2.close()});
+
+  dialog1.showModal();
+  await clickOn(select);
+  dialog2.showModal();
+  assert_true(select.matches(':open'),'the select should be showing');
+  assert_true(dialog1.matches('[open]:modal'),'and the outer dialog should also still be showing');
+  assert_true(dialog2.matches('[open]:modal'),'and the inner dialog should also still be showing');
+},'a modal dialog can be nested inside select');
+</script>