third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-inlines.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 dialog {
   6     width: 50px;
   7 }
   8 </style>
   9 <script src="../../../resources/js-test.js"></script>
  10 </head>
  11 <body>
  12 <a id="a" href="javascript:void(0)">Click me</a>
  13 <button id="button">Click me</button>
  14 <div id="div" style="background-color: blue; width: 50px; height: 50px">Click meeee</div>
  15 <span id="span">Click me</span>
  16 <div id="dialog-parent" style="width: 50px; height: 50px">
  17     <span id="dialog-sibling">Click meeee</span>
  18     <dialog></dialog>
  19 </div>
  20 <script>
  21 function clickOn(element)
  22 {
  23     if (!window.eventSender)
  24         return;
  25
  26     var absoluteTop = 0;
  27     var absoluteLeft = 0;
  28     for (var parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
  29         absoluteLeft += parentNode.offsetLeft;
  30         absoluteTop += parentNode.offsetTop;
  31     }
  32
  33     var x = absoluteLeft + element.offsetWidth / 2;
  34     var y = absoluteTop + element.offsetHeight / 2;
  35     eventSender.mouseMoveTo(x, y);
  36     eventSender.mouseDown();
  37     eventSender.mouseUp();
  38     eventSender.mouseMoveTo(0, 0);
  39 }
  40
  41 function eventFiredOnInertElement(e) {
  42     e.target.style.background = 'red';
  43     inertElementFiredOn = true;
  44 }
  45
  46 description('Tests that inert inlines do not receive mouse events. ' +
  47             'To test manually, click on all the "Click me"s. The test ' +
  48             'fails if you see red.');
  49 inertElements = ['a', 'button', 'div', 'span']
  50 inertElements.forEach(function(id) {
  51     element = document.getElementById(id);
  52     element.addEventListener('click', eventFiredOnInertElement);
  53     element.addEventListener('mousemove', eventFiredOnInertElement);
  54 });
  55
  56 document.addEventListener('click', function(e) {
  57     document.firedOn = true;
  58 });
  59
  60 document.getElementById('dialog-parent').addEventListener('click', function(e) {
  61     e.target.firedOn = true;
  62 });
  63
  64 document.querySelector('dialog').showModal();
  65 inertElements.forEach(function(id) {
  66     expectedTarget = document;
  67     if (id == 'dialog-sibling')
  68         expectedTarget = document.getElementById('dialog-parent')
  69     element = document.getElementById(id);
  70     inertElementFiredOn = false;
  71     expectedTarget.firedOn = false;
  72     debug('clicking on ' + id);
  73     clickOn(element);
  74     shouldBeFalse('inertElementFiredOn');
  75     shouldBeTrue('expectedTarget.firedOn');
  76 });
  77 </script>
  78 </body>
  79 </html>