<!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;
}
</style>

<div id="outer">
  <div id="shadowHost" aria-label="Don't ignore me">
    This content goes inside inner.
  </div>
  <p>
    This element totally obscures "inner", but it's still possible to context-click
    on "inner" using accessibiltiy APIs.
  </p>
</div>

<div id="inner" aria-label="Don't ignore me either">
  <style>
    #inner_wrap {
      position: relative;
      left: 50px;
      top: 50px;
      width: 300px;
      height: 100px;
      background-color: #f99;
      z-index: -1;
    }
  </style>
  <div id="inner_wrap">
    <p>Before the content.</p>
    <p id="target"><content></content></p>
    <p>After the content.</p>
  </div>
</div>

<script>
var target = document.getElementById('target');
var shadowHost = document.getElementById('shadowHost');
var shadowRoot = shadowHost.createShadowRoot();
shadowRoot.appendChild(document.getElementById('inner'));

async_test(function(t)
{
    target.addEventListener('contextmenu', function() {
        document.getElementById("outer").style.display = "none";
        t.done();
    }, false);

    if (window.accessibilityController) {
        var axTarget = accessibilityController.accessibleElementById("target");
        axTargetText = axTarget.childAtIndex(0);
        assert_equals(axTargetText.role, 'AXRole: AXStaticText');
        assert_equals(axTargetText.stringValue, 'AXValue: This content goes inside inner.');
        axTargetText.showMenu();
    }
}, "can use accessibility to show context menu on element that's obscured behind another");
</script>