<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Opacity-Transform Clipping</title>

  <style type="text/css" media="screen">
    .container {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 100px;
      top: 150px;
      outline: 1px solid black;
      opacity: 0.9;
    }
    
    .box {
      width: 10px;
      height: 10px;
      outline: 12px solid blue;
      -webkit-transform: translate(50px, 50px);
    }
    
    .inner {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: green;
    }
    
    #underlay {
      position: absolute;
      top: 200px;
      left: 150px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>

<div id="underlay">
</div>
<p><a href="https://bugs.webkit.org/show_bug.cgi?id=22026">https://bugs.webkit.org/show_bug.cgi?id=22026</a></p>
<p>Test that elements with transform and opacity on a parent are not clipped. You should see no red below.</p>
<div class="container">
  <div class="box">
      <div class="inner"></div>
  </div>
</div>
  
</body>
</html>