dialog-focusability.html (1853B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>dialog element: focusability</title> 4 <link rel=help href="https://github.com/whatwg/html/pull/8199"> 5 <link rel=author href="mailto:masonf@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 12 <button id="before">before</button> 13 <dialog id="dialog1" open> 14 <button id="within1">button</button> 15 </dialog> 16 <button id="after1">after 1</button> 17 <dialog tabindex=0 id="dialog2" open> 18 <button id="within2">button</button> 19 </dialog> 20 <button id="after2">after 2</button> 21 <dialog tabindex="-1" id="dialog3" open> 22 <button id="within3">button</button> 23 </dialog> 24 <button id="after3">after 3</button> 25 <dialog contenteditable="true" id="dialog4" open> 26 <button id="within4">button</button> 27 </dialog> 28 <button id="after4">after 4</button> 29 30 <style> 31 #dialog1 { top: 25px; } 32 #dialog2 { top: 100px; } 33 #dialog3 { top: 175px; } 34 #dialog4 { top: 250px; } 35 </style> 36 37 <script> 38 function navigateForward() { 39 const TAB = '\ue004'; 40 return test_driver.send_keys(document.body, TAB); 41 } 42 async function assert_focus_order(elements) { 43 assert_true(elements.length >= 2); 44 elements[0].focus(); 45 for(let i=0;i<elements.length;++i) { 46 assert_equals(document.activeElement,elements[i],`Focus order mismatch at step ${i+1}/${elements.length}`); 47 await navigateForward(); 48 } 49 } 50 51 promise_test(async () => { 52 await new Promise(resolve => window.onload = resolve); 53 await assert_focus_order([before,within1,after1,dialog2,within2,after2, 54 within3,after3,dialog4,within4,after4]); 55 }, "The dialog element itself should not be keyboard focusable."); 56 </script>