popover-target-element-disabled.html (7249B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/pull/8221#discussion_r1049379113"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <div id=outerpopover popover=auto> 8 <button popovertarget=innerpopover disabled>toggle popover</button> 9 </div> 10 <div id=innerpopover popover=auto>popover</div> 11 <script> 12 test(() => { 13 outerpopover.showPopover(); 14 outerpopover.querySelector('button').click(); // Invoke innerpopover 15 assert_false(innerpopover.matches(':popover-open'), 16 'disabled button shouldn\'t open the target popover'); 17 assert_true(outerpopover.matches(':popover-open')); 18 innerpopover.showPopover(); 19 assert_true(innerpopover.matches(':popover-open'), 20 'The inner popover should be able to open successfully.'); 21 assert_false(outerpopover.matches(':popover-open'), 22 'The outer popover should be closed by opening the inner one.'); 23 }, 'Disabled popover*target buttons should not affect the popover heirarchy.'); 24 </script> 25 26 <div id=outerpopover2 popover=auto> 27 <button id=togglebutton2 popovertarget=innerpopover2>toggle popover</button> 28 </div> 29 <div id=innerpopover2 popover=auto>popover</div> 30 <script> 31 test(() => { 32 outerpopover2.showPopover(); 33 outerpopover2.querySelector('button').click(); // Invoke innerpopover 34 assert_true(innerpopover2.matches(':popover-open'), 35 'The inner popover should be able to open successfully.'); 36 assert_true(outerpopover2.matches(':popover-open'), 37 'The outer popover should stay open when opening the inner one.'); 38 39 togglebutton2.disabled = true; 40 assert_true(innerpopover2.matches(':popover-open'), 41 'Changing disabled states after popovers are open shouldn\'t close anything'); 42 assert_true(outerpopover2.matches(':popover-open'), 43 'Changing disabled states after popovers are open shouldn\'t close anything'); 44 }, 'Disabling popover*target buttons when popovers are open should not cause popovers to be closed.'); 45 </script> 46 47 <div id=outerpopover4 popover=auto> 48 <button id=togglebutton4 popovertarget=innerpopover4>toggle popover</button> 49 </div> 50 <div id=innerpopover4 popover=auto>popover</div> 51 <form id=submitform>form</form> 52 <script> 53 test(() => { 54 outerpopover4.showPopover(); 55 outerpopover4.querySelector('button').click(); // Invoke innerpopover 56 assert_true(innerpopover4.matches(':popover-open'), 57 'The inner popover should be able to open successfully.'); 58 assert_true(outerpopover4.matches(':popover-open'), 59 'The outer popover should stay open when opening the inner one.'); 60 61 togglebutton4.setAttribute('form', 'submitform'); 62 assert_true(innerpopover4.matches(':popover-open'), 63 'The inner popover be should be not closed when invoking buttons cease to be invokers.'); 64 assert_true(outerpopover4.matches(':popover-open'), 65 'The outer popover be should be not closed when invoking buttons cease to be invokers.'); 66 }, 'Setting the form attribute on popover*target buttons when popovers are open should not close them.'); 67 </script> 68 69 <div id=outerpopover5 popover=auto> 70 <input type=button id=togglebutton5 popovertarget=innerpopover5>toggle popover</button> 71 </div> 72 <div id=innerpopover5 popover=auto>popover</div> 73 <script> 74 test(() => { 75 outerpopover5.showPopover(); 76 outerpopover5.querySelector('input').click(); // Invoke innerpopover 77 assert_true(innerpopover5.matches(':popover-open'), 78 'The inner popover should be able to open successfully.'); 79 assert_true(outerpopover5.matches(':popover-open'), 80 'The outer popover should stay open when opening the inner one.'); 81 82 togglebutton5.setAttribute('type', 'text'); 83 assert_true(innerpopover5.matches(':popover-open'), 84 'The inner popover be should be not closed when invoking buttons cease to be invokers.'); 85 assert_true(outerpopover5.matches(':popover-open'), 86 'The outer popover be should be not closed when invoking buttons cease to be invokers.'); 87 }, 'Changing the input type on a popover*target button when popovers are open should not close anything.'); 88 </script> 89 90 <div id=outerpopover6 popover=auto> 91 <button id=togglebutton6 popovertarget=innerpopover6>toggle popover</button> 92 </div> 93 <div id=innerpopover6 popover=auto>popover</div> 94 <script> 95 test(() => { 96 outerpopover6.showPopover(); 97 outerpopover6.querySelector('button').click(); // Invoke innerpopover 98 assert_true(innerpopover6.matches(':popover-open'), 99 'The inner popover should be able to open successfully.'); 100 assert_true(outerpopover6.matches(':popover-open'), 101 'The outer popover should stay open when opening the inner one.'); 102 103 togglebutton6.remove(); 104 assert_true(innerpopover6.matches(':popover-open'), 105 'The inner popover be should be not closed when invoking buttons are removed.'); 106 assert_true(outerpopover6.matches(':popover-open'), 107 'The outer popover be should be not closed when invoking buttons are removed.'); 108 }, 'Disconnecting popover*target buttons when popovers are open should not close anything.'); 109 </script> 110 111 <div id=outerpopover7 popover=auto> 112 <button id=togglebutton7 popovertarget=innerpopover7>toggle popover</button> 113 </div> 114 <div id=innerpopover7 popover=auto>popover</div> 115 <script> 116 test(() => { 117 outerpopover7.showPopover(); 118 outerpopover7.querySelector('button').click(); // Invoke innerpopover 119 assert_true(innerpopover7.matches(':popover-open'), 120 'The inner popover should be able to open successfully.'); 121 assert_true(outerpopover7.matches(':popover-open'), 122 'The outer popover should stay open when opening the inner one.'); 123 124 togglebutton7.setAttribute('popovertarget', 'otherpopover7'); 125 assert_true(innerpopover7.matches(':popover-open'), 126 'The inner popover be should be not closed when invoking buttons are retargeted.'); 127 assert_true(outerpopover7.matches(':popover-open'), 128 'The outer popover be should be not closed when invoking buttons are retargeted.'); 129 }, 'Changing the popovertarget attribute to break the chain should not close anything.'); 130 </script> 131 132 <div id=outerpopover8 popover=auto> 133 <div id=middlepopover8 popover=auto> 134 <div id=innerpopover8 popover=auto>hello</div> 135 </div> 136 </div> 137 <div id=otherpopover8 popover=auto>other popover</div> 138 <button id=togglebutton8 popovertarget=middlepopover8>other button</div> 139 <script> 140 test(() => { 141 outerpopover8.showPopover(); 142 middlepopover8.showPopover(); 143 innerpopover8.showPopover(); 144 assert_true(innerpopover8.matches(':popover-open'), 145 'The inner popover should be able to open successfully.'); 146 assert_true(middlepopover8.matches(':popover-open'), 147 'The middle popover should stay open when opening the inner one.'); 148 assert_true(outerpopover8.matches(':popover-open'), 149 'The outer popover should stay open when opening the inner one.'); 150 151 togglebutton8.setAttribute('popovertarget', 'otherpopover8'); 152 assert_true(innerpopover8.matches(':popover-open'), 153 'The inner popover should remain open.'); 154 assert_true(middlepopover8.matches(':popover-open'), 155 'The middle popover should remain open.'); 156 assert_true(outerpopover8.matches(':popover-open'), 157 'The outer popover should remain open.'); 158 }, `Modifying popovertarget on a button which doesn't break the chain shouldn't close any popovers.`); 159 </script>