diff options
Diffstat (limited to 'testing/web-platform/tests/svg/text/scripted')
9 files changed, 343 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/text/scripted/getextentofchar.html b/testing/web-platform/tests/svg/text/scripted/getextentofchar.html new file mode 100644 index 0000000000..1a6bb32b4b --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/getextentofchar.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>SVGTextContentElement.getExtentOfChar</title> +<link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getExtentOfChar"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<svg width="800" height="600"> +<text><tspan id="tspan1" x="50 150 100" y="100">abc</tspan></text> +</svg> + +<script> +test(() => { + const element = document.querySelector('#tspan1'); + assert_equals(element.getNumberOfChars(), 3); + assert_equals(element.getExtentOfChar(0).x, 50); + assert_equals(element.getExtentOfChar(1).x, 150); + assert_equals(element.getExtentOfChar(2).x, 100); +}, 'Multiple chunks in a tspan'); +</script> diff --git a/testing/web-platform/tests/svg/text/scripted/getrotationofchar.html b/testing/web-platform/tests/svg/text/scripted/getrotationofchar.html new file mode 100644 index 0000000000..3bacd47176 --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/getrotationofchar.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>SVGTextContentElement.getRotationOfChar</title> +<link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getRotationOfChar"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<svg id="container" width="800" height="300"></svg> +<script> +function createSVGElement(localPart, attributes, textOrElement) { + const element = document.createElementNS('http://www.w3.org/2000/svg', localPart); + for (let name in attributes) { + element.setAttribute(name, attributes[name]); + } + if (typeof(textOrElement) == 'string') + element.textContent = textOrElement; + else if (textOrElement instanceof Element) + element.appendChild(textOrElement); + else if (textOrElement !== undefined) + throw new TypeError('The third argument should be a string or an Element'); + return element; +} + +function normalize(rotation) { + return rotation - 360 * Math.floor(rotation / 360); +} + +function normalizedRotation(element, index) { + return normalize(element.getRotationOfChar(index)); +} + +const container = document.querySelector('#container'); +['horizontal-tb', 'vertical-rl', 'vertical-lr', 'sideways-rl', 'sideways-lr'].forEach(mode => { + const isHorizontal = mode == 'horizontal-tb'; + const isVertical = mode == 'vertical-rl' || mode == 'vertical-lr'; + const sidewaysDelta = 90 * ((mode == 'sideways-rl') - (mode == 'sideways-lr')); + container.style.writingMode = mode; + + test(() => { + container.style.textOrientation = 'mixed'; + const element = container.appendChild(createSVGElement('text', {}, ' M月X')); + assert_equals(element.getRotationOfChar(0), isVertical ? 90 : sidewaysDelta, 'M'); + assert_equals(element.getRotationOfChar(1), sidewaysDelta, '月'); + assert_equals(element.getRotationOfChar(2), isVertical ? 90 : sidewaysDelta, 'X'); + }, `'text-orientation: mixed' - ${mode}`); + + test(() => { + container.style.textOrientation = 'upright'; + const element = container.appendChild(createSVGElement('text', {}, 'T火')); + assert_equals(element.getRotationOfChar(0), sidewaysDelta, 'T'); + assert_equals(element.getRotationOfChar(1), sidewaysDelta, '火'); + }, `'text-orientation: upright' - ${mode}`); + + test(() => { + container.style.textOrientation = 'sideways'; + const element = container.appendChild(createSVGElement('text', {}, 'W水')); + assert_equals(element.getRotationOfChar(0), isVertical ? 90 : sidewaysDelta, 'W'); + assert_equals(element.getRotationOfChar(1), isVertical ? 90 : sidewaysDelta, '水'); + }, `'text-orientation: sideways' - ${mode}`); + + test(() => { + container.style.textOrientation = 'mixed'; + const element = container.appendChild( + createSVGElement('text', {rotate: '0 180.5 360 365 -10'}, 't木cde')); + const shift = isHorizontal ? 0 : 90 * (mode == 'sideways-rl' || isVertical) + 270 * (mode == 'sideways-lr'); + assert_equals(normalizedRotation(element, 0), 0 + shift, 't'); + assert_equals(normalizedRotation(element, 1), 180.5 + sidewaysDelta, '木'); + assert_equals(normalizedRotation(element, 2), 0 + shift, 'c'); + assert_equals(normalizedRotation(element, 3), 5 + shift, 'd'); + assert_equals(normalizedRotation(element, 4), normalize(350 + shift), 'e'); + }, `Rotation attribute - ${mode}`); + + test(() => { + container.style.textOrientation = 'mixed'; + container.appendChild(createSVGElement('path', {id: 'path1', d: 'M 40 40 L 200 200'})); + const element = container.appendChild( + createSVGElement('text', {rotate: '0 0 25'}, + createSVGElement('textPath', {href: '#path1'}, 'F金r'))); + const shift = (mode == 'sideways-lr') ? 180 : 0; + assert_equals(normalizedRotation(element, 0), 45 + shift, 'F'); + assert_equals(normalizedRotation(element, 1), isVertical ? 315 : 45 + shift, '金'); + assert_equals(normalizedRotation(element, 2), 45 + 25 + shift, 'r'); + }, `<textPath> - ${mode}`); +}); +</script> diff --git a/testing/web-platform/tests/svg/text/scripted/getstartpositionofchar-dominant-baseline.html b/testing/web-platform/tests/svg/text/scripted/getstartpositionofchar-dominant-baseline.html new file mode 100644 index 0000000000..7ecfd7848a --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/getstartpositionofchar-dominant-baseline.html @@ -0,0 +1,49 @@ +<meta charset="utf-8"> +<title>SVGTextContentElement.getStartPositionOfChar and dominant-baseline</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> + +<style> +text { + font-family: Arial; + font-size: 60px; + fill: #ffff00; +} +</style> +<svg> + <defs> + <path id="path" d="M20 80h120"></path> + </defs> + <g> + <text> + <textPath id="textPath1" href="#path">Test</textPath> + <tspan id="tspan1" x="0" y="100">Test</tspan> + </text> + </g> + <g transform="translate(140 0)"> + <text dominant-baseline="middle"> + <textPath id="textPath2" href="#path">Test</textPath> + <tspan id="tspan2" x="0" y="100">Test</tspan> + </text> + </g> +</svg> + +<script> +function $(sel) { return document.querySelector(sel); } + +test(() => { + assert_equals($('#textPath1').getStartPositionOfChar(0).y, + $('#textPath2').getStartPositionOfChar(0).y); + assert_equals($('#textPath1').getEndPositionOfChar(0).y, + $('#textPath2').getEndPositionOfChar(0).y); +}, 'textPath: get*PositionOfChar().y should not depend on dominant-baseline'); + +test(() => { + assert_equals($('#tspan1').getStartPositionOfChar(0).y, + $('#tspan2').getStartPositionOfChar(0).y); + assert_equals($('#tspan1').getEndPositionOfChar(0).y, + $('#tspan2').getEndPositionOfChar(0).y); +}, 'tspan: get*PositionOfChar().y should not depend on dominant-baseline'); +</script> + diff --git a/testing/web-platform/tests/svg/text/scripted/getsubstringlength-emoji-ligatures.html b/testing/web-platform/tests/svg/text/scripted/getsubstringlength-emoji-ligatures.html new file mode 100644 index 0000000000..2b6061be5d --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/getsubstringlength-emoji-ligatures.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>SVGTextContentElement.getSubStringLength on Emoji with ligatures</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<svg> + <g font-size="50" text-rendering="geometricPrecision"> + <text y="50">👦</text> + <text y="100">👨👩👧👦</text> + <text y="50" x="100">👨</text> + <text y="100" x="100">👩🏽🌾</text> + <text y="50" x="150">👨👦</text> + <text y="100" x="150">👱🏽♂️</text> + <text y="50" x="200">🎅🏽</text> + </g> +</svg> +<script> +test(function() { + for (const element of Array.from(document.getElementsByTagName('text'))) { + const subStringLength = element.getSubStringLength(0, element.getNumberOfChars()); + const bboxWidth = element.getBBox().width; + // Expect the value computed by getSubStringLength() to roughly + // match the value computed for the bbox. + assert_approx_equals(subStringLength, bboxWidth, 1); + } +}); +</script> diff --git a/testing/web-platform/tests/svg/text/scripted/lengthadjust.html b/testing/web-platform/tests/svg/text/scripted/lengthadjust.html new file mode 100644 index 0000000000..51b06675b0 --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/lengthadjust.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<title>lengthAdjust content/IDL attribute</title> +<link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextElementLengthAdjustAttribute"> +<link rel="help" href="https://svgwg.org/svg2-draft/text.html#__svg__SVGTextContentElement__getComputedTextLength"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<svg> + <text x="0" y="215" textLength="200">Stretched text</text> + <text x="0" y="215" textLength="200">Stretched text</text> +</svg> + +<script> +test(() => { + const text = document.querySelectorAll('text')[0]; + assert_equals(text.getAttribute('lengthAdjust'), null); + assert_equals(text.lengthAdjust.baseVal, SVGTextContentElement.LENGTHADJUST_SPACING); + assert_equals(text.textLength.baseVal.value, 200); + let lastLength = text.getComputedTextLength(); + assert_between_exclusive(lastLength, 0, 200); + + text.setAttribute('lengthAdjust', 'spacingAndGlyphs'); + assert_equals(text.lengthAdjust.baseVal, SVGTextContentElement.LENGTHADJUST_SPACINGANDGLYPHS); + assert_equals(text.textLength.baseVal.value, 200); + assert_greater_than(text.getComputedTextLength(), lastLength); +}, 'Tests dynamic updates of the "lengthAdjust" content attribute'); + +test(() => { + const text = document.querySelectorAll('text')[1]; + assert_equals(text.getAttribute('lengthAdjust'), null); + assert_equals(text.lengthAdjust.baseVal, SVGTextContentElement.LENGTHADJUST_SPACING); + assert_equals(text.textLength.baseVal.value, 200); + let lastLength = text.getComputedTextLength(); + assert_between_exclusive(lastLength, 0, 200); + + text.lengthAdjust.baseVal = SVGTextContentElement.LENGTHADJUST_SPACINGANDGLYPHS; + assert_equals(text.getAttribute('lengthAdjust'), 'spacingAndGlyphs'); + assert_equals(text.lengthAdjust.baseVal, SVGTextContentElement.LENGTHADJUST_SPACINGANDGLYPHS); + assert_equals(text.textLength.baseVal.value, 200); + assert_greater_than(text.getComputedTextLength(), lastLength); +}, 'Tests dynamic updates of the "lengthAdjust" IDL attribute'); +</script> diff --git a/testing/web-platform/tests/svg/text/scripted/reattach-crash.html b/testing/web-platform/tests/svg/text/scripted/reattach-crash.html new file mode 100644 index 0000000000..56929489c6 --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/reattach-crash.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Chrome had a crash on dynamic style changes on <text></title> +<link rel="help" href="http://crbug.com/1385936"> +<style> +#el9 { + background-color: blue; +} +.c3 { + transition-duration:0.2s; + background-color: red !important; + content: ''; +} +</style> +<script> +onload = function() { + document.body.offsetTop; + el9.setAttribute('class', 'c3'); + document.body.offsetTop; +}; +</script> +<body> +<svg xmlns="http://www.w3.org/2000/svg"><text id="el9"></text></svg> +</body> diff --git a/testing/web-platform/tests/svg/text/scripted/textlength-inconsistent.svg b/testing/web-platform/tests/svg/text/scripted/textlength-inconsistent.svg new file mode 100644 index 0000000000..ca899de349 --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/textlength-inconsistent.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> + <title>Inconsistent two 'textLength' attributes</title> + <html:script src="/resources/testharness.js"/> + <html:script src="/resources/testharnessreport.js"/> + <html:link rel="help" href="https://crbug.com/1399351"/> + <g> + <text textLength="150" x="10" y="100"> + <tspan textLength="300">Scalable Vector</tspan> + </text> + </g> + <html:script> +test(() => { + const tspan = document.querySelector('tspan'); + assert_less_than(tspan.getStartPositionOfChar(0).x, + tspan.getStartPositionOfChar(1).x); +}, 'The first characters should be on the left of the second character.'); + </html:script> +</svg> diff --git a/testing/web-platform/tests/svg/text/scripted/textpath-textlength-text-anchor-001.tentative.svg b/testing/web-platform/tests/svg/text/scripted/textpath-textlength-text-anchor-001.tentative.svg new file mode 100644 index 0000000000..6c4f50fe87 --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/textpath-textlength-text-anchor-001.tentative.svg @@ -0,0 +1,54 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> + <title>'textLength' on <textPath> with 'text-anchor' adjustments</title> + <html:script src="/resources/testharness.js"/> + <html:script src="/resources/testharnessreport.js"/> + <html:link rel="stylesheet" href="/fonts/ahem.css"/> + <html:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextPathElement"/> + <html:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextElementTextLengthAttribute"/> + <defs> + <path id="p" d="M0,25h100"/> + </defs> + <g font-family="Ahem" font-size="20px"> + <text expected-x="0"> + <textPath href="#p" textLength="25" lengthAdjust="spacing" + text-anchor="start">XXXX</textPath> + </text> + <text expected-x="0" transform="translate(0 50)"> + <textPath href="#p" textLength="25" lengthAdjust="spacingAndGlyphs" + text-anchor="start">XXXX</textPath> + </text> + + <text expected-x="37.5"> + <textPath href="#p" textLength="25" lengthAdjust="spacing" + text-anchor="middle" startOffset="50%">XXXX</textPath> + </text> + <text expected-x="37.5" transform="translate(0 50)"> + <textPath href="#p" textLength="25" lengthAdjust="spacingAndGlyphs" + text-anchor="middle" startOffset="50%">XXXX</textPath> + </text> + + <text expected-x="75"> + <textPath href="#p" textLength="25" lengthAdjust="spacing" + text-anchor="end" startOffset="100%">XXXX</textPath> + </text> + <text expected-x="75" transform="translate(0 50)"> + <textPath href="#p" textLength="25" lengthAdjust="spacingAndGlyphs" + text-anchor="end" startOffset="100%">XXXX</textPath> + </text> + </g> + <script> + test(t => { + let texts = Array.from(document.getElementsByTagName('text')); + for (let text of texts) { + let bbox = text.getBBox(); + let textpath = text.firstElementChild; + let description = 'text-anchor=' + textpath.getAttribute('text-anchor'); + assert_approx_equals(bbox.x, parseFloat(text.getAttribute('expected-x')), 0.5, + 'x, ' + description); + assert_approx_equals(bbox.width, 25, 0.5, + 'width, ' + description); + } + }); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/text/scripted/transform-dynamic-update.html b/testing/web-platform/tests/svg/text/scripted/transform-dynamic-update.html new file mode 100644 index 0000000000..c1ac9197a5 --- /dev/null +++ b/testing/web-platform/tests/svg/text/scripted/transform-dynamic-update.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<link rel="help" href="http://crbug.com/1266389"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + +<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> +<text id="text" x="200" y="200">123</text> +<text id="ref" x="200" y="200" + transform="scale(10)">123</text> +</svg> + +<script> +test(() => { + const referenceBox = document.querySelector('#ref').getBBox(); + const text = document.querySelector('#text'); + + // Make the transform of #text same as #ref. + text.style.transform = 'scale(10)'; + + const box = text.getBBox(); + assert_approx_equals(box.y, referenceBox.y, 0.8); + assert_approx_equals(box.height, referenceBox.height, 0.8); +}, 'Dynamic update of transform CSS property'); +</script> +</body> |
