Bug 655877 - Part 43: Tests for new SVG text support. r=jwatt

This commit is contained in:
Cameron McCormack 2013-02-11 17:22:19 +11:00
parent e7ff8972aa
commit 2c48138161
277 changed files with 3714 additions and 1 deletions

View File

@ -72,7 +72,12 @@ MOCHITEST_FILES = \
test_SVGxxxListIndexing.xhtml \
test_switch.xhtml \
switch-helper.svg \
test_text.html \
test_text_scaled.html \
test_text_selection.html \
text-helper.svg \
text-helper-scaled.svg \
text-helper-selection.svg \
test_transform.xhtml \
test_valueAsString.xhtml \
test_valueLeaks.xhtml \

View File

@ -0,0 +1,142 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=655877
-->
<head>
<title>Test for Bug 655877</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=655877">Mozilla Bug 655877</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<iframe id="svg" src="text-helper-scaled.svg"></iframe>
<pre id="test">
<script class="testbody" type="application/javascript">
SimpleTest.waitForExplicitFinish();
function runTest()
{
var doc = $("svg").contentWindow.document;
var text1 = doc.getElementById("text1");
var text2 = doc.getElementById("text2");
var charWidth = text1.getSubStringLength(0, 1);
var epsilon = 0.001;
function isClose(a, b, str)
{
ok(Math.abs(a - b) < epsilon, str + " - " + b + " should be close to " + a);
}
function isPoint(pt1, x, y, str)
{
is(pt1.x, x, str + " x");
is(pt1.y, y, str + " y");
}
function isPointCloseX(pt1, x, y, str)
{
isClose(pt1.x, x, str + " x");
is(pt1.y, y, str + " y");
}
function ymost(r)
{
return r.y + r.height;
}
function xmost(r)
{
return r.x + r.width;
}
var p = text1.getStartPositionOfChar(0);
// Simple horizontal string
is(text1.getNumberOfChars(), 3, "text1 length");
ok(text1.getComputedTextLength() > 0, "text1 measured length");
is(text1.getComputedTextLength(), text1.getSubStringLength(0, 3), "text1 substring length");
isPointCloseX(text1.getStartPositionOfChar(0), 10, 400, "text1 char 0 start offset");
isPointCloseX(text1.getStartPositionOfChar(1), 10 + charWidth, 400, "text1 char 1 start offset");
isPointCloseX(text1.getStartPositionOfChar(2), 10 + 2*charWidth, 400, "text1 char 2 start offset");
isPointCloseX(text1.getEndPositionOfChar(0), 10 + charWidth, 400, "text1 char 0 end offset");
isPointCloseX(text1.getEndPositionOfChar(1), 10 + 2*charWidth, 400, "text1 char 1 end offset");
isPointCloseX(text1.getEndPositionOfChar(2), 10 + 3*charWidth, 400, "text1 char 2 end offset");
is(text1.getExtentOfChar(0).x, 10, "text1 char 0 extent x");
is(text1.getExtentOfChar(0).width, text1.getSubStringLength(0, 1), "text1 char 0 extent width");
ok(text1.getExtentOfChar(0).y < 400, "text1 char 0 extent y");
ok(ymost(text1.getExtentOfChar(0)) > 400, "text1 char 0 extent height");
isClose(text1.getExtentOfChar(1).x, 10 + charWidth, "text1 char 1 extent x");
is(text1.getExtentOfChar(1).width, text1.getSubStringLength(0, 1), "text1 char 1 extent width");
is(text1.getExtentOfChar(1).y, text1.getExtentOfChar(0).y, "text1 char 0/1 extent y");
is(text1.getExtentOfChar(1).height, text1.getExtentOfChar(0).height, "text1 char 0/1 extent height");
is(text1.getExtentOfChar(2).x, 10 + 2*charWidth, "text1 char 2 extent x");
is(text1.getExtentOfChar(2).width, text1.getSubStringLength(0, 1), "text1 char 2 extent width");
is(text1.getExtentOfChar(2).y, text1.getExtentOfChar(0).y, "text1 char 0/2 extent y");
is(text1.getExtentOfChar(2).height, text1.getExtentOfChar(0).height, "text1 char 0/2 extent height");
is(text1.getRotationOfChar(0), 0, "text1 char 0 rotation");
is(text1.getRotationOfChar(1), 0, "text1 char 0 rotation");
is(text1.getRotationOfChar(2), 0, "text1 char 0 rotation");
p.x = 10 + 0.1;
p.y = 400;
is(text1.getCharNumAtPosition(p), 0, "text1 finding char 0 left edge");
p.x = 10 + charWidth - 0.1;
is(text1.getCharNumAtPosition(p), 0, "text1 finding char 0 on right");
p.x = 10 - 0.1;
is(text1.getCharNumAtPosition(p), -1, "text1 finding no char on left");
p.x = 10 + 0.1;
p.y = text1.getExtentOfChar(0).y - 0.1;
is(text1.getCharNumAtPosition(p), -1, "text1 finding no char on top");
p.y = text1.getExtentOfChar(0).y + 0.1;
is(text1.getCharNumAtPosition(p), 0, "text1 finding char 0 top edge");
p.x = 10 + 3*charWidth - 0.1;
is(text1.getCharNumAtPosition(p), 2, "text1 finding char 2 top edge");
p.x = 10 + 3*charWidth + 0.1;
is(text1.getCharNumAtPosition(p), -1, "text1 finding no char on right");
// Text along a thin rectangle path
charWidth = text2.getSubStringLength(0, 1);
is(text2.getNumberOfChars(), 26, "text2 length");
ok(text2.getComputedTextLength() > 0, "text2 measured length");
is(text2.getComputedTextLength(), text2.getSubStringLength(0, 26), "text2 substring length");
// character 12 should be on the bottom side
is(text2.getStartPositionOfChar(12).y, 860, "text2 char 12 start offset");
is(text2.getEndPositionOfChar(12).y, 860, "text2 char 12 end offset");
ok(text2.getExtentOfChar(12).y < 860, "text2 char 12 extent y");
ok(ymost(text2.getExtentOfChar(12)) > 860, "text2 char 12 extent height");
is(text2.getRotationOfChar(12), 180, "text2 char 12 rotation");
p.x = text2.getExtentOfChar(12).x + 0.1;
p.y = ymost(text2.getExtentOfChar(12)) - 0.1;
is(text2.getCharNumAtPosition(p), 12, "text2 finding char 12");
// This next test is tricky. The glyph for character 3 may overlap from the above
// but character 12 wins because it's the last to render
p.y = text2.getExtentOfChar(12).y + 0.1;
is(text2.getCharNumAtPosition(p), 12, "text2 finding last rendered char");
}
function runTests() {
runTest();
var doc = $("svg").contentWindow.document;
doc.getElementById("g").setAttribute("transform", "rotate(90 200 200)");
runTest();
SimpleTest.finish();
}
window.addEventListener("load", runTests, false);
</script>
</pre>
</body>
</html>

