blob: d3a9bcb1ade5df0c6197171a81f667972d8f8fb4 [file] [log] [blame]
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
#outer {
width: 400px;
height: 200px;
background-color: #99f;
padding: 30px;
<div id="outer">
<div id="shadowHost" aria-label="Don't ignore me">
This content goes inside inner.
This element totally obscures "inner", but it's still possible to context-click
on "inner" using accessibiltiy APIs.
<div id="inner" aria-label="Don't ignore me either">
#inner_wrap {
position: relative;
left: 50px;
top: 50px;
width: 300px;
height: 100px;
background-color: #f99;
z-index: -1;
<div id="inner_wrap">
<p>Before the content.</p>
<p id="target"><content></content></p>
<p>After the content.</p>
var target = document.getElementById('target');
var shadowHost = document.getElementById('shadowHost');
var shadowRoot = shadowHost.createShadowRoot();
target.addEventListener('contextmenu', function() {
document.getElementById("outer").style.display = "none";
}, 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.');
}, "can use accessibility to show context menu on element that's obscured behind another");