|
| 1 | +<!DOCTYPE html><!-- webkit-test-runner [ SVG2TextLayoutAlgorithmEnabled=true ] --> |
| 2 | +<meta charset="utf-8"> |
| 3 | +<title>textLength with absolutely positioned characters</title> |
| 4 | +<script src="../../resources/testharness.js"></script> |
| 5 | +<script src="../../resources/testharnessreport.js"></script> |
| 6 | +<svg width="600" height="200" font-family="Ahem" font-size="20"> |
| 7 | + <text id="absolute" x="10 100 200" y="30" textLength="300" lengthAdjust="spacing">abc</text> |
| 8 | + <text id="single" x="10" y="60" textLength="300" lengthAdjust="spacing">abc</text> |
| 9 | + <path id="path" d="M 10 150 L 590 150"/> |
| 10 | + <text id="onPath"><textPath href="#path" textLength="300" lengthAdjust="spacing">😀😀😀</textPath></text> |
| 11 | + <text id="reference" x="10" y="190">😀</text> |
| 12 | + <text id="glyphs" x="0 50 100 150" y="120" font-size="50" textLength="100" lengthAdjust="spacingAndGlyphs">XXXX</text> |
| 13 | +</svg> |
| 14 | +<script> |
| 15 | +function startX(id, index) |
| 16 | +{ |
| 17 | + return document.getElementById(id).getStartPositionOfChar(index).x; |
| 18 | +} |
| 19 | + |
| 20 | +test(() => { |
| 21 | + assert_approx_equals(startX("absolute", 0), 10, 0.01); |
| 22 | + assert_approx_equals(startX("absolute", 1), 100, 0.01); |
| 23 | + assert_approx_equals(startX("absolute", 2), 200, 0.01); |
| 24 | +}, "Absolute x positions are not moved by textLength spacing"); |
| 25 | + |
| 26 | +test(() => { |
| 27 | + assert_approx_equals(startX("single", 0), 10, 0.01); |
| 28 | + assert_approx_equals(startX("single", 1), 150, 0.01); |
| 29 | + assert_approx_equals(startX("single", 2), 290, 0.01); |
| 30 | +}, "textLength spacing is distributed between the characters of a single chunk"); |
| 31 | + |
| 32 | +test(() => { |
| 33 | + const advance = document.getElementById("reference").getComputedTextLength(); |
| 34 | + // Each emoji is a surrogate pair. Spacing goes between the three characters, not the six code units. |
| 35 | + const spacing = (300 - 3 * advance) / 2; |
| 36 | + assert_approx_equals(startX("onPath", 2) - startX("onPath", 0), advance + spacing, 0.5); |
| 37 | + assert_approx_equals(startX("onPath", 4) - startX("onPath", 0), 2 * (advance + spacing), 0.5); |
| 38 | +}, "textLength spacing on a path counts characters, not code units"); |
| 39 | + |
| 40 | +test(() => { |
| 41 | + // The x values are the natural advances. The whole element scales to half, like without the x list. |
| 42 | + const text = document.getElementById("glyphs"); |
| 43 | + for (let i = 0; i < 4; ++i) { |
| 44 | + const extent = text.getExtentOfChar(i); |
| 45 | + assert_approx_equals(extent.x, 25 * i, 0.01, `character ${i} x`); |
| 46 | + assert_approx_equals(extent.width, 25, 0.01, `character ${i} width`); |
| 47 | + } |
| 48 | +}, "textLength with lengthAdjust=spacingAndGlyphs scales the whole element when x is a list"); |
| 49 | +</script> |
0 commit comments