View File

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=655877
-->
<head>
<title>Test for Bug 655877</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=655877">Mozilla Bug 655877</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<iframe src="text-helper-selection.svg" width="400" height="300"></iframe>
<pre id="test">
<script class="testbody" type="application/javascript">
SimpleTest.waitForExplicitFinish();
var svg, doc, win, text, dragstart, dragend;
function drag(fromX, fromY, toX, toY, show)
{
synthesizeMouse(doc.documentElement, fromX, fromY, { type: "mousemove" }, win);
synthesizeMouse(doc.documentElement, fromX, fromY, { type: "mousedown" }, win);
synthesizeMouse(doc.documentElement, toX, toY, { type: "mousemove" }, win);
synthesizeMouse(doc.documentElement, toX, toY, { type: "mouseup" }, win);
if (show) {
dragstart.setAttribute("cx", fromX);
dragstart.setAttribute("cy", fromY);
dragstart.setAttribute("r", "4");
dragend.setAttribute("cx", toX);
dragend.setAttribute("cy", toY);
dragend.setAttribute("r", "4");
}
}
function click(x, y)
{
synthesizeMouse(doc.documentElement, x, y, { type: "mousemove" }, win);
synthesizeMouse(doc.documentElement, x, y, { type: "mousedown" }, win);
synthesizeMouse(doc.documentElement, x, y, { type: "mouseup" }, win);
}
function selection_is(s, text)
{
is(win.getSelection().toString(), s, text);
}
function deselect()
{
// Click outside text to deselect.
click(1, 1);
selection_is("", "deselecting by clicking outside text");
}
function testSelection()
{
svg = document.getElementsByTagName("iframe")[0];
doc = svg.contentDocument;
win = svg.contentWindow;
dragstart = doc.getElementById("dragstart");
dragend = doc.getElementById("dragend");
var text = doc.getElementsByTagName("text");
// Display all the <text> elements.
var style = doc.getElementsByTagName("style")[0];
style.parentNode.removeChild(style);
// Drag to select the entire text element.
drag(101, 50, 99 + text[0].getComputedTextLength(), 50);
selection_is("hello there", "selecting entire simple text");
// Click within the text to deselect.
click(101, 50);
selection_is("", "deselecting by clicking on text");
// Drag to select part of a text element.
drag(101, 50, 99 + text[0].getSubStringLength(0, 5), 50);
selection_is("hello", "selecting part of simple text");
deselect();
// Drag from left of the text to the right of the text to select it.
drag(90, 50, 110 + text[0].getComputedTextLength(), 50);
selection_is("hello there", "selecting entire simple text by dragging around it");
deselect();
// Drag above the text to select part of it.
var bbox1 = text[0].getBBox();
drag(101 + text[0].getSubStringLength(0, 6), bbox1.y - 10, 101 + text[0].getSubStringLength(0, 9), bbox1.y - 10);
selection_is("the", "selecting part of simple text by dragging above it");
deselect();
// Drag between the first and second texts, but closer to the first.
var bbox2 = text[1].getBBox();
var mid = (bbox1.y + bbox1.height + bbox2.y) / 2;
drag(101, mid - 10, 99 + text[0].getSubStringLength(0, 2), mid - 10);
selection_is("he", "selecting closer text above");
deselect();
// Drag between the first and second texts, but closer to the second.
drag(101, mid + 10, 99 + text[1].getSubStringLength(0, 2), mid + 10);
selection_is("to", "selecting closer text below");
deselect();
// Drag starting in the first text and ending in the second.
drag(101 + text[0].getSubStringLength(0, 6), 50, 99 + text[1].getSubStringLength(0, 2), 100);
selection_is("there to", "selecting from first to second text");
deselect();
// Select across positioned glyphs.
drag(99 + text[2].getSubStringLength(3, 1), 150, 201, 150);
selection_is("abcd", "selecting across positioned glyphs");
deselect();
// Select bidi text, from the left of the "א" to the left of the "b".
drag(text[3].getExtentOfChar(0).x + 1, 200, text[3].getExtentOfChar(4).x + 1, 200);
selection_is("בגa", "selecting bidi text");
deselect();
// Select transformed text.
drag(101, 250, 99 + text[4].getSubStringLength(0, 6) / 2, 250);
selection_is("squash");
deselect();
SimpleTest.finish();
}
function runTest()
{
SpecialPowers.pushPrefEnv({ set: [['svg.text.css-frames.enabled', true]] },
testSelection);
}
if (/Android/.test(navigator.userAgent)) {
ok(true, "No need to test text selection with the mouse on Android.");
SimpleTest.finish();
} else {
window.addEventListener("load", runTest, false);
}
</script>
</pre>
</body>
</html>

