getextentofchar.html (1084B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>SVGTextContentElement.getExtentOfChar</title> 4 <link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getExtentOfChar"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <svg width="800" height="200"> 9 <text><tspan id="tspan1" x="50 150 100" y="100">abc</tspan></text> 10 <text dominant-baseline="hanging"><tspan id="tspan2" x="50" y="150">abc</tspan></text> 11 </svg> 12 13 <script> 14 test(() => { 15 const element = document.querySelector('#tspan1'); 16 assert_equals(element.getNumberOfChars(), 3); 17 assert_equals(element.getExtentOfChar(0).x, 50); 18 assert_equals(element.getExtentOfChar(1).x, 150); 19 assert_equals(element.getExtentOfChar(2).x, 100); 20 }, 'Multiple chunks in a tspan'); 21 22 test(() => { 23 const element = document.querySelector('#tspan2'); 24 assert_equals(element.getNumberOfChars(), 3); 25 assert_equals(element.getExtentOfChar(0).x, 50); 26 assert_approx_equals(element.getExtentOfChar(0).y, 147.5, 1); 27 }, 'With dominant-baseline'); 28 </script>