testing/web-platform/tests/inert/inert-inlines.tentative.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8" />
   5     <title>inert inlines</title>
   6     <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
   7     <script src="/resources/testharness.js"></script>
   8     <script src="/resources/testharnessreport.js"></script>
   9     <script src="/resources/testdriver.js"></script>
  10     <script src="/resources/testdriver-vendor.js"></script>
  11   </head>
  12 <body>
  13 <a inert id="a" href="javascript:void(0)">Click me</a>
  14 <button inert id="button">Click me</button>
  15 <div inert id="div" style="background-color: blue; width: 50px; height: 50px">Click me</div>
  16 <span inert id="span">Click me</span>
  17 <script>
  18 function eventFiredOnInertElement(e) {
  19     e.target.style.background = 'red';
  20     inertElementFiredOn = true;
  21 }
  22
  23 inertElements = ['a', 'button', 'div', 'span']
  24 inertElements.forEach(function(id) {
  25     element = document.getElementById(id);
  26     element.addEventListener('click', eventFiredOnInertElement);
  27     element.addEventListener('mousemove', eventFiredOnInertElement);
  28 });
  29
  30 document.addEventListener('click', function(e) {
  31     document.firedOn = true;
  32 });
  33
  34 promise_test(async () => {
  35     for (let id of inertElements) {
  36         var element = document.getElementById(id);
  37         inertElementFiredOn = false;
  38         document.firedOn = false;
  39         try {
  40           await test_driver.click(element);
  41           assert_false(inertElementFiredOn, 'no event should be fired on ' + id);
  42           assert_true(document.firedOn, 'event should be fired on document instead of ' + id);
  43         } catch (e) {
  44           // test driver detects inert elements as unclickable
  45           // and throws an error
  46           assert_false(inertElementFiredOn, 'no event should be fired on ' + id);
  47         }
  48     }
  49 }, 'Tests that inert inlines do not receive mouse events. ' +
  50    'To test manually, click on all the "Click me"s. The test ' +
  51    'fails if you see red.');
  52
  53 </script>
  54 </body>
  55 </html>