Home | History | Annotate | Download | only in win 
      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') + '
';
    102     }
    103 
    104     document.querySelector('pre').innerHTML = s;
    105 
    106     return true;
    107 }, false);
    108 
    109 </script>
    110 
    111 </body>
    112 </html>
    113