View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3000" height="2000">
<g id="g" style="font: 400px monospace">
<text id="text1" x="10" y="400">abc</text>
<path id="MyPath" d="M 5 800 h 2000 v 60 h -2000 z" stroke="red" fill="none"/>
<text id="text2"><textPath xlink:href="#MyPath">abcdefghijklmnopqrstuvwxyz</textPath></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 396 B

View File

@ -0,0 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"
style="font: 24px monospace">
<!-- Start with all text elements not displayed, so that we can flip
the CSS text frames pref and have the frames reconstructed. -->
<style>
text { display: none }
</style>
<!-- We need these two rects so that getBoundingClientRect of the <svg> does
not just return the region covered by the <text>, which would result in
the synthesizeMouse calls using the wrong positions. We don't use one
big rect because that could interfere with text selection when dragging
outside the bounds of text elements. -->
<rect width="10" height="10" fill="white"/>
<rect x="350" y="250" width="10" height="10" fill="white"/>
<text x="100" y="50">hello there</text>
<text x="100" y="100">to you all!</text>
<text x="200" y="150">abc<tspan x="100" dy="10 -10">def</tspan></text>
<text x="100" y="200">אבגabc</text>
<text x="100" y="250" transform="scale(0.5,1)translate(100)">squashed</text>
<!-- These two circles are just used for debugging the test; passing true
as the last argument to drag() will place these circles at the drag
start and end points. -->
<circle id="dragstart" fill="blue"/>
<circle id="dragend" fill="red"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Reference for changes to the IDs in the document causing textPath references to update</title>
<defs>
<path id="p1" d="M 100,200 h 200"/>
</defs>
<text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text>
</svg>

After

Width:  |  Height:  |  Size: 462 B

View File

@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
onload="startTest()" class="reftest-wait">
<title>Test for changes to the IDs in the document causing textPath references to update</title>
<defs>
<path id="p1" d="M 100,100 h 200"/>
<path id="p1" d="M 100,200 h 200"/>
</defs>
<text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text>
<script>
function startTest() {
window.addEventListener("MozReftestInvalidate", doTest, false);
// in case we're not in the reftest harness
setTimeout(doTest, 5000);
}
function doTest() {
document.getElementsByTagName("path")[0].removeAttribute("id");
document.documentElement.removeAttribute("class");
}
</script>
</svg>

After

Width:  |  Height:  |  Size: 911 B

View File

@ -0,0 +1,14 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Reference for changes to the IDs in the document causing textPath references to update</title>
<defs>
<path id="p1" d="M 100,100 h 200"/>
</defs>
<text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text>
</svg>

After

Width:  |  Height:  |  Size: 462 B

View File

@ -0,0 +1,28 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
onload="startTest()" class="reftest-wait" id="p1">
<title>Test for changes to the IDs in the document causing textPath references to update</title>
<defs>
<path id="p1" d="M 100,100 h 200"/>
</defs>
<text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text>
<script>
function startTest() {
window.addEventListener("MozReftestInvalidate", doTest, false);
// in case we're not in the reftest harness
setTimeout(doTest, 5000);
}
function doTest() {
document.documentElement.removeAttribute("id");
document.documentElement.removeAttribute("class");
}
</script>
</svg>

After

Width:  |  Height:  |  Size: 863 B

View File

