modal-dialog-ancestor-is-inert.html (3062B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=author href="mailto:falken@chromium.org"> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> 5 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=329407"> 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 <style> 13 #ancestor { 14 position: absolute; 15 height: 50px; 16 width: 50px; 17 top: 200px; 18 left: 100px; 19 border: 1px solid; 20 } 21 22 dialog { 23 height: 50px; 24 width: 50px; 25 top: 200px; 26 left: 200px; 27 margin: 0; 28 } 29 30 dialog::backdrop { 31 display: none; 32 } 33 </style> 34 35 <div id="ancestor"> 36 <dialog></dialog> 37 </div> 38 39 <script> 40 promise_test(async () => { 41 async function clickOn(element) { 42 const rect = element.getBoundingClientRect(); 43 const actions = new test_driver.Actions() 44 .pointerMove(rect.left + rect.width / 2, rect.top + rect.height / 2) 45 .pointerDown() 46 .pointerUp(); 47 await actions.send(); 48 } 49 50 const div = document.querySelector('#ancestor'); 51 const dialog = document.querySelector('dialog'); 52 dialog.showModal(); 53 54 const handledEvent = {}; 55 document.addEventListener('click', function(event) { 56 handledEvent['document'] = true; 57 }); 58 59 document.body.addEventListener('click', function(event) { 60 handledEvent['body'] = true; 61 // body should get a event only via bubbling. 62 if (event.target != dialog) { 63 assert_unreached('body was targeted for an click event'); 64 div.style.backgroundColor = 'red'; 65 } 66 }); 67 68 div.addEventListener('click', function(event) { 69 handledEvent['div'] = true; 70 // div should get a event only via bubbling. 71 if (event.target != dialog) { 72 assert_unreached('div was targeted for an click event'); 73 div.style.backgroundColor = 'red'; 74 } 75 }); 76 77 dialog.addEventListener('click', function(event) { 78 handledEvent['dialog'] = true; 79 dialog.style.backgroundColor = 'green'; 80 if (event.target != dialog) { 81 assert_unreached('dialog was not targeted for a click event'); 82 dialog.style.backgroundColor = 'red'; 83 } 84 }); 85 86 const nodes = [ 'document', 'body', 'div', 'dialog' ]; 87 nodes.map(function(node) { handledEvent[node] = false; }); 88 await clickOn(div); 89 assert_true(handledEvent.document, 'Clicking on ancestor.'); 90 assert_false(handledEvent.body, 'Clicking on ancestor.'); 91 assert_false(handledEvent.dialog, 'Clicking on ancestor.'); 92 assert_false(handledEvent.div, 'Clicking on ancestor.'); 93 handledEvent.document = false; 94 95 await clickOn(dialog); 96 assert_true(handledEvent.document, 'Clicking on dialog.'); 97 assert_true(handledEvent.body, 'Clicking on dialog.'); 98 assert_true(handledEvent.dialog, 'Clicking on dialog.'); 99 assert_true(handledEvent.div, 'Clicking on dialog.'); 100 }, 'Test that ancestors of modal dialog are inert.'); 101 </script>