| <!doctype html> |
| <html> |
| <head> |
| <style> |
| #ancestor { |
| position: absolute; |
| height: 50px; |
| width: 50px; |
| top: 200px; |
| left: 100px; |
| border: 1px solid; |
| } |
| |
| dialog { |
| height: 50px; |
| width: 50px; |
| top: 200px; |
| left: 200px; |
| margin: 0; |
| } |
| |
| dialog::backdrop { |
| display: none; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="ancestor"> |
| <dialog></dialog> |
| </div> |
| <script> |
| function clickOn(element) |
| { |
| var rect = element.getBoundingClientRect(); |
| eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| } |
| |
| // For manual testing, indicate success only if automatic testing would also |
| // print success for all ancestor nodes. |
| function turnDivGreenOnSuccess() |
| { |
| if (handledEvent['document'] && handledEvent['body'] && handledEvent['div']) |
| div.style.backgroundColor = 'green'; |
| } |
| |
| description('Test that ancestors of modal <dialog> are inert. To test manually, ' + |
| 'click the left box. There should be no change. Then click the right box. ' + |
| 'If both boxes turn green, the test passes.'); |
| div = document.querySelector('#ancestor'); |
| dialog = document.querySelector('dialog'); |
| dialog.showModal(); |
| |
| handledEvent = {}; |
| document.addEventListener('click', function(event) { |
| handledEvent['document'] = true; |
| turnDivGreenOnSuccess(); |
| }); |
| |
| document.body.addEventListener('click', function(event) { |
| handledEvent['body'] = true; |
| turnDivGreenOnSuccess(); |
| // body should get a event only via bubbling. |
| if (event.target != dialog) { |
| testFailed('body was targeted for an click event'); |
| div.style.backgroundColor = 'red'; |
| } |
| }); |
| |
| div.addEventListener('click', function(event) { |
| handledEvent['div'] = true; |
| turnDivGreenOnSuccess(); |
| // div should get a event only via bubbling. |
| if (event.target != dialog) { |
| testFailed('div was targeted for an click event'); |
| div.style.backgroundColor = 'red'; |
| } |
| }); |
| |
| dialog.addEventListener('click', function(event) { |
| handledEvent['dialog'] = true; |
| dialog.style.backgroundColor = 'green'; |
| if (event.target != dialog) { |
| testFailed('dialog was not targeted for a click event'); |
| dialog.style.backgroundColor = 'red'; |
| } |
| }); |
| |
| if (window.eventSender) { |
| nodes = [ 'document', 'body', 'div', 'dialog' ]; |
| nodes.map(function(node) { handledEvent[node] = false; }); |
| debug('Clicking on ancestor'); |
| clickOn(div); |
| shouldBeTrue('handledEvent.document'); |
| shouldBeFalse('handledEvent.body'); |
| shouldBeFalse('handledEvent.dialog'); |
| shouldBeFalse('handledEvent.div'); |
| handledEvent.document = false; |
| |
| debug('Clicking on dialog'); |
| clickOn(dialog); |
| shouldBeTrue('handledEvent.document'); |
| shouldBeTrue('handledEvent.body'); |
| shouldBeTrue('handledEvent.dialog'); |
| shouldBeTrue('handledEvent.div'); |
| } |
| </script> |
| </body> |
| </html> |
