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 52pre { 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 78function cs(el) 79{ 80 if (window.getComputedStyle) 81 return window.getComputedStyle(el, ''); 82 return el.currentStyle; 83} 84 85document.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> 113