@ -0,0 +1,22 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="reftest-wait">
<title>Testing that dynamic changes to the text element for a given ID are reflected in 'use'</title>
<rect width="100%" height="100%" fill="lime"/>
<text id="t1" x="100" y="100" fill="lime" style="font: 16px sans-serif">hello <tspan fill="red">there</tspan></text>
<use y="100" xlink:href="#t1"/>
<script>
function test() {
document.getElementsByTagName("tspan")[0].style.fill = "lime";
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", test, false);
</script>
</svg>

After

Width:  |  Height:  |  Size: 792 B

View File

@ -13,6 +13,9 @@ include filters/reftest.list
# smil / animation tests
include smil/reftest.list
# text tests
include text/reftest.list
# load only tests
include load-only/reftest.list
@ -108,12 +111,15 @@ skip-if(B2G) == dynamic-text-06.svg pass.svg
== dynamic-text-07.svg dynamic-text-07-ref.svg
== dynamic-text-08.svg dynamic-text-08-ref.svg
skip-if(B2G) == dynamic-textPath-01.svg dynamic-textPath-01-ref.svg
== dynamic-textPath-02.svg dynamic-textPath-02-ref.svg
== dynamic-textPath-03.svg dynamic-textPath-03-ref.svg
== dynamic-use-01.svg pass.svg
== dynamic-use-02.svg pass.svg
skip-if(B2G) == dynamic-use-03.svg pass.svg
skip-if(B2G) == dynamic-use-04.svg pass.svg
skip-if(B2G) == dynamic-use-05.svg pass.svg
== dynamic-use-06.svg pass.svg
== dynamic-use-07.svg pass.svg
random == dynamic-use-nested-01a.svg dynamic-use-nested-01-ref.svg
random == dynamic-use-nested-01b.svg dynamic-use-nested-01-ref.svg
== dynamic-use-remove-width.svg dynamic-use-remove-width-ref.svg
@ -274,7 +280,7 @@ HTTP(..) == text-gradient-04.svg text-gradient-04-ref.svg
# Tests for bug 546813: sanity-check using HTML text, then test SVG behavior.
skip-if(B2G) != text-language-00.xhtml text-language-00-ref.xhtml
skip-if(B2G) random-if(gtk2Widget) != text-language-01.xhtml text-language-01-ref.xhtml # Fails on Linux tryserver due to lack of CJK fonts.
fuzzy-if(OSX==10.8,46,26) == text-layout-01.svg text-layout-01-ref.svg
fuzzy-if(OSX==10.7,6,2) fuzzy-if(OSX==10.8,46,26) == text-layout-01.svg text-layout-01-ref.svg
== text-layout-02.svg text-layout-02-ref.svg
== text-layout-03.svg text-layout-03-ref.svg
== text-layout-04.svg text-layout-04-ref.svg
@ -282,6 +288,8 @@ fuzzy-if(OSX==10.8,46,26) == text-layout-01.svg text-layout-01-ref.svg
fuzzy-if(cocoaWidget&&layersGPUAccelerated,1,3) == text-layout-06.svg text-layout-06-ref.svg
== text-layout-07.svg text-layout-07-ref.svg
== text-scale-01.svg text-scale-01-ref.svg
HTTP(..) == text-scale-02.svg text-scale-02-ref.svg
HTTP(..) == text-scale-03.svg text-scale-03-ref.svg
== text-stroke-scaling-01.svg text-stroke-scaling-01-ref.svg
== stroke-dasharray-and-pathLength-01.svg pass.svg
== stroke-dasharray-and-text-01.svg stroke-dasharray-and-text-01-ref.svg

View File

@ -0,0 +1,11 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<linearGradient id="g" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="500" y2="500">
<stop stop-color="red"/>
<stop stop-color="yellow" offset="1"/>
</linearGradient>
<rect x="100" y="100" width="400" height="400" fill="url(#g)"/>
</svg>

After

Width:  |  Height:  |  Size: 417 B

View File

@ -0,0 +1,17 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../fonts/Ahem.ttf);
}
</style>
<linearGradient id="g" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="500" y2="500">
<stop stop-color="red"/>
<stop stop-color="yellow" offset="1"/>
</linearGradient>
<text x="100" y="420" style="font: 400px Ahem; fill: url(#g)">a</text>
</svg>

After

Width:  |  Height:  |  Size: 528 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="400" height="400" style="fill: none; font: 400px Ahem; stroke: black; stroke-width: 8px"/>
</svg>

After

Width:  |  Height:  |  Size: 288 B

View File

@ -0,0 +1,13 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../fonts/Ahem.ttf);
}
</style>
<text x="100" y="420" style="fill: none; font: 400px Ahem; stroke: black; stroke-width: 8px">a</text>
</svg>

After

Width:  |  Height:  |  Size: 374 B

View File

