| <!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> |
