dominant-baseline-hanging.svg | Explore in Territory

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">

  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="rgb(255, 114, 180)" stop-opacity="0.5" />
      <stop offset="1" stop-color="rgb(255, 0, 123)" />
    </linearGradient>
    <linearGradient id="h_stroke_gradient">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="black" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="v_stroke_gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="black" stop-opacity="0" />
    </linearGradient>
  </defs>

  <rect width="400" height="400" fill="url(#gradient)" />

  <g transform="translate(10,10)">
    <rect width="380" height="25" fill="white" opacity="0.5" />
    <g stroke-width="1" transform="translate(-0.5, -0.5)">
      <line x1="0" y1="0" x2="380" y2="0" stroke="url(#h_stroke_gradient)" />
      <line x1="0" y1="-0.5" x2="0" y2="25" stroke="url(#v_stroke_gradient)" />
    </g>
    <text x="2" font-size="20" dominant-baseline="hanging">This is hanging from the top-left corner</text>
  </g>

  <foreignObject x="10" y="45" width="380" height="150">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <body>
        <p>
          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. 
        </p>
        <p>
          <a href="mailto:[email protected]" style="color: maroon">Antoine Quint</a>, January 27th
        </p>
      </body>
    </html>
  </foreignObject>

</svg>
chromium/third_party/blink/web_tests/svg/custom/dominant-baseline-hanging.svg
