dialog-toggle-source.html (3238B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/9111"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="../../popovers/resources/toggle-event-source-test.js"></script> 10 11 <button id=showmodalbutton commandfor=dialog command=show-modal>show modal</button> 12 <button id=lightdismiss>light dismiss</button> 13 <dialog id=dialog closedby=any> 14 dialog 15 <button id=closebutton commandfor=dialog command=close>close</button> 16 <button id=requestclosebutton commandfor=dialog command=request-close>request close</button> 17 </dialog> 18 19 <script> 20 const showmodalbutton = document.getElementById('showmodalbutton'); 21 const dialog = document.getElementById('dialog'); 22 const requestclosebutton = document.getElementById('requestclosebutton'); 23 const lightdismiss = document.getElementById('lightdismiss'); 24 25 createToggleEventSourceTest({ 26 description: 'ToggleEvent.source on <dialog> elements: dialog.showModal().', 27 target: dialog, 28 openFunc: async () => dialog.showModal(), 29 closeFunc: async () => dialog.close(), 30 openSource: null, 31 closeSource: null 32 }); 33 34 createToggleEventSourceTest({ 35 description: 'ToggleEvent.source on <dialog> elements: command button.', 36 target: dialog, 37 openFunc: async () => showmodalbutton.click(), 38 closeFunc: async () => closebutton.click(), 39 openSource: showmodalbutton, 40 closeSource: closebutton 41 }); 42 43 createToggleEventSourceTest({ 44 description: 'ToggleEvent.source on <dialog> elements: open with showModal, close with button.', 45 target: dialog, 46 openFunc: async () => dialog.showModal(), 47 closeFunc: async () => closebutton.click(), 48 openSource: null, 49 closeSource: closebutton 50 }); 51 52 createToggleEventSourceTest({ 53 description: 'ToggleEvent.soruce on <dialog> elements: open with button, close with dialog.close().', 54 target: dialog, 55 openFunc: async () => showmodalbutton.click(), 56 closeFunc: async () => dialog.close(), 57 openSource: showmodalbutton, 58 closeSource: null 59 }); 60 61 createToggleEventSourceTest({ 62 description: 'ToggleEvent.source on <dialog> elements: open with showModal, close with request-close button.', 63 target: dialog, 64 openFunc: async () => dialog.showModal(), 65 closeFunc: async () => requestclosebutton.click(), 66 openSource: null, 67 closeSource: requestclosebutton 68 }); 69 70 createToggleEventSourceTest({ 71 description: 'ToggleEvent.source on <dialog> elements: open with button, close with light dismiss.', 72 target: dialog, 73 openFunc: async () => { 74 await test_driver.click(showmodalbutton); 75 }, 76 closeFunc: async () => { 77 dialog.addEventListener('cancel', event => event.preventDefault(), {once: true}); 78 requestclosebutton.click(); 79 assert_true(dialog.matches('[open]'), 80 'cancel preventDefault should have prevented dialog from closing.'); 81 await (new test_driver.Actions() 82 .pointerMove(0, 0, {origin: lightdismiss}) 83 .pointerDown() 84 .pointerUp()) 85 .send(); 86 }, 87 openSource: showmodalbutton, 88 closeSource: null 89 }); 90 </script>