third_party/WebKit/LayoutTests/fast/css/transformed-mask.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style type="text/css" media="screen">
   5         .box {
   6             height: 100px;
   7             width: 100px;
   8             background-color: black;
   9             display: inline-block;
  10             margin: 20px;
  11             -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.2)));
  12         }
  13
  14         .transformed {
  15             transform: rotate(10deg);
  16         }
  17
  18         .transformed2 {
  19             transform: skewX(10deg);
  20         }
  21
  22     </style>
  23 </head>
  24 <body>
  25     <p>You should not see any pixel artifacts around the reflections.</p>
  26     <div class="box"></div>
  27     <div class="transformed box"></div>
  28     <div class="transformed2 box"></div>
  29 </body>
  30 </html>