third_party/WebKit/LayoutTests/accessibility/show-context-menu-shadowdom.html

   1 <!DOCTYPE HTML>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <style>
   6 #outer {
   7   width: 400px;
   8   height: 200px;
   9   background-color: #99f;
  10   padding: 30px;
  11 }
  12 </style>
  13
  14 <div id="outer">
  15   <div id="shadowHost" aria-label="Don't ignore me">
  16     This content goes inside inner.
  17   </div>
  18   <p>
  19     This element totally obscures "inner", but it's still possible to context-click
  20     on "inner" using accessibiltiy APIs.
  21   </p>
  22 </div>
  23
  24 <div id="inner" aria-label="Don't ignore me either">
  25   <style>
  26     #inner_wrap {
  27       position: relative;
  28       left: 50px;
  29       top: 50px;
  30       width: 300px;
  31       height: 100px;
  32       background-color: #f99;
  33       z-index: -1;
  34     }
  35   </style>
  36   <div id="inner_wrap">
  37     <p>Before the content.</p>
  38     <p id="target"><content></content></p>
  39     <p>After the content.</p>
  40   </div>
  41 </div>
  42
  43 <script>
  44 var target = document.getElementById('target');
  45 var shadowHost = document.getElementById('shadowHost');
  46 var shadowRoot = shadowHost.createShadowRoot();
  47 shadowRoot.appendChild(document.getElementById('inner'));
  48
  49 async_test(function(t)
  50 {
  51     target.addEventListener('contextmenu', function() {
  52         document.getElementById("outer").style.display = "none";
  53         t.done();
  54     }, false);
  55
  56     if (window.accessibilityController) {
  57         var axTarget = accessibilityController.accessibleElementById("target");
  58         axTargetText = axTarget.childAtIndex(0);
  59         assert_equals(axTargetText.role, 'AXRole: AXStaticText');
  60         assert_equals(axTargetText.stringValue, 'AXValue: This content goes inside inner.');
  61         axTargetText.showMenu();
  62     }
  63 }, "can use accessibility to show context menu on element that's obscured behind another");
  64 </script>