paint-grad-12-t.svg

<?xml version="1.0" encoding="UTF-8"?>

<svg version="1.2" baseProfile="tiny" xml: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:xe="http://www.w3.org/2001/xml-events">

  <!--======================================================================-->

  <!--=  Copyright 2008 World Wide Web Consortium, (Massachusetts          =-->

  <!--=  Institute of Technology, European Research Consortium for         =-->

  <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->

  <!--=  All Rights Reserved.                                              =-->

  <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->

  <!--======================================================================-->

  <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"

    reviewer="AG" owner="HS" desc="Test that the viewer can handle the gradientUnits attribute on radial gradients." status="accepted"

    approved="yes"

    version="$Revision: 1.7 $" testname="$RCSfile: paint-grad-12-t.svg,v $">

    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">

<p>

        Test that the viewer can handle the gradientUnits attribute on radial gradients. It tests the following values of

        gradientUnits : default (objectBoundingBox), objectBoundingBox, and userSpaceOnUse.

      </p>

      <p>From top-down the appearance of objects is as follows.</p>

<p>

        The first rectangle uses the default attributes on the radialGradient element. Therefore the radial gradient should

        be relative to the object bounding box. It should appear from the center of the viewport (blue) to the edges of the

        viewport (red). The rectangle is wider than tall so it the gradient should be elliptical, not circular.

      </p>

<p>

        The next rectangle uses gradientUnits=objectBoundingBox. The radial gradient should travel from a center of 20%, 20%

        of the rectangle with a radius of 50%.

      </p>

<p>

        The last rectangle uses gradientUnits=userSpaceOnUse. The rectangle element is given it's own transformation and the

        gradient is assumed to be in this user space. The gradient should appear in the center of the rectangle as a radial

        gradient from red (center) to blue (edge).

      </p>

<p>

        The rendered picture should match the reference image exactly, except for possible variations in the labelling text

        (per CSS2 rules).

      </p>

    </d:OperatorScript>

  </SVGTestCase>

  <title xml:id="test-title">$RCSfile: paint-grad-12-t.svg,v $</title>

  <defs>

    <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">

      <font-face-src>

        <font-face-uri xlink:href="../images/SVGFreeSans.svg#ascii" />

      </font-face-src>

    </font-face>

  </defs>

  <g xml:id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">

    <text font-size="15" x="10" y="25">Testing gradientUnits attribute</text>

    <!-- ====================================================================== -->

    <!-- Radial gradient with default attributes on <radial gradient> element. -->

    <!-- ====================================================================== -->

    <radialGradient xml:id="Grad1">

      <stop stop-color="blue" offset="0" />

      <stop stop-color="red" offset="1" />

    </radialGradient>

    <rect x="10" y="35" width="460" height="50" fill="url(#Grad1)" />

    <text font-size="12" x="10" y="100">Radial gradient with default attributes (from blue to red)</text>

    <text font-size="12" x="10" y="115">Gradient is blue at the object center and red at the object edges</text>

    <!-- ====================================================================== -->

    <!-- Radial gradient with gradientUnits=objectBoundingBox ======== -->

    <!-- ====================================================================== -->

    <radialGradient xml:id="Grad2" gradientUnits="objectBoundingBox" cx=".2" cy=".2" r=".5">

      <stop stop-color="blue" offset="0" />

      <stop stop-color="red" offset="1" />

    </radialGradient>

    <rect x="10" y="125" width="460" height="50" fill="url(#Grad2)" />

    <text font-size="12" x="10" y="190">gradientUnits=objectBoundingBox</text>

    <text font-size="12" x="10" y="205">cx=.2, cy=.2, r=.5</text>

    <!-- ====================================================================== -->

    <!-- Gradient using gradientUnits="userSpaceOnUse" -->

    <!-- ====================================================================== -->

    <radialGradient xml:id="Grad3" cx="25" cy="215" r="25" gradientUnits="userSpaceOnUse">

      <stop stop-color="red" offset="0" />

      <stop stop-color="blue" offset="1" />

    </radialGradient>

    <rect transform="translate(10, 260) rotate(-90)" x="0" y="0" width="50" height="460" fill="url(#Grad3)" />

    <text font-size="12" x="10" y="275">gradientUnits=userSpaceOnUse</text>

    <text font-size="12" x="10" y="290">Gradient is red to blue radial gradiant from center to horizontal bounds</text>

  </g>

  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">

    <text xml:id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</text>

  </g>

  <rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000" />

  <!-- comment out this watermark once the test is approved -->

  <!--<g xml:id="draft-watermark">

    <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>

    <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"

      text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>

  </g>-->

</svg>