text-complex-001.svg

mozilla-central/testing/web-platform/tests/svg/text/reftests/text-complex-001.svg

Enable keyboard shortcuts

Source code

File a bug in Core :: SVG

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /svg/text/reftests/text-complex-001.svg - WPT Dashboard Interop Dashboard

SVG Preview (Scaled)

Checkerboard

Preview of https://hg.mozilla.org/mozilla-central/raw-file/tip/testing/web-platform/tests/svg/text/reftests/text-complex-001.svg

<?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>