dialog-closedby-bounds-clicking.html (3970B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <link rel="author" href="mailto:wpt@keithcirkel.co.uk"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-light-dismiss"> 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-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 12 <dialog id="dialog"> 13 <div id="box"></div> 14 </dialog> 15 16 <style> 17 dialog { inset: 0 auto auto 0; width: 100px; height: 100px; overflow: visible; } 18 #box { height:200px; width:200px; margin:20px; background:blue; } 19 </style> 20 21 <script> 22 for (const method of ['show', 'showModal']) { 23 promise_test(async (t) => { 24 dialog.setAttribute('closedby','any'); 25 dialog[method](); 26 const actions = new test_driver.Actions(); 27 await actions.pointerMove(1, 1, {origin:"viewport"}) 28 .pointerDown() 29 .pointerUp() 30 .send(); 31 assert_true(dialog.open, "Dialog should be open after clicking 1px-1px"); 32 },`Dialog ${method} will not light dismiss if clicked inside of the dialog bounds`); 33 34 promise_test(async (t) => { 35 dialog.setAttribute('closedby','any'); 36 dialog[method](); 37 const actions = new test_driver.Actions(); 38 await actions.pointerMove(99, 99, {origin:"viewport"}) 39 .pointerDown() 40 .pointerUp() 41 .send(); 42 assert_true(dialog.open, "Dialog should be open after clicking 99px-99px"); 43 },`Dialog ${method} will not light dismiss if clicked inside of the dialog bounds (bottom right)`); 44 45 promise_test(async (t) => { 46 dialog.setAttribute('closedby','any'); 47 dialog[method](); 48 const actions = new test_driver.Actions(); 49 await actions.pointerMove(150, 150, {origin:"viewport"}) 50 .pointerDown() 51 .pointerUp() 52 .send(); 53 assert_true(dialog.open, "Dialog should be open after clicking 150px-150px"); 54 },`Dialog ${method} will not light dismiss if clicked inside the overflowing div bounds (center)`); 55 56 promise_test(async (t) => { 57 dialog.setAttribute('closedby','any'); 58 dialog[method](); 59 const actions = new test_driver.Actions(); 60 await actions.pointerMove(199, 199, {origin:"viewport"}) 61 .pointerDown() 62 .pointerUp() 63 .send(); 64 assert_true(dialog.open, "Dialog should be open after clicking 199px-199px"); 65 },`Dialog ${method} will not light dismiss if clicked inside the overflowing div bounds (bottom right)`); 66 67 promise_test(async (t) => { 68 dialog.setAttribute('closedby','any'); 69 dialog[method](); 70 const actions = new test_driver.Actions(); 71 await actions.pointerMove(250, 250, {origin:"viewport"}) 72 .pointerDown() 73 .pointerUp() 74 .send(); 75 assert_false(dialog.open, "Dialog should be closed after clicking 250px-250px"); 76 },`Dialog ${method} light dismisses when clicked outside of the bounds of both the dialog and the div`); 77 78 promise_test(async (t) => { 79 dialog.setAttribute('closedby','any'); 80 dialog[method](); 81 const actions = new test_driver.Actions(); 82 await actions.pointerMove(150, 1, {origin:"viewport"}) 83 .pointerDown() 84 .pointerUp() 85 .send(); 86 assert_false(dialog.open, "Dialog should be closed after clicking 150px-1px"); 87 },`Dialog ${method} light dismisses when clicked outside of the bounds of the dialog - where the Y direction is in-line with the div still`); 88 89 promise_test(async (t) => { 90 dialog.setAttribute('closedby','any'); 91 dialog[method](); 92 const actions = new test_driver.Actions(); 93 await actions.pointerMove(1, 150, {origin:"viewport"}) 94 .pointerDown() 95 .pointerUp() 96 .send(); 97 assert_false(dialog.open, "Dialog should be closed after clicking 1px-150px"); 98 },`Dialog ${method} light dismisses when clicked outside of the bounds of the dialog - where the X direction is in-line with the div still`); 99 } 100 </script>