show-context-menu.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/accessibility/show-context-menu.html
