select-inside-top-layer.html (3447B)
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:masonf@chromium.org"> 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>