third_party/WebKit/LayoutTests/svg/custom/dominant-baseline-hanging.svg

   1 <?xml version="1.0"?>
   2 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
   3
   4   <defs>
   5     <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
   6       <stop offset="0" stop-color="rgb(255, 114, 180)" stop-opacity="0.5" />
   7       <stop offset="1" stop-color="rgb(255, 0, 123)" />
   8     </linearGradient>
   9     <linearGradient id="h_stroke_gradient">
  10       <stop offset="0" stop-color="black" />
  11       <stop offset="1" stop-color="black" stop-opacity="0" />
  12     </linearGradient>
  13     <linearGradient id="v_stroke_gradient" x1="0" y1="0" x2="0" y2="1">
  14       <stop offset="0" stop-color="black" />
  15       <stop offset="1" stop-color="black" stop-opacity="0" />
  16     </linearGradient>
  17   </defs>
  18
  19   <rect width="400" height="400" fill="url(#gradient)" />
  20
  21   <g transform="translate(10,10)">
  22     <rect width="380" height="25" fill="white" opacity="0.5" />
  23     <g stroke-width="1" transform="translate(-0.5, -0.5)">
  24       <line x1="0" y1="0" x2="380" y2="0" stroke="url(#h_stroke_gradient)" />
  25       <line x1="0" y1="-0.5" x2="0" y2="25" stroke="url(#v_stroke_gradient)" />
  26     </g>
  27     <text x="2" font-size="20" dominant-baseline="hanging">This is hanging from the top-left corner</text>
  28   </g>
  29
  30   <foreignObject x="10" y="45" width="380" height="150">
  31     <html xmlns="http://www.w3.org/1999/xhtml">
  32       <body>
  33         <p>
  34           The piece of text above should be aligned with the top-left corner of the rectangle below it. Both the <code>&lt;text&gt;</code> and the <code>&lt;rect&gt;</code> are located at the same coordinates and the <code>&lt;text&gt;</code> element uses the <code>hanging</code> value for its <code>dominant-baseline</code> attribute.
  35         </p>
  36         <p>
  37           <a href="mailto:aq@fuchsia-design.com" style="color: maroon">Antoine Quint</a>, January 27th
  38         </p>
  39       </body>
  40     </html>
  41   </foreignObject>
  42
  43 </svg>