src/third_party/WebKit/LayoutTests/compositing/shadows/shadow-drawing.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <title>Shadow test</title>
   6   <style type="text/css" media="screen">
   7    .box {
   8         display: inline-block;
   9         height: 150px;
  10         width: 200px;
  11         margin: 50px;
  12         border: 1px solid black;
  13         -webkit-box-shadow: 10px 10px 4px rgba(0, 0, 0, 0.5);
  14      }
  15
  16      .compositing {
  17        transform: translateZ(0);
  18      }
  19
  20      .shadowed {
  21        font-size: 28pt;
  22        color: blue;
  23        text-align: center;
  24        text-shadow: 0 10px 3px rgba(0, 0, 0, 0.5);
  25        transform: rotate(10deg);
  26      }
  27   </style>
  28 </head>
  29 <body>
  30
  31 <p>Left and right sides should look the same.</p>
  32
  33 <div class="box">
  34   <p class="shadowed">Shadowed text</p>
  35 </div>
  36
  37 <div class="compositing box">
  38   <p class="shadowed">Shadowed text</p>
  39 </div>
  40
  41 </body>
  42 </html>