third_party/WebKit/LayoutTests/fast/box-shadow/basic-shadows.html

   1 <head>
   2 <style>
   3 table { border-spacing: 10px; }
   4 td { border:1px solid black; padding: 10px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }
   5 .shadowfirstline::first-line { -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); background-color: #eeeeee; }
   6 .shadowfirstletter::first-letter { -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); background-color: #eeeeee; border:1px solid black; font-size:48px; float:left; padding:4px; margin-right:4px }
   7 </style>
   8
   9 <span style="line-height:50px; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px 5px red; border:5px solid black">
  10 This text<br> should have<br> a multi-line shadow with a border-radius.
  11 </span>
  12
  13 <div style="width:100px;height:100px; border:10px solid black; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)">50%  transparent black shadow</div>
  14
  15 <table>
  16 <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  17 <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  18 <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  19 <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  20 <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  21 </table>
  22
  23 <p class="shadowfirstline">
  24 The first line of this div should have a box-shadow on it.<br>
  25 This second line should not.
  26 </p>
  27
  28 <p class="shadowfirstletter">
  29 The first letter of this paragraph should have a border and a nice shadow effect.<br>
  30 It should look pretty cool.
  31 </p>
  32