LayoutTests/fast/css/nested-layers-with-hover.html - WebKit - Git at Google

 <html>
 <head>
 <style>
     #table-row:hover {
         background-color:blue;
     }
 </style>
         <script>
             if (window.testRunner) {
                 testRunner.waitUntilDone();
                 testRunner.dumpAsText();
             }
             function log(msg) {
                 var console = document.getElementById('console');
                 console.innerText = msg;
             }
             var testedHoverState = false;
             function testHoverState() {
                 if (testedHoverState)
                     return;
                 testedHoverState = true;
                 var tableRow = document.getElementById('table-row');
                 var calculatedStyle = window.getComputedStyle(tableRow);

                 if (calculatedStyle.getPropertyValue('background-color') == "rgb(0, 0, 255)")
                     log("PASSED: The hover effect works!");
                 else
                     log("FAILED: The hover effect did not correctly propagate down the layer chain.");
                 if (window.testRunner)
                     testRunner.notifyDone();
             }

             function runTest() {
                 if (!window.testRunner)
                     return;
                 document.body.offsetTop; // Force layout.
                 var targetElem = document.getElementById('table-row');
                 eventSender.mouseMoveTo(50, 17);
                 window.setTimeout(testHoverState, 100);
             }
         </script>
 </head>

 <body onload="runTest()">
     <div style="overflow:hidden">
         <div id="table-row" style="overflow:hidden; display:table-row">To test this manually, first make sure you can see this text at all, and then hover over it and make sure the background turns blue.</div>
     </div>
     <div id="console"></div>

 </body>
 </html>
	<html>
	<head>
	<style>
	#table-row:hover {
	background-color:blue;
	}
	</style>
	<script>
	if (window.testRunner) {
	testRunner.waitUntilDone();
	testRunner.dumpAsText();
	}
	function log(msg) {
	var console = document.getElementById('console');
	console.innerText = msg;
	}
	var testedHoverState = false;
	function testHoverState() {
	if (testedHoverState)
	return;
	testedHoverState = true;
	var tableRow = document.getElementById('table-row');
	var calculatedStyle = window.getComputedStyle(tableRow);

	if (calculatedStyle.getPropertyValue('background-color') == "rgb(0, 0, 255)")
	log("PASSED: The hover effect works!");
	else
	log("FAILED: The hover effect did not correctly propagate down the layer chain.");
	if (window.testRunner)
	testRunner.notifyDone();
	}

	function runTest() {
	if (!window.testRunner)
	return;
	document.body.offsetTop; // Force layout.
	var targetElem = document.getElementById('table-row');
	eventSender.mouseMoveTo(50, 17);
	window.setTimeout(testHoverState, 100);
	}
	</script>
	</head>

	<body onload="runTest()">
	<div style="overflow:hidden">
	<div id="table-row" style="overflow:hidden; display:table-row">To test this manually, first make sure you can see this text at all, and then hover over it and make sure the background turns blue.</div>
	</div>
	<div id="console"></div>

	</body>
	</html>