Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/svg/css/alignment-baseline.html 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
    body {
      margin: 0;
    }

    text {
      dominant-baseline: hanging;
      alignment-baseline: mathematical;
      font-family: Arial;
      font-size: 50px;
    }

    text > tspan {
      dominant-baseline: alphabetic;
      alignment-baseline: hanging;
    }

    text > tspan > tspan {
      dominant-baseline: middle;
      alignment-baseline: alphabetic;
    }

    text > tspan > tspan > tspan {
      dominant-baseline: mathematical;
      alignment-baseline: central;
    }

    text > tspan > tspan > tspan > tspan {
      dominant-baseline: ideographic;
      alignment-baseline: middle;
    }

    .font-size text > tspan {
      font-size: 40px;
    }

    .font-size text > tspan > tspan {
      font-size: 24px;
    }

    .font-size text > tspan > tspan > tspan {
      font-size: 60px;
    }

    .font-size text > tspan > tspan > tspan > tspan {
      font-size: 12px;
    }

    .font-family text > tspan {
      font-family: sans-serif;
    }

    .font-family text > tspan > tspan {
      font-family: monospace;
    }

    .font-family text > tspan > tspan > tspan {
      font-family: cursive;
    }

    .font-family text > tspan > tspan > tspan > tspan {
      font-family: fantasy;
    }
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="400">

    <g>
      <line x1="0" x2="100%" y1="50" y2="50" stroke="red"/>
      <text x="20" y="50">
        Lorem
        <tspan>ipsum
          <tspan>dolor
            <tspan>sit
              <tspan>amet.</tspan>
            </tspan>
          </tspan>
        </tspan>
      </text>
    </g>

    <g transform="translate(0 100)" class="font-size">
      <line x1="0" x2="100%" y1="50" y2="50" stroke="red"/>
      <text x="20" y="50">
        Lorem
        <tspan>ipsum
          <tspan>dolor
            <tspan>sit
              <tspan>amet.</tspan>
            </tspan>
          </tspan>
        </tspan>
      </text>
    </g>

    <g transform="translate(0 200)" class="font-family">
      <line x1="0" x2="100%" y1="50" y2="50" stroke="red"/>
      <text x="20" y="50">
        Lorem
        <tspan>ipsum
          <tspan>dolor
            <tspan>sit
              <tspan>amet.</tspan>
            </tspan>
          </tspan>
        </tspan>
      </text>
    </g>

    <g transform="translate(0 300)" class="font-size font-family" >
      <line x1="0" x2="100%" y1="50" y2="50" stroke="red"/>
      <text x="20" y="50">
        Lorem
        <tspan>ipsum
          <tspan>dolor
            <tspan>sit
              <tspan>amet.</tspan>
            </tspan>
          </tspan>
        </tspan>
      </text>
    </g>

  </svg>
</body>
</html>