@ -0,0 +1,23 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<g style="font: 32px Ahem; fill: blue; white-space: pre">
<text x="20" y="100">one</text>
<text x="20" y="200">three</text>
<text x="20" y="150" text-decoration="line-through"> </text>
<text x="20" y="250" text-decoration="line-through"> </text>
</g>
<rect x="100" width="300" height="400" fill="white"/>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
<rect x="20" y="173" width="96" height="32"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 789 B

View File

@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<defs>
<clipPath id="c" x="0" y="0" width="600" height="400">
<rect width="100" height="400"/>
</clipPath>
</defs>
<g style="font: 32px Ahem; fill: blue; white-space: pre">
<text x="20" y="100" clip-path="url(#c)">one</text>
<text x="20" y="150" clip-path="url(#c)" style="text-decoration: line-through"> </text>
<g clip-path="url(#c)">
<text x="20" y="200">three</text>
<text x="20" y="250" style="text-decoration: line-through"> </text>
</g>
</g>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
<rect x="20" y="173" width="96" height="32"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 961 B

View File

@ -0,0 +1,19 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<g style="font: 32px Ahem; white-space: pre; fill: blue">
<text x="20" y="100">one</text>
<text x="20" y="150" style="text-decoration: line-through"> </text>
</g>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 585 B

View File

@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<defs>
<clipPath id="c" x="0" y="0" width="600" height="400">
<text x="20" y="100" style="font: 32px Ahem; white-space: pre">one</text>
<text x="20" y="150" style="font: 32px Ahem; white-space: pre; text-decoration: line-through"> </text>
</clipPath>
</defs>
<rect x="0" y="0" width="600" height="400" fill="blue" clip-path="url(#c)"/>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
</g>
<script>
window.addEventListener("MozReftestInvalidate", function() {
window.addEventListener("MozAfterPaint", function() {
document.documentElement.removeAttribute("class");
}, false);
}, false);
</script>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text><tspan display="none">xx</tspan>hello</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 342 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text>he<tspan display="none">xx</tspan>llo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 342 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text>hello<tspan display="none">xx</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 342 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<text x="100" y="100" font-family="sans-serif" dominant-baseline="central">hello <tspan font-size="48px">there</tspan></text>
</svg>

After

Width:  |  Height:  |  Size: 294 B

View File

