| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| |
| #outer { |
| overflow: auto; |
| width: 200px; |
| height: 200px; |
| } |
| |
| #inner { |
| position: relative; |
| height: 400px; |
| } |
| |
| #inner:focus { |
| background-color: lightblue; |
| } |
| |
| #inner:active { |
| background-color: blue; |
| } |
| |
| #h, #h2 { |
| background: rgba(255, 255, 255, 0); |
| } |
| |
| #h { |
| position: absolute; |
| height: 200px; |
| width: 200px; |
| } |
| |
| #h2 { |
| position: absolute; |
| top: 200px; |
| height: 200px; |
| width: 100%; |
| } |
| |
| #h:hover, |
| #h2:hover { |
| background: pink; |
| } |
| |
| #h:active, |
| #h2:active { |
| background: red; |
| } |
| |
| pre { |
| position: absolute; |
| left: 250px; |
| top: 80px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <p>Manual test for <a href="https://bugs.webkit.org/show_bug.cgi?id=38129">bug 38129</a></p> |
| |
| <p>Click the div below and press the context menu key on your keyboard (Shift+F10 also works)</p> |
| |
| <div id=outer> |
| <div id=inner tabindex=0> |
| <div id=h2></div> |
| </div> |
| </div> |
| |
| <div id=h></div> |
| |
| <pre></pre> |
| |
| <script> |
| |
| function cs(el) |
| { |
| if (window.getComputedStyle) |
| return window.getComputedStyle(el, ''); |
| return el.currentStyle; |
| } |
| |
| document.addEventListener('contextmenu', function(e) |
| { |
| var inner = document.querySelector('#inner'); |
| var outer = document.querySelector('#outer'); |
| var h = document.querySelector('#h'); |
| var h2 = document.querySelector('#h2'); |
| var result = []; |
| |
| result.push(e.target, document.querySelector('#inner')); |
| result.push(cs(inner, '').backgroundColor, 'rgb(0, 0, 255)'); |
| result.push(cs(h, '').backgroundColor, 'rgba(255, 255, 255, 0)'); |
| result.push(cs(h2, '').backgroundColor, 'rgba(255, 255, 255, 0)'); |
| |
| var s = ''; |
| for (var i = 0; i < result.length; i += 2) { |
| s += result[i] + ' == ' + result[i + 1] + ' - ' + |
| (result[i] == result[i + 1] ? 'PASS' : 'FAIL') + '<br>'; |
| } |
| |
| document.querySelector('pre').innerHTML = s; |
| |
| return true; |
| }, false); |
| |
| </script> |
| |
| </body> |
| </html> |
