getcharnumatposition.html (3220B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>SVGTextContentElement.getCharNumAtPosition</title> 4 <link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getCharNumAtPosition"> 5 <link rel="stylesheet" href="/fonts/ahem.css"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <svg width="800" height="600"> 10 <style> 11 text { 12 font: 20px/1 Ahem; 13 } 14 </style> 15 <text><tspan id="htb" x="40" y="100">abc</tspan></text> 16 <text style="writing-mode:vertical-lr"><tspan id="vlr" x="40" y="120">abc</tspan></text> 17 <text style="writing-mode:vertical-rl"><tspan id="vrl" x="80" y="120">abc</tspan></text> 18 <text style="writing-mode:sideways-rl"><tspan id="srl" x="80" y="200">abc</tspan></text> 19 </svg> 20 21 <script> 22 function newPoint(x, y) { 23 const p = document.querySelector('svg').createSVGPoint(); 24 p.x = x; 25 p.y = y; 26 return p; 27 } 28 29 setup({ explicit_done: true }); 30 31 document.fonts.ready.then(() => { 32 test(() => { 33 const element = document.querySelector('#htb'); 34 assert_equals(element.getNumberOfChars(), 3); 35 const start = 40; 36 assert_equals(element.getCharNumAtPosition(newPoint(start - 10, 100)), -1); 37 assert_equals(element.getCharNumAtPosition(newPoint(start + 10, 100)), 0); 38 assert_equals(element.getCharNumAtPosition(newPoint(start + 30, 100)), 1); 39 assert_equals(element.getCharNumAtPosition(newPoint(start + 50, 100)), 2); 40 assert_equals(element.getCharNumAtPosition(newPoint(start + 70, 100)), -1); 41 }, 'horizontal-tb'); 42 43 test(() => { 44 const element = document.querySelector('#vlr'); 45 assert_equals(element.getNumberOfChars(), 3); 46 const start = 120; 47 assert_equals(element.getCharNumAtPosition(newPoint(40, start - 10)), -1); 48 assert_equals(element.getCharNumAtPosition(newPoint(40, start + 10)), 0); 49 assert_equals(element.getCharNumAtPosition(newPoint(40, start + 30)), 1); 50 assert_equals(element.getCharNumAtPosition(newPoint(40, start + 50)), 2); 51 assert_equals(element.getCharNumAtPosition(newPoint(40, start + 70)), -1); 52 }, 'vertical-lr'); 53 54 test(() => { 55 const element = document.querySelector('#vrl'); 56 assert_equals(element.getNumberOfChars(), 3); 57 const start = 120; 58 assert_equals(element.getCharNumAtPosition(newPoint(80, start - 10)), -1); 59 assert_equals(element.getCharNumAtPosition(newPoint(80, start + 10)), 0); 60 assert_equals(element.getCharNumAtPosition(newPoint(80, start + 30)), 1); 61 assert_equals(element.getCharNumAtPosition(newPoint(80, start + 50)), 2); 62 assert_equals(element.getCharNumAtPosition(newPoint(80, start + 70)), -1); 63 }, 'vertical-rl'); 64 65 test(() => { 66 const element = document.querySelector('#srl'); 67 assert_equals(element.getNumberOfChars(), 3); 68 const start = 200; 69 assert_equals(element.getCharNumAtPosition(newPoint(80, start - 10)), -1); 70 assert_equals(element.getCharNumAtPosition(newPoint(80, start + 10)), 0); 71 assert_equals(element.getCharNumAtPosition(newPoint(80, start + 30)), 1); 72 assert_equals(element.getCharNumAtPosition(newPoint(80, start + 50)), 2); 73 assert_equals(element.getCharNumAtPosition(newPoint(80, start + 70)), -1); 74 }, 'sideways-rl'); 75 76 done(); 77 }); 78 </script>