layout/reftests/svg/text-layout-09.svg

   1 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
   2
   3   <foreignObject><canvas xmlns="http://www.w3.org/1999/xhtml" id="canvas"/></foreignObject>
   4
   5   <rect width="100%" height="100%" fill="lime"/>
   6
   7   <g fill="red">
   8     <text dominant-baseline="hanging" x="70" y="70">hanging</text>
   9     <text dominant-baseline="mathematical" x="70" y="140">mathematical</text>
  10   </g>
  11
  12   <g fill="lime">
  13     <text id="hanging" x="70" y="70" dy="0">hanging</text>
  14     <text id="mathematical" x="70" y="140" dy="0">mathematical</text>
  15   </g>
  16
  17   <style><![CDATA[
  18   text {
  19     font: bold 30px Verdana, Helvetica, Arial, sans-serif;
  20   }
  21   ]]></style>
  22   <script>
  23   function cover(id, offset) {
  24     let element = document.getElementById(id);
  25     element.dy.baseVal[0].value = offset;
  26     let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  27     let bbox = element.getBBox();
  28     rect.x.baseVal.value = bbox.x;
  29     rect.y.baseVal.value = bbox.y;
  30     rect.width.baseVal.value = bbox.width;
  31     rect.height.baseVal.value = bbox.height;
  32     element.parentElement.appendChild(rect);
  33   }
  34   onload = function() {
  35     const canvas = document.getElementById('canvas');
  36     const ctx = canvas.getContext('2d');
  37     ctx.font = 'bold 30px Verdana, Helvetica, Arial, sans-serif';
  38
  39     let text = 'h';
  40     let textMetrics = ctx.measureText(text);
  41
  42     cover("hanging", textMetrics.actualBoundingBoxAscent * 1.1);
  43
  44     cover("mathematical", textMetrics.actualBoundingBoxAscent / 2 * 1.4);
  45
  46     document.documentElement.removeAttribute('class');
  47   }
  48   </script>
  49 </svg>