third_party/WebKit/LayoutTests/svg/css/text-shadow-multiple.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <body style="margin: 0px">
   3
   4 <style>
   5     div, text {
   6         font-family: Arial;
   7         font-size: 50px;
   8     }
   9
  10     text, tspan {
  11         alignment-baseline: hanging;
  12     }
  13
  14     div.shadow, text.shadow {
  15         text-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
  16                    , hsla(60, 100%, 50%, 1) -8px 14px 2px
  17                    , hsla(100, 100%, 50%, 1) -21px -12px 5px;
  18     }
  19 </style>
  20 <p>The first two texts should look identical, as there is no shadow applied.</p>
  21
  22 <div style="position: absolute; left: 20px;">
  23     <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
  24     <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
  25     <span>casts multiple</span>
  26     shadows
  27 </div>
  28 <svg xmlns="http://www.w3.org/2000/svg" width="800" height="100" style="margin-top: 50px;">
  29     <text x="20" y="30">
  30         <tspan fill="white" fill-opacity="0" stroke-width="1px" stroke="black">This</tspan>
  31         <tspan fill="white" stroke-width="1px" stroke="black">text</tspan>
  32         <tspan>casts multiple</tspan>
  33         shadows
  34     </text>
  35 </svg>
  36
  37 <p>The next two texts have subtle differences, as the stroke/fill is painted seperated in SVG.</p>
  38
  39 <div class="shadow" style="position: absolute; left: 20px;">
  40     <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
  41     <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
  42     <span>casts multiple</span>
  43     shadows
  44 </div>
  45 <svg xmlns="http://www.w3.org/2000/svg" width="800" height="100" style="margin-top: 50px;">
  46     <text class="shadow" x="20" y="30">
  47         <tspan fill="white" fill-opacity="0" stroke-width="1px" stroke="black">This</tspan>
  48         <tspan fill="white" stroke-width="1px" stroke="black">text</tspan>
  49         <tspan>casts multiple</tspan>
  50         shadows
  51     </text>
  52 </svg>
  53
  54 </body>
  55 </html>