contextmenu-key.html [plain text]

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