reanimate-svg-0.13.0.0: test/bad/painting-render-01-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="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>