60 lines
2.1 KiB
HTML
60 lines
2.1 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: red;
|
|
}
|
|
|
|
div div {
|
|
position: absolute;
|
|
left: -1000px;
|
|
background-color: green;
|
|
}
|
|
|
|
div:hover div {
|
|
left: auto;
|
|
}
|
|
</style>
|
|
<script>
|
|
function log(msg) {
|
|
var console = document.getElementById('console');
|
|
var newNode = document.createElement('li');
|
|
newNode.innerText = msg;
|
|
console.appendChild(newNode);
|
|
}
|
|
var testedHoverState = false;
|
|
function testHoverState() {
|
|
if (testedHoverState)
|
|
return;
|
|
testedHoverState = true;
|
|
var innerElem = document.getElementById('innerElem');
|
|
var calculatedStyle = window.getComputedStyle(innerElem);
|
|
|
|
if (calculatedStyle.getPropertyValue('left') == "0px")
|
|
log("PASSED: Calculated style of inner element is correct");
|
|
else
|
|
log("FAILED: Calculated style of inner element is wrong, should be 'left: 0px'");
|
|
}
|
|
|
|
function runTest() {
|
|
if (!window.testRunner)
|
|
return;
|
|
testRunner.dumpAsText();
|
|
var targetElem = document.getElementById('targetElem');
|
|
eventSender.mouseMoveTo(targetElem.offsetLeft + targetElem.offsetWidth / 2,
|
|
targetElem.offsetTop + targetElem.offsetHeight / 2);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="runTest()">
|
|
This tests that a style that affects child elements when hovering
|
|
over a parent element correctly recalculates the child style. To
|
|
test manually move the mouse over the red square, it should become
|
|
green.
|
|
<div id="targetElem" onmousemove="testHoverState()"><div id="innerElem"></div></div>
|
|
<ul id="console"></ul>
|
|
<body>
|
|
</html>
|