third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-ancestor-is-inert.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <style>
   5 #ancestor {
   6     position: absolute;
   7     height: 50px;
   8     width: 50px;
   9     top: 200px;
  10     left: 100px;
  11     border: 1px solid;
  12 }
  13
  14 dialog {
  15     height: 50px;
  16     width: 50px;
  17     top: 200px;
  18     left: 200px;
  19     margin: 0;
  20 }
  21
  22 dialog::backdrop {
  23     display: none;
  24 }
  25 </style>
  26 <script src="../../../resources/js-test.js"></script>
  27 </head>
  28 <body>
  29 <div id="ancestor">
  30     <dialog></dialog>
  31 </div>
  32 <script>
  33 function clickOn(element)
  34 {
  35     var rect = element.getBoundingClientRect();
  36     eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2);
  37     eventSender.mouseDown();
  38     eventSender.mouseUp();
  39 }
  40
  41 // For manual testing, indicate success only if automatic testing would also
  42 // print success for all ancestor nodes.
  43 function turnDivGreenOnSuccess()
  44 {
  45     if (handledEvent['document'] && handledEvent['body'] && handledEvent['div'])
  46         div.style.backgroundColor = 'green';
  47 }
  48
  49 description('Test that ancestors of modal &lt;dialog&gt; are inert. To test manually, ' +
  50             'click the left box. There should be no change. Then click the right box. ' +
  51             'If both boxes turn green, the test passes.');
  52 div = document.querySelector('#ancestor');
  53 dialog = document.querySelector('dialog');
  54 dialog.showModal();
  55
  56 handledEvent = {};
  57 document.addEventListener('click', function(event) {
  58     handledEvent['document'] = true;
  59     turnDivGreenOnSuccess();
  60 });
  61
  62 document.body.addEventListener('click', function(event) {
  63     handledEvent['body'] = true;
  64     turnDivGreenOnSuccess();
  65     // body should get a event only via bubbling.
  66     if (event.target != dialog) {
  67        testFailed('body was targeted for an click event');
  68        div.style.backgroundColor = 'red';
  69     }
  70 });
  71
  72 div.addEventListener('click', function(event) {
  73     handledEvent['div'] = true;
  74     turnDivGreenOnSuccess();
  75     // div should get a event only via bubbling.
  76     if (event.target != dialog) {
  77        testFailed('div was targeted for an click event');
  78        div.style.backgroundColor = 'red';
  79     }
  80 });
  81
  82 dialog.addEventListener('click', function(event) {
  83     handledEvent['dialog'] = true;
  84     dialog.style.backgroundColor = 'green';
  85     if (event.target != dialog) {
  86         testFailed('dialog was not targeted for a click event');
  87         dialog.style.backgroundColor = 'red';
  88     }
  89 });
  90
  91 if (window.eventSender) {
  92     nodes = [ 'document', 'body', 'div', 'dialog' ];
  93     nodes.map(function(node) { handledEvent[node] = false; });
  94     debug('Clicking on ancestor');
  95     clickOn(div);
  96     shouldBeTrue('handledEvent.document');
  97     shouldBeFalse('handledEvent.body');
  98     shouldBeFalse('handledEvent.dialog');
  99     shouldBeFalse('handledEvent.div');
 100     handledEvent.document = false;
 101
 102     debug('Clicking on dialog');
 103     clickOn(dialog);
 104     shouldBeTrue('handledEvent.document');
 105     shouldBeTrue('handledEvent.body');
 106     shouldBeTrue('handledEvent.dialog');
 107     shouldBeTrue('handledEvent.div');
 108 }
 109 </script>
 110 </body>
 111 </html>