@ -0,0 +1,15 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
<text x="100" y="100" font-family="sans-serif">hello <tspan font-size="48px">there</tspan></text>
<script>
function f() {
document.getElementsByTagName("text")[0].style.dominantBaseline = "central";
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", f, false);
</script>
</svg>

After

Width:  |  Height:  |  Size: 539 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<text x="100" y="100" style="font: 16px sans-serif">hello there</text>
</svg>

After

Width:  |  Height:  |  Size: 239 B

View File

@ -0,0 +1,15 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
<text x="100" y="100" style="font: 32px sans-serif"><tspan>hello</tspan> there</text>
<script>
function f() {
document.getElementsByTagName("text")[0].style.fontSize = "16px";
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", f, false);
</script>
</svg>

After

Width:  |  Height:  |  Size: 516 B

View File

@ -0,0 +1,13 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" style="font: 16px sans-serif">
<text x="100 150 200 250" y="50">34</text>
<text x="100 150 200 250" y="100">34</text>
<text x="100 150 200 250" y="150">1234</text>
<text x="200 250" y="200">34</text>
<text x="100 150 200 250 300 350" y="250">123456</text>
<text x="100 150 300 350" y="300">1256</text>
<text x="200 250" y="350">34</text>
</svg>

After

Width:  |  Height:  |  Size: 517 B

View File

@ -0,0 +1,55 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" style="font: 16px sans-serif">
<text x="100 150 200 250" y="50"><tspan>12</tspan>34</text>
<text x="100 150 200 250" y="100"><tspan display="none">12</tspan>34</text>
<text x="100 150 200 250" y="150">34</text>
<text x="100 150 200 250" y="200">34</text>
<text x="100 150 200 250 300 350" y="250"><tspan>12</tspan>56</text>
<text x="100 150 200 250 300 350" y="300"><tspan>12</tspan>56</text>
<text x="100 150 200 250" y="350"><tspan display="none"/>34</text>
<script>
function newTSpan(s) {
var e = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
e.textContent = s;
return e;
}
function f() {
window.removeEventListener("MozAfterPaint", f);
var t = document.getElementsByTagName("text");
var e;
t[0].removeChild(t[0].firstChild);
t[1].removeChild(t[1].firstChild);
e = newTSpan("12");
t[2].insertBefore(e, t[2].firstChild);
e = newTSpan("12");
e.setAttribute("display", "none");
t[3].insertBefore(e, t[3].firstChild);
e = newTSpan("34");
t[4].firstChild.appendChild(e);
e = newTSpan("34");
e.setAttribute("display", "none");
t[5].firstChild.appendChild(e);
e = newTSpan("12");
t[6].firstChild.appendChild(e);
setTimeout(function() {
document.documentElement.removeAttribute("class");
}, 0);
}
window.addEventListener("MozAfterPaint", f, false);
</script>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,33 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<defs>
<filter id="f" x="0" y="0" width="150%" height="100%" filterUnits="objectBoundingBox">
<feFlood flood-color="yellow" result="flood"/>
<feMerge>
<feMergeNode in="flood"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g style="font: 32px Ahem; fill: blue">
<rect x="20" y="74" width="96" height="32" filter="url(#f)"/>
<g filter="url(#f)">
<rect x="20" y="174" width="160" height="32"/>
</g>
</g>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
<rect x="20" y="73" width="144" height="32"/>
<rect x="20" y="173" width="160" height="32"/>
<rect x="20" y="173" width="240" height="32"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,40 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<defs>
<filter id="f1" x="20" y="73" width="144" height="32" filterUnits="userSpaceOnUse">
<feFlood flood-color="yellow" result="flood"/>
<feMerge>
<feMergeNode in="flood"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="f2" x="20" y="173" width="240" height="32" filterUnits="userSpaceOnUse">
<feFlood flood-color="yellow" result="flood"/>
<feMerge>
<feMergeNode in="flood"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g style="font: 32px Ahem; fill: blue">
<text x="20" y="100" filter="url(#f1)">one</text>
<g filter="url(#f2)">
<text x="20" y="200">three</text>
</g>
</g>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
<rect x="20" y="73" width="144" height="32"/>
<rect x="20" y="173" width="160" height="32"/>
<rect x="20" y="173" width="240" height="32"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,13 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<style>
text::before { content: "I said '" }
text::after { content: "'." }
tspan::before { content: "out " }
tspan::after { content: " to" }
</style>
<text x="100" y="100" style="font: 16px sans-serif">hello <tspan>there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 458 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="border: 8px solid black">there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 320 B

View File

@ -0,0 +1,35 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400">
<g style="font: 16px sans-serif">
<text x="100" y="40">hello there everyone</text>
<text x="100" y="60">hello there everyone</text>
<text x="100" y="80">hello there everyone</text>
<text x="100" y="100">hello there everyone</text>
<text x="100" y="120">hello there everyone</text>
<text x="100" y="140">hello there everyone</text>
<text x="100" y="160">hello there everyone</text>
<text x="100" y="180">hello there everyone</text>
<text x="100" y="200">hello there everyone</text>
<text x="100" y="220">hello there everyone</text>
<text x="100" y="240">hello there everyone</text>
<text x="100" y="260">hello there everyone</text>
<text x="100" y="280">hello there everyone</text>
<text x="400" y="40">hello there everyone</text>
<text x="400" y="60">hello there everyone</text>
<text x="400" y="80">hello there everyone</text>
<text x="400" y="100">hello there everyone</text>
<text x="400" y="120">hello there everyone</text>
<text x="400" y="140">hello there everyone</text>
<text x="400" y="160">hello there everyone</text>
<text x="400" y="180">hello there everyone</text>
<text x="400" y="200">hello there everyone</text>
<text x="400" y="220">hello there everyone</text>
<text x="400" y="240">hello there everyone</text>
<text x="400" y="260">hello there everyone</text>
<text x="400" y="280">hello there everyone</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,35 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400">
<g style="font: 16px sans-serif">
<text x="100" y="40">hello <tspan style="display: block">there</tspan> everyone</text>
<text x="100" y="60">hello <tspan style="display: list-item">there</tspan> everyone</text>
<text x="100" y="80">hello <tspan style="display: inline-block">there</tspan> everyone</text>
<text x="100" y="100">hello <tspan style="display: table">there</tspan> everyone</text>
<text x="100" y="120">hello <tspan style="display: inline-table">there</tspan> everyone</text>
<text x="100" y="140">hello <tspan style="display: table-row-group">there</tspan> everyone</text>
<text x="100" y="160">hello <tspan style="display: table-header-group">there</tspan> everyone</text>
<text x="100" y="180">hello <tspan style="display: table-footer-group">there</tspan> everyone</text>
<text x="100" y="200">hello <tspan style="display: table-row">there</tspan> everyone</text>
<text x="100" y="220">hello <tspan style="display: table-column-group">there</tspan> everyone</text>
<text x="100" y="240">hello <tspan style="display: table-column">there</tspan> everyone</text>
<text x="100" y="260">hello <tspan style="display: table-cell">there</tspan> everyone</text>
<text x="100" y="280">hello <tspan style="display: table-caption">there</tspan> everyone</text>
<text x="400" y="40" style="display: block">hello there everyone</text>
<text x="400" y="60" style="display: list-item">hello there everyone</text>
<text x="400" y="80" style="display: inline-block">hello there everyone</text>
<text x="400" y="100" style="display: table">hello there everyone</text>
<text x="400" y="120" style="display: inline-table">hello there everyone</text>
<text x="400" y="140" style="display: table-row-group">hello there everyone</text>
<text x="400" y="160" style="display: table-header-group">hello there everyone</text>
<text x="400" y="180" style="display: table-footer-group">hello there everyone</text>
<text x="400" y="200" style="display: table-row">hello there everyone</text>
<text x="400" y="220" style="display: table-column-group">hello there everyone</text>
<text x="400" y="240" style="display: table-column">hello there everyone</text>
<text x="400" y="260" style="display: table-cell">hello there everyone</text>
<text x="400" y="280" style="display: table-caption">hello there everyone</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<style>
text:first-letter { float: right }
</style>
<text x="100" y="100" style="font: 16px sans-serif">hello there everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 333 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="float: right">there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 309 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">abef</text>
</svg>

After

Width:  |  Height:  |  Size: 257 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">ab<a xmlns="data:,">cd</a>ef</text>
</svg>

After

Width:  |  Height:  |  Size: 281 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="margin: 20px">there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 309 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif; overflow: scroll">hello <tspan style="display: block; overflow: scroll">there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 347 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="padding: 20px">there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 310 B

View File

@ -0,0 +1,11 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<g style="font: 16px sans-serif">
<text x="100" y="40">hello there everyone</text>
<text x="100" y="60">hello there everyone</text>
<text x="100" y="80">hello there everyone</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 393 B

View File

@ -0,0 +1,11 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<g style="font: 16px sans-serif">
<text x="100" y="40">hello <tspan style="position: relative; left: 20px">there</tspan> everyone</text>
<text x="100" y="60">hello <tspan style="position: absolute; top: 0; left: 0">there</tspan> everyone</text>
<text x="100" y="80">hello <tspan style="position: fixed; top: 0; left: 0">there</tspan> everyone</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 562 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">hello there everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 273 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text>Hello.</text>
<text y="20">Goodbye.</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 322 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text style="white-space: pre-line; line-height: 20px; text-align: center">Hello.
Goodbye.</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 367 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif; text-align: center">hello there everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 293 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="text-shadow: 2px 2px 3px #000">there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 326 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="font-size: 24px">there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 312 B

View File

@ -0,0 +1,7 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
<text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="vertical-align: top; font-size: 24px">there</tspan> everyone</text>
</svg>

After

Width:  |  Height:  |  Size: 333 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="200">
<a xlink:href="data:," transform="translate(100,100)" style="font: 16px sans-serif">
<text>hello</text>
</a>
</svg>

After

Width:  |  Height:  |  Size: 351 B

View File

@ -0,0 +1,23 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<g style="font: 32px Ahem; fill: blue; white-space: pre">
<text x="20" y="100">one</text>
<text x="20" y="200">three</text>
<text x="20" y="150" text-decoration="line-through"> </text>
<text x="20" y="250" text-decoration="line-through"> </text>
</g>
<rect x="100" width="300" height="400" fill="white"/>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
<rect x="20" y="173" width="96" height="32"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 789 B

View File

@ -0,0 +1,29 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<defs>
<mask id="m" x="0" y="0" width="600" height="400">
<rect width="100" height="400" fill="white"/>
</mask>
</defs>
<g style="font: 32px Ahem; fill: blue; white-space: pre">
<text x="20" y="100" mask="url(#m)">one</text>
<text x="20" y="150" mask="url(#m)" style="text-decoration: line-through"> </text>
<g mask="url(#m)">
<text x="20" y="200">three</text>
<text x="20" y="250" style="text-decoration: line-through"> </text>
</g>
</g>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
<rect x="20" y="173" width="96" height="32"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 951 B

View File

@ -0,0 +1,19 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<g style="font: 32px Ahem; white-space: pre; fill: blue">
<text x="20" y="100">one</text>
<text x="20" y="150" style="text-decoration: line-through"> </text>
</g>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 585 B

View File

@ -0,0 +1,31 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
<style>
@font-face {
font-family: Ahem;
src: url(../../fonts/Ahem.ttf);
}
</style>
<defs>
<mask id="m" x="0" y="0" width="600" height="400">
<g style="font: 32px Ahem; white-space: pre; fill: white">
<text x="20" y="100">one</text>
<text x="20" y="150" style="text-decoration: line-through"> </text>
</g>
</mask>
</defs>
<rect x="0" y="0" width="600" height="400" fill="blue" mask="url(#m)"/>
<g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
<rect x="20" y="73" width="96" height="32"/>
</g>
<script>
window.addEventListener("MozReftestInvalidate", function() {
window.addEventListener("MozAfterPaint", function() {
document.documentElement.removeAttribute("class");
}, false);
}, false);
</script>
</svg>

After

Width:  |  Height:  |  Size: 1022 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor="end">אב</text>
<text x="300" text-anchor="end"><tspan visibility="hidden">אב</tspan>לגabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 425 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor='end'>אב<tspan x='300'>ל</tspan>גabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 365 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor="end">אב</text>
<text x="300" text-anchor="middle"><tspan visibility="hidden">אב</tspan>לגabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 428 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor='end'>אב<tspan x='300' text-anchor='middle'>ל</tspan>גabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 386 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor="end">he</text>
<text x="300" text-anchor="middle">llo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 383 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100">אב</text>
<text x="300" text-anchor="middle">גדה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 370 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300' text-anchor='middle'>ג</tspan>דה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 401 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end'>he<tspan x='300' text-anchor='middle'>l</tspan>lo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor="end">ab</text>
<text x="300" text-anchor="end">cde</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end'>ab<tspan x='300' direction='rtl' text-anchor='start'>c</tspan>de</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 395 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='90' dx='10' text-anchor='end'>ab<tspan x='280' dx='20' direction='rtl' text-anchor='start'>c</tspan>de</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 410 B

View File

@ -0,0 +1,11 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="110" text-anchor="end">ab</text>
<text x="290" text-anchor="end">c<tspan visibility="hidden">de</tspan></text>
<text x="320" text-anchor="end">de</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 461 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' dx='10' text-anchor='end'>ab<tspan x='300' dx='20 30' direction='rtl' text-anchor='start'>cd</tspan>e</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 414 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor="end">ab</text>
<text x="300" text-anchor="end">cde</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end'>ab<tspan x='300' direction='rtl' text-anchor='start'>c</tspan>de</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 395 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor='end'>אב<tspan x='300'>ל</tspan>גabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 365 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="90" dx="10" text-anchor='end'>אב<tspan x='280' dx='20'>ל</tspan>גabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor='end'>אב<tspan x='300' text-anchor='middle'>ל</tspan>גabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 386 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="90" dx='10' text-anchor='end'>אב<tspan x='280' dx='20' text-anchor='middle'>ל</tspan>גabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 401 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end'>he<tspan x='300' text-anchor='middle'>l</tspan>lo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300' text-anchor='middle'>ג</tspan>דה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 401 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='90' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='280' dx='20' text-anchor='middle'>ג</tspan>דה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 416 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='90' dx='10' text-anchor='end'>he<tspan x='280' dx='20' text-anchor='middle'>l</tspan>lo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 395 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 359 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300'>ג</tspan>דה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='90' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='280' dx='20'>ג</tspan>דה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 395 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='90' dx='10' text-anchor='end'>he<tspan x='280' dx='20'>l</tspan>lo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 374 B

View File

@ -0,0 +1,12 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<g fill="blue">
<text x="100" text-anchor="end">he</text>
<text x="300" text-anchor="end"><tspan fill="green">l</tspan>lo</text>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 441 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end' fill='blue'>he<tspan x='300' fill='green'>l</tspan>lo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 384 B

View File

@ -0,0 +1,11 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="110" text-anchor="end">אב</text>
<text x="320" text-anchor="end"><tspan visibility="hidden">אבל</tspan>גשabc</text>
<text x="270" text-anchor="end"><tspan visibility="hidden">אב</tspan>ל<tspan visibility="hidden">גשabc</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 554 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" dx="10" text-anchor='end'>אב<tspan x='300' dx='20 50'>לג</tspan>שabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 386 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" dx='10' text-anchor='end'>אב</text>
<text x='320' dx='0 0 0 30' text-anchor='middle'><tspan visibility="hidden">אב</tspan>לגשabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 452 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" dx='10' text-anchor='end'>אב<tspan x='300' dx='20 30' text-anchor='middle'>לג</tspan>שabc</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 407 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" dx='10' text-anchor="end">he</text>
<text x='300' dx='20 30' text-anchor='middle'>llo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 402 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" dx='10'>אב</text>
<text x='320' dx='0 0 0 30' text-anchor='middle'><tspan visibility="hidden">אב</tspan>גדה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 431 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='300' dx='20 30' text-anchor='middle'>גד</tspan>ה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 420 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' dx='10' text-anchor='end'>he<tspan x='300' dx='20 30' text-anchor='middle'>ll</tspan>o</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 399 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' dx='10' text-anchor='end'>he</text>
<text x='300' dx='20 30' text-anchor="end">llo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 399 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="110">אב</text>
<text x="320" dx="0 0 0 30"><tspan visibility="hidden">אב</tspan>גדה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 402 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='300' dx='20 30'>גד</tspan>ה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 399 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' dx='10' text-anchor='end'>he<tspan x='300' dx='20 30'>ll</tspan>o</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 378 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end'>he</text>
<text x='300' text-anchor='end'>llo</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View File

@ -0,0 +1,10 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x="100" text-anchor="end" direction="rtl">אב</text>
<text x="300" text-anchor="end" direction="rtl"><tspan visibility="hidden">אב</tspan>גדה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 456 B

View File

@ -0,0 +1,9 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300'>ג</tspan>דה</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 380 B

View File

@ -0,0 +1,17 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
<g transform="translate(100,100)" style="font: 16px sans-serif">
<text x='100' text-anchor='end'>he</text>
<text x='300' text-anchor='end'>llo</text>
</g>
<script>
var text = document.getElementsByTagName("text");
var range = document.createRange();
range.setStart(text[0].firstChild, 1);
range.setEnd(text[1].firstChild, 2);
window.getSelection().addRange(range);
</script>
</svg>

After

Width:  |  Height:  |  Size: 624 B

Some files were not shown because too many files have changed in this diff Show More