75 lines
2.7 KiB
HTML
75 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>SVGTextContentElement.getStartPositionOfChar and getEndPositionOfChar</title>
|
|
<link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getStartPositionOfChar">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<link rel="stylesheet" href="/fonts/ahem.css">
|
|
<style>
|
|
text {
|
|
font: 10px/1 Ahem;
|
|
}
|
|
#vrl {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
#vlr {
|
|
writing-mode: vertical-lr;
|
|
}
|
|
#srl {
|
|
writing-mode: sideways-rl;
|
|
}
|
|
#slr {
|
|
writing-mode: sideways-lr;
|
|
}
|
|
</style>
|
|
|
|
<svg>
|
|
<text id="vrl" x="100" y="100">ABC</text>
|
|
<text id="vlr" x="100" y="100">ABC</text>
|
|
<text id="srl" x="100" y="100">ABC</text>
|
|
<text id="slr" x="100" y="100">ABC</text>
|
|
</svg>
|
|
|
|
<script>
|
|
const FONT_SIZE = 10;
|
|
function $(sel) { return document.querySelector(sel); }
|
|
|
|
test(() => {
|
|
const target = $('#vrl');
|
|
const base = target.getStartPositionOfChar(0).y;
|
|
assert_equals(base + FONT_SIZE, target.getEndPositionOfChar(0).y);
|
|
assert_equals(base + FONT_SIZE, target.getStartPositionOfChar(1).y);
|
|
assert_equals(base + FONT_SIZE * 2, target.getEndPositionOfChar(1).y);
|
|
assert_equals(base + FONT_SIZE * 2, target.getStartPositionOfChar(2).y);
|
|
assert_equals(base + FONT_SIZE * 3, target.getEndPositionOfChar(2).y);
|
|
}, 'vertical-rl');
|
|
|
|
test(() => {
|
|
const target = $('#vlr');
|
|
const base = target.getStartPositionOfChar(0).y;
|
|
assert_equals(base + FONT_SIZE, target.getEndPositionOfChar(0).y);
|
|
assert_equals(base + FONT_SIZE, target.getStartPositionOfChar(1).y);
|
|
assert_equals(base + FONT_SIZE * 2, target.getEndPositionOfChar(1).y);
|
|
assert_equals(base + FONT_SIZE * 2, target.getStartPositionOfChar(2).y);
|
|
assert_equals(base + FONT_SIZE * 3, target.getEndPositionOfChar(2).y);
|
|
}, 'vertical-lr');
|
|
|
|
test(() => {
|
|
const target = $('#srl');
|
|
const base = target.getStartPositionOfChar(0).y;
|
|
assert_equals(base + FONT_SIZE, target.getEndPositionOfChar(0).y);
|
|
assert_equals(base + FONT_SIZE, target.getStartPositionOfChar(1).y);
|
|
assert_equals(base + FONT_SIZE * 2, target.getEndPositionOfChar(1).y);
|
|
assert_equals(base + FONT_SIZE * 2, target.getStartPositionOfChar(2).y);
|
|
assert_equals(base + FONT_SIZE * 3, target.getEndPositionOfChar(2).y);
|
|
}, 'sideways-rl');
|
|
|
|
test(() => {
|
|
const target = $('#slr');
|
|
const base = target.getStartPositionOfChar(0).y;
|
|
assert_equals(base - FONT_SIZE, target.getEndPositionOfChar(0).y);
|
|
assert_equals(base - FONT_SIZE, target.getStartPositionOfChar(1).y);
|
|
assert_equals(base - FONT_SIZE * 2, target.getEndPositionOfChar(1).y);
|
|
assert_equals(base - FONT_SIZE * 2, target.getStartPositionOfChar(2).y);
|
|
assert_equals(base - FONT_SIZE * 3, target.getEndPositionOfChar(2).y);
|
|
}, 'sideways-lr');
|
|
</script>
|