diff options
Diffstat (limited to 'testing/web-platform/tests/svg/text')
114 files changed, 4308 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/text/inheritance.svg b/testing/web-platform/tests/svg/text/inheritance.svg new file mode 100644 index 0000000000..1f4609d7ac --- /dev/null +++ b/testing/web-platform/tests/svg/text/inheritance.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="8000px"> + <title>Inheritance of text properties</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html"/> + <h:meta name="assert" content="text properties do not inherit."/> + <h:meta name="assert" content="text properties have expected initial values."/> + </metadata> + <g id="container"> + <g id="target"></g> + </g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/inheritance-testcommon.js"/> + <script><![CDATA[ + +assert_not_inherited('inline-size', 'auto', '10px'); +assert_not_inherited('shape-inside', 'auto', 'url("https://example/com/")'); +assert_not_inherited('shape-subtract', 'auto', 'url("https://example/com/")'); +assert_not_inherited('shape-margin', '0px', '10px'); +assert_inherited('text-anchor', 'start', 'middle'); +assert_not_inherited('text-decoration-fill', 'none', 'url("https://example/com/")'); +assert_not_inherited('text-decoration-stroke', 'none', 'url("https://example/com/")'); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/inline-size-invalid.svg b/testing/web-platform/tests/svg/text/parsing/inline-size-invalid.svg new file mode 100644 index 0000000000..19fd6f6472 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/inline-size-invalid.svg @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing inline-size with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#InlineSizeProperty"/> + <h:link rel="help" href="https://drafts.csswg.org/css-logical/#dimension-properties"/> + <h:meta name="assert" content="inline-size supports only the grammar 'auto | length-percentage'"/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("inline-size", "none"); +test_invalid_value("inline-size", "-10px"); +test_invalid_value("inline-size", "20"); +test_invalid_value("inline-size", "30deg"); +test_invalid_value("inline-size", "40px 50%"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/inline-size-valid.svg b/testing/web-platform/tests/svg/text/parsing/inline-size-valid.svg new file mode 100644 index 0000000000..3b01cd3448 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/inline-size-valid.svg @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing inline-size with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#InlineSizeProperty"/> + <h:link rel="help" href="https://drafts.csswg.org/css-logical/#dimension-properties"/> + <h:meta name="assert" content="inline-size supports the full grammar 'auto | length-percentage'"/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("inline-size", "auto"); + +test_valid_value("inline-size", "0", "0px"); +test_valid_value("inline-size", "10px"); +test_valid_value("inline-size", "20%"); +test_valid_value("inline-size", "calc(2em + 3ex)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/shape-inside-invalid.svg b/testing/web-platform/tests/svg/text/parsing/shape-inside-invalid.svg new file mode 100644 index 0000000000..15734576df --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/shape-inside-invalid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing shape-inside with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#ShapeInsideProperty"/> + <h:meta name="assert" content="shape-inside supports only the grammar 'auto | [ basic-shape | uri ]+'"/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("shape-inside", "none"); +test_invalid_value("shape-inside", "auto circle(10px at 20px -30px)"); +test_invalid_value("shape-inside", 'url("https://example.com/") auto'); + +test_invalid_value("shape-inside", "inset(25%)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/shape-inside-valid.svg b/testing/web-platform/tests/svg/text/parsing/shape-inside-valid.svg new file mode 100644 index 0000000000..5846917c00 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/shape-inside-valid.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing shape-inside with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#ShapeInsideProperty"/> + <h:meta name="assert" content="shape-inside supports the full grammar 'auto | [ basic-shape | uri ]+'"/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("shape-inside", "auto"); + +test_valid_value("shape-inside", "circle(10px at 20px -30px)"); +test_valid_value("shape-inside", "ellipse(10px 20px at -30px 40px)"); +test_valid_value("shape-inside", "polygon(10px 20px, -30px 40px, 50px 60px)"); + +test_valid_value("shape-inside", 'url("https://example.com/")'); + +test_valid_value("shape-inside", 'circle(10px at 20px -30px) url("https://example.com/") ellipse(10px 20px at -30px 40px)'); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/shape-margin-invalid.svg b/testing/web-platform/tests/svg/text/parsing/shape-margin-invalid.svg new file mode 100644 index 0000000000..0bf7470192 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/shape-margin-invalid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing shape-margin with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#ShapeMarginProperty"/> + <h:meta name="assert" content="shape-margin supports only the grammar 'length-percentage'"/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("shape-margin", "auto"); +test_invalid_value("shape-margin", "-10px"); +test_invalid_value("shape-margin", "20"); +test_invalid_value("shape-margin", "30deg"); +test_invalid_value("shape-margin", "40px 50%"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/shape-margin-valid.svg b/testing/web-platform/tests/svg/text/parsing/shape-margin-valid.svg new file mode 100644 index 0000000000..2ba50afb8a --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/shape-margin-valid.svg @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing shape-margin with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#ShapeMarginProperty"/> + <h:meta name="assert" content="shape-margin supports the full grammar 'length-percentage'"/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("shape-margin", "0", "0px"); +test_valid_value("shape-margin", "10px"); +test_valid_value("shape-margin", "20%"); +test_valid_value("shape-margin", "calc(2em + 3ex)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/shape-subtract-invalid.svg b/testing/web-platform/tests/svg/text/parsing/shape-subtract-invalid.svg new file mode 100644 index 0000000000..fb2caef25c --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/shape-subtract-invalid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing shape-subtract with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextShapeSubtract"/> + <h:meta name="assert" content="shape-subtract supports only the grammar 'auto | [ basic-shape | uri ]+'"/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("shape-subtract", "none"); +test_invalid_value("shape-subtract", "auto circle(10px at 20px -30px)"); +test_invalid_value("shape-subtract", 'url("https://example.com/") auto'); + +test_invalid_value("shape-subtract", "inset(25%)"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/shape-subtract-valid.svg b/testing/web-platform/tests/svg/text/parsing/shape-subtract-valid.svg new file mode 100644 index 0000000000..3be94fb849 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/shape-subtract-valid.svg @@ -0,0 +1,27 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing shape-subtract with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextShapeSubtract"/> + <h:meta name="assert" content="shape-subtract supports the full grammar 'auto | [ basic-shape | uri ]+'"/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("shape-subtract", "auto"); + +test_valid_value("shape-subtract", "circle(10px at 20px -30px)"); +test_valid_value("shape-subtract", "ellipse(10px 20px at -30px 40px)"); +test_valid_value("shape-subtract", "polygon(10px 20px, -30px 40px, 50px 60px)"); + +test_valid_value("shape-subtract", 'url("https://example.com/")'); + +test_valid_value("shape-subtract", 'circle(10px at 20px -30px) url("https://example.com/") ellipse(10px 20px at -30px 40px)'); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/text-anchor-computed.svg b/testing/web-platform/tests/svg/text/parsing/text-anchor-computed.svg new file mode 100644 index 0000000000..e11b23fc23 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/text-anchor-computed.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: getComputedStyle().textAnchor</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextAnchorProperty"/> + <h:meta name="assert" content="text-anchor computed value is the specified keyword."/> + </metadata> + <text id="target"></text> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/computed-testcommon.js"/> + <script><![CDATA[ + +test_computed_value("text-anchor", "start"); +test_computed_value("text-anchor", "middle"); +test_computed_value("text-anchor", "end"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/text-anchor-invalid.svg b/testing/web-platform/tests/svg/text/parsing/text-anchor-invalid.svg new file mode 100644 index 0000000000..69a6a58971 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/text-anchor-invalid.svg @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing text-anchor with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextAnchorProperty"/> + <h:meta name="assert" content="text-anchor supports only the grammar 'start | middle | end'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("text-anchor", "auto"); +test_invalid_value("text-anchor", "start middle"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/text-anchor-valid.svg b/testing/web-platform/tests/svg/text/parsing/text-anchor-valid.svg new file mode 100644 index 0000000000..eca651e122 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/text-anchor-valid.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing text-anchor with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextAnchorProperty"/> + <h:meta name="assert" content="text-anchor supports the full grammar 'start | middle | end'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("text-anchor", "start"); +test_valid_value("text-anchor", "middle"); +test_valid_value("text-anchor", "end"); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/text-decoration-fill-invalid.svg b/testing/web-platform/tests/svg/text/parsing/text-decoration-fill-invalid.svg new file mode 100644 index 0000000000..19da082173 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/text-decoration-fill-invalid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing text-decoration-fill with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextDecorationFillProperty"/> + <h:meta name="assert" content="text-decoration-fill supports only the paint grammar 'none | color | url [none | color]? | context-fill | context-stroke'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("text-decoration-fill", "auto"); +test_invalid_value("text-decoration-fill", "none red"); +test_invalid_value("text-decoration-fill", 'none url("https://example.com/")'); +test_invalid_value("text-decoration-fill", 'red url("https://example.com/")'); +test_invalid_value("text-decoration-fill", 'url("https://example.com/") none red'); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/text-decoration-fill-valid.svg b/testing/web-platform/tests/svg/text/parsing/text-decoration-fill-valid.svg new file mode 100644 index 0000000000..d2f9447a16 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/text-decoration-fill-valid.svg @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing text-decoration-fill with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextDecorationFillProperty"/> + <h:meta name="assert" content="text-decoration-fill supports the full paint grammar 'none | color | url [none | color]? | context-fill | context-stroke'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("text-decoration-fill", "none"); +test_valid_value("text-decoration-fill", "context-fill"); +test_valid_value("text-decoration-fill", "context-stroke"); +test_valid_value("text-decoration-fill", "rgb(12, 34, 56)"); + +test_valid_value("text-decoration-fill", 'url("https://example.com/")'); +test_valid_value("text-decoration-fill", 'url("https://example.com/") none'); +test_valid_value("text-decoration-fill", 'url("https://example.com/") rgb(12, 34, 56)'); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/text-decoration-stroke-invalid.svg b/testing/web-platform/tests/svg/text/parsing/text-decoration-stroke-invalid.svg new file mode 100644 index 0000000000..8d44d6f1c3 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/text-decoration-stroke-invalid.svg @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing text-decoration-stroke with invalid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextDecorationStrokeProperty"/> + <h:meta name="assert" content="text-decoration-stroke supports only the paint grammar 'none | color | url [none | color]? | context-fill | context-stroke'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_invalid_value("text-decoration-stroke", "auto"); +test_invalid_value("text-decoration-stroke", "none red"); +test_invalid_value("text-decoration-stroke", 'none url("https://example.com/")'); +test_invalid_value("text-decoration-stroke", 'red url("https://example.com/")'); +test_invalid_value("text-decoration-stroke", 'url("https://example.com/") none red'); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/parsing/text-decoration-stroke-valid.svg b/testing/web-platform/tests/svg/text/parsing/text-decoration-stroke-valid.svg new file mode 100644 index 0000000000..df64cc9ec3 --- /dev/null +++ b/testing/web-platform/tests/svg/text/parsing/text-decoration-stroke-valid.svg @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="800px" height="800px"> + <title>SVG Text: parsing text-decoration-stroke with valid values</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextDecorationStrokeProperty"/> + <h:meta name="assert" content="text-decoration-stroke supports the full paint grammar 'none | color | url [none | color]? | context-fill | context-stroke'."/> + </metadata> + <g id="target"></g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script src="/css/support/parsing-testcommon.js"/> + <script><![CDATA[ + +test_valid_value("text-decoration-stroke", "none"); +test_valid_value("text-decoration-stroke", "context-fill"); +test_valid_value("text-decoration-stroke", "context-stroke"); +test_valid_value("text-decoration-stroke", "rgb(12, 34, 56)"); + +test_valid_value("text-decoration-stroke", 'url("https://example.com/")'); +test_valid_value("text-decoration-stroke", 'url("https://example.com/") none'); +test_valid_value("text-decoration-stroke", 'url("https://example.com/") rgb(12, 34, 56)'); + + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/dominant-baseline-hanging-small-font-size.svg b/testing/web-platform/tests/svg/text/reftests/dominant-baseline-hanging-small-font-size.svg new file mode 100644 index 0000000000..aa27ec9c09 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/dominant-baseline-hanging-small-font-size.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <title>'dominant-baseline: hanging' on <text> with small font-size</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties"/> + <h:link rel="match" href="../../embedded/reference/green-rect-100x100.svg"/> + <h:link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> + </metadata> + <rect width="100" height="100" fill="red"/> + <svg viewBox="0 0 0.4 0.4" width="100" height="100"> + <text dominant-baseline="hanging" fill="green" + font-size="0.5" font-family="Ahem">X</text> + </svg> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/gradient-after-reposition-ref.html b/testing/web-platform/tests/svg/text/reftests/gradient-after-reposition-ref.html new file mode 100644 index 0000000000..3fe1224b9a --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/gradient-after-reposition-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<body> +<svg style="border: 1px solid gray;"> + <defs> + <linearGradient id="testGradient"> + <stop stop-color="#000000" offset="0%"/> + <stop stop-color="#000000" offset="50%"/> + <stop stop-color="#3dcd58" offset="50%"/> + <stop stop-color="#ff4a4a" offset="100%"/> + </linearGradient> + </defs> + <text fill="url(#testGradient)" x="50" y="50" font-weight="bold" font-size="40"> + Test gradient</text> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/text/reftests/gradient-after-reposition.html b/testing/web-platform/tests/svg/text/reftests/gradient-after-reposition.html new file mode 100644 index 0000000000..850b0eb91d --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/gradient-after-reposition.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<link rel="match" href="gradient-after-reposition-ref.html"> +<link rel="help" href="https://crbug.com/1274630"> +<body> +<svg style="border: 1px solid gray;"> + <defs> + <linearGradient id="testGradient"> + <stop stop-color="#000000" offset="0%"/> + <stop stop-color="#000000" offset="50%"/> + <stop stop-color="#3dcd58" offset="50%"/> + <stop stop-color="#ff4a4a" offset="100%"/> + </linearGradient> + </defs> + <text id="test" fill="url(#testGradient)" x="25" y="50" font-weight="bold" font-size="40"> + Test gradient</text> +</svg> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + const text = document.getElementById('test'); + text.setAttribute('x', '50'); + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/svg/text/reftests/lang-attribute-dynamic-ref.svg b/testing/web-platform/tests/svg/text/reftests/lang-attribute-dynamic-ref.svg new file mode 100644 index 0000000000..191adc036c --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/lang-attribute-dynamic-ref.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <text> + <tspan x="10" y="100" font-size="90" fill="lime">Quick</tspan> + <tspan x="10" y="200" font-size="90">Brown</tspan> + <tspan x="10" y="300" font-size="90">Fox</tspan> + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/lang-attribute-dynamic.svg b/testing/web-platform/tests/svg/text/reftests/lang-attribute-dynamic.svg new file mode 100644 index 0000000000..d57b4decde --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/lang-attribute-dynamic.svg @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <metadata> + <title>Update of lang attribute should recalculate style</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#LangSpaceAttrs"/> + <h:link rel="match" href="lang-attribute-dynamic-ref.svg"/> + </metadata> + <style> +tspan:lang(ja) { fill: lime; } + </style> + <text> + <tspan x="10" y="100" font-size="90">Quick</tspan> + <tspan x="10" y="200" font-size="90">Brown</tspan> + <tspan x="10" y="300" font-size="90">Fox</tspan> + </text> + <script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.querySelectorAll('tspan')[0].setAttribute('lang', 'ja'); + document.documentElement.classList.remove('reftest-wait'); + }); +}); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/lang-attribute-ref.svg b/testing/web-platform/tests/svg/text/reftests/lang-attribute-ref.svg new file mode 100644 index 0000000000..957cc24d81 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/lang-attribute-ref.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <text> + <tspan x="10" y="100" font-size="90">今骨直</tspan> + <tspan x="10" y="200" font-size="90">今骨直</tspan> + <tspan x="10" y="300" font-size="90">今骨直</tspan> + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/lang-attribute.svg b/testing/web-platform/tests/svg/text/reftests/lang-attribute.svg new file mode 100644 index 0000000000..c619f8253e --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/lang-attribute.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <title>lang attribute should affect text rendering</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#LangSpaceAttrs"/> + <h:link rel="mismatch" href="lang-attribute-ref.svg"/> + </metadata> + <text> + <tspan x="10" y="100" font-size="90" lang="ja">今骨直</tspan> + <tspan x="10" y="200" font-size="90" lang="zh-CN">今骨直</tspan> + <tspan x="10" y="300" font-size="90" lang="zh-TW">今骨直</tspan> + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/multiple-textpaths-ref.svg b/testing/web-platform/tests/svg/text/reftests/multiple-textpaths-ref.svg new file mode 100644 index 0000000000..a6dcd3c5d5 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/multiple-textpaths-ref.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <text><textPath href='#a'>Some text.</textPath></text> + <text><textPath href='#b'>More text.</textPath></text> + <path id="a" d="m50,100 l300,-50" stroke="lime"/> + <path id="b" d="m50,50 l300,60" stroke="red"/> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/multiple-textpaths.svg b/testing/web-platform/tests/svg/text/reftests/multiple-textpaths.svg new file mode 100644 index 0000000000..6df4ecc27b --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/multiple-textpaths.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <html:link rel="help" href="https://crbug.com/1274425" /> + <html:link rel="match" href="multiple-textpaths-ref.svg" /> + </g> + + <text> + <textPath href='#a'>Some text.</textPath + ><textPath href='#b'>More text.</textPath> + </text> + <path id="a" d="m50,100 l300,-50" stroke="lime"/> + <path id="b" d="m50,50 l300,60" stroke="red"/> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/no-background-ref.svg b/testing/web-platform/tests/svg/text/reftests/no-background-ref.svg new file mode 100644 index 0000000000..18c6ed4f1b --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/no-background-ref.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <text font-size="32" y="50"> + foo<tspan>bar</tspan>baz + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/no-background.svg b/testing/web-platform/tests/svg/text/reftests/no-background.svg new file mode 100644 index 0000000000..117b5d6357 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/no-background.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Background properties should not be supported in <text></title> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextPropertiesAdaptions" /> + <html:link rel="match" href="no-background-ref.svg" /> + </g> + + <text font-size="32" y="50" style="background-color: red;"> + foo<tspan style="background-color: lime;">bar</tspan>baz + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/no-margin-border-padding-ref.svg b/testing/web-platform/tests/svg/text/reftests/no-margin-border-padding-ref.svg new file mode 100644 index 0000000000..18c6ed4f1b --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/no-margin-border-padding-ref.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <text font-size="32" y="50"> + foo<tspan>bar</tspan>baz + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/no-margin-border-padding.svg b/testing/web-platform/tests/svg/text/reftests/no-margin-border-padding.svg new file mode 100644 index 0000000000..b9c1b33e45 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/no-margin-border-padding.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Margin, border, and padding should not be supported in <text></title> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextPropertiesAdaptions" /> + <html:link rel="match" href="no-margin-border-padding-ref.svg" /> + </g> + + <text font-size="32" y="50" style="border:5px solid red; padding:20px;"> + foo<tspan style="border:5px solid blue; padding:20px; margin-right:40px;">bar</tspan>baz + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-clipped-offscreen-move-onscreen-ref.html b/testing/web-platform/tests/svg/text/reftests/text-clipped-offscreen-move-onscreen-ref.html new file mode 100644 index 0000000000..b03ac22aaa --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-clipped-offscreen-move-onscreen-ref.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<title>Reftest Reference</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<div style="position: relative; overflow: hidden; width: 300px; height: 400px;"> + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300px" height="400px"> + <text id="target" x="15" y="150">VISIBLE</text> + </svg> +</div> +<script> +let target = document.getElementById('target'); +onload = function() { + requestAnimationFrame(() => target.setAttribute('y', 150)); +}; +</script> diff --git a/testing/web-platform/tests/svg/text/reftests/text-clipped-offscreen-move-onscreen.html b/testing/web-platform/tests/svg/text/reftests/text-clipped-offscreen-move-onscreen.html new file mode 100644 index 0000000000..c29f790326 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-clipped-offscreen-move-onscreen.html @@ -0,0 +1,19 @@ +<!doctype HTML> +<title>Test combination of overflow clipping and offscreen SVG text</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel=match href="text-clipped-offscreen-move-onscreen-ref.html"> +<link rel="help" href="https://www.w3.org/TR/SVG11/text.html#TextElement"> +<div style="position: relative; overflow: hidden; width: 300px; height: 400px;"> + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300px" height="400px"> + <text id="target" x="15" y="-50000000000">VISIBLE</text> + </svg> + +</div> +<script> +let target = document.getElementById('target'); + +onload = function() { + requestAnimationFrame(() => target.setAttribute('y', 150)); +}; + +</script> diff --git a/testing/web-platform/tests/svg/text/reftests/text-complex-001-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-complex-001-ref.svg new file mode 100644 index 0000000000..5ade69dce1 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-complex-001-ref.svg @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextShapeInside"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <circle id="Circle1" cx="120" cy="180" r="100"/> + <circle id="Circle2" cx="360" cy="240" r="100"/> + <rect id="Rect1" x="120" y="80" width="240" height="80" style="shape-margin: 20px;"/> + <rect id="Rect2" x="120" y="260" width="240" height="80" style="shape-margin: 20px;"/> + <circle id="Circle1x" cx="120" cy="180" r="80"/> + <circle id="Circle2x" cx="360" cy="240" r="80"/> + <rect id="Rect1x" x="100" y="60" width="280" height="120"/> + <rect id="Rect2x" x="100" y="240" width="280" height="120"/> + </defs> + + <g style="fill:none;stroke:lightblue"> + <use xlink:href="#Rect1" /> + <use xlink:href="#Rect2" /> + <use xlink:href="#Circle1" /> + <use xlink:href="#Circle2" /> + </g> + <g style="fill:none;stroke:lightblue;stroke-dasharray:5 5"> + <use xlink:href="#Rect1x" /> + <use xlink:href="#Rect2x" style="shape-margin: 20px;" /> + <use xlink:href="#Circle1x" /> + <use xlink:href="#Circle2x" /> + </g> + + <g id="test-body-reference" style="font-size:16px"> + <text style="text-anchor:middle"> + <tspan x="74.1" y="157.3">Lorem</tspan> + <tspan x="71" y="177.3">ipsum</tspan> + <tspan x="120" y="197.3">dolor sit amet,</tspan> + <tspan x="120" y="217.3">consectetur</tspan> + <tspan x="360" y="197.2">adipisicing elit,</tspan> + <tspan x="360" y="217.2">sed do eiusmod</tspan> + <tspan x="401.3" y="237.2">tempor </tspan> + </text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-complex-001.svg b/testing/web-platform/tests/svg/text/reftests/text-complex-001.svg new file mode 100644 index 0000000000..747737cce7 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-complex-001.svg @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextShapeInside"/> + <html:link rel="match" href="text-complex-001-ref.svg" /> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <circle id="Circle1" cx="120" cy="180" r="100"/> + <circle id="Circle2" cx="360" cy="240" r="100"/> + <rect id="Rect1" x="120" y="80" width="240" height="80" style="shape-margin: 20px;"/> + <rect id="Rect2" x="120" y="260" width="240" height="80" style="shape-margin: 20px;"/> + <circle id="Circle1x" cx="120" cy="180" r="80"/> + <circle id="Circle2x" cx="360" cy="240" r="80"/> + <rect id="Rect1x" x="100" y="60" width="280" height="120"/> + <rect id="Rect2x" x="100" y="240" width="280" height="120"/> + </defs> + + <g style="fill:none;stroke:lightblue"> + <use xlink:href="#Rect1" /> + <use xlink:href="#Rect2" /> + <use xlink:href="#Circle1" /> + <use xlink:href="#Circle2" /> + </g> + <g style="fill:none;stroke:lightblue;stroke-dasharray:5 5"> + <use xlink:href="#Rect1x" /> + <use xlink:href="#Rect2x" style="shape-margin: 20px;" /> + <use xlink:href="#Circle1x" /> + <use xlink:href="#Circle2x" /> + </g> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25"> + <text style="shape-inside:url(#Circle1) url(#Circle2); + shape-subtract:url(#Rect1) url(#Rect2); + shape-padding:20px; + text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-complex-002-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-complex-002-ref.svg new file mode 100644 index 0000000000..3d3968fa49 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-complex-002-ref.svg @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextShapeInside"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <circle id="Circle1" cx="360" cy="180" r="100"/> + <circle id="Circle2" cx="120" cy="240" r="100"/> + <rect id="Rect1" x="120" y="80" width="240" height="80" style="shape-margin: 20px;"/> + <rect id="Rect2" x="120" y="260" width="240" height="80" style="shape-margin: 20px;"/> + <circle id="Circle1x" cx="360" cy="180" r="80"/> + <circle id="Circle2x" cx="120" cy="240" r="80"/> + <rect id="Rect1x" x="100" y="60" width="280" height="120"/> + <rect id="Rect2x" x="100" y="240" width="280" height="120"/> + </defs> + + <g style="fill:none;stroke:lightblue"> + <use xlink:href="#Rect1" /> + <use xlink:href="#Rect2" /> + <use xlink:href="#Circle1" /> + <use xlink:href="#Circle2" /> + </g> + <g style="fill:none;stroke:lightblue;stroke-dasharray:5 5"> + <use xlink:href="#Rect1x" /> + <use xlink:href="#Rect2x" style="shape-margin: 20px;" /> + <use xlink:href="#Circle1x" /> + <use xlink:href="#Circle2x" /> + </g> + + <g id="test-body-reference" style="font-size:16px;direction:rtl"> + <text style="text-anchor:middle"> + <tspan x="398.9" y="137.9">لكن</tspan> + <tspan x="406.1" y="158.5">لا بد أن</tspan> + <tspan x="408.9" y="179.2">أوضح لك</tspan> + <tspan x="360.0" y="199.8">أن كل هذه الأفكار</tspan> + <tspan x="360" y="220.5">المغلوطة حول</tspan> + <tspan x="120" y="197.8">استنكار النشوة</tspan> + <tspan x="120" y="218.5">وتمجيد الألم نشأت</tspan> + <tspan x="76.0" y="239.1">بالفعل،</tspan> + </text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-complex-002.svg b/testing/web-platform/tests/svg/text/reftests/text-complex-002.svg new file mode 100644 index 0000000000..40b62ac95d --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-complex-002.svg @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextShapeInside"/> + <html:link rel="match" href="text-complex-002-ref.svg" /> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <circle id="Circle1" cx="360" cy="180" r="100"/> + <circle id="Circle2" cx="120" cy="240" r="100"/> + <rect id="Rect1" x="120" y="80" width="240" height="80" style="shape-margin: 20px;"/> + <rect id="Rect2" x="120" y="260" width="240" height="80" style="shape-margin: 20px;"/> + <circle id="Circle1x" cx="360" cy="180" r="80"/> + <circle id="Circle2x" cx="120" cy="240" r="80"/> + <rect id="Rect1x" x="100" y="60" width="280" height="120"/> + <rect id="Rect2x" x="100" y="240" width="280" height="120"/> + </defs> + + <g style="fill:none;stroke:lightblue"> + <use xlink:href="#Rect1" /> + <use xlink:href="#Rect2" /> + <use xlink:href="#Circle1" /> + <use xlink:href="#Circle2" /> + </g> + <g style="fill:none;stroke:lightblue;stroke-dasharray:5 5"> + <use xlink:href="#Rect1x" /> + <use xlink:href="#Rect2x" style="shape-margin: 20px;" /> + <use xlink:href="#Circle1x" /> + <use xlink:href="#Circle2x" /> + </g> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;direction:rtl "> + <text style="shape-inside:url(#Circle1) url(#Circle2); + shape-subtract:url(#Rect1) url(#Rect2); + shape-padding:20px; + text-align: center;">لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل</text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-display-contents-crash.html b/testing/web-platform/tests/svg/text/reftests/text-display-contents-crash.html new file mode 100644 index 0000000000..04b6a7e7cf --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-display-contents-crash.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>Crash with dynamic creation of absolutely positioned element under display: contents in svg:text.</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611848"> +<style> +* { + position: absolute; +} +</style> +<script> + function start () { + const text = document.getElementById('text') + + const div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div') + div.style.display = "contents"; + + const another = document.createElementNS('http://www.w3.org/2000/svg', 'whatevs') + text.appendChild(div); + document.documentElement.getBoundingClientRect(); + div.appendChild(another); + } + + document.addEventListener('DOMContentLoaded', start) +</script> +<svg> + <text id='text'> diff --git a/testing/web-platform/tests/svg/text/reftests/text-huge-font-size-crash.html b/testing/web-platform/tests/svg/text/reftests/text-huge-font-size-crash.html new file mode 100644 index 0000000000..7f248d87d2 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-huge-font-size-crash.html @@ -0,0 +1,9 @@ +<script> + function run() { svg2.setAttribute("x", "845em"); } +</script> +<body onload=run()> + <svg clip-path="url(#svg3)"> + <text id="svg1" dx="3995">Test</text> + <use id="svg2" xlink:href="#svg1" + font-size="24047101539296409820906557248093691380127756136688827495876060258460376087850741612624122674697995234250631412935683303715374150921263384856574947450705899861899966578158801753087633492936609359438374778849560%" + /> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-001-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-001-ref.svg new file mode 100644 index 0000000000..6abd211584 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-001-ref.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px;fill:black"> + <g transform="translate(0,0)"> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="240" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <text style="text-anchor:end"> + <tspan x="400" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="400" y="134.8">adipisicing elit,</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-001.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-001.svg new file mode 100644 index 0000000000..ae1a10d190 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-001.svg @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <html:link rel="match" href="text-inline-size-001-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:320px">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="inline-size:320px;text-anchor:middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <text x="400" y="114.8" style="inline-size:320px;text-anchor:end">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-002-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-002-ref.svg new file mode 100644 index 0000000000..66f771e310 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-002-ref.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text transform="translate(250,10) rotate(90)"> + <tspan x="90" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="90" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(80,0)"> + <text transform="translate(250,-40) rotate(90)" style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="240" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(160,0)"> + <text transform="translate(250,-90) rotate(90)" style="text-anchor:end"> + <tspan x="390" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="390" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-002.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-002.svg new file mode 100644 index 0000000000..141909c3e5 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-002.svg @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <html:link rel="match" href="text-inline-size-002-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;writing-mode:tb-rl"> + <g transform="translate(0,0)"> + <text x="140" y="100" style="inline-size:200px">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(80,0)"> + <text x="140" y="200" style="inline-size:200px;text-anchor:middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(160,0)"> + <text x="140" y="300" style="inline-size:200px;text-anchor:end">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-003-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-003-ref.svg new file mode 100644 index 0000000000..289b92a02a --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-003-ref.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 003</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px;direction:rtl"> + <g transform="translate(0,0)"> + <text> + <tspan x="400" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="400" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="240" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <text style="text-anchor:end"> + <tspan x="80" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="80" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-003.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-003.svg new file mode 100644 index 0000000000..9fcab5ba0a --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-003.svg @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 003</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <html:link rel="match" href="text-inline-size-003-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;direction:rtl"> + <g transform="translate(0,0)"> + <text x="400" y="114.8" style="inline-size:320px">لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="inline-size:320px;text-anchor:middle">لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار</text> + </g> + <g transform="translate(0,120)"> + <text x="80" y="114.8" style="inline-size:320px;text-anchor:end">لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-005-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-005-ref.svg new file mode 100644 index 0000000000..af756b6964 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-005-ref.svg @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 005</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="149.6">adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor</tspan> + <tspan x="80" y="174.8">incididunt ut labore et dolore magna aliqua. Ut</tspan> + <tspan x="80" y="209.6">enim ad minim veniam, <tspan style="font-size:32px">quis</tspan> nostrud</tspan> + <tspan x="80" y="234.8">exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea</tspan> + <tspan x="80" y="254.8">commodo consequat.</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-005.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-005.svg new file mode 100644 index 0000000000..e6a1d75c05 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-005.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 005</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <html:link rel="match" href="text-inline-size-005-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-height:1.25"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:320px" xml:space="preserve">Lorem ipsum dolor sit amet, consectetur adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <tspan style="font-size:2em">quis</tspan> nostrud exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea commodo consequat.</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-006-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-006-ref.svg new file mode 100644 index 0000000000..9c32e841a6 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-006-ref.svg @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 006</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="134.8">adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor</tspan> + <tspan x="80" y="154.8">incididunt ut labore et dolore magna aliqua. Ut</tspan> + <tspan x="80" y="174.8">enim ad minim veniam, <tspan style="font-size:32px">quis</tspan> nostrud</tspan> + <tspan x="80" y="194.8">exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea</tspan> + <tspan x="80" y="214.8">commodo consequat.</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-006.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-006.svg new file mode 100644 index 0000000000..b84e3d5302 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-006.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 006</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <html:link rel="match" href="text-inline-size-006-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-height:1.25"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:320px">Lorem ipsum dolor sit amet, consectetur adipiscing <tspan style="font-size:32px;line-height:0">elit</tspan>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <tspan style="font-size:2em;line-height:0">quis</tspan> nostrud exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea commodo consequat.</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-007-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-007-ref.svg new file mode 100644 index 0000000000..181785117f --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-007-ref.svg @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 006</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="139.6">adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor</tspan> + <tspan x="80" y="159.6">incididunt ut labore et dolore magna aliqua. Ut</tspan> + <tspan x="80" y="184.4">enim ad minim veniam, <tspan style="font-size:32px">quis</tspan> nostrud</tspan> + <tspan x="80" y="204.4">exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea</tspan> + <tspan x="80" y="226.8">commodo consequat.</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-007.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-007.svg new file mode 100644 index 0000000000..9d18b52d2e --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-007.svg @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 006</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <html:link rel="match" href="text-inline-size-007-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:320px;line-height:20px">Lorem ipsum dolor sit amet, consectetur adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <tspan style="font-size:2em">quis</tspan> nostrud exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea commodo consequat.</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-101-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-101-ref.svg new file mode 100644 index 0000000000..ab41dea8da --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-101-ref.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 101</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="240" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <text style="text-anchor:end"> + <tspan x="400" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="400" y="134.8">adipisicing elit,</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-101.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-101.svg new file mode 100644 index 0000000000..fa8bf5ef5c --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-101.svg @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 101</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <html:link rel="match" href="text-inline-size-101-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:66.66667%">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="inline-size:66.66667%;text-anchor:middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <text x="400" y="114.8" style="inline-size:66.66667%;text-anchor:end">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-201-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-201-ref.svg new file mode 100644 index 0000000000..b1eb7c7473 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-201-ref.svg @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 201</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text style="writing-mode:tb-rl"> + <tspan x="140" y="100">漢字</tspan> + <tspan x="140" y="132">Lorem ipsum</tspan> + <tspan x="140" y="227.7">漢字</tspan> + </text> + </g> + <g transform="translate(80,0)"> + <text transform="translate(250,-40) rotate(90)"> + <tspan x="140" y="110">漢字Lorem ipsum!漢字</tspan> + </text> + </g> + <g transform="translate(160,0)"> + <text transform="translate(250,-40) rotate(90)"> + <tspan x="140" y="110">漢字!لكن لا بد أن漢字</tspan> + </text> + </g> + <g transform="translate(240,0)"> + <text transform="translate(250,-40) rotate(90)" style="direction:rtl;text-anchor:end"> + <tspan x="140" y="110">漢字!لكن لا بد أن漢字</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-inline-size-201.svg b/testing/web-platform/tests/svg/text/reftests/text-inline-size-201.svg new file mode 100644 index 0000000000..5ab3213a69 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-inline-size-201.svg @@ -0,0 +1,48 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 201</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <html:link rel="match" href="text-inline-size-201-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, --> + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;writing-mode:tb-rl"> + <g transform="translate(0,0)"> + <text x="140" y="100" style="inline-size:200px">漢字Lorem ipsum!漢字</text> + </g> + <g transform="translate(80,0)" style="text-orientation:sideways"> + <text x="140" y="100" style="inline-size:200px">漢字Lorem ipsum!漢字</text> + </g> + <g transform="translate(160,0)" style="text-orientation:sideways"> + <text x="140" y="100" style="inline-size:200px">漢字!لكن لا بد أن漢字</text> + </g> + <g transform="translate(240,0)" style="direction:rtl;text-orientation:sideways"> + <text x="140" y="100" style="inline-size:200px">漢字!لكن لا بد أن漢字</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-multiline-001-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-multiline-001-ref.svg new file mode 100644 index 0000000000..9238a88da5 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-multiline-001-ref.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Multiline — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px;fill:black"> + <g transform="translate(0,0)"> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="240" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <text style="text-anchor:end"> + <tspan x="400" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="400" y="134.8">adipisicing elit,</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-multiline-001.svg b/testing/web-platform/tests/svg/text/reftests/text-multiline-001.svg new file mode 100644 index 0000000000..1272f56b0b --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-multiline-001.svg @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Multiline — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextLayoutPreMultiline"/> + <html:link rel="match" href="text-multiline-001-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="white-space: pre-line">Lorem ipsum dolor sit amet, consectetur +adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="white-space: pre-line;text-anchor:middle">Lorem ipsum dolor sit amet, consectetur +adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <text x="400" y="114.8" style="white-space: pre-line;text-anchor:end">Lorem ipsum dolor sit amet, consectetur + adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-multiline-002-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-multiline-002-ref.svg new file mode 100644 index 0000000000..5ba04b7dc2 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-multiline-002-ref.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Multiline — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text transform="translate(250,10) rotate(90)"> + <tspan x="90" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="90" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(80,0)"> + <text transform="translate(250,-40) rotate(90)" style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="240" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(160,0)"> + <text transform="translate(250,-90) rotate(90)" style="text-anchor:end"> + <tspan x="390" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="390" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-multiline-002.svg b/testing/web-platform/tests/svg/text/reftests/text-multiline-002.svg new file mode 100644 index 0000000000..e109351258 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-multiline-002.svg @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Multiline — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextLayoutPreMultiline"/> + <html:link rel="match" href="text-multiline-002-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;writing-mode:tb-rl"> + <g transform="translate(0,0)"> + <text x="140" y="100" style="white-space: pre-line">Lorem ipsum dolor sit amet, +consectetur adipisicing elit,</text> + </g> + <g transform="translate(80,0)"> + <text x="140" y="200" style="white-space: pre-line;text-anchor:middle">Lorem ipsum dolor sit amet, +consectetur adipisicing elit,</text> + </g> + <g transform="translate(160,0)"> + <text x="140" y="300" style="white-space: pre-line;text-anchor:end">Lorem ipsum dolor sit amet, +consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-multiline-003-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-multiline-003-ref.svg new file mode 100644 index 0000000000..cbfce51b88 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-multiline-003-ref.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Multiline — 003</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px;direction:rtl"> + <g transform="translate(0,0)"> + <text> + <tspan x="400" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="400" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="240" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <text style="text-anchor:end"> + <tspan x="80" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="80" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-multiline-003.svg b/testing/web-platform/tests/svg/text/reftests/text-multiline-003.svg new file mode 100644 index 0000000000..e52bb77052 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-multiline-003.svg @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Multiline — 003</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextLayoutPreMultiline"/> + <html:link rel="match" href="text-multiline-003-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;direction:rtl"> + <g transform="translate(0,0)"> + <text x="400" y="114.8" style="white-space: pre-line">لكن لا بد أن أوضح لك أن كل هذه الأفكار +المغلوطة حول استنكار</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="white-space: pre-line;text-anchor:middle">لكن لا بد أن أوضح لك أن كل هذه الأفكار +المغلوطة حول استنكار</text> + </g> + <g transform="translate(0,120)"> + <text x="80" y="114.8" style="white-space: pre-line;text-anchor:end">لكن لا بد أن أوضح لك أن كل هذه الأفكار +المغلوطة حول استنكار</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-shape-inside-001-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-shape-inside-001-ref.svg new file mode 100644 index 0000000000..5a2c6c0b47 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-shape-inside-001-ref.svg @@ -0,0 +1,77 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextShapeInside"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <rect id="TestRect" x="90" y="100" width="300" height="40"/> + </defs> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text> + <tspan x="90" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="90" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="240" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="text-anchor:end"> + <tspan x="390" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="390" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,180)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text> + <tspan x="90" y="114.8">Lorem</tspan> + <tspan x="142.9">ipsum</tspan> + <tspan x="193.4">dolor</tspan> + <tspan x="236.8">sit</tspan> + <tspan x="261.2">amet,</tspan> + <tspan x="308.9">consectetur</tspan> + <tspan x="90" y="134.8">adipisicing elit,</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-shape-inside-001.svg b/testing/web-platform/tests/svg/text/reftests/text-shape-inside-001.svg new file mode 100644 index 0000000000..248fe1a44f --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-shape-inside-001.svg @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextShapeInside"/> + <html:link rel="match" href="text-shape-inside-001-ref.svg" /> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <rect id="TestRect" x="90" y="100" width="300" height="40"/> + </defs> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25"> + <g transform="translate(0,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="shape-inside:url(#TestRect)">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="shape-inside:url(#TestRect);text-align:center">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="shape-inside:url(#TestRect);text-align:right">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,180)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="shape-inside:url(#TestRect);text-align:justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-shape-inside-002-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-shape-inside-002-ref.svg new file mode 100644 index 0000000000..e75ce485c5 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-shape-inside-002-ref.svg @@ -0,0 +1,76 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextShapeInside"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <rect id="TestRect" x="90" y="100" width="60" height="200"/> + </defs> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text transform="translate(250,10) rotate(90)"> + <tspan x="90" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="90" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(80,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text transform="translate(250,-40) rotate(90)" style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="240" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(160,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text transform="translate(250,-90) rotate(90)" style="text-anchor:end"> + <tspan x="390" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="390" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(240,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text transform="translate(250,-150) rotate(90)"> + <tspan x="250" y="114.8">Lorem</tspan> + <tspan x="300.3">ipsum</tspan> + <tspan x="348.2">dolor</tspan> + <tspan x="389">sit</tspan> + <tspan x="410.9">amet,</tspan> + <tspan x="250" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-shape-inside-002.svg b/testing/web-platform/tests/svg/text/reftests/text-shape-inside-002.svg new file mode 100644 index 0000000000..64b1307966 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-shape-inside-002.svg @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextShapeInside"/> + <html:link rel="match" href="text-shape-inside-002-ref.svg" /> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <rect id="TestRect" x="90" y="100" width="60" height="200"/> + </defs> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;writing-mode:tb-rl"> + <g transform="translate(0,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="shape-inside:url(#TestRect)">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(80,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="shape-inside:url(#TestRect);text-align:center">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(160,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="shape-inside:url(#TestRect);text-align:right">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(240,0)"> + <use xlink:href="#TestRect" style="fill:none;stroke:lightblue"/> + <text style="shape-inside:url(#TestRect);text-align:justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-001-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-001-ref.svg new file mode 100644 index 0000000000..b9554bac69 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-001-ref.svg @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <text x="48" y="114.8">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <text x="16" y="114.8">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-001.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-001.svg new file mode 100644 index 0000000000..015b3dd5eb --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-001.svg @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties"/> + <html:link rel="match" href="text-text-anchor-001-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <!-- TEMP --> + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <circle cx="80" cy="114.8" r="2" style="fill:red"/> + <text x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <circle cx="240" cy="114.8" r="2" style="fill:red"/> + <text x="48" y="114.8">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <circle cx="400" cy="114.8" r="2" style="fill:red"/> + <text x="17" y="114.8">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="text-anchor:start">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="text-anchor:middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <text x="400" y="114.8" style="text-anchor:end">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-002-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-002-ref.svg new file mode 100644 index 0000000000..5721bc3e07 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-002-ref.svg @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text transform="translate(250,10) rotate(90)"> + <tspan x="90" y="114.8">Lorem ipsum dolor sit amet,</tspan> + </text> + </g> + <g transform="translate(80,0)"> + <text transform="translate(250,-40) rotate(90)" style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet,</tspan> + </text> + </g> + <g transform="translate(160,0)"> + <text transform="translate(250,-90) rotate(90)" style="text-anchor:end"> + <tspan x="390" y="114.8">Lorem ipsum dolor sit amet,</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-002.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-002.svg new file mode 100644 index 0000000000..503ce16625 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-002.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties"/> + <html:link rel="match" href="text-text-anchor-002-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <circle cx="140" cy="100" r="2" style="fill:red"/> + <text transform="translate(250,10) rotate(90)"> + <tspan x="90" y="114.8">Lorem ipsum dolor sit amet,</tspan> + </text> + </g> + <g transform="translate(80,0)"> + <circle cx="140" cy="200" r="2" style="fill:red"/> + <text transform="translate(250,-40) rotate(90)" style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet,</tspan> + </text> + </g> + <g transform="translate(160,0)"> + <circle cx="140" cy="300" r="2" style="fill:red"/> + <text transform="translate(250,-90) rotate(90)" style="text-anchor:end"> + <tspan x="390" y="114.8">Lorem ipsum dolor sit amet,</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;writing-mode:tb-rl"> + <g transform="translate(0,0)"> + <text x="140" y="100" style="text-anchor:start">Lorem ipsum dolor sit amet,</text> + </g> + <g transform="translate(80,0)"> + <text x="140" y="200" style="text-anchor:middle">Lorem ipsum dolor sit amet,</text> + </g> + <g transform="translate(160,0)"> + <text x="140" y="300" style="text-anchor:end">Lorem ipsum dolor sit amet,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-003-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-003-ref.svg new file mode 100644 index 0000000000..797dea3d71 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-003-ref.svg @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 003</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text style="text-anchor:end"> + <tspan x="400" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <text> + <tspan x="80" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-003.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-003.svg new file mode 100644 index 0000000000..eb5063020a --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-003.svg @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 003</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties"/> + <html:link rel="match" href="text-text-anchor-003-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <!-- TEMP --> + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <circle cx="400" cy="114.8" r="2" style="fill:red"/> + <text style="text-anchor:end"> + <tspan x="400" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <circle cx="240" cy="114.8" r="2" style="fill:red"/> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <circle cx="80" cy="114.8" r="2" style="fill:red"/> + <text> + <tspan x="80" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;direction:rtl"> + <g transform="translate(0,0)"> + <text x="400" y="114.8" style="text-anchor:start">لكن لا بد أن أوضح لك أن كل هذه الأفكار</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="text-anchor:middle">لكن لا بد أن أوضح لك أن كل هذه الأفكار</text> + </g> + <g transform="translate(0,120)"> + <text x="80" y="114.8" style="text-anchor:end">لكن لا بد أن أوضح لك أن كل هذه الأفكار</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-102-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-102-ref.svg new file mode 100644 index 0000000000..9c1d98c7ab --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-102-ref.svg @@ -0,0 +1,36 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 102</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: IPAMincho; + src: url("fonts/IPAMincho.woff") format("woff"), + local("IPAMincho"); + } + text { font-family: IPAMincho, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text x="132 132 132 132 132 132 132" y="114 130 146 162 178 194 210 ">千利奴流乎和加</text> + </g> + <g transform="translate(80,0)"> + <text x="140" y="144" style="writing-mode:tb-rl">千利奴流乎和加</text> + </g> + <g transform="translate(160,0)"> + <text x="140" y="188" style="writing-mode:tb-rl">千利奴流乎和加</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-102.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-102.svg new file mode 100644 index 0000000000..8cdcc988de --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-102.svg @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 102</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties"/> + <html:link rel="match" href="text-text-anchor-102-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: IPAMincho; + src: url("fonts/IPaMincho.woff") format("woff"), + local("IPAMincho"); + } + text { font-family: IPAMincho, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <circle cx="140" cy="100" r="2" style="fill:red"/> + <text x="132 132 132 132 132 132 132" y="114 130 146 162 178 194 210 ">千利奴流乎和加</text> + </g> + <g transform="translate(80,0)"> + <circle cx="140" cy="200" r="2" style="fill:red"/> + <text x="140" y="144" style="writing-mode:tb-rl">千利奴流乎和加</text> + </g> + <g transform="translate(160,0)"> + <circle cx="140" cy="300" r="2" style="fill:red"/> + <text x="140" y="188" style="writing-mode:tb-rl">千利奴流乎和加</text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;writing-mode:tb-rl"> + <g transform="translate(0,0)"> + <text x="140" y="100" style="text-anchor:start">千利奴流乎和加</text> + </g> + <g transform="translate(80,0)"> + <text x="140" y="200" style="text-anchor:middle">千利奴流乎和加</text> + </g> + <g transform="translate(160,0)"> + <text x="140" y="300" style="text-anchor:end">千利奴流乎和加</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-201-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-201-ref.svg new file mode 100644 index 0000000000..d8b6cc4e67 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-201-ref.svg @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 201</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text x="200" y="114.8">Lorem ipsum dolor</text> + </g> + <g transform="translate(0,60)"> + <text x="200" y="114.8" style="text-anchor:middle">sit amet, consectetur</text> + </g> + <g transform="translate(0,120)"> + <text x="200" y="114.8" style="text-anchor:end">adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-201.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-201.svg new file mode 100644 index 0000000000..84b644cd6a --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-201.svg @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 201</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties"/> + <html:link rel="match" href="text-text-anchor-201-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <!-- TEMP --> + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <circle cx="200" cy="114.8" r="2" style="fill:red"/> + <text x="200" y="114.8">Lorem ipsum dolor</text> + </g> + <g transform="translate(0,60)"> + <circle cx="200" cy="114.8" r="2" style="fill:red"/> + <text x="200" y="114.8" style="text-anchor:middle">sit amet, consectetur</text> + </g> + <g transform="translate(0,120)"> + <circle cx="200" cy="114.8" r="2" style="fill:red"/> + <text x="200" y="114.8" style="text-anchor:end">adipisicing elit,</text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px"> + <text> + <tspan x="200" y="114.8" style="text-anchor:start">Lorem ipsum dolor</tspan> + <tspan x="200" y="174.8" style="text-anchor:middle">sit amet, consectetur</tspan> + <tspan x="200" y="234.8" style="text-anchor:end">adipisicing elit,</tspan> + </text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-202-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-202-ref.svg new file mode 100644 index 0000000000..72a8ee15a6 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-202-ref.svg @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 202</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px;writing-mode:tb-rl"> + <g transform="translate(0,0)"> + <text x="140" y="200">Lorem ipsum dolor</text> + </g> + <g transform="translate(80,0)"> + <text x="140" y="200" style="text-anchor:middle">sit amet, consectetur</text> + </g> + <g transform="translate(160,0)"> + <text x="140" y="200" style="text-anchor:end">adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-202.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-202.svg new file mode 100644 index 0000000000..79792ed33b --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-202.svg @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 202</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties"/> + <html:link rel="match" href="text-text-anchor-202-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <!-- TEMP --> + <g id="test-body-reference" style="font-size:16px;writing-mode:tb-rl;fill:red"> + <g transform="translate(0,0)"> + <circle cx="140" cy="200" r="2" style="fill:red"/> + <text x="140" y="200">Lorem ipsum dolor</text> + </g> + <g transform="translate(80,0)"> + <circle cx="140" cy="200" r="2" style="fill:red"/> + <text x="140" y="200" style="text-anchor:middle">sit amet, consectetur</text> + </g> + <g transform="translate(160,0)"> + <circle cx="140" cy="200" r="2" style="fill:red"/> + <text x="140" y="200" style="text-anchor:end">adipisicing elit,</text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;writing-mode:tb-rl"> + <text> + <tspan x="140" y="200" style="text-anchor:start">Lorem ipsum dolor</tspan> + <tspan x="220" y="200" style="text-anchor:middle">sit amet, consectetur</tspan> + <tspan x="300" y="200" style="text-anchor:end">adipisicing elit,</tspan> + </text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-203-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-203-ref.svg new file mode 100644 index 0000000000..7ee99a2dcb --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-203-ref.svg @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 203</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <g id="test-body-reference" style="font-size:16px"> + <g transform="translate(0,0)"> + <text style="text-anchor:end"> + <tspan x="200" y="114.8">لكن لا بد أن</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <text style="text-anchor:middle"> + <tspan x="200" y="114.8" style="text-anchor:middle">أوضح لك أن</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <text> + <tspan x="200" y="114.8" style="text-anchor:start">كل هذه الأفكار</tspan> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-text-anchor-203.svg b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-203.svg new file mode 100644 index 0000000000..bb7c8206a1 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-text-anchor-203.svg @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Text Anchor — 203</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties"/> + <html:link rel="match" href="text-text-anchor-003-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <!-- TEMP --> + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <circle cx="200" cy="114.8" r="2" style="fill:red"/> + <text style="text-anchor:end"> + <tspan x="200" y="114.8">لكن لا بد أن</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <circle cx="200" cy="114.8" r="2" style="fill:red"/> + <text style="text-anchor:middle"> + <tspan x="200" y="114.8" style="text-anchor:middle">أوضح لك أن</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <circle cx="200" cy="114.8" r="2" style="fill:red"/> + <text> + <tspan x="200" y="114.8" style="text-anchor:start">كل هذه الأفكار</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;direction:rtl"> + <text> + <tspan x="200" y="114.8" style="text-anchor:start">لكن لا بد أن</tspan> + <tspan x="200" y="174.8" style="text-anchor:middle">أوضح لك أن</tspan> + <tspan x="200" y="234.8" style="text-anchor:end">كل هذه الأفكار</tspan> + </text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-transform-001-ref.html b/testing/web-platform/tests/svg/text/reftests/text-transform-001-ref.html new file mode 100644 index 0000000000..bf1b063eeb --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-transform-001-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Reference: text-transform with SVG text</title> + +<p>Test passes if the greeting below is in <b>ALL-UPPERCASE</b>:</p> + +<svg><text y="50">HELLO, WORLD!</text></svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-transform-001.html b/testing/web-platform/tests/svg/text/reftests/text-transform-001.html new file mode 100644 index 0000000000..71c231f690 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-transform-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>text-transform with SVG text</title> +<meta name="assert" content="The CSS text-transform property should work"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="match" href="text-transform-001-ref.html"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1738560"> + +<p>Test passes if the greeting below is in <b>ALL-UPPERCASE</b>:</p> + +<svg><text y="50" style="text-transform: uppercase">Hello, World!</text></svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-transform-002-ref.html b/testing/web-platform/tests/svg/text/reftests/text-transform-002-ref.html new file mode 100644 index 0000000000..f15615c2c3 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-transform-002-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Reference: text-transform with SVG text</title> + +<p>Test passes if the greeting below has <b>Initial Capitals</b>:</p> + +<svg><text y="50">Hello, World!</text></svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-transform-002.html b/testing/web-platform/tests/svg/text/reftests/text-transform-002.html new file mode 100644 index 0000000000..53da0d8c66 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-transform-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>text-transform with SVG text</title> +<meta name="assert" content="The CSS text-transform property should work"> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="match" href="text-transform-002-ref.html"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1738560"> + +<p>Test passes if the greeting below has <b>Initial Capitals</b>:</p> + +<svg><text y="50" style="text-transform: capitalize">hello, world!</text></svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-xml-space-001-ref.svg b/testing/web-platform/tests/svg/text/reftests/text-xml-space-001-ref.svg new file mode 100644 index 0000000000..1572149cf6 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-xml-space-001-ref.svg @@ -0,0 +1,5 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>SVG Reference</title> + <text x="50" y="50" font-family="monospace">Some  Text</text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/text-xml-space-001.svg b/testing/web-platform/tests/svg/text/reftests/text-xml-space-001.svg new file mode 100644 index 0000000000..c58bd9d4e5 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/text-xml-space-001.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>SVG Test: Behavior of xml:space="preserve"</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/styling.html#UAStyleSheet"/> + <h:link rel="match" href="text-xml-space-001-ref.svg"/> + <g xml:space="preserve"> + <text x="50" y="50" font-family="monospace">Some Text</text> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/textpath-shape-001-ref.svg b/testing/web-platform/tests/svg/text/reftests/textpath-shape-001-ref.svg new file mode 100644 index 0000000000..10827c8581 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/textpath-shape-001-ref.svg @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>TextPath Shape — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TextPath1" d="m 110,150 + l 60, 0 a 20,20 0 0 1 20, 20 + l 0, 60 a 20,20 0 0 1 -20, 20 + l -60, 0 a 20,20 0 0 1 -20,-20 + l 0,-60 a 20,20 0 0 1 20,-20 z"/> + <path id="TextPath2" d="m 390,200 a 50,50 0 0 1 -100,0 50,50 0 0 1 100,0 z"/> + </defs> + + <g id="test-body-content" style="font-size:18px"> + + <use xlink:href="#TextPath1" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath1">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + + <use xlink:href="#TextPath2" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath2">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/textpath-shape-001.svg b/testing/web-platform/tests/svg/text/reftests/textpath-shape-001.svg new file mode 100644 index 0000000000..dbc0d9e420 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/textpath-shape-001.svg @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>TextPath Shape — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextPathAttributes"/> + <html:link rel="match" href="textpath-shape-001-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <rect id="TextPath1" x="90" y="150" width="100" height="100" rx="20"/> + <circle id="TextPath2" cx="340" cy="200" r="50"/> + </defs> + + <g id="test-body-content" style="font-size:18px"> + + <use xlink:href="#TextPath1" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath1">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + + <use xlink:href="#TextPath2" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath2">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + + </g> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/textpath-side-001-ref.svg b/testing/web-platform/tests/svg/text/reftests/textpath-side-001-ref.svg new file mode 100644 index 0000000000..0e2008c328 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/textpath-side-001-ref.svg @@ -0,0 +1,55 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>TextPath Side — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TextPath" d="m 90,150 c 100,-100 200,100 300,0"/> + <path id="TextPathReversed" d="m 390,150 c -100,100 -200,-100 -300,0"/> + </defs> + + <g id="test-body-content" style="font-size:24px"> + <g transform="translate(0,0)"> + <use xlink:href="#TextPath" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + </g> + <g transform="translate(0,75)"> + <use xlink:href="#TextPath" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + </g> + <g transform="translate(0,150)"> + <use xlink:href="#TextPath" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPathReversed">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/textpath-side-001.svg b/testing/web-platform/tests/svg/text/reftests/textpath-side-001.svg new file mode 100644 index 0000000000..a4b6bf52bd --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/textpath-side-001.svg @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>TextPath Side — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#TextPathAttributes"/> + <html:link rel="match" href="textpath-side-001-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TextPath" d="m 90,150 c 100,-100 200,100 300,0"/> + </defs> + + <g id="test-body-content" style="font-size:24px"> + <g transform="translate(0,0)"> + <use xlink:href="#TextPath" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + </g> + <g transform="translate(0,75)"> + <use xlink:href="#TextPath" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath" side="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + </g> + <g transform="translate(0,150)"> + <use xlink:href="#TextPath" style="fill:none;stroke:lightblue"/> + <text> + <textPath xlink:href="#TextPath" side="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</textPath> + </text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-ref.html b/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-ref.html new file mode 100644 index 0000000000..df8afcebc1 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<body> +<div style="position:absolute; transform-origin: 0px 0px; transform: matrix(0.9, 0, 0, 0.9, -210, -777);"> + <svg width="2384" height="1684" style="position:absolute; left:0; top:0;"> + <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" /> + <text fill="red" style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)">A</text> + </svg> + <svg width="2384" height="1684" style="position:absolute; left:0; top:200px;"> + <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" /> + <text style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)"><tspan fill="blue">B</tspan></text> + </svg> +</div> + +<svg width="500" height="400" style="transform-origin: 0px 0px; transform: scale(2) translate(-300px, -300px);"> + <text x="300" y="350" font-size="50" fill="green">PASS</text> +</svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-root-ref.html b/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-root-ref.html new file mode 100644 index 0000000000..179cbb128d --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-root-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> +<body> +<svg><text y=30>Text</text></svg> +</body> +</html> diff --git a/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-root.html b/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-root.html new file mode 100644 index 0000000000..dd8a22d05d --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change-root.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://crbug.com/1365243"> +<link rel="match" href="transform-dynamic-change-root-ref.html"> +<style> +:root { scale: 1 5; } +</style> + +<body> +<svg><text y=30>Text</text></svg> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.styleSheets[0].removeRule(0); + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change.html b/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change.html new file mode 100644 index 0000000000..57b5551061 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/transform-dynamic-change.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1270713"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1271931"> +<link rel="match" href="transform-dynamic-change-ref.html"> +<body> + +<div id="moveme" style="position:absolute; transform-origin: 0px 0px; transform: matrix(0.3, 0, 0, 0.3, 136, 13);"> + <svg width="2384" height="1684" style="position:absolute; left:0; top:0;"> + <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" /> + <text id="txt" style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)">A</text> + </svg> + <svg width="2384" height="1684" style="position:absolute; left:0; top:200px;"> + <circle cx="475" cy="975" r="40" stroke="black" stroke-width="2" fill="none" /> + <text style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)"><tspan id="inline">B</tspan></text> + </svg> +</div> + +<svg id="svg2" width="500" height="400" style="transform-origin: 0px 0px; transform: translate(-300px, -300px);"> + <text x="300" y="350" id="text2" font-size="50">PASS</text> +</svg> + +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.getElementById('moveme').style.transform = 'matrix(0.9, 0, 0, 0.9, -210, -777)'; + document.getElementById('txt').style.fill = 'red'; + document.getElementById('inline').style.fill = 'blue'; + + document.getElementById('svg2').style.transform = 'scale(2) translate(-300px, -300px)'; + document.getElementById('text2').style.fill = 'green'; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/svg/text/reftests/tspan-opacity-mixed-direction-ref.svg b/testing/web-platform/tests/svg/text/reftests/tspan-opacity-mixed-direction-ref.svg new file mode 100644 index 0000000000..f07911627f --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/tspan-opacity-mixed-direction-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" font-size="50" style="direction: ltr; unicode-bidi: bidi-override"> + <tspan style="opacity: 0.5">a</tspan>ג<tspan style="opacity: 0.5">ב</tspan>b + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/tspan-opacity-mixed-direction.svg b/testing/web-platform/tests/svg/text/reftests/tspan-opacity-mixed-direction.svg new file mode 100644 index 0000000000..fa153250e7 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/tspan-opacity-mixed-direction.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <h:title>Opacity on tspan containing mixed direction text interleaving with other text</h:title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/text.html"/> + <h:link rel="match" href="tspan-opacity-mixed-direction-ref.svg"/> + </metadata> + <text x="100" y="100" font-size="50"> + <tspan style="opacity: 0.5">aב</tspan>גb + </text> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/writing-mode-dynamic-change-ref.html b/testing/web-platform/tests/svg/text/reftests/writing-mode-dynamic-change-ref.html new file mode 100644 index 0000000000..58b556cdc8 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/writing-mode-dynamic-change-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<body> +<svg style="border: 1px solid gray;"> + <text id="test-text" y="0" x="50" font-size="16" writing-mode="vertical-rl">🎓👺👕👖👢</text> +</svg> +<p id="result"></p> + +<script> +var text = document.getElementById("test-text"); +var bbox = text.getBBox(); +result.textContent = `BBox: ${bbox.width} x ${bbox.height}`; +</script> +</body> diff --git a/testing/web-platform/tests/svg/text/reftests/writing-mode-dynamic-change.html b/testing/web-platform/tests/svg/text/reftests/writing-mode-dynamic-change.html new file mode 100644 index 0000000000..7a325b0ca4 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/writing-mode-dynamic-change.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="match" href="writing-mode-dynamic-change-ref.html"> +<link rel="help" href="https://crbug.com/1273783"> +<body> +<svg style="border: 1px solid gray;"> + <text id="test-text" y="0" x="50" font-size="16">🎓👺👕👖👢</text> +</svg> +<p id="result"></p> + +<script> +var text = document.getElementById("test-text"); +text.getBBox(); + +text.style.writingMode = "vertical-rl"; +var bbox = text.getBBox(); +result.textContent = `BBox: ${bbox.width} x ${bbox.height}`; +</script> +</body> diff --git a/testing/web-platform/tests/svg/text/reftests/xml-lang-attribute-dynamic.svg b/testing/web-platform/tests/svg/text/reftests/xml-lang-attribute-dynamic.svg new file mode 100644 index 0000000000..c604eb8c70 --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/xml-lang-attribute-dynamic.svg @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <metadata> + <title>Update of lang attribute should recalculate style</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#LangSpaceAttrs"/> + <h:link rel="match" href="lang-attribute-dynamic-ref.svg"/> + </metadata> + <style> +tspan:lang(ja) { fill: lime; } + </style> + <text> + <tspan x="10" y="100" font-size="90">Quick</tspan> + <tspan x="10" y="200" font-size="90">Brown</tspan> + <tspan x="10" y="300" font-size="90">Fox</tspan> + </text> + <script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.querySelectorAll('tspan')[0].setAttributeNS( + 'http://www.w3.org/XML/1998/namespace', 'xml:lang', 'ja'); + document.documentElement.classList.remove('reftest-wait'); + }); +}); + </script> +</svg> diff --git a/testing/web-platform/tests/svg/text/reftests/xml-lang-attribute.svg b/testing/web-platform/tests/svg/text/reftests/xml-lang-attribute.svg new file mode 100644 index 0000000000..2e03716a0d --- /dev/null +++ b/testing/web-platform/tests/svg/text/reftests/xml-lang-attribute.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <title>xml:lang attribute should affect text rendering</title> + <h:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#LangSpaceAttrs"/> + <h:link rel="mismatch" href="lang-attribute-ref.svg"/> + </metadata> + + <text> + <tspan x="10" y="100" font-size="90" xml:lang="ja" lang="en">今骨直</tspan> + <tspan x="10" y="200" font-size="90" xml:lang="zh-CN">今骨直</tspan> + <tspan x="10" y="300" font-size="90" xml:lang="zh-TW">今骨直</tspan> + </text> +</svg> 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> diff --git a/testing/web-platform/tests/svg/text/visualtests/text-inline-size-001-visual.svg b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-001-visual.svg new file mode 100644 index 0000000000..086bab33b0 --- /dev/null +++ b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-001-visual.svg @@ -0,0 +1,85 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 001</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TestPath" d="m 80,100 0,40 m 320,-40 0,40"/> + </defs> + + <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">Text 'inline-size' — 001</text> + <a href="https://svgwg.org/svg2-draft/text.html#InlineSize"> + <text id="source" x="240" y="70" style="fill:black; font-size:12px; text-anchor:middle;">https://svgwg.org/svg2-draft/text.html#InlineSize</text> + </a> + + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <circle cx="80" cy="114.8" r="1,0" style="fill:lightblue"/> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <circle cx="240" cy="114.8" r="1,0" style="fill:lightblue"/> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="240" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <circle cx="400" cy="114.8" r="1,0" style="fill:lightblue"/> + <text style="text-anchor:end"> + <tspan x="400" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="400" y="134.8">adipisicing elit,</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;fill:green"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:320px">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="inline-size:320px;text-anchor:middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <text x="400" y="114.8" style="inline-size:320px;text-anchor:end">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/visualtests/text-inline-size-002-visual.svg b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-002-visual.svg new file mode 100644 index 0000000000..7f58973ce3 --- /dev/null +++ b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-002-visual.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 002</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TestPath" d="m 110,100 40,0 m -40,200 40,0"/> + </defs> + + <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">Text 'inline-size' — 002</text> + <a href="https://svgwg.org/svg2-draft/text.html#InlineSize"> + <text id="source" x="240" y="70" style="fill:black; font-size:12px; text-anchor:middle;">https://svgwg.org/svg2-draft/text.html#InlineSize</text> + </a> + + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <text transform="translate(250,10) rotate(90)"> + <tspan x="90" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="90" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(80,0)"> + <text transform="translate(250,-40) rotate(90)" style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="240" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(160,0)"> + <text transform="translate(250,-90) rotate(90)" style="text-anchor:end"> + <tspan x="390" y="114.8">Lorem ipsum dolor sit amet,</tspan> + <tspan x="390" y="134.8">consectetur adipisicing elit,</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;writing-mode:tb-rl;fill:green"> + <g transform="translate(0,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text x="140" y="100" style="inline-size:200px">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(80,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text x="140" y="200" style="inline-size:200px;text-anchor:middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(160,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text x="140" y="300" style="inline-size:200px;text-anchor:end">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/visualtests/text-inline-size-003-visual.svg b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-003-visual.svg new file mode 100644 index 0000000000..19bf0dc9d5 --- /dev/null +++ b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-003-visual.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 003</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TestPath" d="m 80,100 0,40 m 320,-40 0,40"/> + </defs> + + <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">Text 'inline-size' — 003</text> + <a href="https://svgwg.org/svg2-draft/text.html#InlineSize"> + <text id="source" x="240" y="70" style="fill:black; font-size:12px; text-anchor:middle;">https://svgwg.org/svg2-draft/text.html#InlineSize</text> + </a> + + <g id="test-body-reference" style="font-size:16px;direction:rtl;fill:red"> + <g transform="translate(0,0)"> + <text> + <tspan x="400" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="400" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="240" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <text style="text-anchor:end"> + <tspan x="80" y="114.8">لكن لا بد أن أوضح لك أن كل هذه الأفكار</tspan> + <tspan x="80" y="134.8">المغلوطة حول استنكار</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;direction:rtl;fill:green"> + <g transform="translate(0,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text x="400" y="114.8" style="inline-size:320px">لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار</text> + </g> + <g transform="translate(0,60)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text x="240" y="114.8" style="inline-size:320px;text-anchor:middle">لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار</text> + </g> + <g transform="translate(0,120)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text x="80" y="114.8" style="inline-size:320px;text-anchor:end">لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/visualtests/text-inline-size-005-visual.svg b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-005-visual.svg new file mode 100644 index 0000000000..dab467e122 --- /dev/null +++ b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-005-visual.svg @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 005</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TestPath" d="m 80,100 0,160 m 320,-160 0,160"/> + </defs> + + <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">Text 'inline-size' — 005</text> + <a href="https://svgwg.org/svg2-draft/text.html#InlineSize"> + <text id="source" x="240" y="70" style="fill:black; font-size:12px; text-anchor:middle;">https://svgwg.org/svg2-draft/text.html#InlineSize</text> + </a> + + <g id="test-body-reference" style="font-size:16px;fill:#ffeeee"> + <g transform="translate(0,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="149.6">adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor</tspan> + <tspan x="80" y="174.8">incididunt ut labore et dolore magna aliqua. Ut</tspan> + <tspan x="80" y="209.6">enim ad minim veniam, <tspan style="font-size:32px">quis</tspan> nostrud</tspan> + <tspan x="80" y="234.8">exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea</tspan> + <tspan x="80" y="254.8">commodo consequat.</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;line-height:1.25;fill:green"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:320px" xml:space="preserve">Lorem ipsum dolor sit amet, consectetur adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <tspan style="font-size:2em">quis</tspan> nostrud exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea commodo consequat.</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/visualtests/text-inline-size-006-visual.svg b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-006-visual.svg new file mode 100644 index 0000000000..427ff09501 --- /dev/null +++ b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-006-visual.svg @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 006</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TestPath" d="m 80,100 0,160 m 320,-160 0,160"/> + </defs> + + <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">Text 'inline-size' — 006</text> + <a href="https://svgwg.org/svg2-draft/text.html#InlineSize"> + <text id="source" x="240" y="70" style="fill:black; font-size:12px; text-anchor:middle;">https://svgwg.org/svg2-draft/text.html#InlineSize</text> + </a> + + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="134.8">adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor</tspan> + <tspan x="80" y="154.8">incididunt ut labore et dolore magna aliqua. Ut</tspan> + <tspan x="80" y="174.8">enim ad minim veniam, <tspan style="font-size:32px">quis</tspan> nostrud</tspan> + <tspan x="80" y="194.8">exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea</tspan> + <tspan x="80" y="214.8">commodo consequat.</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;line-height:1.25;fill:green"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:320px">Lorem ipsum dolor sit amet, consectetur adipiscing <tspan style="font-size:32px;line-height:0">elit</tspan>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <tspan style="font-size:2em;line-height:0">quis</tspan> nostrud exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea commodo consequat.</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/visualtests/text-inline-size-007-visual.svg b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-007-visual.svg new file mode 100644 index 0000000000..8bb078f95b --- /dev/null +++ b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-007-visual.svg @@ -0,0 +1,66 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 006</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TestPath" d="m 80,100 0,160 m 320,-160 0,160"/> + </defs> + + <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">Text 'inline-size' — 007</text> + <a href="https://svgwg.org/svg2-draft/text.html#InlineSize"> + <text id="source" x="240" y="70" style="fill:black; font-size:12px; text-anchor:middle;">https://svgwg.org/svg2-draft/text.html#InlineSize</text> + </a> + + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="139.6">adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor</tspan> + <tspan x="80" y="159.6">incididunt ut labore et dolore magna aliqua. Ut</tspan> + <tspan x="80" y="184.4">enim ad minim veniam, <tspan style="font-size:32px">quis</tspan> nostrud</tspan> + <tspan x="80" y="204.4">exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea</tspan> + <tspan x="80" y="226.8">commodo consequat.</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;fill:green"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:320px;line-height:20px">Lorem ipsum dolor sit amet, consectetur adipiscing <tspan style="font-size:32px">elit</tspan>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <tspan style="font-size:2em">quis</tspan> nostrud exercitation ullamco laboris <tspan style="font-size:8px">nisi</tspan> ut aliquip ex ea commodo consequat.</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/visualtests/text-inline-size-101-visual.svg b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-101-visual.svg new file mode 100644 index 0000000000..e1c5c41693 --- /dev/null +++ b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-101-visual.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text: Inline Size — 101</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TestPath" d="m 80,100 0,40 m 320,-40 0,40"/> + </defs> + + <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">Text 'inline-size' — 101</text> + <a href="https://svgwg.org/svg2-draft/text.html#InlineSize"> + <text id="source" x="240" y="70" style="fill:black; font-size:12px; text-anchor:middle;">https://svgwg.org/svg2-draft/text.html#InlineSize</text> + </a> + + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text> + <tspan x="80" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="80" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,60)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text style="text-anchor:middle"> + <tspan x="240" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="240" y="134.8">adipisicing elit,</tspan> + </text> + </g> + <g transform="translate(0,120)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text style="text-anchor:end"> + <tspan x="400" y="114.8">Lorem ipsum dolor sit amet, consectetur</tspan> + <tspan x="400" y="134.8">adipisicing elit,</tspan> + </text> + </g> + </g> + + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;fill:green"> + <g transform="translate(0,0)"> + <text x="80" y="114.8" style="inline-size:66.66667%">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,60)"> + <text x="240" y="114.8" style="inline-size:66.66667%;text-anchor:middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + <g transform="translate(0,120)"> + <text x="400" y="114.8" style="inline-size:66.66667%;text-anchor:end">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</text> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/text/visualtests/text-inline-size-201-visual.svg b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-201-visual.svg new file mode 100644 index 0000000000..f2649eaad2 --- /dev/null +++ b/testing/web-platform/tests/svg/text/visualtests/text-inline-size-201-visual.svg @@ -0,0 +1,91 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Text in Shape — 201</title> + <html:link rel="author" + title="Tavmjong Bah" + href="mailto:tavmjong@free.fr"/> + <html:link rel="reviewer" + title="NAME_OF_REVIEWER" + href="mailto:EMAIL OR http://CONTACT_PAGE" /> + <!-- YYYY-MM-DD --> + <html:link rel="help" + href="https://svgwg.org/svg2-draft/text.html#InlineSize"/> + <metadata class="flags">TOKENS</metadata> + <desc class="assert">TEST ASSERTION</desc> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("fonts/FreeSans.woff") format("woff"), + local("FreeSans"); + } + text { font-family: FreeSans, sans-serif } + </style> + + <style id="test-style" type="text/css"> + /* Style that is being tested (if needed). */ + text { font-family: FreeSans, sans-serif } + </style> + + <defs> + <path id="TestPath" d="m 110,100 40,0 m -40,200 40,0"/> + </defs> + + <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">Text 'inline-size' — 201</text> + <a href="https://svgwg.org/svg2-draft/text.html#InlineSize"> + <text id="source" x="240" y="70" style="fill:black; font-size:12px; text-anchor:middle;">https://svgwg.org/svg2-draft/text.html#InlineSize</text> + </a> + + <g id="test-body-reference" style="font-size:16px;fill:red"> + <g transform="translate(0,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text style="writing-mode:tb-rl"> + <tspan x="140" y="100">漢字</tspan> + <tspan x="140" y="132">Lorem ipsum</tspan> + <tspan x="140" y="227.7">漢字</tspan> + </text> + </g> + <g transform="translate(80,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text transform="translate(250,-40) rotate(90)"> + <tspan x="140" y="110">漢字Lorem ipsum!漢字</tspan> + </text> + </g> + <g transform="translate(160,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text transform="translate(250,-40) rotate(90)"> + <tspan x="140" y="110">漢字!لكن لا بد أن漢字</tspan> + </text> + </g> + <g transform="translate(240,0)"> + <use xlink:href="#TestPath" style="fill:none;stroke:lightblue"/> + <text transform="translate(250,-40) rotate(90)" style="direction:rtl;text-anchor:end"> + <tspan x="140" y="110">漢字!لكن لا بد أن漢字</tspan> + </text> + </g> + </g> + + <!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, --> + <g id="test-body-content" style="font-size:16px;line-spacing:1.25;writing-mode:tb-rl;fill:green"> + <g transform="translate(0,0)"> + <text x="140" y="100" style="inline-size:200px">漢字Lorem ipsum!漢字</text> + </g> + <g transform="translate(80,0)" style="text-orientation:sideways"> + <text x="140" y="100" style="inline-size:200px">漢字Lorem ipsum!漢字</text> + </g> + <g transform="translate(160,0)" style="text-orientation:sideways"> + <text x="140" y="100" style="inline-size:200px">漢字!لكن لا بد أن漢字</text> + </g> + <g transform="translate(240,0)" style="direction:rtl;text-orientation:sideways"> + <text x="140" y="100" style="inline-size:200px">漢字!لكن لا بد أن漢字</text> + </g> + </g> + +</svg> |
