LayoutTests/fast/layers/opacity-transforms.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Opacity-Transform Clipping</title>
   8
   9   <style type="text/css" media="screen">
  10     .container {
  11       position: absolute;
  12       width: 100px;
  13       height: 100px;
  14       left: 100px;
  15       top: 150px;
  16       outline: 1px solid black;
  17       opacity: 0.9;
  18     }
  19
  20     .box {
  21       width: 10px;
  22       height: 10px;
  23       outline: 12px solid blue;
  24       -webkit-transform: translate(50px, 50px);
  25     }
  26
  27     .inner {
  28       position: absolute;
  29       width: 100px;
  30       height: 100px;
  31       background-color: green;
  32     }
  33
  34     #underlay {
  35       position: absolute;
  36       top: 200px;
  37       left: 150px;
  38       width: 100px;
  39       height: 100px;
  40       background-color: red;
  41     }
  42   </style>
  43 </head>
  44 <body>
  45
  46 <div id="underlay">
  47 </div>
  48 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=22026">https://bugs.webkit.org/show_bug.cgi?id=22026</a></p>
  49 <p>Test that elements with transform and opacity on a parent are not clipped. You should see no red below.</p>
  50 <div class="container">
  51   <div class="box">
  52       <div class="inner"></div>
  53   </div>
  54 </div>
  55
  56 </body>
  57 </html>