blob: 7ca289dd678d598af76bdec6ff04d29ccba8c21c [file] [log] [blame]
<!DOCTYPE>
<html>
<head>
<style type="text/css" media="screen">
.box {
width: 100px;
height: 100px;
}
.alpha {
margin: 20px 100px;
opacity: 0.9;
border: 1px solid black;
}
.reflected {
width: 200px;
background-color: green;
-webkit-transform-origin: top left;
-webkit-transform: rotate(20deg);
-webkit-box-reflect: right 20px;
}
</style>
</head>
<p>Test that opacity doesn't cause clipping of transformed, reflected content. You should see a rotated green box and its full reflection.</p>
<div class="alpha box">
<div class="reflected box">
</div>
</div>
</html>