<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="Tim Thompson" status="accepted"
    version="$Revision: 1.7 $" testname="$RCSfile: painting-render-01-b.svg,v $">
    <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/painting.html#RenderingProperties">
      <p>
        This tests shows the same linear gradient used with different values for the
        color-interpolation rendering property.  The top bar is painted using the
        default color-interpolation value, which should produce the same result as
        sRGB. The middle bar is painted using the 'sRGB' color-interpolation and
        should be the same as the top bar. Finally, the bottom bar is painted using
        the linearRGB interpolation, which produces a result visibly different from
        the top two bars: the white to blue ramp is whiter, the blue to red ramp
        goes through a pinkish color and the red to yellow ramp turns orange before
        the similar sRGB rampl.
      </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 top two gradients must look the same, and the bottom gradient must look
        different to the top two. The rendered picture should match the reference image, except for possible
        variations in the labelling text (per CSS2 rules).
      </p>
    </d:passCriteria>
  </d:SVGTestCase>
  <title id="test-title">$RCSfile: painting-render-01-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">
    <defs>
      <linearGradient id="gradientDefault" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="white"/>
        <stop offset=".33" stop-color="blue"/>
        <stop offset=".66" stop-color="red"/>
        <stop offset="1" stop-color="yellow"/>
      </linearGradient>
      <linearGradient id="gradientSRGB" gradientUnits="objectBoundingBox" color-interpolation="sRGB">
        <stop offset="0" stop-color="white"/>
        <stop offset=".33" stop-color="blue"/>
        <stop offset=".66" stop-color="red"/>
        <stop offset="1" stop-color="yellow"/>
      </linearGradient>
      <linearGradient id="gradientLinearRGB" gradientUnits="objectBoundingBox" color-interpolation="linearRGB">
        <stop offset="0" stop-color="white"/>
        <stop offset=".33" stop-color="blue"/>
        <stop offset=".66" stop-color="red"/>
        <stop offset="1" stop-color="yellow"/>
      </linearGradient>
    </defs>
    <text font-size="22" text-anchor="middle" x="225" y="30">Basic test of color-interpolation property.</text>
    <!-- ====================================== -->
    <!-- Default color-interpolation (sRGB)     -->
    <!-- ====================================== -->
    <g transform="translate(40, 80)">
      <rect x="0" y="0" width="300" height="40" fill="url(#gradientDefault)" stroke="black"/>
      <circle cx="0" cy="-10" r="3" fill="white" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black"/>
      <rect x="48" y="18" width="4" height="4" fill="rgb(128, 128, 255)" stroke="black"/>
      <line x1="50" y1="15" x2="50" y2="25" stroke="rgb(128, 128, 255)"/>
      <circle cx="100" cy="-10" r="3" fill="blue" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(100, 0)"/>
      <rect x="148" y="18" width="4" height="4" fill="rgb(128, 0, 128)" stroke="black"/>
      <line x1="150" y1="15" x2="150" y2="25" stroke="rgb(128, 0, 128)"/>
      <circle cx="200" cy="-10" r="3" fill="red" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(200, 0)"/>
      <rect x="248" y="18" width="4" height="4" fill="rgb(255, 128, 0)" stroke="black"/>
      <line x1="250" y1="15" x2="250" y2="25" stroke="rgb(255, 128, 0)"/>
      <circle cx="300" cy="-10" r="3" fill="yellow" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(300, 0)"/>
      <text x="310" y="20" font-size="16">default (sRGB)</text>
    </g>
    <!-- ====================================== -->
    <!-- sRGB color-interpolation               -->
    <!-- ====================================== -->
    <g transform="translate(40, 160)">
      <rect x="0" y="0" width="300" height="40" fill="url(#gradientSRGB)" stroke="black"/>
      <circle cx="0" cy="-10" r="3" fill="white" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black"/>
      <rect x="48" y="18" width="4" height="4" fill="rgb(128, 128, 255)" stroke="black"/>
      <line x1="50" y1="15" x2="50" y2="25" stroke="rgb(128, 128, 255)"/>
      <circle cx="100" cy="-10" r="3" fill="blue" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(100, 0)"/>
      <rect x="148" y="18" width="4" height="4" fill="rgb(128, 0, 128)" stroke="black"/>
      <line x1="150" y1="15" x2="150" y2="25" stroke="rgb(128, 0, 128)"/>
      <circle cx="200" cy="-10" r="3" fill="red" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(200, 0)"/>
      <rect x="248" y="18" width="4" height="4" fill="rgb(255, 128, 0)" stroke="black"/>
      <line x1="250" y1="15" x2="250" y2="25" stroke="rgb(255, 128, 0)"/>
      <circle cx="300" cy="-10" r="3" fill="yellow" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(300, 0)"/>
      <text x="310" y="20" font-size="16">sRGB</text>
    </g>
    <!-- ====================================== -->
    <!-- linearRGB color-interpolation          -->
    <!-- ====================================== -->
    <g transform="translate(40, 240)">
      <rect x="0" y="0" width="300" height="40" fill="url(#gradientLinearRGB)" stroke="black"/>
      <circle cx="0" cy="-10" r="3" fill="white" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black"/>
      <rect x="48" y="18" width="4" height="4" fill="rgb(128, 128, 255)" stroke="black"/>
      <line x1="50" y1="15" x2="50" y2="25" stroke="rgb(128, 128, 255)"/>
      <circle cx="100" cy="-10" r="3" fill="blue" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(100, 0)"/>
      <rect x="148" y="18" width="4" height="4" fill="rgb(128, 0, 128)" stroke="black"/>
      <line x1="150" y1="15" x2="150" y2="25" stroke="rgb(128, 0, 128)"/>
      <circle cx="200" cy="-10" r="3" fill="red" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(200, 0)"/>
      <rect x="248" y="18" width="4" height="4" fill="rgb(255, 128, 0)" stroke="black"/>
      <line x1="250" y1="15" x2="250" y2="25" stroke="rgb(255, 128, 0)"/>
      <circle cx="300" cy="-10" r="3" fill="yellow" stroke="black"/>
      <line x1="0" y1="-7" x2="0" y2="40" stroke="black" transform="translate(300, 0)"/>
      <text x="310" y="20" font-size="16">linearRGB</text>
    </g>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</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>