bbox-with-glyph-overflow-on-path.html

<!DOCTYPE html>
<style>
  text {
    font-size: 50px;
    font-style: italic;
  }
  rect {
    stroke-width: 1px;
    stroke: green;
    fill: transparent;
  }
  #middleGlyphOverhang {
    font-family: cursive;
  }
</style>
No glyphs should extend outside the rects.<br>
<svg id="svg" width="700" height="500">
  <defs>
    <path id="straightPath" d="M50 100 L 400 100"/>
    <path id="backwardsPath" d="M400 150 L 50 150"/>
    <path id="slantedPath" d="M50 250 L 400 350"/>
    <path id="middleGlyphOverhangPath" d="M50 450 L 400 450"/>
  </defs>

  <text id="straightText">
    <textPath xlink:href="#straightPath">ffffffffffffffffffffffff</textPath>
  </text>

  <text id="backwardsText">
    <textPath xlink:href="#backwardsPath">ffffffffffffffffffffffff</textPath>
  </text>

  <text id="slantedText">
    <textPath xlink:href="#slantedPath">ffffffffffffffffffffffff</textPath>
  </text>

  <text id="middleGlyphOverhang">
    <textPath xlink:href="#middleGlyphOverhangPath">'faQ'</textPath>
  </text>
</svg>
<script>
  [straightText, backwardsText, slantedText, middleGlyphOverhang].forEach(function (textElement) {
    var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('x', textElement.getBBox().x);
    rect.setAttribute('y', textElement.getBBox().y);
    rect.setAttribute('width', textElement.getBBox().width);
    rect.setAttribute('height', textElement.getBBox().height);
    document.getElementById('svg').appendChild(rect);
  });
</script>
chromium/third_party/blink/web_tests/svg/text/bbox-with-glyph-overflow-on-path.html
