blob: b3b056835c2942d9fbec5a588dc7e88541e17a02 [file] [log] [blame]
<!DOCTYPE html>
<style>
div {
background-color: #00ffff;
width: 100px;
height: 100px;
}
span:active {
display: none;
}
</style>
<div>
<div id='host'>
<span>Click Me</span>
</div>
</div>
<pre id='description'></pre>
<pre id='console'></pre>
<script src='../../resources/js-test.js'></script>
<script>
var root = document.getElementById('host').createShadowRoot();
root.innerHTML =
'<style> div {background-color: #00ff00;}div:active {background-color: #ff0000;}</style><div id=shadowdom style="width: 100px; height: 100px"><content></content></div>'
function shouldHaveBackground(element, bg) {
background = getComputedStyle(element, null).getPropertyValue('background-color');
shouldBeEqualToString('background', bg);
}
description('Chain of active elements should be cleared including the Shadow DOM elements');
if (window.testRunner) {
var shadow = root.querySelector('#shadowdom');
eventSender.dragMode = false;
// This mouse click seems to be required for WebKit's event handling to
// pick up the :hover class. See https://bugs.webkit.org/show_bug.cgi?id=74264
eventSender.mouseDown();
eventSender.mouseUp();
var span = document.querySelector('span');
var spanRect = span.getBoundingClientRect();
// Mouse over the span.
eventSender.mouseMoveTo(spanRect.left + 5, spanRect.top + 5);
shouldHaveBackground(shadow, 'rgb(0, 255, 0)');
eventSender.mouseDown();
shouldHaveBackground(shadow, 'rgb(255, 0, 0)');
eventSender.mouseUp();
shouldHaveBackground(shadow, 'rgb(0, 255, 0)');
}
</script>