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

   1 <style>
   2     div.square {
   3         width: 80px;
   4         height: 80px;
   5         margin: 10px;
   6         display: inline-block;
   7         background: lightyellow;
   8         border: 10px solid green;
   9     }
  10     .rounded div.square {
  11         -webkit-border-radius: 20px;
  12     }
  13 </style>
  14 <div>
  15     <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px 15px inset;"></div>
  16     <div class="square" style="-webkit-box-shadow: -15px 15px 0 5px rgba(0, 0, 0, 0.2) inset;"></div>
  17     <div class="square" style="-webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 15px -15px 0 -10px;"></div>
  18     <div class="square" style="-webkit-box-shadow: inset -15px -15px 5px rgba(0, 0, 0, 0.2);"></div>
  19     <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) inset -15px -15px 5px;"></div>
  20 </div>
  21 <div class="rounded">
  22     <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px 15px inset;"></div>
  23     <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px 15px 0 5px inset;"></div>
  24     <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px -15px 0 -10px inset;"></div>
  25     <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px -15px 5px inset;"></div>
  26     <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px -15px inset, rgba(0, 0, 127, 0.6) 5px 5px 5px inset; border-style: dashed;"></div>
  27 </div>
  28 <div style="width: 600px; text-align: center;">
  29     <span style="
  30         padding: 0 15px;
  31         font-size: 72px;
  32         background-color: lightyellow;
  33         -webkit-border-radius: 10px;
  34         border: 5px solid green;
  35         line-height: 1.5;
  36         -webkit-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.2) inset;
  37     ">
  38         This sentence is too long to fit on a single line.
  39     </span>
  40 </div>