<!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>