| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>SVGTextContentElement.getCharNumAtPosition</title> |
| <link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getCharNumAtPosition"> |
| <link rel="stylesheet" href="/fonts/ahem.css"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <svg width="800" height="600"> |
| <style> |
| text { |
| font: 20px/1 Ahem; |
| } |
| </style> |
| <text><tspan id="htb" x="40" y="100">abc</tspan></text> |
| <text style="writing-mode:vertical-lr"><tspan id="vlr" x="40" y="120">abc</tspan></text> |
| <text style="writing-mode:vertical-rl"><tspan id="vrl" x="80" y="120">abc</tspan></text> |
| <text style="writing-mode:sideways-rl"><tspan id="srl" x="80" y="200">abc</tspan></text> |
| </svg> |
| |
| <script> |
| function newPoint(x, y) { |
| const p = document.querySelector('svg').createSVGPoint(); |
| p.x = x; |
| p.y = y; |
| return p; |
| } |
| |
| setup({ explicit_done: true }); |
| |
| document.fonts.ready.then(() => { |
| test(() => { |
| const element = document.querySelector('#htb'); |
| assert_equals(element.getNumberOfChars(), 3); |
| const start = 40; |
| assert_equals(element.getCharNumAtPosition(newPoint(start - 10, 100)), -1); |
| assert_equals(element.getCharNumAtPosition(newPoint(start + 10, 100)), 0); |
| assert_equals(element.getCharNumAtPosition(newPoint(start + 30, 100)), 1); |
| assert_equals(element.getCharNumAtPosition(newPoint(start + 50, 100)), 2); |
| assert_equals(element.getCharNumAtPosition(newPoint(start + 70, 100)), -1); |
| }, 'horizontal-tb'); |
| |
| test(() => { |
| const element = document.querySelector('#vlr'); |
| assert_equals(element.getNumberOfChars(), 3); |
| const start = 120; |
| assert_equals(element.getCharNumAtPosition(newPoint(40, start - 10)), -1); |
| assert_equals(element.getCharNumAtPosition(newPoint(40, start + 10)), 0); |
| assert_equals(element.getCharNumAtPosition(newPoint(40, start + 30)), 1); |
| assert_equals(element.getCharNumAtPosition(newPoint(40, start + 50)), 2); |
| assert_equals(element.getCharNumAtPosition(newPoint(40, start + 70)), -1); |
| }, 'vertical-lr'); |
| |
| test(() => { |
| const element = document.querySelector('#vrl'); |
| assert_equals(element.getNumberOfChars(), 3); |
| const start = 120; |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start - 10)), -1); |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start + 10)), 0); |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start + 30)), 1); |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start + 50)), 2); |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start + 70)), -1); |
| }, 'vertical-rl'); |
| |
| test(() => { |
| const element = document.querySelector('#srl'); |
| assert_equals(element.getNumberOfChars(), 3); |
| const start = 200; |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start - 10)), -1); |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start + 10)), 0); |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start + 30)), 1); |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start + 50)), 2); |
| assert_equals(element.getCharNumAtPosition(newPoint(80, start + 70)), -1); |
| }, 'sideways-rl'); |
| |
| done(); |
| }); |
| </script> |
