LayoutTests/fast/css/shadow-multiple.html

   1 <style>
   2     span::selection { color: purple; }
   3     div.roundedRect {
   4         width: 100px;
   5         height: 100px;
   6         margin: 50px;
   7         -webkit-border-radius: 25px;
   8         -webkit-box-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
   9                           , hsla(60, 100%, 50%, 1) -8px 14px 2px
  10                           , hsla(100, 100%, 50%, 1) -21px -12px 5px;
  11      }
  12 </style>
  13 <div style="
  14     font-family: Lucida Grande;
  15     font-weight: bold;
  16     font-size: 48px;
  17     margin: 20px;
  18     text-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
  19                , hsla(60, 100%, 50%, 1) -8px 14px 2px
  20                , hsla(100, 100%, 50%, 1) -21px -12px 5px;
  21 ">
  22     <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
  23     <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
  24     <span style="color: rgba(0, 0, 0, 0.3);">casts</span>
  25     <span id="selectMe">multiple</span>
  26     shadows
  27 </div>
  28 <script>
  29     var text = document.getElementById("selectMe").firstChild;
  30     getSelection().setBaseAndExtent(text, 0, text, 6);
  31 </script>
  32 <div class="roundedRect"></div>
  33 <div class="roundedRect" style="background-color: white;"></div>
  34 <div class="roundedRect" style="background-color: rgba(0, 0, 0, 0.2);"></div>