third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/pservers-grad-08-b.svg

<?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-linearGr-BE-01.svg                                          -->

<!-- renamed for 1.1 suite to pservers-grad-08-b.svg                                -->

<!-- Author : Haroon Sheikh  09-Feb-2000                                   -->

<!--          1.1 revision by Rick Graham                                  -->

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

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  id="svg-root"

     width="100%" height="100%" viewBox="0 0 480 360">

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

        <OperatorScript version="$Revision: 1.7 $" testname="pservers-grad-08-b.svg">

            <Paragraph>

                Test that the viewer has basic capability to handle linear gradients

                on fills and stroke of  text.

            </Paragraph>

            <Paragraph>

                This test uses the following elements : &lt;linearGradient&gt;, &lt;stop&gt;

                and the following properties : stop-color, fill:url(#  ), stroke(url# )

            </Paragraph>

            <Paragraph>

                Both elements in this test use the same simple gradient. It is a linear gradient from blue (left) to red (right). From top-down the appearance of objects is as follows.

            </Paragraph>

            <Paragraph>

                The first item is a text string "Gradient on fill" with the gradient on the fill of the text.

            </Paragraph>

            <Paragraph>

                The second item is a text string that is not filled. It has a 2 user unit stroke on which the gradient is applied.

            </Paragraph>

            <Paragraph>

                The rendered picture should match the reference image, except for possible

                variations in the labelling text (per CSS2 rules).

            </Paragraph>

        </OperatorScript>

    </SVGTestCase>

    <title id="test-title">pservers-grad-08-b.svg</title>

    <desc id="test-desc">Test that the viewer has basic capability to handle linear gradients on

                         fills and stroke of objects and text. This means it needs to understand

                         the following elements : &lt;linearGradient&gt;, &lt;stop&gt; and the following properties :

                         stop-color, fill:url(# ), stroke(url# )</desc>

    <defs>

    <font id="MyFont" horiz-adv-x="416" >

    <font-face

        font-family="MyFont"

        units-per-em="1000"

        panose-1="2 0 0 6 3 0 0 2 0 4"

        ascent="700"

        descent="-127"

        alphabetic="0" />

        <missing-glyph horiz-adv-x="233" />

        <glyph unicode=" " glyph-name="space" horiz-adv-x="233" />

        <glyph unicode="G" glyph-name="G" horiz-adv-x="547" d="M40 700V0H510V383H295V253H360V150H190V550H510V700H40Z" />

        <glyph unicode="a" glyph-name="a" horiz-adv-x="435" d="M71 550L3 0H143L154 119H282L293 0H433L365 550H71ZM168 259L182 410H254L268 259H168Z" />

        <glyph unicode="d" glyph-name="d" horiz-adv-x="519" d="M27 550V410H87V140H27V0H482V550H27ZM230 410H339V140H230V410Z" />

        <glyph unicode="e" glyph-name="e" horiz-adv-x="442" d="M37 550V410V0H419V130H180V210H299V340H180V420H419V550H37Z" />

        <glyph unicode="f" glyph-name="f" horiz-adv-x="428" d="M37 550V410V0H180V196H349V326H180V420H410V550H37Z" />

        <glyph unicode="i" glyph-name="i" horiz-adv-x="217" d="M37 550V410V0H180V550H37Z" />

        <glyph unicode="k" glyph-name="k" horiz-adv-x="472" d="M180 207H233L325 0H480L344 284L474 550H319L233 347H180V550H37V410V0H180V207Z" />

        <glyph unicode="l" glyph-name="l" horiz-adv-x="435" d="M37 0H425V130H180V550H37V410V0Z" />

        <glyph unicode="n" glyph-name="n" horiz-adv-x="518" d="M180 550H37V410V0H180V324L338 0H481V550H338V226L180 550Z" />

        <glyph unicode="o" glyph-name="o" horiz-adv-x="484" d="M37 550V0H447V550H37ZM180 410H304V140H180V410Z" />

        <glyph unicode="r" glyph-name="r" horiz-adv-x="485" d="M37 550V410V0H180V164H222L305 0H465L367 174H444V550H37ZM180 420H301V294H180V420Z" />

        <glyph unicode="s" glyph-name="s" horiz-adv-x="468" d="M34 550V410V218H291V120H34V0H434V338H177V430H434V550H34Z" />

        <glyph unicode="t" glyph-name="t" horiz-adv-x="417" d="M5 550V410H137V0H280V410H412V550H5Z" />

    </font>

    </defs>



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

    <!--Content of Test Case follows...                  =====================-->

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

    <g id="test-body-content" transform="scale(1, 1.5)">

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

        <!-- Very simple blue to red linear gradient from left to right  ========== -->

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

        <linearGradient id="Gradient" gradientUnits="userSpaceOnUse" x1="10" y1="10" x2="440" y2="10">

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

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

        </linearGradient>

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

        <!-- Gradient on fill of text                                      ======== -->

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

        <text font-family="MyFont" font-size="68" fill="url(#Gradient)"  x="20" y="70">Gradient on fill</text>

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

        <!-- Gradient on stroke of text                                    ======== -->

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

        <text font-family="MyFont" x="20" y="160" font-size="55" fill="none" stroke="url(#Gradient)" stroke-width="3" >Gradient on stroke</text>

    </g>

       <text font-size="30" x="40" y="145">Linear gradient on filled text</text>

       <text font-size="30" x="30" y="280">Linear gradient on stroke of text</text>





    <text id="revision" x="10" y="340" font-size="50" 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>