SVGViewTests/w3c/1.1F2/svg/pservers-grad-12-b.svg

<svg version="1.1" baseProfile="basic" 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">
  <!--======================================================================-->
  <!--=  SVG 1.1 2nd Edition Test Case                                     =-->
  <!--======================================================================-->
  <!--=  Copyright 2009 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/.                          =-->
  <!--======================================================================-->
  <d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
    template-version="1.4" reviewer="SVGWG" author="Haroon Sheikh" status="accepted"
    version="$Revision: 1.9 $" testname="$RCSfile: pservers-grad-12-b.svg,v $">
    <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/pservers.html#Gradients">
      <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 (lime).
        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 yellow (center) to blue (edge).
      </p>
    </d:testDescription>
    <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">      
      <p>Run the test. No interaction required.</p>
    </d:operatorScript>
    <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
      <p>The test passes if the rendering of the three rectangles matches those
      in the reference image.  Specifically:</p>
      <ul>
        <li>The upper rectangle is filled with an elliptical radial gradient
        with blue at the center and lime at its edges.</li>
        <li>The middle rectangle is also filled with an elliptical radial
        gradient with blue inside and lime outside, but with the center
        point of the gradient in the top-left quadrant of the rectangle.</li>
        <li>The bottom rectangle is filled with a circular radial gradient
        with yellow at the center and blue at its edges.  Since it is circular,
        most of the rectangle is filled with plain blue.</li>
      </ul>
    </d:passCriteria>
  </d:SVGTestCase>
  <title id="test-title">$RCSfile: pservers-grad-12-b.svg,v $</title>
  <defs>
    <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
  </defs>
  <g 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 id="Grad1">
      <stop stop-color="#009" offset="0"/>
      <stop stop-color="lime" 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 yellow)</text>
    <text font-size="12" x="10" y="115">Gradient is blue at the object center and lime at the object edges</text>
    <!-- ====================================================================== -->
    <!-- Radial gradient with gradientUnits=objectBoundingBox          ======== -->
    <!-- ====================================================================== -->
    <radialGradient id="Grad2" gradientUnits="objectBoundingBox" cx=".2" cy=".2" fx=".2" fy=".2" r=".5">
      <stop stop-color="#009" offset="0"/>
      <stop stop-color="lime" 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, fx=.2 fy=.2</text>
    <!-- ====================================================================== -->
    <!-- Gradient using gradientUnits="userSpaceOnUse"                          -->
    <!-- ====================================================================== -->
    <radialGradient id="Grad3" cx="25" cy="215" r="25" fx="25" fy="215" gradientUnits="userSpaceOnUse">
      <stop stop-color="yellow" 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 yellow to blue radial gradient from center to horizontal bounds</text>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.9 $</text>
  </g>
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  <!-- comment out this watermark once the test is approved -->
  <!--<g 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>