third_party/WebKit/LayoutTests/fast/transforms/shadows.html

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