| <!DOCTYPE HTML> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| #outer { |
| width: 400px; |
| height: 200px; |
| background-color: #99f; |
| padding: 30px; |
| } |
| #inner { |
| position: relative; |
| left: 50px; |
| top: 50px; |
| width: 300px; |
| height: 100px; |
| background-color: #f99; |
| z-index: -1; |
| } |
| </style> |
| |
| <div id="outer" aria-label="Don't ignore me"> |
| <div id="inner" aria-label="Or me"> |
| This element is totally obscured by "outer", it's not visible. |
| </div> |
| This element totally obscures "inner", but it's still possible to context-click |
| on "inner" using accessibiltiy APIs. |
| </div> |
| |
| <script> |
| async_test(function(t) |
| { |
| var target = document.getElementById("inner"); |
| target.addEventListener('contextmenu', function() { |
| document.getElementById("outer").style.display = "none"; |
| t.done(); |
| }, false); |
| |
| var axTarget = accessibilityController.accessibleElementById("inner"); |
| axTarget.showMenu(); |
| }, "can use accessibility to show context menu on element that's obscured behind another"); |
| </script> |
