194 lines
6.9 KiB
XML
194 lines
6.9 KiB
XML
|
<!--
|
||
|
Any copyright is dedicated to the Public Domain.
|
||
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||
|
-->
|
||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||
|
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 900">
|
||
|
<!-- Bug 608161 - SVG SMIL: Don't use HasAttr to test for presence of animated
|
||
|
attributes.
|
||
|
|
||
|
Test animating gradient attributes doesn't rely on the presence of
|
||
|
attributes in the DOM, but also correctly detects attributes set by
|
||
|
animation.
|
||
|
|
||
|
The format of each test is that we have a base gradient named
|
||
|
(attName)Ref which does NOT specify the attribute under test, but instead
|
||
|
sets the attribute to a non-default value using animation.
|
||
|
|
||
|
Then we have a referencing gradient named (attName) that refers to the
|
||
|
base gradient and also does NOT specify the attribute under test.
|
||
|
|
||
|
When we go to look up the attribute under test we begin at (attName),
|
||
|
notice the attribute isn't specified (either in the DOM or by animation),
|
||
|
then go to (attName)Ref and detect that the attribute is specified there
|
||
|
by animation and use that value.
|
||
|
|
||
|
To the right of each test we also include a rect that directly references
|
||
|
(attName)Ref. The two rectangles should be identical but prior to fixing
|
||
|
this bug they were not.
|
||
|
-->
|
||
|
<!-- 1. gradientUnits: defaults to objectBoundingBox -->
|
||
|
<defs>
|
||
|
<linearGradient xlink:href="#gradientUnitsRef" id="gradientUnits"/>
|
||
|
<linearGradient id="gradientUnitsRef" x1="0" y1="0" x2="100" y2="0">
|
||
|
<set attributeName="gradientUnits" to="userSpaceOnUse"/>
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</linearGradient>
|
||
|
</defs>
|
||
|
<rect width="100" height="100" fill="url(#gradientUnits)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#gradientUnitsRef)"/>
|
||
|
</g>
|
||
|
<!-- 2. gradientTransform: defaults to identity -->
|
||
|
<defs>
|
||
|
<linearGradient xlink:href="#gradientTransformRef" id="gradientTransform"/>
|
||
|
<linearGradient id="gradientTransformRef">
|
||
|
<animateTransform attributeName="gradientTransform" type="rotate"
|
||
|
values="90 0.5 0.5" fill="freeze"/>
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</linearGradient>
|
||
|
</defs>
|
||
|
<g transform="translate(0 100)">
|
||
|
<rect width="100" height="100" fill="url(#gradientTransform)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#gradientTransformRef)"/>
|
||
|
</g>
|
||
|
</g>
|
||
|
<!-- 3. x1: defaults to 0%
|
||
|
x2: defaults to 100% -->
|
||
|
<defs>
|
||
|
<linearGradient xlink:href="#x1x2Ref" id="x1x2"/>
|
||
|
<linearGradient id="x1x2Ref">
|
||
|
<set attributeName="x1" to="40%"/>
|
||
|
<set attributeName="x2" to="60%"/>
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</linearGradient>
|
||
|
</defs>
|
||
|
<g transform="translate(0 200)">
|
||
|
<rect width="100" height="100" fill="url(#x1x2)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#x1x2Ref)"/>
|
||
|
</g>
|
||
|
</g>
|
||
|
<!-- 4. y1: defaults to 0%
|
||
|
y2: defaults to 0% -->
|
||
|
<defs>
|
||
|
<linearGradient xlink:href="#y1y2Ref" id="y1y2"/>
|
||
|
<linearGradient id="y1y2Ref" x2="0%">
|
||
|
<set attributeName="y1" to="40%"/>
|
||
|
<set attributeName="y2" to="60%"/>
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</linearGradient>
|
||
|
</defs>
|
||
|
<g transform="translate(0 300)">
|
||
|
<rect width="100" height="100" fill="url(#y1y2)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#y1y2Ref)"/>
|
||
|
</g>
|
||
|
</g>
|
||
|
<!-- 5. cx: defaults to 50%
|
||
|
cy: defaults to 50% -->
|
||
|
<defs>
|
||
|
<radialGradient xlink:href="#cxcyRef" id="cxcy"/>
|
||
|
<radialGradient id="cxcyRef">
|
||
|
<set attributeName="cx" to="0%"/>
|
||
|
<set attributeName="cy" to="100%"/>
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</radialGradient>
|
||
|
</defs>
|
||
|
<g transform="translate(0 400)">
|
||
|
<rect width="100" height="100" fill="url(#cxcy)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#cxcyRef)"/>
|
||
|
</g>
|
||
|
</g>
|
||
|
<!-- 6. r: defaults to 50% -->
|
||
|
<defs>
|
||
|
<radialGradient xlink:href="#rRef" id="r"/>
|
||
|
<radialGradient id="rRef">
|
||
|
<set attributeName="r" to="100%"/>
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</radialGradient>
|
||
|
</defs>
|
||
|
<g transform="translate(0 500)">
|
||
|
<rect width="100" height="100" fill="url(#r)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#rRef)"/>
|
||
|
</g>
|
||
|
</g>
|
||
|
<!-- 7. fx: defaults to cx
|
||
|
fy: defaults to cy -->
|
||
|
<defs>
|
||
|
<radialGradient xlink:href="#fxfyRef" id="fxfy"/>
|
||
|
<radialGradient id="fxfyRef">
|
||
|
<set attributeName="fx" to="20%"/>
|
||
|
<set attributeName="fy" to="80%"/>
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</radialGradient>
|
||
|
</defs>
|
||
|
<g transform="translate(0 600)">
|
||
|
<rect width="100" height="100" fill="url(#fxfy)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#fxfyRef)"/>
|
||
|
</g>
|
||
|
</g>
|
||
|
<!-- 8. spreadMethod: defaults to pad -->
|
||
|
<defs>
|
||
|
<linearGradient xlink:href="#spreadMethodRef" id="spreadMethod"/>
|
||
|
<linearGradient id="spreadMethodRef" x1="50%">
|
||
|
<set attributeName="spreadMethod" to="reflect"/>
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</linearGradient>
|
||
|
</defs>
|
||
|
<g transform="translate(0 700)">
|
||
|
<rect width="100" height="100" fill="url(#spreadMethod)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#spreadMethodRef)"/>
|
||
|
</g>
|
||
|
</g>
|
||
|
<!-- 9. xlink:href
|
||
|
This attribute is not affected by bug 608161 but we test it here for
|
||
|
completeness.
|
||
|
-->
|
||
|
<defs>
|
||
|
<linearGradient id="xlink">
|
||
|
<set attributeName="xlink:href" to="#xlinkRef"/>
|
||
|
</linearGradient>
|
||
|
<linearGradient id="xlinkRef">
|
||
|
<stop offset="0%" stop-color="#F60" />
|
||
|
<stop offset="100%" stop-color="#FF6" />
|
||
|
</linearGradient>
|
||
|
</defs>
|
||
|
<g transform="translate(0 800)">
|
||
|
<rect width="100" height="100" fill="url(#xlink)"/>
|
||
|
<g transform="translate(100)">
|
||
|
<rect width="100" height="100" fill="url(#xlinkRef)"/>
|
||
|
</g>
|
||
|
</g>
|
||
|
<!-- We were getting random but very minor anti-aliasing differences on OSX
|
||
|
and OSX64 along the edges of these gradients so we draw a thick stroke
|
||
|
over all the edges. -->
|
||
|
<path stroke="black" stroke-width="3" stroke-linecap="square" fill="none"
|
||
|
d="M0 0H200V900H0V0
|
||
|
M0 100H200
|
||
|
M0 200H200
|
||
|
M0 300H200
|
||
|
M0 400H200
|
||
|
M0 500H200
|
||
|
M0 600H200
|
||
|
M0 700H200
|
||
|
M0 800H200
|
||
|
M0 900H200
|
||
|
M100 0V900"/>
|
||
|
<!-- If adding more tests here, be sure to update the viewBox on the root svg
|
||
|
element -->
|
||
|
</svg>
|