| <?xml version="1.0" encoding="UTF-8"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd"> |
| |
| <!--======================================================================--> |
| <!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =--> |
| <!--= Institute of Technology, Institut National de Recherche en =--> |
| <!--= Informatique et en Automatique, Keio University). All Rights =--> |
| <!--= Reserved. See http://www.w3.org/Consortium/Legal/. =--> |
| <!--======================================================================--> |
| <!-- =====================================================================--> |
| <!-- --> |
| <!-- gradPatt-stop-BE-10.svg --> |
| <!-- renamed for 1.1 suite to pservers-grad-05-b.svg --> |
| <!-- --> |
| <!-- Test that checks the capability of the stop-opacity in linear and --> |
| <!-- radial gradients. --> |
| <!-- --> |
| <!-- --> |
| <!-- Author : Haroon Sheikh 14-Mar-2000 --> |
| <!-- Revised for 1.1 : Jun Fujisawa 19-Feb-2002 --> |
| <!-- --> |
| <!-- History: --> |
| <!-- 14-Mar-2000, HSS: Serial#1 created. --> |
| <!-- 14-Mar-2000, LH=" fixed minor typos" ser#2. --> |
| <!-- 19-May-2000, JF: swapped a couple of opacities for radial test --> |
| <!-- to make effect more visible; ser#3 --> |
| <!-- 03-Aug-2000, LH=" update DOCTYPE for CR DTD, 20000802" ser# . --> |
| <!-- 16-Aug-2000, LH="rename" ser#4. --> |
| <!-- --> |
| <!-- =====================================================================--> |
| <!--======================================================================--> |
| <!--= Note. After October 2000, revision history is kept as CVS 'commit' =--> |
| <!--= log messages, and therefore is no longer in the preceding preamble.=--> |
| <!--======================================================================--> |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" viewBox="0 0 480 360" width="100%" height="100%" version="1.1" baseProfile="basic"> |
| <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"> |
| <OperatorScript version="$Revision: 1.7 $" testname="pservers-grad-05-b.svg"> |
| <Paragraph> |
| Test that checks the capability of the stop opacity in linear and radial |
| gradients. |
| </Paragraph> |
| <Paragraph> |
| There are two tests which contains rectangles with gradients using stop-opacity properties. |
| A cyan color text string "Background" is put behind both of the rectangles to help |
| demonstrate the opacity concept. |
| From top-down the appearance of objects is as follows. |
| </Paragraph> |
| <Paragraph> |
| The first rectangle has a linear gradient fill with a vector starting at top left |
| and going to bottom right. The stop colors are at 20% spacing apart and are in the |
| following order : violet, blue, lime, yellow, orange, red. |
| Also a stop opacity is given to the colors in the following order: 1, 0.2, 0.5, 0, 0.8, 1 |
| Because the gradient vector vector goes from (0,0) to (1,1) in object bounding box space |
| and because the object bounding box has a larger width than height, the gradient vector |
| is skewed off of a pure 45 degree angle. The gradient stripes are also skewed |
| so that they are no longer perpendicular to the gradient vector. |
| </Paragraph> |
| <Paragraph> |
| The next rectangle has a radial gradient fill with a multi-color stops from innermost |
| to outermost in the following order : black, yellow, red, blue, white, green. |
| Also a stop opacity is given to the colors in the following order: 1, 0.2, 0.5, 0, 0.8, 1 |
| </Paragraph> |
| <Paragraph> |
| The rendered picture should match the reference image exactly, except for possible |
| variations in the labelling text (per CSS2 rules). |
| </Paragraph> |
| </OperatorScript> |
| </SVGTestCase> |
| <title id="test-title">pservers-grad-05-b</title> |
| <desc id="test-desc">Test that checks the capability of the stop opacity in linear and radial gradients.</desc> |
| <!--======================================================================--> |
| <!--Content of Test Case follows... =====================--> |
| <!--======================================================================--> |
| <g id="test-body-content"> |
| <!-- ====================================================================== --> |
| <!-- Very simple black to red radial gradient ======== --> |
| <!-- ====================================================================== --> |
| <text font-family="Arial" font-size="60" fill="aqua" x="70" y="80">Background</text> |
| <linearGradient id="Grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1"> |
| <stop stop-color="rgb(238,130,238)" stop-opacity="1" offset="0"/> |
| <stop stop-color="blue" stop-opacity="0" offset="0.2"/> |
| <stop stop-color="lime" stop-opacity="0.5" offset="0.4"/> |
| <stop stop-color="yellow" stop-opacity="0.2" offset="0.6"/> |
| <stop stop-color="rgb(255,165,0)" stop-opacity="0.8" offset="0.8"/> |
| <stop stop-color="red" stop-opacity="1" offset="1"/> |
| </linearGradient> |
| <rect x="20" y="20" width="440" height="80" fill="url(#Grad1)" /> |
| <!-- ====================================================================== --> |
| <!-- Radial gradient on the stroke of a rectangle ======== --> |
| <!-- ====================================================================== --> |
| <text font-family="Arial" font-size="60" fill="aqua" x="70" y="210">Background</text> |
| <radialGradient id="Grad2" gradientUnits="userSpaceOnUse" cx="240" cy="210" r="220" fx="240" fy="210"> |
| <stop stop-color="black" stop-opacity="1" offset="0"/> |
| <stop stop-color="yellow" stop-opacity="0" offset="0.2"/> |
| <stop stop-color="red" stop-opacity="0.5" offset="0.4"/> |
| <stop stop-color="blue" stop-opacity="0.2" offset="0.6"/> |
| <stop stop-color="white" stop-opacity="0.8" offset="0.8"/> |
| <stop stop-color="green" stop-opacity="1" offset="1"/> |
| </radialGradient> |
| <rect x="20" y="150" width="440" height="80" fill="url(#Grad2)" stroke-width="40" /> |
| </g> |
| <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text> |
| <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/> |
| </svg> |
