| Index: LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html
|
| diff --git a/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html b/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..554664cda1ea95290005c63cf299aa4ab54ef81a
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html
|
| @@ -0,0 +1,111 @@
|
| +<!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>
|
|
|
Chromium Code Reviews
Issue 133393002:
Make ancestors of modal <dialog> inert (Closed)
Base URL: svn://svn.chromium.org/blink/trunk