getstartpositionofchar-dominant-baseline.html (1572B)
1 <meta charset="utf-8"> 2 <title>SVGTextContentElement.getStartPositionOfChar and dominant-baseline</title> 3 <link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getStartPositionOfChar"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 text { 9 font-family: Arial; 10 font-size: 60px; 11 fill: #ffff00; 12 } 13 </style> 14 <svg> 15 <defs> 16 <path id="path" d="M20 80h120"></path> 17 </defs> 18 <g> 19 <text> 20 <textPath id="textPath1" href="#path">Test</textPath> 21 <tspan id="tspan1" x="0" y="100">Test</tspan> 22 </text> 23 </g> 24 <g transform="translate(140 0)"> 25 <text dominant-baseline="middle"> 26 <textPath id="textPath2" href="#path">Test</textPath> 27 <tspan id="tspan2" x="0" y="100">Test</tspan> 28 </text> 29 </g> 30 </svg> 31 32 <script> 33 function $(sel) { return document.querySelector(sel); } 34 35 test(() => { 36 assert_equals($('#textPath1').getStartPositionOfChar(0).y, 37 $('#textPath2').getStartPositionOfChar(0).y); 38 assert_equals($('#textPath1').getEndPositionOfChar(0).y, 39 $('#textPath2').getEndPositionOfChar(0).y); 40 }, 'textPath: get*PositionOfChar().y should not depend on dominant-baseline'); 41 42 test(() => { 43 assert_equals($('#tspan1').getStartPositionOfChar(0).y, 44 $('#tspan2').getStartPositionOfChar(0).y); 45 assert_equals($('#tspan1').getEndPositionOfChar(0).y, 46 $('#tspan2').getEndPositionOfChar(0).y); 47 }, 'tspan: get*PositionOfChar().y should not depend on dominant-baseline'); 48 </script>