blob: ca8b65094d16704e36e6279c467c8d1407996327 [file] [log] [blame]
<!DOCTYPE>
<html>
<head>
<title>Layer sizing with reflections</title>
<style type="text/css" media="screen">
.container {
margin: 50px 200px;
width: 300px;
height: 150px;
padding: 10px 20px;
border: 1px solid black;
-webkit-transform: translateZ(0);
}
.positioned {
position: absolute;
right: -60px;
width: 240px;
top: 40px;
background-color: #DDD;
padding: 10px;
-webkit-box-reflect: left 10px;
-webkit-transform: rotate(-40deg);
}
</style>
</head>
<p>Reflection should not be cropped by being in a composited layer.</p>
<div class="container">
<p>This element has a composited layer</p>
<div class="positioned">
<p>This is a positioned, reflected child.</p>
</div>
</div>
<p>
This is the next paragraph in the page.
</p>
</html>