third_party/WebKit/LayoutTests/accessibility/show-context-menu.html

   1 <!DOCTYPE HTML>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <style>
   6 #outer {
   7   width: 400px;
   8   height: 200px;
   9   background-color: #99f;
  10   padding: 30px;
  11 }
  12 #inner {
  13   position: relative;
  14   left: 50px;
  15   top: 50px;
  16   width: 300px;
  17   height: 100px;
  18   background-color: #f99;
  19   z-index: -1;
  20 }
  21 </style>
  22
  23 <div id="outer" aria-label="Don't ignore me">
  24   <div id="inner" aria-label="Or me">
  25     This element is totally obscured by "outer", it's not visible.
  26   </div>
  27   This element totally obscures "inner", but it's still possible to context-click
  28   on "inner" using accessibiltiy APIs.
  29 </div>
  30
  31 <script>
  32 async_test(function(t)
  33 {
  34     var target = document.getElementById("inner");
  35     target.addEventListener('contextmenu', function() {
  36         document.getElementById("outer").style.display = "none";
  37         t.done();
  38     }, false);
  39
  40     var axTarget = accessibilityController.accessibleElementById("inner");
  41     axTarget.showMenu();
  42 }, "can use accessibility to show context menu on element that's obscured behind another");
  43 </script>