ManualTests/win/contextmenu-key.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6 #outer {
   7     overflow: auto;
   8     width: 200px;
   9     height: 200px;
  10 }
  11
  12 #inner {
  13     position: relative;
  14     height: 400px;
  15 }
  16
  17 #inner:focus {
  18     background-color: lightblue;
  19 }
  20
  21 #inner:active {
  22     background-color: blue;
  23 }
  24
  25 #h, #h2 {
  26     background: rgba(255, 255, 255, 0);
  27 }
  28
  29 #h {
  30     position: absolute;
  31     height: 200px;
  32     width: 200px;
  33 }
  34
  35 #h2 {
  36     position: absolute;
  37     top: 200px;
  38     height: 200px;
  39     width: 100%;
  40 }
  41
  42 #h:hover,
  43 #h2:hover {
  44     background: pink;
  45 }
  46
  47 #h:active,
  48 #h2:active {
  49     background: red;
  50 }
  51
  52 pre {
  53     position: absolute;
  54     left: 250px;
  55     top: 80px;
  56 }
  57
  58 </style>
  59 </head>
  60 <body>
  61
  62 <p>Manual test for <a href="https://bugs.webkit.org/show_bug.cgi?id=38129">bug 38129</a></p>
  63
  64 <p>Click the div below and press the context menu key on your keyboard (Shift+F10 also works)</p>
  65
  66 <div id=outer>
  67     <div id=inner tabindex=0>
  68         <div id=h2></div>
  69     </div>
  70 </div>
  71
  72 <div id=h></div>
  73
  74 <pre></pre>
  75
  76 <script>
  77
  78 function cs(el)
  79 {
  80     if (window.getComputedStyle)
  81         return window.getComputedStyle(el, '');
  82     return el.currentStyle;
  83 }
  84
  85 document.addEventListener('contextmenu', function(e)
  86 {
  87     var inner = document.querySelector('#inner');
  88     var outer = document.querySelector('#outer');
  89     var h = document.querySelector('#h');
  90     var h2 = document.querySelector('#h2');
  91     var result = [];
  92
  93     result.push(e.target, document.querySelector('#inner'));
  94     result.push(cs(inner, '').backgroundColor, 'rgb(0, 0, 255)');
  95     result.push(cs(h, '').backgroundColor, 'rgba(255, 255, 255, 0)');
  96     result.push(cs(h2, '').backgroundColor, 'rgba(255, 255, 255, 0)');
  97
  98     var s = '';
  99     for (var i = 0; i < result.length; i += 2) {
 100         s += result[i] + ' == ' + result[i + 1] + ' - ' +
 101             (result[i] == result[i + 1] ? 'PASS' : 'FAIL') + '<br>';
 102     }
 103
 104     document.querySelector('pre').innerHTML = s;
 105
 106     return true;
 107 }, false);
 108
 109 </script>
 110
 111 </body>
 112 </html>