summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/popovers/popover-focus-2.tentative.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/semantics/popovers/popover-focus-2.tentative.html')
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-focus-2.tentative.html129
1 files changed, 129 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-focus-2.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-focus-2.tentative.html
new file mode 100644
index 0000000000..569b633886
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/popovers/popover-focus-2.tentative.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Popover focus behaviors</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel=help href="https://open-ui.org/components/popover.research.explainer">
+<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="resources/popover-utils.js"></script>
+
+<div id=fixup>
+ <button id=button1>Button1</button>
+ <div popover id=popover1 style="top:100px">
+ <button id=inside_popover1>Inside1</button>
+ <button id=invoker2 popovertoggletarget=popover2>Nested Invoker 2</button>
+ <button id=inside_popover2>Inside2</button>
+ </div>
+ <button id=button2>Button2</button>
+ <button popovertoggletarget=popover1 id=invoker1>Invoker1</button>
+ <button id=button3>Button3</button>
+ <div popover id=popover2 style="top:200px">
+ <button id=inside_popover3>Inside3</button>
+ <button id=invoker3 popovertoggletarget=popover3>Nested Invoker 3</button>
+ </div>
+ <div popover id=popover3 style="top:300px">
+ Non-focusable popover
+ </div>
+ <button id=button4>Button4</button>
+</div>
+<style>
+ #fixup [popover] {
+ bottom:auto;
+ }
+</style>
+<script>
+async function verifyFocusOrder(order) {
+ order[0].focus();
+ for(let i=0;i<order.length;++i) {
+ const control = order[i];
+ assert_equals(document.activeElement,control,`Step ${i+1}`);
+ await sendTab();
+ }
+ // Shift-tab not supported, crbug.com/893480.
+ // for(let i=order.length-1;i>=0;--i) {
+ // const control = order[i];
+ // await sendShiftTab();
+ // assert_equals(document.activeElement,control,`Step ${i+1} (backwards)`);
+ // }
+}
+promise_test(async t => {
+ button1.focus();
+ assert_equals(document.activeElement,button1);
+ await sendTab();
+ assert_equals(document.activeElement,button2,'Hidden popover should be skipped');
+ // Shift-tab not supported, crbug.com/893480.
+ // await sendShiftTab();
+ // assert_equals(document.activeElement,button1,'Hidden popover should be skipped backwards');
+ //await sendTab();
+ await sendTab();
+ assert_equals(document.activeElement,invoker1);
+ await sendEnter(); // Activate the invoker
+ assert_true(popover1.matches(':open'), 'popover1 should be invoked by invoker1');
+ assert_equals(document.activeElement,invoker1,'Focus should not move when popover is shown');
+ await sendTab();
+ assert_equals(document.activeElement,inside_popover1,'Focus should move from invoker into the open popover');
+ await sendTab();
+ assert_equals(document.activeElement,invoker2,'Focus should move within popover');
+ await verifyFocusOrder([button1, button2, invoker1, inside_popover1, invoker2, inside_popover2, button3, button4]);
+ invoker2.focus();
+ await sendEnter(); // Activate the nested invoker
+ assert_true(popover2.matches(':open'), 'popover2 should be invoked by nested invoker');
+ assert_equals(document.activeElement,invoker2,'Focus should stay on the invoker');
+ await sendTab();
+ assert_equals(document.activeElement,inside_popover3,'Focus should move into nested popover');
+ await sendTab();
+ assert_equals(document.activeElement,invoker3);
+ await sendEnter(); // Activate the (empty) nested invoker
+ assert_true(popover3.matches(':open'), 'popover3 should be invoked by nested invoker');
+ assert_equals(document.activeElement,invoker3,'Focus should stay on the invoker');
+ await sendTab();
+ assert_equals(document.activeElement,inside_popover2,'Focus should skip popover without focusable content, going back to higher scope');
+ await sendTab();
+ assert_equals(document.activeElement,button3,'Focus should exit popovers');
+ await sendTab();
+ assert_equals(document.activeElement,button4,'Focus should skip popovers');
+ button1.focus();
+ await verifyFocusOrder([button1, button2, invoker1, inside_popover1, invoker2, inside_popover3, invoker3, inside_popover2, button3, button4]);
+}, "Popover focus navigation");
+</script>
+
+<button id=circular0 popovertoggletarget=popover4>Invoker</button>
+<div id=popover4 popover>
+ <button id=circular1 autofocus popoverhidetarget=popover4></button>
+ <button id=circular2 popovershowtarget=popover4></button>
+ <button id=circular3 popovertoggletarget=popover4></button>
+</div>
+<button id=circular4>after</button>
+<script>
+promise_test(async t => {
+ circular0.focus();
+ await sendEnter(); // Activate the invoker
+ await verifyFocusOrder([circular0, circular1, circular2, circular3, circular4]);
+ popover4.hidePopover();
+}, "Circular reference tab navigation");
+</script>
+
+<div id=deleted>
+ <button popovershowtarget=deleted1>Show popover</button>
+ <div popover id=deleted1>
+ <button popoverhidetarget=deleted1 autofocus>Hide popover</button>
+ </div>
+</div>
+<script>
+promise_test(async t => {
+ const invoker = document.querySelector('#deleted>button');
+ const popover = document.querySelector('#deleted>[popover]');
+ const hideButton = popover.querySelector('[popoverhidetarget]');
+ invoker.focus(); // Make sure button is focused.
+ assert_equals(document.activeElement,invoker);
+ await sendEnter(); // Activate the invoker
+ assert_true(popover.matches(':open'), 'popover should be invoked by invoker');
+ assert_equals(document.activeElement,hideButton,'Hide button should be focused due to autofocus attribute');
+ await sendEnter(); // Activate the hide invoker
+ assert_false(popover.matches(':open'), 'popover should be hidden by invoker');
+ assert_equals(document.activeElement,invoker,'Focus should be returned to the invoker');
+}, "Popover focus returns when popover is hidden by invoker");
+</script>