<html>
<head>
<style type="text/css">
#container {
margin: 80px 0px;
height: 300px;
width: 300px;
-webkit-perspective: 500;
}
#parent {
width: 280px;
height: 280px;
background-color: green;
opacity: 0.9999;
-webkit-transform-style: flat;
transform: rotateY(80deg);
}
#child {
background-color: green;
transform: translateZ(0);
}
#bad {
position: absolute;
top: 120px;
left: 115px;
width: 20px;
height: 200px;
background-color: red;
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsTextWithPixelResults();
</script>
</head>
<body>
<!-- This div should be covered up -->
<div id="bad"></div>
<div id="container">
<div id="parent">
<div id="child"></div>
</div>
</div>
</body>
</html>