LayoutTests/fast/transforms/shadows.html

   1 <style>
   2     body { margin: 0; color: lightgreen; font-family: Ahem; font-size: 20px; }
   3
   4     .square {
   5         width: 30px;
   6         height: 30px;
   7         background-color: lightyellow;
   8         margin: 20px;
   9         float: left;
  10         padding: 5px;
  11     }
  12
  13     .rounded {
  14         -webkit-border-radius: 10px;
  15     }
  16
  17     .transform1 {
  18         -webkit-transform: rotate(45deg);
  19     }
  20
  21     .transform2 {
  22         -webkit-transform: scale(0.5, 1);
  23     }
  24
  25     .transform3 {
  26         -webkit-transform: rotate(45deg) scale(0.5, 1);
  27     }
  28
  29     .transform4 {
  30         -webkit-transform: skewX(45deg);
  31     }
  32
  33     .shadow1 {
  34         -webkit-box-shadow: black 10px 10px 0;
  35     }
  36
  37     .shadow2 {
  38         -webkit-box-shadow: black 10px 10px 10px;
  39     }
  40
  41     .text-shadow1 {
  42         text-shadow: black 10px 10px 0;
  43     }
  44
  45     .text-shadow2 {
  46         text-shadow: black 10px 10px 10px;
  47     }
  48     .text-shadow3 {
  49         text-shadow: black 5px 5px 2px, pink 10px 10px 5px;
  50     }
  51 </style>
  52 <div class="square shadow1"></div>
  53 <div class="square shadow1 transform1"></div>
  54 <div class="square shadow1 transform2"></div>
  55 <div class="square shadow1 transform3"></div>
  56 <div class="square shadow1 transform4"></div>
  57 <div style="clear: both;"></div>
  58 <div class="square rounded shadow1"></div>
  59 <div class="square rounded shadow1 transform1"></div>
  60 <div class="square rounded shadow1 transform2"></div>
  61 <div class="square rounded shadow1 transform3"></div>
  62 <div class="square rounded shadow1 transform4"></div>
  63 <div style="clear: both;"></div>
  64 <div class="square shadow2"></div>
  65 <div class="square shadow2 transform1"></div>
  66 <div class="square shadow2 transform2"></div>
  67 <div class="square shadow2 transform3"></div>
  68 <div class="square shadow2 transform4"></div>
  69 <div style="clear: both;"></div>
  70 <div class="square rounded shadow2"></div>
  71 <div class="square rounded shadow2 transform1"></div>
  72 <div class="square rounded shadow2 transform2"></div>
  73 <div class="square rounded shadow2 transform3"></div>
  74 <div class="square rounded shadow2 transform4"></div>
  75 <div style="clear: both;"></div>
  76 <div class="square text-shadow1">X</div>
  77 <div class="square text-shadow1 transform1">X</div>
  78 <div class="square text-shadow1 transform2">X</div>
  79 <div class="square text-shadow1 transform3">X</div>
  80 <div class="square text-shadow1 transform4">X</div>
  81 <div style="clear: both;"></div>
  82 <div class="square text-shadow2">X</div>
  83 <div class="square text-shadow2 transform1">X</div>
  84 <div class="square text-shadow2 transform2">X</div>
  85 <div class="square text-shadow2 transform3">X</div>
  86 <div class="square text-shadow2 transform4">X</div>
  87 <div style="clear: both;"></div>
  88 <div class="square text-shadow3">X</div>
  89 <div class="square text-shadow3 transform1">X</div>
  90 <div class="square text-shadow3 transform2">X</div>
  91 <div class="square text-shadow3 transform3">X</div>
  92 <div class="square text-shadow3 transform4">X</div>