third_party/WebKit/LayoutTests/fast/box-shadow/box-shadow-transformed.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     .wrapper {
   6       width: 300px;
   7       height: 300px;
   8       -webkit-box-sizing: border-box;
   9       padding: 100px;
  10       margin: 20px;
  11       display: inline-block;
  12     }
  13
  14     .top {
  15         height: 150px;
  16         padding: 25px 100px;
  17     }
  18
  19
  20     .box {
  21       position: relative;
  22       width: 100px;
  23       height: 100px;
  24       display: inline-block;
  25     }
  26
  27   </style>
  28 </head>
  29 <body>
  30
  31   <p>The shadow should look identical relative to the box in each case.</p>
  32   <div class="top wrapper">
  33     <div class="box" style="box-shadow: 0 10px 20px black; transform: scale(2, 1)"></div>
  34   </div>
  35
  36   <div class="top wrapper">
  37     <div class="box" style="box-shadow: 0 10px 20px black; transform: rotate(45deg)"></div>
  38   </div>
  39
  40   <div class="wrapper">
  41       <div class="box" style="box-shadow: 0 10px 20px black; transform: rotate(45deg) scale(1.7)"></div>
  42   </div>
  43
  44   <div class="wrapper">
  45       <div class="box" style="box-shadow: 0 10px 20px black; transform: rotate(45deg) scale(0.8)"></div>
  46   </div>
  47
  48 </body>
  49 </html>