| 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..b0ac79eb3c1c04d792bc15cf5cb6b3eef1160dff
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html
|
| @@ -0,0 +1,109 @@
|
| +<!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.top + rect.height / 2, rect.left + rect.width / 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 (document.handledEvent && document.body.handledEvent && div.handledEvent)
|
| + 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();
|
| +document.addEventListener('click', function(event) {
|
| + document.handledEvent = true;
|
| + turnDivGreenOnSuccess();
|
| +});
|
| +
|
| +document.body.addEventListener('click', function(event) {
|
| + document.body.handledEvent = 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) {
|
| + div.handledEvent = 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) {
|
| + dialog.handledEvent = 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, document.body, div, dialog ];
|
| + nodes.map(function(node) { node.handledEvent = false; });
|
| + debug('Clicking on ancestor');
|
| + clickOn(div);
|
| + shouldBeTrue('document.handledEvent');
|
| + shouldBeFalse('document.body.handledEvent');
|
| + shouldBeFalse('dialog.handledEvent');
|
| + shouldBeFalse('div.handledEvent');
|
| + document.handledEvent = false;
|
| +
|
| + debug('Clicking on dialog');
|
| + clickOn(dialog);
|
| + shouldBeTrue('document.handledEvent');
|
| + shouldBeTrue('document.body.handledEvent');
|
| + shouldBeTrue('dialog.handledEvent');
|
| + shouldBeTrue('div.handledEvent');
|
| +}
|
| +</script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 133393002:
Make ancestors of modal <dialog> inert (Closed)
Base URL: svn://svn.chromium.org/blink/trunk