Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-29 17:18:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 4a5223502fa660ce03e470af6a61c8bc26c5a8ee

Browse source
This commit is contained in:
WPT Sync Bot 2018-04-23 21:13:37 -04:00
parent c5f7c9ccf3
commit e891345f26
1328 changed files with 36632 additions and 20588 deletions
Download patch file Download diff file Expand all files Collapse all files

10
tests/wpt/web-platform-tests/svg/import/animate-dom-01-f-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -44,7 +44,7 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<text x='30' y='30'>Testing SVGAnimationElement.getStartTime()</text>
<text x='340' y='340' display='none'>Test running...
@ -177,14 +177,14 @@
]]></script>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.11 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before After
Before After

36
tests/wpt/web-platform-tests/svg/import/animate-dom-02-f-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -12,22 +12,22 @@
template-version="1.3" reviewer="DAS" author="CM" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: animate-dom-02-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#InterfaceSVGAnimationElement">
<p>
This tests that the methods on the ElementTimeControl
interface return the undefined value, since the IDL
operations are declared to return void.
</p>
<p>
After the loading the document, a rectangle is shown
indicating whether all four methods from the ElementTimeControl
interface returned undefined when invoked. The rectangle
is black if the test did not run, red if the test failed
and green if the test succeeded.
</p>
<p>
This tests that the methods on the ElementTimeControl
interface return the undefined value, since the IDL
operations are declared to return void.
</p>
<p>
After the loading the document, a rectangle is shown
indicating whether all four methods from the ElementTimeControl
interface returned undefined when invoked. The rectangle
is black if the test did not run, red if the test failed
and green if the test succeeded.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
@ -47,7 +47,7 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<text x='10' y='30'>Testing ElementTimeControl method return values</text>
<rect id='r' x='10' y='50' width='50' height='50'/>
@ -70,14 +70,14 @@
]]></script>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<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="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

8
tests/wpt/web-platform-tests/svg/import/animate-elem-02-t-manual.svg
View file

@ -31,7 +31,7 @@
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test has passed if the four green rectangles each animate their height according to the following:</p>
<p>The leftmost rect:</p>
<p>The leftmost rect:</p>
<ul>
<li>when the animation starts the height of the green rect should make it align with the bottommost red indicator line</li>
<li>after two seconds the height should jump to be 10% of the height of the gray rect it overlaps</li>
@ -39,21 +39,21 @@
<li>after six seconds the height should jump to its final position, 10% of the height of the gray rect</li>
</ul>
<p>The next to leftmost rect:</p>
<ul>
<ul>
<li>when the animation starts the height of the green rect should be 110% of the height of the gray rect</li>
<li>after two seconds the height should jump to be 20% of the height of the gray rect</li>
<li>after four seconds the height should jump to be 110% of the height of the gray rect</li>
<li>after six seconds the height should jump to its final position, 20% of the height of the gray rect</li>
</ul>
<p>The next to rightmost rect:</p>
<ul>
<ul>
<li>when the animation starts the height of the green rect should make it align with the bottommost red indicator line</li>
<li>after two seconds the height should jump to be 10% of the height of the gray rect</li>
<li>after four seconds the height should jump to be 110% of the height of the gray rect</li>
<li>after six seconds the height should jump to its final position, 20% of the height of the gray rect</li>
</ul>
<p>The rightmost rect:</p>
<ul>
<ul>
<li>when the animation starts the height of the green rect should be 110% of the height of the gray rect</li>
<li>after two seconds the height should jump to be 20% of the height of the gray rect</li>
<li>after four seconds the height should jump to be 120% of the height of the gray rect</li>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/animate-elem-03-t-manual.svg
View file

@ -40,11 +40,11 @@
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test has passed if:
</p>
</p>
<ul>
<li>the topmost line shows the text "Sample 123" that animates its fill-color smoothly from blue to green over the course of six seconds</li>
<li>the middle line shows the text "Sample 123" in a larger font-size than the first line, in blue fill-color that doesn't animate</li>
<li>the bottommost line shows the text "Sample 123" in the same font-size as the topmost line, then smoothly animating the font-size
<li>the bottommost line shows the text "Sample 123" in the same font-size as the topmost line, then smoothly animating the font-size
to be larger than the middle line over the course of six seconds. At the same time the fill-color is smoothly animated from blue to green</li>
<li>after six seconds the rendered result matches the reference image</li>
</ul>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-05-t-manual.svg
View file

@ -33,7 +33,7 @@
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test has passed if a triangle is animated smoothly along the path indicated by the black line, and
it passes over the pink rectangles at the indicated times.
it passes over the pink rectangles at the indicated times.
When the animation starts the triangle should be positioned on top of the leftmost pink rectangle, after
3 seconds it should reach the middle pink rectangle, and after 6 seconds it should be positioned on top
of the rightmost pink rectangle where it should stop.

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/animate-elem-10-t-manual.svg
View file

@ -35,7 +35,7 @@
<p>
The test is passed if the two orange rects are animated so that the bottom part of each rectangle is at the position
indicated by the ruler lines at the particular time noted next to each ruler line. Between two noted times the
bottom part of each rect must be between the two corresponding ruler lines.
bottom part of each rect must be between the two corresponding ruler lines.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -65,7 +65,7 @@
<animate attributeName="height" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
</rect>
</g>
<g transform="translate(250,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="170">at 3 sec. </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Before After
Before After

6
tests/wpt/web-platform-tests/svg/import/animate-elem-11-t-manual.svg
View file

@ -28,12 +28,12 @@
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if the two orange rects are animated so that the bottom part of each rectangle is at the position indicated by the ruler lines at the particular time noted next to each ruler line. Between two noted times the bottom part of each rect must be between the two corresponding ruler lines.
The test is passed if the two orange rects are animated so that the bottom part of each rectangle is at the position indicated by the ruler lines at the particular time noted next to each ruler line. Between two noted times the bottom part of each rect must be between the two corresponding ruler lines.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -62,7 +62,7 @@
<animate attributeName="height" calcMode="paced" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
</rect>
</g>
<g transform="translate(250,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="136.33">at 3 sec. </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/animate-elem-12-t-manual.svg
View file

@ -27,13 +27,13 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if the two orange rects are animated so that the bottom part of each rectangle is at the position indicated by the ruler lines at the particular time noted next to each ruler line. Between two noted times the bottom part of each rect must be between the two corresponding ruler lines. The bottom of the left rectangles and the right rectangle must always be the same throughout the animation.
The test is passed if the two orange rects are animated so that the bottom part of each rectangle is at the position indicated by the ruler lines at the particular time noted next to each ruler line. Between two noted times the bottom part of each rect must be between the two corresponding ruler lines. The bottom of the left rectangles and the right rectangle must always be the same throughout the animation.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -62,7 +62,7 @@
<animate attributeName="height" calcMode="spline" keySplines="0,0,1,1;0,0,1,1;.75,0,0,.75" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
</rect>
</g>
<g transform="translate(250,50)">
<text x="0" y="203">at 0 sec.</text>
<text x="0" y="170">at 3 sec. </text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-13-t-manual.svg
View file

@ -28,7 +28,7 @@
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

6
tests/wpt/web-platform-tests/svg/import/animate-elem-14-t-manual.svg
View file

@ -28,12 +28,12 @@
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The right edge of the blue rectangle should line up with the ruler lines at the indicated times, and should jump directly to each position with no animation in between.
The right edge of the blue rectangle should line up with the ruler lines at the indicated times, and should jump directly to each position with no animation in between.
</p>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/animate-elem-15-t-manual.svg
View file

@ -29,12 +29,12 @@
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The blue rectangle should animate its width at a constant speed so that the right edge of the rectangle lines up with the ruler line at the indicated times.
The blue rectangle should animate its width at a constant speed so that the right edge of the rectangle lines up with the ruler line at the indicated times.
</p>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before After
Before After

6
tests/wpt/web-platform-tests/svg/import/animate-elem-17-t-manual.svg
View file

@ -28,13 +28,13 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
<p>
Run the test. No interaction required.
</p>
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The blue rectangle should animate its width so that the right edge of the rectangle lines up with the ruler line at the indicated times. Between 4 and 8 seconds the animation should show an ease-in/ease-out motion (i.e. a gradual change in speed).
The blue rectangle should animate its width so that the right edge of the rectangle lines up with the ruler line at the indicated times. Between 4 and 8 seconds the animation should show an ease-in/ease-out motion (i.e. a gradual change in speed).
</p>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/animate-elem-19-t-manual.svg
View file

@ -14,7 +14,7 @@
template-version="1.4" reviewer="SVGWG" author="Jon Ferraiolo" status="accepted"
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-19-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
<p>
Test 'calcMode'=linear.
</p>
<p>
@ -33,7 +33,7 @@
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The blue rectangle should animate its width so that the right edge of the rectangle lines up with the ruler line at the indicated times. The rate of change will increase after each ruler line is passed.
The blue rectangle should animate its width so that the right edge of the rectangle lines up with the ruler line at the indicated times. The rate of change will increase after each ruler line is passed.
</p>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before After
Before After

12
tests/wpt/web-platform-tests/svg/import/animate-elem-20-t-manual.svg
View file

@ -20,16 +20,16 @@
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Click "fade in", wait 3 seconds. Click "fade out", wait 3 seconds. Click "fade in" again, wait 6 seconds.
Click "fade in", wait 3 seconds. Click "fade out", wait 3 seconds. Click "fade in" again, wait 6 seconds.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test is passed if:</p>
<p>The test is passed if:</p>
<ul>
<li>The first time "fade in" is clicked, a blue rectangle should smoothly fade from white to blue over the course of three seconds.</li>
<li>When "fade out" is clicked, the blue rectangle should smoothly fade from blue to white over the course of three seconds.</li>
<li>When "fade in" is clicked the second time, the blue rectangle should smoothly fade from white to blue over the course of three seconds, and then directly fade out from blue to white over the course of three seconds.</li>
<li>The rendered picture matches the reference image, (except
<li>The first time "fade in" is clicked, a blue rectangle should smoothly fade from white to blue over the course of three seconds.</li>
<li>When "fade out" is clicked, the blue rectangle should smoothly fade from blue to white over the course of three seconds.</li>
<li>When "fade in" is clicked the second time, the blue rectangle should smoothly fade from white to blue over the course of three seconds, and then directly fade out from blue to white over the course of three seconds.</li>
<li>The rendered picture matches the reference image, (except
for possible variations in the labeling text (per CSS2 rules))
after activating the link on the fade-in button the first time
and waiting three seconds for the animation to complete. The picture

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before After
Before After

12
tests/wpt/web-platform-tests/svg/import/animate-elem-21-t-manual.svg
View file

@ -34,7 +34,7 @@
waiting three seconds, and then immediately perform a first click
on "fade out", waiting three seconds, and then immediately perform
a second click on "fade in", you should see the following. After
the first click on "fade in", the blue square goes from white to blue.
the first click on "fade in", the blue square goes from white to blue.
After the first click on "fade out", the blue square goes
from blue to white. After the second click on "fade in",
however, the blue square goes from white to blue, and then
@ -45,16 +45,16 @@
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Click "fade in", wait 3 seconds. Click "fade out", wait 3 seconds. Click "fade in" again, wait 6 seconds.
Click "fade in", wait 3 seconds. Click "fade out", wait 3 seconds. Click "fade in" again, wait 6 seconds.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test is passed if:</p>
<ul>
<li>The first time "fade in" is clicked, a blue rectangle should smoothly fade from white to blue, and two circles should fade from white to gray, all over the course of three seconds</li>
<li>When "fade out" is clicked, the blue rectangle should smoothly fade from blue to white, and the two circles should fade from gray to white, all over the course of three seconds.</li>
<li>When "fade in" is clicked the second time, it should behave as the first time "fade in" was clicked but immediately followed by the "fade out" behaviour described above, so that the shapes all fade in over the course of three seconds, and then out again over the course of three seconds.</li>
<li>The rendered picture matches the reference image, (except
<li>The first time "fade in" is clicked, a blue rectangle should smoothly fade from white to blue, and two circles should fade from white to gray, all over the course of three seconds</li>
<li>When "fade out" is clicked, the blue rectangle should smoothly fade from blue to white, and the two circles should fade from gray to white, all over the course of three seconds.</li>
<li>When "fade in" is clicked the second time, it should behave as the first time "fade in" was clicked but immediately followed by the "fade out" behaviour described above, so that the shapes all fade in over the course of three seconds, and then out again over the course of three seconds.</li>
<li>The rendered picture matches the reference image, (except
for possible variations in the labeling text (per CSS2 rules))
after activating the link on the fade-in button the first time
and waiting three seconds for the animation to compete. The picture

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

Before After
Before After

14
tests/wpt/web-platform-tests/svg/import/animate-elem-22-b-manual.svg
View file

@ -40,9 +40,9 @@
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test is passed if:</p>
<ul>
<li>At the start of the animation the innermost rectangle is filled by a yellow semitransparent color</li>
<li>Over the course of three seconds the yellow rect smoothly animates its width and height so that at time t=3s fully fills the middle rectangle</li>
<li>The animation then continues in the same fashion and at time t=9s fully fills the largest rectangle with blue stroke</li>
<li>At the start of the animation the innermost rectangle is filled by a yellow semitransparent color</li>
<li>Over the course of three seconds the yellow rect smoothly animates its width and height so that at time t=3s fully fills the middle rectangle</li>
<li>The animation then continues in the same fashion and at time t=9s fully fills the largest rectangle with blue stroke</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
@ -70,10 +70,10 @@
<animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="50" to="400"/>
<animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="50" to="240"/>
</rect>
<!-- Set up a new user coordinate system so that the text string's
origin is at (0,0), allowing rotation and scale relative to
the new origin
-->
<!-- Set up a new user coordinate system so that the text string's
origin is at (0,0), allowing rotation and scale relative to
the new origin
-->
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.6 $</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Before After
Before After

12
tests/wpt/web-platform-tests/svg/import/animate-elem-23-t-manual.svg
View file

@ -34,19 +34,19 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if:
The test is passed if:
</p>
<ul>
<li>From time t=0 seconds to t=3 seconds the large rectangle is filled with black</li>
<li>At t=3 seconds a blue circle appears inside the black rectangle</li>
<li>Between time t=3 seconds and t=6 seconds the fill of the circle is animated between blue and bluegreen</li>
<li>Between time t=6 seconds and t=9 seconds the fill of the circle is animated between bluegreen and green</li>
<li>From time t=0 seconds to t=3 seconds the large rectangle is filled with black</li>
<li>At t=3 seconds a blue circle appears inside the black rectangle</li>
<li>Between time t=3 seconds and t=6 seconds the fill of the circle is animated between blue and bluegreen</li>
<li>Between time t=6 seconds and t=9 seconds the fill of the circle is animated between bluegreen and green</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

34
tests/wpt/web-platform-tests/svg/import/animate-elem-24-t-manual.svg
View file

@ -46,23 +46,23 @@
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: animate-elem-24-t.svg,v $</title>
<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="I" glyph-name="I" horiz-adv-x="330" d="M30 700V550H90V150H30V0H300V150H240V550H300V700H30Z"/>
<glyph unicode="t" glyph-name="t" horiz-adv-x="417" d="M5 550V410H137V0H280V410H412V550H5Z"/>
<glyph unicode="s" glyph-name="s" horiz-adv-x="468" d="M34 550V410V218H291V120H34V0H434V338H177V430H434V550H34Z"/>
<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="198" d="M35 700L73 483H125L163 700H35Z"/>
<glyph unicode="a" glyph-name="a" horiz-adv-x="435" d="M71 550L3 0H143L154 119H282L293 0H433L365 550H71ZM168 259L182 410H254L268 259H168Z"/>
<glyph unicode="l" glyph-name="l" horiz-adv-x="435" d="M37 0H425V130H180V550H37V410V0Z"/>
<glyph unicode="i" glyph-name="i" horiz-adv-x="217" d="M37 550V410V0H180V550H37Z"/>
<glyph unicode="v" glyph-name="v" horiz-adv-x="430" d="M73 0H357L430 550H282L235 140H195L148 550H0L19 410L73 0Z"/>
<glyph unicode="e" glyph-name="e" horiz-adv-x="442" d="M37 550V410V0H419V130H180V210H299V340H180V420H419V550H37Z"/>
<glyph unicode="!" glyph-name="exclam" horiz-adv-x="237" d="M46 145V0H191V145H46ZM58 220H179L194 700H43L58 220Z"/>
</font>
</defs>
<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="I" glyph-name="I" horiz-adv-x="330" d="M30 700V550H90V150H30V0H300V150H240V550H300V700H30Z"/>
<glyph unicode="t" glyph-name="t" horiz-adv-x="417" d="M5 550V410H137V0H280V410H412V550H5Z"/>
<glyph unicode="s" glyph-name="s" horiz-adv-x="468" d="M34 550V410V218H291V120H34V0H434V338H177V430H434V550H34Z"/>
<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="198" d="M35 700L73 483H125L163 700H35Z"/>
<glyph unicode="a" glyph-name="a" horiz-adv-x="435" d="M71 550L3 0H143L154 119H282L293 0H433L365 550H71ZM168 259L182 410H254L268 259H168Z"/>
<glyph unicode="l" glyph-name="l" horiz-adv-x="435" d="M37 0H425V130H180V550H37V410V0Z"/>
<glyph unicode="i" glyph-name="i" horiz-adv-x="217" d="M37 550V410V0H180V550H37Z"/>
<glyph unicode="v" glyph-name="v" horiz-adv-x="430" d="M73 0H357L430 550H282L235 140H195L148 550H0L19 410L73 0Z"/>
<glyph unicode="e" glyph-name="e" horiz-adv-x="442" d="M37 550V410V0H419V130H180V210H299V340H180V420H419V550H37Z"/>
<glyph unicode="!" glyph-name="exclam" horiz-adv-x="237" d="M46 145V0H191V145H46ZM58 220H179L194 700H43L58 220Z"/>
</font>
</defs>
<defs>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
<font-face-src>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

Before After
Before After

30
tests/wpt/web-platform-tests/svg/import/animate-elem-25-t-manual.svg
View file

@ -60,21 +60,21 @@
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<text font-family="Arial" font-size="14" x="30" y="40">Test animation options for specifying the target attribute/property.</text>
<g xml:space="preserve" font-family="Arial" font-size="14" stroke-width="3" transform="translate(0,50)">
<text x="20" y="164">0-3 sec. </text>
<line x1="80" y1="160" x2="200" y2="160" fill="none" stroke="green"/>
<text x="20" y="124">at 6 sec. </text>
<line x1="80" y1="120" x2="200" y2="120" fill="none" stroke="green"/>
<rect id="rect1" x="100" y="80" width="100" height="80" fill="#FFFF00" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" from="80" to="40" begin="3s" dur="3s" fill="freeze"/>
</rect>
<text x="240" y="164">0-6 sec. </text>
<line x1="305" y1="160" x2="425" y2="160" fill="none" stroke="green"/>
<text x="240" y="124">at 9 sec. </text>
<line x1="305" y1="120" x2="425" y2="120" fill="none" stroke="green"/>
<rect id="rect2" x="325" y="80" width="100" height="80" fill="#FFFF00" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" attributeType="XML" from="80" to="40" begin="6s" dur="3s" fill="freeze"/>
</rect>
</g>
<text x="20" y="164">0-3 sec. </text>
<line x1="80" y1="160" x2="200" y2="160" fill="none" stroke="green"/>
<text x="20" y="124">at 6 sec. </text>
<line x1="80" y1="120" x2="200" y2="120" fill="none" stroke="green"/>
<rect id="rect1" x="100" y="80" width="100" height="80" fill="#FFFF00" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" from="80" to="40" begin="3s" dur="3s" fill="freeze"/>
</rect>
<text x="240" y="164">0-6 sec. </text>
<line x1="305" y1="160" x2="425" y2="160" fill="none" stroke="green"/>
<text x="240" y="124">at 9 sec. </text>
<line x1="305" y1="120" x2="425" y2="120" fill="none" stroke="green"/>
<rect id="rect2" x="325" y="80" width="100" height="80" fill="#FFFF00" stroke="#FF00FF" stroke-width="4">
<animate attributeName="height" attributeType="XML" from="80" to="40" begin="6s" dur="3s" fill="freeze"/>
</rect>
</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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Before After
Before After

28
tests/wpt/web-platform-tests/svg/import/animate-elem-27-t-manual.svg
View file

@ -65,20 +65,20 @@
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<text font-family="Arial" font-size="16" text-anchor="middle" x="225" y="40">Test animation options for specifying the target element.</text>
<g xml:space="preserve" font-family="Arial" font-size="14" text-anchor="end" stroke-width="3">
<text x="80" y="244">0 to 3 sec. </text>
<line x1="80" y1="240" x2="200" y2="240" fill="none" stroke="green"/>
<text x="80" y="124">at 6 sec. </text>
<line x1="80" y1="120" x2="200" y2="120" fill="none" stroke="green"/>
<rect id="rect1" x="100" y="80" width="100" height="160" fill="blue" stroke="#36e" stroke-width="4"/>
<animate xlink:href="#rect1" attributeName="height" attributeType="XML" from="160" to="40" begin="3s" dur="3s" fill="freeze"/>
<text x="305" y="244">0 to 6 sec. </text>
<line x1="305" y1="240" x2="425" y2="240" fill="none" stroke="green"/>
<text x="305" y="124">at 9 sec. </text>
<line x1="305" y1="120" x2="425" y2="120" fill="none" stroke="green"/>
<rect id="rect2" x="325" y="80" width="100" height="160" fill="blue" stroke="#36e" stroke-width="4">
<animate attributeName="height" attributeType="XML" from="160" to="40" begin="6s" dur="3s" fill="freeze"/>
</rect>
</g>
<text x="80" y="244">0 to 3 sec. </text>
<line x1="80" y1="240" x2="200" y2="240" fill="none" stroke="green"/>
<text x="80" y="124">at 6 sec. </text>
<line x1="80" y1="120" x2="200" y2="120" fill="none" stroke="green"/>
<rect id="rect1" x="100" y="80" width="100" height="160" fill="blue" stroke="#36e" stroke-width="4"/>
<animate xlink:href="#rect1" attributeName="height" attributeType="XML" from="160" to="40" begin="3s" dur="3s" fill="freeze"/>
<text x="305" y="244">0 to 6 sec. </text>
<line x1="305" y1="240" x2="425" y2="240" fill="none" stroke="green"/>
<text x="305" y="124">at 9 sec. </text>
<line x1="305" y1="120" x2="425" y2="120" fill="none" stroke="green"/>
<rect id="rect2" x="325" y="80" width="100" height="160" fill="blue" stroke="#36e" stroke-width="4">
<animate attributeName="height" attributeType="XML" from="160" to="40" begin="6s" dur="3s" fill="freeze"/>
</rect>
</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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5 KiB

After

Width:  |  Height:  |  Size: 5 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/animate-elem-29-b-manual.svg
View file

@ -21,7 +21,7 @@
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
First click once on "fade in" and
then, once the animation has completed, click once on "fade out".
then, once the animation has completed, click once on "fade out".
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
@ -43,7 +43,7 @@
should remain looking the same way indefinitely, until another
link is activated.
</p>
<!--
<!--
With a second click on "fade in", however, the behavior might
be different. In the case of having a first click on "fade in",
waiting three seconds, and then immediately perform a first click

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/animate-elem-31-t-manual.svg
View file

@ -18,9 +18,9 @@
The purpose of this test is to test animation of the display attribute.
</p>
<p>
The test shows two gray rectangles which are filled with colored circles during the length of the animation (8 sec).
The test shows two gray rectangles which are filled with colored circles during the length of the animation (8 sec).
The circles in the top rectangle are displayed/hidden by animating the display attribute.
The circles in the bottom rectangle are serving as the reference and are displayed/hidden by animating the visibility attribute.
The circles in the bottom rectangle are serving as the reference and are displayed/hidden by animating the visibility attribute.
A correct implementation should display/hide circles with the same color from the top and bottom rectangle at the same time.
</p>
<p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/animate-elem-33-t-manual.svg
View file

@ -87,11 +87,11 @@
</g>
<!-- THIRD TEST-->
<!-- The length of the lines in the polyline (motionpath) are 100,50 and 100.
The animated circle starts at the midpoint of one of the "legs" and also pass
this point at time 1.4 since
1.4 = 4*(0.25) + (4*(0.75-0.25))*(1/5).
Where 0.25 is the time at keyPoint 1 (2nd) and 1/5 since the control circle is at
1/5 of the distance between keyPoint 1 and 0 (2nd and 3rd).-->
The animated circle starts at the midpoint of one of the "legs" and also pass
this point at time 1.4 since
1.4 = 4*(0.25) + (4*(0.75-0.25))*(1/5).
Where 0.25 is the time at keyPoint 1 (2nd) and 1/5 since the control circle is at
1/5 of the distance between keyPoint 1 and 0 (2nd and 3rd).-->
<g transform="translate(110, 180) scale(0.6)">
<text x="-115" y="-30" font-size="30" stroke="none" fill="#ccc">3</text>
<text x="-85" y="-60" font-size="30" stroke="none" fill="#ccc">2.6</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-34-t-manual.svg
View file

@ -77,7 +77,6 @@
</polygon>
<!-- SECOND TEST, FILL-RULE-->
<g transform="scale(0.3) translate(-450, 500)">
<path fill-rule="nonzero" fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
@ -105,7 +104,6 @@
</g>
</g>
<text x="5" y="225" font-size="28">Animation on: 'points' and 'fill-rule'.</text>
<text x="5" y="255" font-size="18">Digit should match outline at indicated time.</text>
<text x="5" y="275" font-size="18">Filled square should follow morphing digit discretely.</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-36-t-manual.svg
View file

@ -100,7 +100,6 @@
<text y="60" text-anchor="middle">&lt;switch&gt;</text>
</g>
<g transform="translate(60,220)">
<a id="animatedAnchor" xlink:href="" fill="rgb(230,230,230)" stroke="rgb(255,180,0)">
<g>
@ -130,7 +129,6 @@
<text id="textID" fill="rgb(230,230,230)" stroke="rgb(255,180,0)" font-family="MyDecFont" font-size="40" text-anchor="middle">123</text>
<animateTransform attributeName="transform" xlink:href="#textID" type="rotate" values="0;360;180;360" dur="3s"/>
<text y="60" text-anchor="middle">&lt;text&gt;</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-37-t-manual.svg
View file

@ -32,7 +32,7 @@
<p>The test passes if:</p>
<ul>
<li>each of the seven shapes rotates clockwise, then anti-clockwise, then clockwise again,</li>
<li>and the circle is scaled down, then up, then down again</li>
<li>and the circle is scaled down, then up, then down again</li>
</ul>
<p>over the course of three seconds.</p>
<p>The static reference image shows the final state of the animation.</p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/animate-elem-40-t-manual.svg
View file

@ -122,7 +122,6 @@
<text text-anchor="middle" y="60">x/y on &lt;rect&gt;</text>
</g>
<g transform="translate(300,90)">
<rect x="-15" y="-15" width="50" height="20" fill="black" stroke="rgb(255,180,0)">
<animate attributeName="x" values="-15;15;15;-15;-15" begin="0s" dur="4s"/>
@ -149,13 +148,11 @@
<animate xlink:href="#textID" attributeName="x" values="-15;15;15;-15;-15" begin="0s" dur="4s"/>
<animate xlink:href="#textID" attributeName="y" values="-15;-15;15;15;-15" begin="0s" dur="4s"/>
<use xlink:href="#markerGroup"/>
<text text-anchor="middle" y="60">x/y on &lt;text&gt;</text>
</g>
<g transform="translate(60,210)">
<defs>
<g id="markerGroup2" fill="rgb(230,230,230)" stroke="rgb(255,180,0)">
@ -202,7 +199,6 @@
<text text-anchor="middle" y="75">on &lt;image&gt;</text>
</g>
<g transform="translate(300,210)">
<rect x="-40" y="-40" width="50" height="50" fill="gray">
<animate attributeName="width" values="50;80;20;50" begin="0s" dur="3s"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before After
Before After

1
tests/wpt/web-platform-tests/svg/import/animate-elem-46-t-manual.svg
View file

@ -131,7 +131,6 @@
<animate xlink:href="#textID_0" attributeName="text-anchor" values="end;middle;start" dur="3s" fill="freeze"/>
<animateTransform xlink:href="#textID_0" attributeName="transform" type="translate" values="0;30;60" dur="3s" fill="freeze" calcMode="discrete"/>
<g transform="translate(110, 0)" text-anchor="end" font-size="30" font-weight="bold">
<animate attributeName="text-anchor" values="end;middle;start" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" values="0;30;60" calcMode="discrete" dur="3s" fill="freeze" additive="sum"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-62-t-manual.svg
View file

@ -145,7 +145,7 @@
<text y="150">accessKey()</text>
<text y="175">wallclock()</text>
</g>
<g id="timeMarkersText" transform="translate(100, -15)" text-anchor="middle" font-size="8">
<text>0s</text>
<text x="12">1s</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-64-t-manual.svg
View file

@ -47,7 +47,7 @@
<p>The test passes if after three seconds, in each of the three rows,
the red rectangle is in the column at the times indicated.
Thus, from the document load until 2s afterwards, the red
square in the first row must be in the right column,
square in the first row must be in the right column,
and after the 2s it must be in the left column. In the
other two rows, the red square must remain in the
right column.</p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-66-t-manual.svg
View file

@ -106,7 +106,7 @@
<text>&gt; 5s</text>
<text x="80">0s-5s</text>
</g>
<g transform="translate(150,40)" stroke="black">
<defs>
<rect id="shadow" x="-6" y="-6" width="12" height="12" fill="#ccc" stroke="black" stroke-width="1"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

Before After
Before After

1
tests/wpt/web-platform-tests/svg/import/animate-elem-70-t-manual.svg
View file

@ -127,7 +127,6 @@
</rect>
</g>
<g id="setFour" transform="translate(0, 125)">
<use xlink:href="#shadow" x="0"/>
<use xlink:href="#shadow" x="80"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-elem-77-t-manual.svg
View file

@ -85,7 +85,7 @@
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The document is animated such that it alternates between two states, an alternation occurring every second.
The document is animated such that it alternates between two states, an alternation occurring every second.
For the test to pass each row must show a colored letter A that alternates between the two exact shapes and positions shown
by the gray silhouettes.
</p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Before After
Before After

1
tests/wpt/web-platform-tests/svg/import/animate-elem-80-t-manual.svg
View file

@ -190,7 +190,6 @@
<text y="75" text-anchor="middle">(sx and sy)</text>
</g>
<g transform="translate(20,180)">
<use xlink:href="#ref" x="40" y="40"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Before After
Before After

14
tests/wpt/web-platform-tests/svg/import/animate-elem-81-t-manual.svg
View file

@ -60,19 +60,19 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>The test is passed if:</p>
<ul>
<li>the scale of the upper leftmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the upper leftmost yellow rectangle</li>
<li>the scale and rotation of the second upper grey rectangle from the left is smoothly animated over the course of 5 seconds to fill the second upper yellow rectangle from the left</li>
<li>the scale of the upper third grey rectangle from the left is smoothly animated over the course of 2.5 seconds to completely fill the upper third yellow rectangle from the left, and then repeated once so that at time t=5 seconds it completely fills the same yellow rectangle</li>
<li>the scale of the upper rightmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the upper rightmost yellow rectangle</li>
<li>the scale of the lower leftmost grey rectangle is smoothly animated over the course of 2.5 seconds to completely fill the lower leftmost yellow rectangle, and then repeated once so that at time t=5 seconds it completely fills the same yellow rectangle</li>
<li>the scale of the lower rightmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the lower rightmost yellow rectangle</li>
<li>the scale of the upper leftmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the upper leftmost yellow rectangle</li>
<li>the scale and rotation of the second upper grey rectangle from the left is smoothly animated over the course of 5 seconds to fill the second upper yellow rectangle from the left</li>
<li>the scale of the upper third grey rectangle from the left is smoothly animated over the course of 2.5 seconds to completely fill the upper third yellow rectangle from the left, and then repeated once so that at time t=5 seconds it completely fills the same yellow rectangle</li>
<li>the scale of the upper rightmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the upper rightmost yellow rectangle</li>
<li>the scale of the lower leftmost grey rectangle is smoothly animated over the course of 2.5 seconds to completely fill the lower leftmost yellow rectangle, and then repeated once so that at time t=5 seconds it completely fills the same yellow rectangle</li>
<li>the scale of the lower rightmost grey rectangle is smoothly animated over the course of 5 seconds to completely fill the lower rightmost yellow rectangle</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

3
tests/wpt/web-platform-tests/svg/import/animate-elem-82-t-manual.svg
View file

@ -206,7 +206,7 @@
<text y="75" text-anchor="middle">linear translation</text>
</g>
<g transform="translate(60,220)">
<rect x="-15" y="-15" width="30" height="30" stroke="none" fill="rgb(230,230,230)">
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1,2;3,2;1,1" dur="3s" calcMode="paced" fill="freeze"/>
@ -285,7 +285,6 @@
<text y="75" text-anchor="middle">linear rotation</text>
</g>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/animate-elem-83-t-manual.svg
View file

@ -79,11 +79,11 @@
gray shapes morphs appropriately according to the following descriptions:</p>
<ol>
<li>The gray shape must morph from the diamond to the flower-like shape.</li>
<li>The gray shape must morph just like sub-test #1, from the diamond to the flower-like shape.</li>
<li>The gray shape must morph from the diamond, to the flower-like shape, and then to the large, rounded diamond shape.</li>
<li>The gray shape must morph from the lower-right pointing kite shape to the upper-left pointing kite shape.</li>
<li>The gray shape must morph from the tall shape to the wide shape.</li>
<li>The gray shape must morph from the wide "D" shape to the narrow "D" shape.</li>
<li>The gray shape must morph just like sub-test #1, from the diamond to the flower-like shape.</li>
<li>The gray shape must morph from the diamond, to the flower-like shape, and then to the large, rounded diamond shape.</li>
<li>The gray shape must morph from the lower-right pointing kite shape to the upper-left pointing kite shape.</li>
<li>The gray shape must morph from the tall shape to the wide shape.</li>
<li>The gray shape must morph from the wide "D" shape to the narrow "D" shape.</li>
</ol>
<p>In addition, during the animations whenever the gray shape has the same shape as
a reference shape, the stroke of the reference shape must be shown thicker momentarily.</p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

6
tests/wpt/web-platform-tests/svg/import/animate-elem-84-t-manual.svg
View file

@ -15,17 +15,17 @@
version="$Revision: 1.6 $" testname="$RCSfile: animate-elem-84-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test animation of color keywords that resolve to animatable RGB values.
Test animation of color keywords that resolve to animatable RGB values.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test is passed if five
The test is passed if five
black squares are shown, after two seconds, all five squares turn red and
then smoothly animate the fill color to green over the next five seconds.
</p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before After
Before After

14
tests/wpt/web-platform-tests/svg/import/animate-elem-85-t-manual.svg
View file

@ -15,9 +15,9 @@
version="$Revision: 1.8 $" testname="$RCSfile: animate-elem-85-t.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
The first subtest tests animateColor with 'to' and 'from' values including
The first subtest tests animateColor with 'to' and 'from' values including
currentColor. The second subtest checks that the value of currentColor is the
current animated value of the color property, by animating the color property
current animated value of the color property, by animating the color property
at the same time as animating fill with a 'from' or 'to' value of currentColor.
</p>
<!-- moved from accepted to issue pending verification of correct behaviour for lower rect on second subtest -->
@ -31,9 +31,9 @@
The first subtest is passed if all
four rectangles at the top smoothly animate from black to green over 5 seconds.
During this time the bottom two rectangles must be blue.</p>
<p>The second subtest, which starts after the first one completes, is passed if
the bottom two rectangles smoothly animate from green (at five seconds), through
dark cyan (at 7.5 seconds), to cyan (at 10 seconds and above). Colored circles
<p>The second subtest, which starts after the first one completes, is passed if
the bottom two rectangles smoothly animate from green (at five seconds), through
dark cyan (at 7.5 seconds), to cyan (at 10 seconds and above). Colored circles
indicate the appropriate colors at these times.
</p>
</d:passCriteria>
@ -75,8 +75,8 @@
<animateColor attributeName="color" to="cyan" from="blue" begin="5s" dur="5s" fill="freeze"/>
</rect>
<!--
color fill
4s #000000 #0000ff
color fill
4s #000000 #0000ff
5s #0000ff #008000
7.5s #0080ff #008080
10s #00ffff #00ffff

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Before After
Before After

12
tests/wpt/web-platform-tests/svg/import/animate-elem-87-t-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -56,7 +56,7 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<text x='10' y='40'>Test zero value of a scale transform animation</text>
<g transform='translate(150,150)'>
@ -73,17 +73,17 @@
</circle>
<text y='100' text-anchor='middle' font-size='12'>&lt;animateTransform type='scale' by='1'/&gt;</text>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.5 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before After
Before After

12
tests/wpt/web-platform-tests/svg/import/animate-elem-88-t-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -16,7 +16,7 @@
This tests that any which space before semicolon separators in
a <code>values=""</code> attribute on an animation element is ignored.
</p>
<p>
<p>
The test consists of a single rectangle whose height is animated
with a <code>values=" 0 ; 50 "</code> attribute.
</p>
@ -45,7 +45,7 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<text x='10' y='40'>Test values attribute list syntax</text>
<rect x='10' y='50' width='50' height='0'>
@ -54,14 +54,14 @@
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.6 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After

12
tests/wpt/web-platform-tests/svg/import/animate-elem-89-t-manual.svg
View file

@ -21,13 +21,13 @@
Test possible values for 'calcMode="spline"', with both commas, whitespace, and mixed separators
</p>
<p>
Six animations (three sets of two) have been defined. The three green ones on the left show rectangles which get smaller. The three orange ones on the right show rectangles of constant size, which move.
Six animations (three sets of two) have been defined. The three green ones on the left show rectangles which get smaller. The three orange ones on the right show rectangles of constant size, which move.
The black text and grey ruler lines help show the sizes and movement of the rectangles over time.
<!-- derived from animate-elem-12-t.svg: by duplicating the animated rectangles, then changing the list separators -->
</p>
</d:testDescription>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
@ -60,11 +60,11 @@
<line x1="70" y1="111" x2="450" y2="111"/>
<line x1="70" y1="0" x2="450" y2="0"/>
</g>
</g>
</g>
<!-- first set of three subtests, keySplines on animation element -->
<g transform="translate(60,50)">
<rect x="140" y="-10" width="50" height="210" fill="rgb(34, 139, 34)" stroke="#555" stroke-width="4">
<animate attributeName="height" calcMode="spline" keySplines="0,0,1,1;0,0,1,1;.75,0,0,.75" values="210;177;121;10" begin="0s" dur="9s" fill="freeze"/>
<!-- commas -->
@ -78,7 +78,7 @@
<!-- commas and spaces -->
</rect>
</g>
<!-- second set of three subtests, keySplines on animateMotion element -->
<g transform="translate(250,50)">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

40
tests/wpt/web-platform-tests/svg/import/animate-elem-90-b-manual.svg
View file

@ -15,8 +15,8 @@
version="$Revision: 1.3 $" testname="$RCSfile: animate-elem-90-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/animate.html#Animation">
<p>
Test that the class attribute is animatable and that style
sheets select on the animated value.
Test that the class attribute is animatable and that style
sheets select on the animated value.
<!-- not clear whether to link to dev.w3.org or to /TR
http://dev.w3.org/SVG/profiles/1.1F2/publish/styling.html#ClassAttribute
-->
@ -29,28 +29,28 @@ http://dev.w3.org/SVG/profiles/1.1F2/publish/styling.html#ClassAttribute
and 'animate'. It requires that CSS style sheets are supported.
</p>
<p>
The test shows a circle which is initially hidden, becomes visible and blue at
3s, abruptly changing to dark red at 5s. Two overlapping animations both animate the
class attribute. The class attribute, as a string value, does not support
linear interpolation so a discrete animation is produced, changing from the
start to the end value midway through the animation duration.
The test shows a circle which is initially hidden, becomes visible and blue at
3s, abruptly changing to dark red at 5s. Two overlapping animations both animate the
class attribute. The class attribute, as a string value, does not support
linear interpolation so a discrete animation is produced, changing from the
start to the end value midway through the animation duration.
</p>
<p>
The first animation starts at 2s and lasts for 4s so the mid point is at 3s.
The second animation starts at 3s and lasts for 4s so the midpoint is at 5s.
The first animation starts at 2s and lasts for 4s so the mid point is at 3s.
The second animation starts at 3s and lasts for 4s so the midpoint is at 5s.
The file includes various guides that can be used to verify the
correctness of the animation. The value of the class attribute
at 02 is "start" so the first CSS rule matches. At 3s it becomes "midway"
so the second rule matches. At 5s it becomes "final midway" so the second and
third rules match; the third rule has higher specificity so determines the fill color.
at 02 is "start" so the first CSS rule matches. At 3s it becomes "midway"
so the second rule matches. At 5s it becomes "final midway" so the second and
third rules match; the third rule has higher specificity so determines the fill color.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The color of the large circle must match the colour of the smaller guide
boxes on the left at times 0s, 3s and 5s. If the text "CSS not supported"
is visible, the test does not apply.
The color of the large circle must match the colour of the smaller guide
boxes on the left at times 0s, 3s and 5s. If the text "CSS not supported"
is visible, the test does not apply.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -62,10 +62,10 @@ http://dev.w3.org/SVG/profiles/1.1F2/publish/styling.html#ClassAttribute
</font-face-src>
</font-face>
<style type="text/css">
.start {visibility: hidden }
.midway {visibility: visible; fill: rgb(0,0,255); }
#test-body-content .final {fill: rgb(128,0,0); }
.hideme {display: none;}
.start {visibility: hidden }
.midway {visibility: visible; fill: rgb(0,0,255); }
#test-body-content .final {fill: rgb(128,0,0); }
.hideme {display: none;}
</style>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Before After
Before After

20
tests/wpt/web-platform-tests/svg/import/animate-interact-events-01-t-manual.svg
View file

@ -22,9 +22,9 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Mouseover each of the red rectangles, and then click on the bottommost rectangle.
</p>
<p>
Mouseover each of the red rectangles, and then click on the bottommost rectangle.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
@ -52,13 +52,13 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<!-- SVGElementInstance animates fill on mouseover -->
<rect id="rect" width="50" height="50" fill="red">
<set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/>
</rect>
</defs>
<defs>
<!-- SVGElementInstance animates fill on mouseover -->
<rect id="rect" width="50" height="50" fill="red">
<set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/>
</rect>
</defs>
<text x="120" y="20" font-size="15">Shadow tree event listener chain</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-interact-pevents-02-t-manual.svg
View file

@ -107,7 +107,7 @@
fill="black">$Revision: 1.3 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- comment out this watermark once the test is approved
<!-- 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"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-interact-pevents-03-t-manual.svg
View file

@ -210,7 +210,7 @@
fill="black">$Revision: 1.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- comment out this watermark once the test is approved
<!-- 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"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-interact-pevents-04-t-manual.svg
View file

@ -199,7 +199,7 @@
fill="black">$Revision: 1.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- comment out this watermark once the test is approved
<!-- 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"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-pservers-grad-01-b-manual.svg
View file

@ -20,7 +20,7 @@
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Load the svg and wait 5 seconds for the animation to run, then compare the image to the reference.
Load the svg and wait 5 seconds for the animation to run, then compare the image to the reference.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/animate-script-elem-01-b-manual.svg
View file

@ -28,7 +28,7 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before After
Before After

8
tests/wpt/web-platform-tests/svg/import/color-prof-01-f-manual.svg
View file

@ -21,13 +21,13 @@
</p>
<!-- the issue is that SVG 1.1 does not require ICC color profile support, it is optional.
So the pass criteria are incorrect. In fact, this is untestable as the feature is purely
optional and does not correspond to a named conformance class.
optional and does not correspond to a named conformance class.
Fixed in the SVG Color module.
-->
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
</p>
<p>
Run the test. No interaction required.
@ -36,8 +36,8 @@
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
If the two images (each of 9 colored squares) look identical, the test fails.
If the colours in the lower right image are more saturated, brighter versions of
those in the top left image, as shown by the reference image, the test is passed.
If the colours in the lower right image are more saturated, brighter versions of
those in the top left image, as shown by the reference image, the test is passed.
</p>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/color-prop-01-b-manual.svg
View file

@ -29,7 +29,7 @@
There are three subtests. The first subtest, to the top left, is passed if the circle has a green fill. The second subtest,
to the top right, is passed if the circle has a green stroke. The third subtest shows a rectangle
with a gradient fill, which has three stops. The subtest is passed if central stop is green,
fading off to blue to the left and pale yellow to the right.
fading off to blue to the left and pale yellow to the right.
</p>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

8
tests/wpt/web-platform-tests/svg/import/color-prop-02-f-manual.svg
View file

@ -16,9 +16,9 @@
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">
<p>
Tests if the color datatype is supported. There are multiple syntaxes for
specifying the same color, such as #37F and #3377FF. This test is focussed on the
X11 color names, which are not part of the tiny profile.
Each group of circles uses four forms - 6-digit hex, rbg() integer form, rgb() percentage form,
specifying the same color, such as #37F and #3377FF. This test is focussed on the
X11 color names, which are not part of the tiny profile.
Each group of circles uses four forms - 6-digit hex, rbg() integer form, rgb() percentage form,
and named ('X11') colors. It does not use 3-digit hex, because the colors used in this test
cannot be represented in three digit form.
</p>
@ -31,7 +31,7 @@
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
For each of the nine groups of circles shown here, all circles must
be identical in color, and the same color as in the reference image.
be identical in color, and the same color as in the reference image.
</p>
</d:passCriteria>
</d:SVGTestCase>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

8
tests/wpt/web-platform-tests/svg/import/color-prop-03-t-manual.svg
View file

@ -18,7 +18,7 @@
Tests if the color datatype is supported. There are multiple syntaxes for
specifying the same color, such as #37F and #3377FF.
For each of the six groups shown here,
each of the circles in the group uses one of the syntactical forms
each of the circles in the group uses one of the syntactical forms
</p>
<p>
The first row uses five forms - 3-digit hex, 6-digit hex, rbg() integer form, rgb() percentage form,
@ -33,12 +33,12 @@ For each of the six groups shown here,
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
For each of the six groups of circles shown here, all circles must
be identical in color, and the same color as in the reference image.
be identical in color, and the same color as in the reference image.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -75,7 +75,7 @@ For each of the six groups shown here,
<polygon points="345,40 365,60 345,80 325,60" fill="blue"/>
</g>
<!-- no names for three digit colors except for 00 and ff -->
<!-- 11=17 22=34 33=51 44=68 55=85 66=102 77=119
<!-- 11=17 22=34 33=51 44=68 55=85 66=102 77=119
88=136 99=153 aa=170 bb=187 cc=204 dd=221 ee=238 -->
<g>
<circle cx="75" cy="135" r="20" fill="#a01"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/color-prop-04-t-manual.svg
View file

@ -19,7 +19,7 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.</p>
<p>Run the test. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

Before After
Before After

6
tests/wpt/web-platform-tests/svg/import/conform-viewers-02-f-manual.svg
View file

@ -45,9 +45,9 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<text x="240" y="40" text-anchor="middle">Test data uri with svgz content</text>
<text fill="black" x="50%" y="200" text-anchor="middle">FAILED</text>
<text x="240" y="40" text-anchor="middle">Test data uri with svgz content</text>
<text fill="black" x="50%" y="200" text-anchor="middle">FAILED</text>
<image xlink:href="data:image/svg+xml;base64,H4sICA/BlksCA3N0YXIuc3ZnAMVUwW7bMAw9d8D+QVAvLeDIkiha0mDn0A7oZcMO
Wz/Aa+zUgGsHttq0+/pRTtwkwLBuwIAhcPRIihT5RCofn9bsqam2V/1zwSWTTGfT
x9nzQ9uNBb8PYfMhTbfbrdiC6Id1qqWUKfnx5ft3jOWrqh4nRLhu2lANrFkV/Hv7

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

6
tests/wpt/web-platform-tests/svg/import/conform-viewers-03-f-manual.svg
View file

@ -57,7 +57,7 @@
/**
* Generates a 20 character string consisting of characters from the inchars parameter.
* The output string will have no repetitions of a character.
*/
*/
function generatePrefix(inchars)
{
var ncNameStart = "_abcdefghijklmnopqrstuvwxyzåäöQWERTYUIOPÅÄÖLKJHGFDSAZXCVBNM";
@ -74,7 +74,7 @@
return prefix;
}
/**
/**
* The main body of the test.
*/
function test()
@ -114,7 +114,7 @@
fill="black">$Revision: 1.3 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- comment out this watermark once the test is approved
<!-- 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"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

25
tests/wpt/web-platform-tests/svg/import/coords-dom-01-f-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -42,27 +42,26 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<g transform="translate(240 180)">
<g id="reference">
<circle r="40" fill="red"/>
</g>
<g id="g" transform="translate(20 20)">
<circle id="c" r="41" fill="blue"/>
</g>
</g>
</g>
<script type="text/ecmascript"><![CDATA[
var eps = 1 / 65535; // 16.16 fixpoint epsilon
var passed = false;
function isequal( value, expected, epsilon )
{
return(Math.abs(value - expected) < epsilon);
}
try
{
var g = document.getElementById("g");
@ -89,7 +88,7 @@
}
}
catch(e) {}
if(passed)
{
c.setAttribute("fill", "lime");
@ -99,17 +98,17 @@
c.setAttribute("fill", "red");
}
]]></script>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.8 $</text>
</g>
<rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

23
tests/wpt/web-platform-tests/svg/import/coords-dom-02-f-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -42,21 +42,20 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<g transform="translate(220 160)">
<g id="reference">
<circle r="41" fill="red" transform="translate(20 20) scale(2 1)"/>
</g>
<g id="g" transform="translate(20 20)">
<circle id="c" r="41" fill="blue"/>
</g>
</g>
</g>
<script type="text/ecmascript"><![CDATA[
var passed = false;
try
{
var g = document.getElementById("g");
@ -70,7 +69,7 @@
}
}
catch(e) {}
if(passed)
{
c.setAttribute("fill", "lime");
@ -80,17 +79,17 @@
c.setAttribute("fill", "red");
}
]]></script>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.9 $</text>
</g>
<rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Before After
Before After

220
tests/wpt/web-platform-tests/svg/import/coords-dom-04-f-manual.svg
View file

@ -13,7 +13,7 @@
version="$Revision: 1.5 $" testname="$RCSfile: coords-dom-04-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#InterfaceSVGTransformList">
<p>
The test checks the SVGTransformList.consolidate method.
The test checks the SVGTransformList.consolidate method.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
@ -23,10 +23,10 @@
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
There must be 13 green rectangles visible.
The text next to the first rectangle must say "Scripting enabled".
The other 12 lines must each say "Passed subtest #n" where n is the subtest number 1..12.
If anything red shows, the test has failed.
There must be 13 green rectangles visible.
The text next to the first rectangle must say "Scripting enabled".
The other 12 lines must each say "Passed subtest #n" where n is the subtest number 1..12.
If anything red shows, the test has failed.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -41,116 +41,116 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<style>
#test-body-content rect { stroke: black; }
</style>
<script type="text/ecmascript"><![CDATA[
var pos = { "x": 20, "y": 40 };
var subtestCounter = 1;
var passed = true;
function toString(m)
{
var decimals = 0;
return m.a.toFixed(decimals) + "," +
m.b.toFixed(decimals) + "," +
m.c.toFixed(decimals) + "," +
m.d.toFixed(decimals) + "," +
m.e.toFixed(decimals) + "," +
m.f.toFixed(decimals);
}
<defs>
<style>
#test-body-content rect { stroke: black; }
</style>
<script type="text/ecmascript"><![CDATA[
var pos = { "x": 20, "y": 40 };
var subtestCounter = 1;
var passed = true;
function referenceEqual(m1,ref,eps)
{
return (Math.abs(m1.a-ref[0]) < eps &&
Math.abs(m1.b-ref[1]) < eps &&
Math.abs(m1.c-ref[2]) < eps &&
Math.abs(m1.d-ref[3]) < eps &&
Math.abs(m1.e-ref[4]) < eps &&
Math.abs(m1.f-ref[5]) < eps);
}
function toString(m)
{
var decimals = 0;
return m.a.toFixed(decimals) + "," +
m.b.toFixed(decimals) + "," +
m.c.toFixed(decimals) + "," +
m.d.toFixed(decimals) + "," +
m.e.toFixed(decimals) + "," +
m.f.toFixed(decimals);
}
function assertEquals(m, ref, eps)
{
var result = document.createElementNS("http://www.w3.org/2000/svg", "text");
var resultrect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
result.setAttribute("x", pos.x);
result.setAttribute("y", pos.y);
resultrect.setAttribute("fill", "lime");
resultrect.setAttribute("width", 15);
resultrect.setAttribute("height", 15);
resultrect.setAttribute("y", pos.y-15);
if(referenceEqual(m, ref, eps))
{
result.textContent = "Passed subtest #" + subtestCounter;
}
else
{
passed = false;
result.textContent = "Failed subtest #" + subtestCounter + ". Expected " + ref + " but got " + toString(m);
}
pos.y += 20;
subtestCounter++;
var results = document.getElementById("subteststatus");
results.appendChild(resultrect)
results.appendChild(result);
}
function test()
{
eps = 0.005; // "close enough"
r = document.getElementById("r");
function referenceEqual(m1,ref,eps)
{
return (Math.abs(m1.a-ref[0]) < eps &&
Math.abs(m1.b-ref[1]) < eps &&
Math.abs(m1.c-ref[2]) < eps &&
Math.abs(m1.d-ref[3]) < eps &&
Math.abs(m1.e-ref[4]) < eps &&
Math.abs(m1.f-ref[5]) < eps);
}
t1 = r.transform.baseVal.getItem(0);
t2 = r.transform.baseVal.getItem(1);
// check that matrices are as specified in the markup
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 10], eps);
assertEquals(t2.matrix, [0, 1, -1, 0, 0, 0], eps);
function assertEquals(m, ref, eps)
{
var result = document.createElementNS("http://www.w3.org/2000/svg", "text");
var resultrect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
result.setAttribute("x", pos.x);
result.setAttribute("y", pos.y);
resultrect.setAttribute("fill", "lime");
resultrect.setAttribute("width", 15);
resultrect.setAttribute("height", 15);
resultrect.setAttribute("y", pos.y-15);
// consolidate
tfm = r.transform.baseVal.consolidate();
// check that the consolidation is ok
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that t1 and t2 were not affected by the consolidation
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 10], eps);
assertEquals(t2.matrix, [0, 1, -1, 0, 0, 0], eps);
// check that modifying t1 has no effect on the consolidated transform
t1.setTranslate(10,200);
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 200], eps);
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that modifying t2 has no effect on the consolidated transform
t2.setRotate(-90, 0, 0);
assertEquals(t2.matrix, [0, -1, 1, 0, 0, 0], eps);
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that modifying the consolidated transform has no effect on the t1 and t2 transforms
tfm.matrix.f = 400;
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 400], eps);
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 200], eps);
assertEquals(t2.matrix, [0, -1, 1, 0, 0, 0], eps);
document.getElementById("status").setAttributeNS(null, "fill", passed ? "lime" : "red");
document.getElementById("scriptstatus").textContent = "Scripting enabled";
}
]]></script>
</defs>
if(referenceEqual(m, ref, eps))
{
result.textContent = "Passed subtest #" + subtestCounter;
}
else
{
passed = false;
result.textContent = "Failed subtest #" + subtestCounter + ". Expected " + ref + " but got " + toString(m);
}
pos.y += 20;
subtestCounter++;
var results = document.getElementById("subteststatus");
results.appendChild(resultrect)
results.appendChild(result);
}
<g transform="translate(20 -10)">
<g id="subteststatus" transform="translate(0,40)">
<rect id="status" y="5" width="15" height="15" fill="red"/>
<text id="scriptstatus" y="20" x="20" >Scripting disabled</text>
</g>
<polyline id="r" fill="none" stroke="green" display="none" transform="translate(10 10) rotate(90)" points="0 0 30 40 80 -20" stroke-width="10"/>
</g>
function test()
{
eps = 0.005; // "close enough"
r = document.getElementById("r");
t1 = r.transform.baseVal.getItem(0);
t2 = r.transform.baseVal.getItem(1);
// check that matrices are as specified in the markup
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 10], eps);
assertEquals(t2.matrix, [0, 1, -1, 0, 0, 0], eps);
// consolidate
tfm = r.transform.baseVal.consolidate();
// check that the consolidation is ok
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that t1 and t2 were not affected by the consolidation
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 10], eps);
assertEquals(t2.matrix, [0, 1, -1, 0, 0, 0], eps);
// check that modifying t1 has no effect on the consolidated transform
t1.setTranslate(10,200);
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 200], eps);
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that modifying t2 has no effect on the consolidated transform
t2.setRotate(-90, 0, 0);
assertEquals(t2.matrix, [0, -1, 1, 0, 0, 0], eps);
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
// check that modifying the consolidated transform has no effect on the t1 and t2 transforms
tfm.matrix.f = 400;
assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 400], eps);
assertEquals(t1.matrix, [1, 0, 0, 1, 10, 200], eps);
assertEquals(t2.matrix, [0, -1, 1, 0, 0, 0], eps);
document.getElementById("status").setAttributeNS(null, "fill", passed ? "lime" : "red");
document.getElementById("scriptstatus").textContent = "Scripting enabled";
}
]]></script>
</defs>
<g transform="translate(20 -10)">
<g id="subteststatus" transform="translate(0,40)">
<rect id="status" y="5" width="15" height="15" fill="red"/>
<text id="scriptstatus" y="20" x="20" >Scripting disabled</text>
</g>
<polyline id="r" fill="none" stroke="green" display="none" transform="translate(10 10) rotate(90)" points="0 0 30 40 80 -20" stroke-width="10"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

Before After
Before After

8
tests/wpt/web-platform-tests/svg/import/coords-trans-10-f-manual.svg
View file

@ -45,14 +45,14 @@
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<g transform="translate(40 20)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="matrix(1 0 0 1 40 20)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
@ -60,14 +60,14 @@
</g>
<g transform="translate(0 100)">
<g transform="matrix(1 0 0 1 40 20)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="translate(40 20)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/coords-trans-11-f-manual.svg
View file

@ -14,7 +14,7 @@
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace">
<p>
Scaling is equivalent to the matrix [sx 0 0 xy 0 0], where one unit in the X and Y directions in the new coordinate system equals 'sx' and 'sy' units in the previous coordinate system respectively.The test overlays a group of black graphics elements with a 'scale' transform specified on top of an identical group of red elements
with the equivalent 'matrix' transform and vice versa.
with the equivalent 'matrix' transform and vice versa.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
@ -41,14 +41,14 @@ Run the test. No interaction required.
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<g transform="scale(1.2 2.5)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="matrix(1.2 0 0 2.5 0 0)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
@ -56,14 +56,14 @@ Run the test. No interaction required.
</g>
<g transform="translate(0 150)">
<g transform="matrix(1.2 0 0 2.5 0 0)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="scale(1.2 2.5)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/coords-trans-12-f-manual.svg
View file

@ -19,7 +19,7 @@
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
@ -42,14 +42,14 @@
<g transform="translate(200)">
<g transform="rotate(90)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="matrix(0 1 -1 0 0 0)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
@ -58,14 +58,14 @@
</g>
<g transform="translate(310)">
<g transform="matrix(0 1 -1 0 0 0)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="rotate(90)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before After
Before After

12
tests/wpt/web-platform-tests/svg/import/coords-trans-13-f-manual.svg
View file

@ -15,12 +15,12 @@
<p>
A skew transformation along the x-axis is equivalent to the matrix [1 0 tan(a) 1 0 0], which has the effect of skewing X coordinates by angle 'a'.
The test overlays a group of black graphics elements with a 'skewX' transform specified on top of an identical group of red elements
with the equivalent 'matrix' transform and vice versa.
with the equivalent 'matrix' transform and vice versa.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
@ -42,14 +42,14 @@ The test overlays a group of black graphics elements with a 'skewX' transform sp
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<g transform="skewX(45)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="matrix(1 0 1 1 0 0)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
@ -57,14 +57,14 @@ The test overlays a group of black graphics elements with a 'skewX' transform sp
</g>
<g transform="translate(0 150)">
<g transform="matrix(1 0 1 1 0 0)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="skewX(45)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/coords-trans-14-f-manual.svg
View file

@ -20,7 +20,7 @@ The test overlays a group of black graphics elements with a 'skewY' transform sp
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
@ -43,14 +43,14 @@ The test overlays a group of black graphics elements with a 'skewY' transform sp
<g transform="scale(0.75) rotate(-20)">
<g transform="skewY(45)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="matrix(1 1 0 1 0 0)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
@ -58,14 +58,14 @@ The test overlays a group of black graphics elements with a 'skewY' transform sp
</g>
<g transform="translate(0 150)">
<g transform="matrix(1 1 0 1 0 0)" fill="red">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />
<line x1="310" y1="20" x2="350" y2="70" stroke-width="5" />
</g>
<g transform="skewY(45)" fill="black" stroke="black">
<path d="M 20 20 L 70 20 L 45 60 z" />
<path d="M 20 20 L 70 20 L 45 60 z" />
<ellipse cx="120" cy="35" rx="30" ry="10" />
<text x="160" y="40">Filler Text</text>
<rect x="250" y="20" width="30" height="50" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/coords-transformattr-01-f-manual.svg
View file

@ -15,7 +15,7 @@
<p>
Tests that separating transform definitions by whitespace and/or a comma is supported. The test draws a red 'rect' element with a valid, non-delimited transform list. It overlays it with an identical black rectangle with
equivalent transform list delimted by commas and numerical Unicode references of space (U+0020), tab (U+0009), carriage
return (U+000D), line feed (U+000A), and combination of all five,
return (U+000D), line feed (U+000A), and combination of all five,
so that no red is visible.
</p>
</d:testDescription>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/coords-transformattr-03-f-manual.svg
View file

@ -20,7 +20,7 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.</p>
<p>Run the test. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
@ -59,4 +59,4 @@
<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>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

6
tests/wpt/web-platform-tests/svg/import/coords-transformattr-04-f-manual.svg
View file

@ -14,11 +14,11 @@
<p>
Specify a series of various red graphics elements. Specify an equivalent series of black graphics elements that are defined to have dimensions
that are half the size as the red elements. Specify a 'transform' value of 'scale' with only the 'sx' value specified (i.e., 'scale(2)'). If the 'sy'
parameter takes the same value as the 'sx', there will be no red on the page.
parameter takes the same value as the 'sx', there will be no red on the page.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.</p>
<p>Run the test. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
@ -57,4 +57,4 @@
<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>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Before After
Before After

6
tests/wpt/web-platform-tests/svg/import/coords-transformattr-05-f-manual.svg
View file

@ -20,13 +20,13 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.</p>
<p>Run the test. No interaction required.</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
Test passes if there is no red visible on the page.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: coords-transformattr-05-f.svg,v $</title>
@ -68,4 +68,4 @@
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>
-->
</svg>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/coords-units-02-b-manual.svg
View file

@ -32,7 +32,7 @@
Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
In the first two tests, that validate coordinate processing, the circles
should have the same center. In the following two tests, the rectangles should have

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/coords-viewattr-03-b-manual.svg
View file

@ -22,7 +22,7 @@
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
Run the test. No interaction required.
</p>
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Before After
Before After

40
tests/wpt/web-platform-tests/svg/import/filters-background-01-f-manual.svg
View file

@ -16,36 +16,36 @@
Test background image processing.
</p>
<p>
The first subtest enables background image processing and adds an empty ‘g’ element
which invokes the ShiftBGAndBlur filter. This filter takes the current accumulated
background image (i.e., the entire reference graphic) as input, shifts its offscreen
The first subtest enables background image processing and adds an empty ‘g’ element
which invokes the ShiftBGAndBlur filter. This filter takes the current accumulated
background image (i.e., the entire reference graphic) as input, shifts its offscreen
down, blurs it, and then writes the result to the canvas. Note that the offscreen for
the filter is initialized to transparent black, which allows the already rendered
rectangle, circle and triangle to show through after the filter renders its own
the filter is initialized to transparent black, which allows the already rendered
rectangle, circle and triangle to show through after the filter renders its own
result to the canvas.
</p>
<p>
The second subtest enables background image processing and instead invokes the
ShiftBGAndBlur filter on the inner ‘g’ element. The accumulated background at the
time the filter is applied contains only the rectangle. Because the children
of the inner ‘g’ (i.e., the circle and triangle) are not part of the inner ‘g’ element's
The second subtest enables background image processing and instead invokes the
ShiftBGAndBlur filter on the inner ‘g’ element. The accumulated background at the
time the filter is applied contains only the rectangle. Because the children
of the inner ‘g’ (i.e., the circle and triangle) are not part of the inner ‘g’ element's
background and because ShiftBGAndBlur ignores SourceGraphic, the children of the inner ‘g’
do not appear in the result.
</p>
<p>
The third subtest enables background image processing and invokes the ShiftBGAndBlur on the
‘polygon’ element that draws the triangle. The accumulated background at the time the filter
is applied contains the rectangle plus the circle ignoring the effect of the ‘opacity’
property on the inner ‘g’ element. (Note that the blurred circle at the bottom does not
let the rectangle show through on its left side. This is due to ignoring the effect of
the ‘opacity’ property.) Because the triangle itself is not part of the accumulated background
The third subtest enables background image processing and invokes the ShiftBGAndBlur on the
‘polygon’ element that draws the triangle. The accumulated background at the time the filter
is applied contains the rectangle plus the circle ignoring the effect of the ‘opacity’
property on the inner ‘g’ element. (Note that the blurred circle at the bottom does not
let the rectangle show through on its left side. This is due to ignoring the effect of
the ‘opacity’ property.) Because the triangle itself is not part of the accumulated background
and because ShiftBGAndBlur ignores SourceGraphic, the triangle does not appear in the result.
</p>
<p>
The fourth subtest is the same as the third except that filter ShiftBGAndBlur_WithSourceGraphic is
invoked instead of ShiftBGAndBlur. ShiftBGAndBlur_WithSourceGraphic performs the same effect as
ShiftBGAndBlur, but then renders the SourceGraphic on top of the shifted, blurred background
image. In this case, SourceGraphic is the blue triangle; thus, the result is the same as in
The fourth subtest is the same as the third except that filter ShiftBGAndBlur_WithSourceGraphic is
invoked instead of ShiftBGAndBlur. ShiftBGAndBlur_WithSourceGraphic performs the same effect as
ShiftBGAndBlur, but then renders the SourceGraphic on top of the shifted, blurred background
image. In this case, SourceGraphic is the blue triangle; thus, the result is the same as in
the fourth case except that the triangle now appears.
</p>
</d:testDescription>
@ -85,7 +85,7 @@
<feOffset in="BackgroundImage" dx="0" dy="125" />
<feGaussianBlur stdDeviation="8" />
</filter>
<filter id="ShiftBGAndBlur_WithSourceGraphic"
<filter id="ShiftBGAndBlur_WithSourceGraphic"
filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
<desc>
This filter takes the BackgroundImage, shifts it down 125 units, blurs it,

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/filters-blend-01-b-manual.svg
View file

@ -95,14 +95,14 @@
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.9 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/filters-composite-02-b-manual.svg
View file

@ -31,7 +31,7 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/filters-composite-03-f-manual.svg
View file

@ -13,7 +13,7 @@
version="$Revision: 1.4 $" testname="$RCSfile: filters-composite-03-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">
<p>
Tests the arithmetic operator in feComposite.
Tests the arithmetic operator in feComposite.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
@ -53,7 +53,7 @@
<feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="10" k3="20" k4="0"/>
</filter>
</defs>
<g transform="translate(100 30)">
<rect id="reference1" fill="lime" width="120" height="120"/>
<rect fill="red" stroke="red" filter="url(#composite-ident)" x="10" y="10" width="100" height="100"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/filters-composite-04-f-manual.svg
View file

@ -58,7 +58,7 @@
<feComposite operator="arithmetic" in="SourceGraphic" in2="bird" k1="0" k2="0.25" k3="0.75" k4="0"/>
</filter>
</defs>
<image width="120" height="80" xlink:href="../images/tree.jpg" filter="url(#dissolve1)" transform="translate(100 80)"/>
<image width="120" height="80" xlink:href="../images/tree.jpg" filter="url(#dissolve2)" transform="translate(250 80)"/>
<image width="120" height="80" xlink:href="../images/tree.jpg" filter="url(#dissolve3)" transform="translate(100 190)"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/filters-composite-05-f-manual.svg
View file

@ -51,7 +51,7 @@
</feComposite>
</filter>
</defs>
<image id="image" width="320" height="160" xlink:href="../images/tree.jpg" filter="url(#dissolve)" transform="translate(80 80)"/>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Before After
Before After

52
tests/wpt/web-platform-tests/svg/import/filters-conv-02-f-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -18,7 +18,7 @@
</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">
@ -40,38 +40,38 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<filter id="convolve-without-order" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix kernelMatrix="1 1 1 1 -8 1 1 1 1" preserveAlpha="true"/>
</filter>
<filter id="convolve-with-order1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix order="3" kernelMatrix="1 1 1 1 -8 1 1 1 1" preserveAlpha="true"/>
</filter>
<filter id="convolve-with-order2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix order="3 3" kernelMatrix="1 1 1 1 -8 1 1 1 1" preserveAlpha="true"/>
</filter>
</defs>
<defs>
<filter id="convolve-without-order" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix kernelMatrix="1 1 1 1 -8 1 1 1 1" preserveAlpha="true"/>
</filter>
<filter id="convolve-with-order1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix order="3" kernelMatrix="1 1 1 1 -8 1 1 1 1" preserveAlpha="true"/>
</filter>
<filter id="convolve-with-order2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feConvolveMatrix order="3 3" kernelMatrix="1 1 1 1 -8 1 1 1 1" preserveAlpha="true"/>
</filter>
</defs>
<text x="50%" y="3em" style="font-size:18px; text-anchor:middle">feConvolveMatrix 'order' attribute</text>
<text x="50%" y="3em" style="font-size:18px; text-anchor:middle">feConvolveMatrix 'order' attribute</text>
<image x="90" y="100" width="100" height="100" xlink:href="../images/image1.jpg" filter="url(#convolve-without-order)"/>
<text x="135" y="220" style="font-size:9px; text-anchor:middle">without order</text>
<image x="190" y="100" width="100" height="100" xlink:href="../images/image1.jpg" filter="url(#convolve-with-order1)"/>
<text x="235" y="220" style="font-size:9px; text-anchor:middle">order="3"</text>
<image x="290" y="100" width="100" height="100" xlink:href="../images/image1.jpg" filter="url(#convolve-with-order2)"/>
<text x="335" y="220" style="font-size:9px; text-anchor:middle">order="3 3"</text>
</g>
<image x="90" y="100" width="100" height="100" xlink:href="../images/image1.jpg" filter="url(#convolve-without-order)"/>
<text x="135" y="220" style="font-size:9px; text-anchor:middle">without order</text>
<image x="190" y="100" width="100" height="100" xlink:href="../images/image1.jpg" filter="url(#convolve-with-order1)"/>
<text x="235" y="220" style="font-size:9px; text-anchor:middle">order="3"</text>
<image x="290" y="100" width="100" height="100" xlink:href="../images/image1.jpg" filter="url(#convolve-with-order2)"/>
<text x="335" y="220" style="font-size:9px; text-anchor:middle">order="3 3"</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.9 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

86
tests/wpt/web-platform-tests/svg/import/filters-conv-03-f-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -22,7 +22,7 @@
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>
<p>
Run the test. No interaction required.
</p>
</d:operatorScript>
@ -48,55 +48,55 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<filter id="sharpenAnim" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="../images/stefan_252_tRNS_opti.png" result="passimg"/>
<feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 -1 0
-1 5 -1
0 -1 0" preserveAlpha="true">
<set attributeName="in" to="passimg" begin="3s" fill="freeze" onbegin="runtest()"/>
</feConvolveMatrix>
</filter>
<filter id="sharpenScript" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="../images/stefan_252_tRNS_opti.png" result="passimg"/>
<feConvolveMatrix id="prim" in="SourceGraphic" order="3" kernelMatrix="0 -1 0
-1 5 -1
0 -1 0" preserveAlpha="true"/>
</filter>
<defs>
<filter id="sharpenAnim" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="../images/stefan_252_tRNS_opti.png" result="passimg"/>
<feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="0 -1 0
-1 5 -1
0 -1 0" preserveAlpha="true">
<set attributeName="in" to="passimg" begin="3s" fill="freeze" onbegin="runtest()"/>
</feConvolveMatrix>
</filter>
<filter id="sharpenScript" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="../images/stefan_252_tRNS_opti.png" result="passimg"/>
<feConvolveMatrix id="prim" in="SourceGraphic" order="3" kernelMatrix="0 -1 0
-1 5 -1
0 -1 0" preserveAlpha="true"/>
</filter>
<text id="pass" x="240" y="150" text-anchor="middle" font-size="30px">PASS</text>
</defs>
<script type="application/ecmascript">
function runtest()
{
var img = document.getElementById("img");
img.href.baseVal = "../images/stefan_252_tRNS_opti.png";
var prim = document.getElementById("prim");
prim.in1.baseVal = "passimg";
}
</script>
<text id="pass" x="240" y="150" text-anchor="middle" font-size="30px">PASS</text>
</defs>
<text x="50%" y="3em" style="font-size:18px; text-anchor:middle">feConvolveMatrix 'in1' DOM</text>
<image id="img" xlink:href="../images/purplesquidj.png" x="80" y="100" width="100" height="100"/>
<image xlink:href="../images/purplesquidj.png" x="190" y="100" width="100" height="100" filter="url(#sharpenAnim)"/>
<image xlink:href="../images/purplesquidj.png" x="300" y="100" width="100" height="100" filter="url(#sharpenScript)"/>
<rect x="80" y="100" width="100" height="100" stroke="black" fill="none"/>
<rect x="190" y="100" width="100" height="100" stroke="blue" fill="none"/>
<rect x="300" y="100" width="100" height="100" stroke="blue" fill="none"/>
<text x="130" y="220" style="font-size:9px; text-anchor:middle">Original image</text>
<text x="240" y="220" style="font-size:9px; text-anchor:middle">Animated filter</text>
<text x="350" y="220" style="font-size:9px; text-anchor:middle">Scripted filter</text>
</g>
<script type="application/ecmascript">
function runtest()
{
var img = document.getElementById("img");
img.href.baseVal = "../images/stefan_252_tRNS_opti.png";
var prim = document.getElementById("prim");
prim.in1.baseVal = "passimg";
}
</script>
<text x="50%" y="3em" style="font-size:18px; text-anchor:middle">feConvolveMatrix 'in1' DOM</text>
<image id="img" xlink:href="../images/purplesquidj.png" x="80" y="100" width="100" height="100"/>
<image xlink:href="../images/purplesquidj.png" x="190" y="100" width="100" height="100" filter="url(#sharpenAnim)"/>
<image xlink:href="../images/purplesquidj.png" x="300" y="100" width="100" height="100" filter="url(#sharpenScript)"/>
<rect x="80" y="100" width="100" height="100" stroke="black" fill="none"/>
<rect x="190" y="100" width="100" height="100" stroke="blue" fill="none"/>
<rect x="300" y="100" width="100" height="100" stroke="blue" fill="none"/>
<text x="130" y="220" style="font-size:9px; text-anchor:middle">Original image</text>
<text x="240" y="220" style="font-size:9px; text-anchor:middle">Animated filter</text>
<text x="350" y="220" style="font-size:9px; text-anchor:middle">Scripted filter</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.8 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/filters-conv-04-f-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -76,7 +76,7 @@
more faded for each instance further to the right.
<ul>
<li>
The first image (left most) must be a rect filled with a linear gradient that
The first image (left most) must be a rect filled with a linear gradient that
transitions from solid green to transparent green.
</li>
<li>The second image (second from the left) must be identical to the first image.</li>
@ -142,7 +142,7 @@
<image x="126" y="51" width="98" height="98" xlink:href="../images/DisplaceChecker.png"/>
<image x="241" y="51" width="98" height="98" xlink:href="../images/DisplaceChecker.png"/>
<image x="356" y="51" width="98" height="98" xlink:href="../images/DisplaceChecker.png"/>
<rect fill="url(#test_linear_gradient)" stroke="black" x="10" y="50" width="100" height="100"/>
<rect fill="url(#test_linear_gradient)" stroke="black" x="125" y="50" width="100" height="100" filter="url(#convolve-without-bias)"/>
<rect fill="url(#test_linear_gradient)" stroke="black" x="240" y="50" width="100" height="100" filter="url(#convolve-with-bias05)"/>
@ -157,7 +157,7 @@
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

Before After
Before After

40
tests/wpt/web-platform-tests/svg/import/filters-conv-05-f-manual.svg
View file

@ -1,5 +1,5 @@
<svg id="svg-root" width="100%" height="100%"
viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
<svg 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">
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
@ -39,45 +39,45 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<filter id="emNone" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<defs>
<filter id="emNone" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<feConvolveMatrix kernelMatrix="1 1 1 1 -7 1 1 1 1" preserveAlpha="false" edgeMode="none"/>
</filter>
<filter id="emWrap" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<feConvolveMatrix kernelMatrix="1 1 1 1 -7 1 1 1 1" preserveAlpha="false" edgeMode="wrap"/>
</filter>
<filter id="emDuplicate" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<feConvolveMatrix kernelMatrix="1 1 1 1 -7 1 1 1 1" preserveAlpha="false" edgeMode="duplicate"/>
</filter>
</filter>
<filter id="emWrap" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<feConvolveMatrix kernelMatrix="1 1 1 1 -7 1 1 1 1" preserveAlpha="false" edgeMode="wrap"/>
</filter>
<filter id="emDuplicate" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<feConvolveMatrix kernelMatrix="1 1 1 1 -7 1 1 1 1" preserveAlpha="false" edgeMode="duplicate"/>
</filter>
<g id="box">
<rect width="10" height="100" fill="blue"/>
<rect x="10" width="100" height="10" fill="yellow"/>
<rect x="110" width="10" height="100" fill="lime"/>
<rect x="10" y="90" width="100" height="10" fill="black"/>
</g>
</defs>
</defs>
<text x="50%" y="3em" style="font-size:18px; text-anchor:middle">feConvolveMatrix 'edgeMode'</text>
<text x="50%" y="3em" style="font-size:18px; text-anchor:middle">feConvolveMatrix 'edgeMode'</text>
<use xlink:href="#box" filter="url(#emNone)" transform="translate(40 100)"/>
<text x="100" y="220" font-size="14" text-anchor="middle">none</text>
<use xlink:href="#box" filter="url(#emWrap)" transform="translate(180 100)"/>
<text x="240" y="220" font-size="14" text-anchor="middle">wrap</text>
<use xlink:href="#box" filter="url(#emDuplicate)" transform="translate(320 100)"/>
<text x="380" y="220" font-size="14" text-anchor="middle">duplicate</text>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.2 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- 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 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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before After
Before After

7
tests/wpt/web-platform-tests/svg/import/filters-displace-01-f-manual.svg
View file

@ -52,7 +52,7 @@
<p>
The rendered image should match the reference image. The edges
of the blue rectangle must be parallel to the grid lines in the
displaced image. The center of the bottommost right distorted image
displaced image. The center of the bottommost right distorted image
should be on a gridpoint.
</p>
</d:passCriteria>
@ -100,8 +100,6 @@
<tspan x="222" y="138">(20 deg. rotation)</tspan>
</text>
<rect x="301" y="15" width="128" height="128" filter="url(#RotateMapTest)"/>
<rect x="-1" y="-1" width="2" height="2" transform="translate(365,79) rotate(20) scale(32)" fill="blue" fill-opacity="0.5"/>
<text>
@ -110,12 +108,10 @@
<tspan x="365" y="184">rotated blue rectangle)</tspan>
</text>
<rect x="15" y="158" width="128" height="128" filter="url(#DispMapChecker)"/>
<rect x="20" y="258" width="118" height="20" fill="#DDD"/>
<text x="79" y="273">Checkerboard Image</text>
<rect x="158" y="158" width="128" height="128" filter="url(#SphereMap)"/>
<rect x="163" y="255" width="118" height="30" fill="#DDD"/>
<text>
@ -123,7 +119,6 @@
<tspan x="222" y="283">(spherical distortion)</tspan>
</text>
<rect x="301" y="200" width="128" height="128" filter="url(#SphereMapTest)"/>
<text x="365" y="345">Result</text>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 7 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/filters-displace-02-f-manual.svg
View file

@ -21,7 +21,7 @@
The bottom subtest tests that not specifying the 'xChannelSelector' attribute has the same effect as if 'A' was specified.
</p>
<p>
In both cases the filter input image consists of a gradient that is rendered using the default 'color-interpolation' which is 'sRGB'.
In both cases the filter input image consists of a gradient that is rendered using the default 'color-interpolation' which is 'sRGB'.
The default colorspace for filter primitives is 'linearRGB'. The filtering operation happens in 'linearRGB' space and the
result is then transformed back to 'sRGB' space for display.
</p>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/filters-felem-01-b-manual.svg
View file

@ -18,17 +18,17 @@
Test which verifies null filters and filter regions.
</p>
<p>
Four subtests each consist of a small red circle overdrawn with a larger green circle.
Four subtests each consist of a small red circle overdrawn with a larger green circle.
Filters are applied to three of the red circles, hiding them and showing the green circle.
</p>
<p>
The top left subtest has no filter applied to the circle, so the green circle is visible and the red one is not.
The top right subtest applies a filter to the red circle, but there is no corresponding filter element.
The top left subtest has no filter applied to the circle, so the green circle is visible and the red one is not.
The top right subtest applies a filter to the red circle, but there is no corresponding filter element.
Thus, a null filter is applied and the red circle is not shown, allowing the green circle to be seen.
</p>
<p>
The bottom left subtest applies an empty filter element with the default filterRegion, and the bottom right
subtest applies an empty filter with a non-default filterRegion. In both cases where empty filters are applied,
The bottom left subtest applies an empty filter element with the default filterRegion, and the bottom right
subtest applies an empty filter with a non-default filterRegion. In both cases where empty filters are applied,
the result of the filter is a transparent black offscreen, thus showing the green circle underneath.
</p>
</d:testDescription>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

98
tests/wpt/web-platform-tests/svg/import/filters-felem-02-f-manual.svg
View file

@ -25,12 +25,12 @@
<p>
The test has passed if:
</p>
<ul>
<li>There is no red visible anywhere</li>
<li>The first row has three green rectangles</li>
<li>The second row has three black circles, and the middle one has more blurred edges than the other two.</li>
<li>The third row has three green stars.</li>
</ul>
<ul>
<li>There is no red visible anywhere</li>
<li>The first row has three green rectangles</li>
<li>The second row has three black circles, and the middle one has more blurred edges than the other two.</li>
<li>The third row has three green stars.</li>
</ul>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: filters-felem-02-f.svg,v $</title>
@ -49,68 +49,67 @@
<filter id="usou1" primitiveUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
<feFlood flood-color="lime" x="25" y="25" width="50" height="50"/>
</filter>
<filter id="obb1" primitiveUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<filter id="obb1" primitiveUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feFlood flood-color="lime" x="25%" y="25%" width="50%" height="50%"/>
</filter>
<filter id="default1" x="0" y="0" width="100%" height="100%">
<filter id="default1" x="0" y="0" width="100%" height="100%">
<feFlood flood-color="lime" x="25" y="25" width="50" height="50"/>
</filter>
<filter id="usou2" primitiveUnits="userSpaceOnUse" x="-50%" y="-50%" width="200%" height="200%">
<filter id="usou2" primitiveUnits="userSpaceOnUse" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="0.2"/>
</filter>
<filter id="obb2" primitiveUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
<filter id="obb2" primitiveUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="0.2"/>
</filter>
<filter id="default2" x="-50%" y="-50%" width="200%" height="200%">
<filter id="default2" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="0.2"/>
</filter>
<filter id="usou3" primitiveUnits="userSpaceOnUse" x="-50%" y="-50%" width="200%" height="200%">
<filter id="usou3" primitiveUnits="userSpaceOnUse" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="2" dy="2"/>
</filter>
<filter id="obb3" filterUnits="userSpaceOnUse" primitiveUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
<filter id="obb3" filterUnits="userSpaceOnUse" primitiveUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="2" dy="2"/>
</filter>
<filter id="default3" x="-50%" y="-50%" width="200%" height="200%">
<filter id="default3" x="-50%" y="-50%" width="200%" height="200%">
<feOffset dx="2" dy="2"/>
</filter>
<polygon id="star" points="300,60 311.755,83.819 338.042,87.639 319.021,106.180 323.511,132.360 300,120 276.488,132.360 280.978,106.180 261.957,87.639 288.244,83.819 300,60 311.755,83.819"/>
<polygon id="star" points="300,60 311.755,83.819 338.042,87.639 319.021,106.180 323.511,132.360 300,120 276.488,132.360 280.978,106.180 261.957,87.639 288.244,83.819 300,60 311.755,83.819"/>
</defs>
<g transform="translate(80 0)">
<rect fill="red" width="50" height="50" transform="translate(25 25)"/>
<rect fill="red" width="100" height="100" filter="url(#usou1)" transform="translate(0 0)"/>
<rect fill="red" width="50" height="50" transform="translate(125 25)"/>
<rect fill="red" width="100" height="100" filter="url(#obb1)" transform="translate(100 0)"/>
<rect fill="red" width="50" height="50" transform="translate(225 25)"/>
<rect fill="red" width="100" height="100" filter="url(#default1)" transform="translate(200 0)"/>
<g transform="translate(50 40)">
<circle r="30" filter="url(#usou2)" transform="translate(0 100)"/>
<circle r="30" filter="url(#obb2)" transform="translate(100 100)"/>
<circle r="30" filter="url(#default2)" transform="translate(200 100)"/>
</g>
<use xlink:href="#star" transform="translate(-250 150)" fill="red"/>
<use xlink:href="#star" transform="translate(-252 148)" fill="lime" filter="url(#usou3)"/>
<use xlink:href="#star" transform="translate(-250 150)" fill="none" stroke-width="2" stroke="lime"/>
<use xlink:href="#star" transform="translate(-150 150)" fill="red"/>
<use xlink:href="#star" transform="translate(-302 5.1)" fill="lime" filter="url(#obb3)"/>
<use xlink:href="#star" transform="translate(-150 150)" fill="none" stroke-width="2" stroke="lime"/>
<use xlink:href="#star" transform="translate(-50 150)" fill="red"/>
<use xlink:href="#star" transform="translate(-52 148)" fill="lime" filter="url(#default3)"/>
<use xlink:href="#star" transform="translate(-50 150)" fill="none" stroke-width="2" stroke="lime"/>
</g>
<g transform="translate(80 0)">
<rect fill="red" width="50" height="50" transform="translate(25 25)"/>
<rect fill="red" width="100" height="100" filter="url(#usou1)" transform="translate(0 0)"/>
<rect fill="red" width="50" height="50" transform="translate(125 25)"/>
<rect fill="red" width="100" height="100" filter="url(#obb1)" transform="translate(100 0)"/>
<rect fill="red" width="50" height="50" transform="translate(225 25)"/>
<rect fill="red" width="100" height="100" filter="url(#default1)" transform="translate(200 0)"/>
<g transform="translate(50 40)">
<circle r="30" filter="url(#usou2)" transform="translate(0 100)"/>
<circle r="30" filter="url(#obb2)" transform="translate(100 100)"/>
<circle r="30" filter="url(#default2)" transform="translate(200 100)"/>
</g>
<use xlink:href="#star" transform="translate(-250 150)" fill="red"/>
<use xlink:href="#star" transform="translate(-252 148)" fill="lime" filter="url(#usou3)"/>
<use xlink:href="#star" transform="translate(-250 150)" fill="none" stroke-width="2" stroke="lime"/>
<use xlink:href="#star" transform="translate(-150 150)" fill="red"/>
<use xlink:href="#star" transform="translate(-302 5.1)" fill="lime" filter="url(#obb3)"/>
<use xlink:href="#star" transform="translate(-150 150)" fill="none" stroke-width="2" stroke="lime"/>
<use xlink:href="#star" transform="translate(-50 150)" fill="red"/>
<use xlink:href="#star" transform="translate(-52 148)" fill="lime" filter="url(#default3)"/>
<use xlink:href="#star" transform="translate(-50 150)" fill="none" stroke-width="2" stroke="lime"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
@ -124,4 +123,3 @@
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>-->
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

10
tests/wpt/web-platform-tests/svg/import/filters-image-02-b-manual.svg
View file

@ -13,15 +13,15 @@
version="$Revision: 1.9 $" testname="$RCSfile: filters-image-02-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/filters.html#feImage">
<p>
Tests the animatability of 'xlink:href' on the 'feImage' element.
The test will first show two blue images that should look exactly the same,
Tests the animatability of 'xlink:href' on the 'feImage' element.
The test will first show two blue images that should look exactly the same,
then after two seconds both images should simultaneously change to show two
pink images that also look exactly the same.
</p>
</d:testDescription>
<d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
<p>Run the test. No interaction required.
<p>Run the test. No interaction required.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
@ -58,7 +58,7 @@
<image xlink:href="../images/bluesquidj.png" x="260" y="60" width="150" height="200">
<set attributeName="xlink:href" to="../images/pinksquidj.png" begin="2s"/>
</image>
<g text-anchor="middle">
<text x="50%" y="60" font-size="30">Animation in filters</text>
<text x="145" y="220">'feImage'</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

8
tests/wpt/web-platform-tests/svg/import/filters-image-03-f-manual.svg
View file

@ -47,7 +47,7 @@
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<!-- A breakdown of this testcase:
All filters:
filterUnits not specified, defaults to objectBoundingBox.
x=0, y=0, width=1, height=1 -> filter region = bounding box.
@ -65,7 +65,7 @@
2. All specified relative
x = 20.8% = 100/480 (0.2083)
y = 0% = 0/360 (0.0)
y = 0% = 0/360 (0.0)
width = 10.4% = 50/480 (0.1042)
height = 13.8% = 50/360 (0.1388)
@ -139,13 +139,13 @@
xlink:href="../images/smiley.png"/>
</filter>
</defs>
<g transform="translate(60 100)">
<rect fill="red" width="50" height="50" filter="url(#default)"/>
<rect fill="red" x="100" width="50" height="50" filter="url(#all_specified_relative)"/>
<rect fill="red" x="200" width="50" height="50" filter="url(#all_specified_absolute)"/>
<rect fill="red" x="300" width="50" height="50" filter="url(#y_specified)"/>
<rect fill="red" y="100" width="50" height="50" filter="url(#width_specified)"/>
<rect fill="red" x="100" y="100" width="50" height="50" filter="url(#height_specified)"/>
<rect fill="red" x="200" y="100" width="50" height="50" filter="url(#width_height_specified)"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/filters-image-04-f-manual.svg
View file

@ -80,14 +80,14 @@
xlink:href="../images/smiley.png"/>
</filter>
</defs>
<text text-anchor="middle" x="240" y="40" font-size="16">primitiveUnits = "objectBoundingBox"</text>
<g transform="translate(60 100)">
<rect fill="red" width="50" height="50" filter="url(#default)"/>
<rect fill="red" x="100" width="50" height="50" filter="url(#all_specified_relative)"/>
<rect fill="red" x="200" width="50" height="50" filter="url(#all_specified_absolute)"/>
<rect fill="red" x="300" width="50" height="50" filter="url(#y_specified)"/>
<rect fill="red" y="100" width="50" height="50" filter="url(#width_specified)"/>
<rect fill="red" x="100" y="100" width="50" height="50" filter="url(#height_specified)"/>
<rect fill="red" x="200" y="100" width="50" height="50" filter="url(#width_height_specified)"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

162
tests/wpt/web-platform-tests/svg/import/filters-image-05-f-manual.svg
View file

@ -23,7 +23,7 @@
<p>
This test copies coords-viewattr-02-b, substituting feImage for image.
It exercises the various preserveAspectRatio values. An external bitmap
is referenced.
is referenced.
</p>
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
@ -41,73 +41,73 @@
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<filter id="default" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png"/>
</filter>
<!-- Meet -->
<filter id="xMinYMinMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMin meet"/>
</filter>
<filter id="xMidYMinMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMin meet"/>
</filter>
<filter id="xMaxYMinMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMin meet"/>
</filter>
<filter id="xMinYMidMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMid meet"/>
</filter>
<filter id="xMidYMidMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMid meet"/>
</filter>
<filter id="xMaxYMidMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMid meet"/>
</filter>
<filter id="xMinYMaxMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMax meet"/>
</filter>
<filter id="xMidYMaxMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMax meet"/>
</filter>
<filter id="xMaxYMaxMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMax meet"/>
</filter>
<!-- Slice -->
<filter id="xMinYMinSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMin slice"/>
</filter>
<filter id="xMidYMinSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMin slice"/>
</filter>
<filter id="xMaxYMinSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMin slice"/>
</filter>
<filter id="xMinYMidSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMid slice"/>
</filter>
<filter id="xMidYMidSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMid slice"/>
</filter>
<filter id="xMaxYMidSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMid slice"/>
</filter>
<filter id="xMinYMaxSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMax slice"/>
</filter>
<filter id="xMidYMaxSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMax slice"/>
</filter>
<filter id="xMaxYMaxSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMax slice"/>
</filter>
</defs>
<defs>
<filter id="default" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png"/>
</filter>
<!-- Meet -->
<filter id="xMinYMinMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMin meet"/>
</filter>
<filter id="xMidYMinMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMin meet"/>
</filter>
<filter id="xMaxYMinMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMin meet"/>
</filter>
<filter id="xMinYMidMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMid meet"/>
</filter>
<filter id="xMidYMidMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMid meet"/>
</filter>
<filter id="xMaxYMidMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMid meet"/>
</filter>
<filter id="xMinYMaxMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMax meet"/>
</filter>
<filter id="xMidYMaxMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMax meet"/>
</filter>
<filter id="xMaxYMaxMeet" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMax meet"/>
</filter>
<!-- Slice -->
<filter id="xMinYMinSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMin slice"/>
</filter>
<filter id="xMidYMinSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMin slice"/>
</filter>
<filter id="xMaxYMinSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMin slice"/>
</filter>
<filter id="xMinYMidSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMid slice"/>
</filter>
<filter id="xMidYMidSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMid slice"/>
</filter>
<filter id="xMaxYMidSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMid slice"/>
</filter>
<filter id="xMinYMaxSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMinYMax slice"/>
</filter>
<filter id="xMidYMaxSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMidYMax slice"/>
</filter>
<filter id="xMaxYMaxSlice" x="0" y="0" width="1" height="1">
<feImage xlink:href="../images/smiley.png" preserveAspectRatio="xMaxYMax slice"/>
</filter>
</defs>
<g font-size="9" transform="translate(0, 30)">
<desc>Example PreserveAspectRatio - demonstrate available options</desc>
<text text-anchor="middle" x="240" font-size="16">Test preserveAspectRatio on an feImage element.</text>
<text x="40" y="30" text-anchor="middle">Raster to fit</text>
<g transform="translate(20,40)">
<rect fill="red" width="40" height="40" filter="url(#default)"/>
<rect fill="red" width="40" height="40" filter="url(#default)"/>
</g>
<text x="35.5" y="110" text-anchor="middle">Viewport 1</text>
<g transform="translate(10,120)"><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/></g>
@ -117,66 +117,66 @@
<text x="0" y="-20">---------- meet --------------------</text>
<g>
<text y="-5">xMin*</text>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMinYMinMeet)"/>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMinYMinMeet)"/>
</g>
<g transform="translate(70,0)">
<text y="-5">xMid*</text>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMidYMidMeet)"/>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMidYMidMeet)"/>
</g>
<g transform="translate(0,50)">
<text y="-5">xMax*</text>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMaxYMaxMeet)"/>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMaxYMaxMeet)"/>
</g>
</g>
<g id="meet-group-2" transform="translate(300, 50)">
<text x="0" y="-20">---------- meet ------------------------</text>
<g>
<text y="-5">*YMin</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
<rect fill="red" width="30" height="60" filter="url(#xMinYMinMeet)"/>
<rect fill="red" width="30" height="60" filter="url(#xMinYMinMeet)"/>
</g>
<g transform="translate(50, 0)">
<text y="-5">*YMid</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
<rect fill="red" width="30" height="60" filter="url(#xMidYMidMeet)"/>
<rect fill="red" width="30" height="60" filter="url(#xMidYMidMeet)"/>
</g>
<g transform="translate(100, 0)">
<text y="-5">*YMax</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
<rect fill="red" width="30" height="60" filter="url(#xMaxYMaxMeet)"/>
<rect fill="red" width="30" height="60" filter="url(#xMaxYMaxMeet)"/>
</g>
</g>
<g id="slice-group-1" transform="translate(120, 185)">
<text x="0" y="-20">---------- slice -------------------------</text>
<g>
<text y="-5">xMin*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
<rect fill="red" width="30" height="60" filter="url(#xMinYMinSlice)"/>
<rect fill="red" width="30" height="60" filter="url(#xMinYMinSlice)"/>
</g>
<g transform="translate(50,0)">
<text y="-5">xMid*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
<rect fill="red" width="30" height="60" filter="url(#xMidYMidSlice)"/>
<rect fill="red" width="30" height="60" filter="url(#xMidYMidSlice)"/>
</g>
<g transform="translate(100,0)">
<text y="-5">xMax*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
<rect fill="red" width="30" height="60" filter="url(#xMaxYMaxSlice)"/>
<rect fill="red" width="30" height="60" filter="url(#xMaxYMaxSlice)"/>
</g>
</g>
<g id="slide-group-2" transform="translate(300, 155) translate(0, 30)">
<text x="0" y="-20">---------- slice ---------------------</text>
<g>
<text y="-5">*YMin</text>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMinYMinSlice)"/>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMinYMinSlice)"/>
</g>
<g transform="translate(70,0)">
<text y="-5">*YMid</text>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMidYMidSlice)"/>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMidYMidSlice)"/>
</g>
<g transform="translate(0,50)">
<text y="-5">*YMax</text>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMaxYMaxSlice)"/>
<rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
<rect fill="red" width="50" height="30" filter="url(#xMaxYMaxSlice)"/>
</g>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

8
tests/wpt/web-platform-tests/svg/import/filters-light-02-f-manual.svg
View file

@ -26,7 +26,7 @@
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The test has passed if the shaded arcs are displayed only on the side indicated by the arrows.
The test has passed if the shaded arcs are displayed only on the side indicated by the arrows.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -62,12 +62,12 @@
<feDistantLight azimuth="270" elevation="30"/>
</feSpecularLighting>
</filter>
<marker id="arrow" markerWidth="10" markerHeight="10" viewBox="0 0 10 40" overflow="visible" orient="auto">
<path d="M-1 5l10 -5l-10 -5z"/>
</marker>
</defs>
<text x="50%" y="3em" style="font-size:18px; text-anchor:middle">'feDistantLight' azimuth</text>
<g transform="scale(4) translate(0 50)">
@ -81,7 +81,7 @@
<line marker-end="url(#arrow)" x1="0" y1="-25" x2="0" y2="25" stroke="black" stroke-width="3" transform="rotate(90) translate(200 -350)"/>
<line marker-end="url(#arrow)" x1="0" y1="-25" x2="0" y2="25" stroke="black" stroke-width="3" transform="rotate(180) translate(-440 -225)"/>
<line marker-end="url(#arrow)" x1="0" y1="-25" x2="0" y2="25" stroke="black" stroke-width="3" transform="rotate(270) translate(-200 50)"/>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Before After
Before After

5
tests/wpt/web-platform-tests/svg/import/filters-light-03-f-manual.svg
View file

@ -52,7 +52,7 @@ You should see some shapes that have a black border, three circles and three rec
<defs>
<filter id="light-primobjbbox" primitiveUnits="objectBoundingBox">
<feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6">
<!-- Note: for z this assumes that the scalefactor is
<!-- Note: for z this assumes that the scalefactor is
sqrt(bbox.width*bbox.width + bbox.height*bbox.height)/sqrt(2) -->
<fePointLight x="0.875" y="0.875" z="-0.0625"/>
</feSpecularLighting>
@ -86,7 +86,7 @@ You should see some shapes that have a black border, three circles and three rec
<rect width="40" height="20" filter="url(#light-primobjbbox-rect)" fill="black" transform="translate(-20 60)"/>
<rect width="40" height="20" fill="none" transform="translate(-20 60)"/>
<text y="100" font-size="8" stroke="none" text-anchor="middle">primitiveUnits="objectBoundingBox"</text>
<circle cx="30" cy="30" r="5" fill="white"/>
<circle cx="30" cy="30" r="5" fill="white"/>
</g>
<g stroke="black" transform="translate(245 100)">
@ -121,4 +121,3 @@ You should see some shapes that have a black border, three circles and three rec
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>-->
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

Before After
Before After

54
tests/wpt/web-platform-tests/svg/import/filters-light-04-f-manual.svg
View file

@ -29,8 +29,8 @@
</d:operatorScript>
<d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
<p>
The rendered image should look approximately like the reference image, and the third rectangle from the left
in each row must be animated.
The rendered image should look approximately like the reference image, and the third rectangle from the left
in each row must be animated.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -65,7 +65,7 @@
<filter id="spotLightC" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<feDiffuseLighting in="SourceGraphic" diffuseConstant="1" surfaceScale="10" lighting-color="white">
<feSpotLight x="25" y="0" z="35" pointsAtX="25" pointsAtY="30" pointsAtZ="0" specularExponent="0" limitingConeAngle="0">
<animate attributeName="limitingConeAngle" from="0" to="50" dur="10s" fill="freeze"/>
<animate attributeName="limitingConeAngle" from="0" to="50" dur="10s" fill="freeze"/>
</feSpotLight>
</feDiffuseLighting>
</filter>
@ -87,7 +87,7 @@
<filter id="spotLightG" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<feDiffuseLighting in="SourceGraphic" diffuseConstant="1" surfaceScale="10" lighting-color="white">
<feSpotLight x="25" y="0" z="35" pointsAtX="25" pointsAtY="30" pointsAtZ="0" specularExponent="0" limitingConeAngle="0">
<animate attributeName="limitingConeAngle" from="0" to="-50" dur="10s" fill="freeze"/>
<animate attributeName="limitingConeAngle" from="0" to="-50" dur="10s" fill="freeze"/>
</feSpotLight>
</feDiffuseLighting>
</filter>
@ -99,29 +99,29 @@
</defs>
<!-- feSpotLight -->
<g transform="translate(0 -20)">
<g transform="translate(0 110)" font-size="9" font-family="Arial">
<text x="70" y="30">30</text>
<text x="165" y="30">20</text>
<text x="260" y="30">Animated (0..50)</text>
<text x="355" y="30">5</text>
<g transform="translate(0 100)">
<text x="70" y="30">-30</text>
<text x="165" y="30">-20</text>
<text x="260" y="30">Animated (0..-50)</text>
<text x="355" y="30">-5</text>
</g>
</g>
<g>
<rect transform="translate(70, 145)" width="50" height="30" filter="url(#spotLightA)"/>
<rect transform="translate(165, 145)" width="50" height="30" filter="url(#spotLightB)"/>
<rect transform="translate(260, 145)" width="50" height="30" filter="url(#spotLightC)"/>
<rect transform="translate(355, 145)" width="50" height="30" filter="url(#spotLightD)"/>
<rect transform="translate(70, 245)" width="50" height="30" filter="url(#spotLightE)"/>
<rect transform="translate(165, 245)" width="50" height="30" filter="url(#spotLightF)"/>
<rect transform="translate(260, 245)" width="50" height="30" filter="url(#spotLightG)"/>
<rect transform="translate(355, 245)" width="50" height="30" filter="url(#spotLightH)"/>
</g>
</g>
<g transform="translate(0 110)" font-size="9" font-family="Arial">
<text x="70" y="30">30</text>
<text x="165" y="30">20</text>
<text x="260" y="30">Animated (0..50)</text>
<text x="355" y="30">5</text>
<g transform="translate(0 100)">
<text x="70" y="30">-30</text>
<text x="165" y="30">-20</text>
<text x="260" y="30">Animated (0..-50)</text>
<text x="355" y="30">-5</text>
</g>
</g>
<g>
<rect transform="translate(70, 145)" width="50" height="30" filter="url(#spotLightA)"/>
<rect transform="translate(165, 145)" width="50" height="30" filter="url(#spotLightB)"/>
<rect transform="translate(260, 145)" width="50" height="30" filter="url(#spotLightC)"/>
<rect transform="translate(355, 145)" width="50" height="30" filter="url(#spotLightD)"/>
<rect transform="translate(70, 245)" width="50" height="30" filter="url(#spotLightE)"/>
<rect transform="translate(165, 245)" width="50" height="30" filter="url(#spotLightF)"/>
<rect transform="translate(260, 245)" width="50" height="30" filter="url(#spotLightG)"/>
<rect transform="translate(355, 245)" width="50" height="30" filter="url(#spotLightH)"/>
</g>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.4 $</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/filters-light-05-f-manual.svg
View file

@ -236,7 +236,7 @@
<text x="305" y="290" font-size="10" stroke="none" fill="black">270 deg</text>
<text x="365" y="290" font-size="10" stroke="none" fill="black">180 deg</text>
<text x="430" y="290" font-size="10" stroke="none" fill="black">0 deg</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/filters-offset-01-b-manual.svg
View file

@ -83,7 +83,7 @@
<circle cx="160" cy="50" r="40" fill="#000" filter="url(#FOMTest)"/>
<!-- Add some crosshairs of the same color of the
<!-- Add some crosshairs of the same color of the
flood at the same location as the offset -->
<!-- 20 pixel cross hair at 120,90 -->

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

Before After
Before After

46
tests/wpt/web-platform-tests/svg/import/filters-offset-02-b-manual.svg
View file

@ -13,20 +13,20 @@
version="$Revision: 1.4 $" testname="$RCSfile: filters-offset-02-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/filters.html">
<p>
Tests primitiveUnits="objectBoundingBox" and relative values.
Tests primitiveUnits="objectBoundingBox" and relative values.
There should be three green rectangles with thick black stroke.
</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 test has passed if there is nothing red visible and there are three
green rectangles with black stroke. If any green is visible outside the
black stroked rectangles the test has failed.
The test has passed if there is nothing red visible and there are three
green rectangles with black stroke. If any green is visible outside the
black stroked rectangles the test has failed.
</p>
</d:passCriteria>
</d:SVGTestCase>
@ -44,30 +44,30 @@ There should be three green rectangles with thick black stroke.
<defs>
<filter id="feoffset1" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="200%" height="200%">
<feFlood width="100%" height="100%" flood-color="lime"/>
<feFlood width="100%" height="100%" flood-color="lime"/>
<feOffset dx="0.1" dy="0.2"/>
</filter>
<filter id="feoffset2" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="200%" height="200%">
<feOffset dx="1" dy="1"/>
<filter id="feoffset2" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="200%" height="200%">
<feOffset dx="1" dy="1"/>
</filter>
<filter id="feoffset3" primitiveUnits="objectBoundingBox" x="-100%" y="0%" width="200%" height="100%">
<feOffset dx="-1"/>
<filter id="feoffset3" primitiveUnits="objectBoundingBox" x="-100%" y="0%" width="200%" height="100%">
<feOffset dx="-1"/>
</filter>
</defs>
<g transform="translate(-10 60)">
<rect x="60" y="70" width="100" height="100" fill="red"/>
<rect x="50" y="50" width="100" height="100" fill="red" filter="url(#feoffset1)"/>
<rect x="60" y="70" width="100" height="100" fill="none" stroke="black" stroke-width="2"/>
<rect x="200" y="70" width="100" height="100" fill="red"/>
<rect x="100" y="-30" width="100" height="100" fill="lime" filter="url(#feoffset2)"/>
<rect x="200" y="70" width="100" height="100" fill="none" stroke="black" stroke-width="2"/>
<g transform="translate(-10 60)">
<rect x="60" y="70" width="100" height="100" fill="red"/>
<rect x="50" y="50" width="100" height="100" fill="red" filter="url(#feoffset1)"/>
<rect x="60" y="70" width="100" height="100" fill="none" stroke="black" stroke-width="2"/>
<rect x="340" y="70" width="100" height="100" fill="red"/>
<rect x="440" y="70" width="100" height="100" fill="lime" filter="url(#feoffset3)"/>
<rect x="340" y="70" width="100" height="100" fill="none" stroke="black" stroke-width="2"/>
</g>
<rect x="200" y="70" width="100" height="100" fill="red"/>
<rect x="100" y="-30" width="100" height="100" fill="lime" filter="url(#feoffset2)"/>
<rect x="200" y="70" width="100" height="100" fill="none" stroke="black" stroke-width="2"/>
<rect x="340" y="70" width="100" height="100" fill="red"/>
<rect x="440" y="70" width="100" height="100" fill="lime" filter="url(#feoffset3)"/>
<rect x="340" y="70" width="100" height="100" fill="none" stroke="black" stroke-width="2"/>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
@ -80,4 +80,4 @@ There should be three green rectangles with thick black stroke.
<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>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before After
Before After

356
tests/wpt/web-platform-tests/svg/import/filters-overview-02-b-manual.svg
View file

@ -1,178 +1,178 @@
<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="CL" author="BB" status="created"
version="$Revision: 1.1 $" testname="$RCSfile: filters-overview-02-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitivesOverview">
<p>
The purpose of this file is to test the 'in' attribute on filter primitives.
This test is the same as filters-overview-01-b.svg but uses gradients with gradientUnits="userSpaceOnUse" instead for the
FillPaint/StrokePaint.
</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>
To pass this test, the UA must render all 6 cases (SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint) correctly.
</p>
<ol>
<li>The result for in="SourceGraphic" is a non blurred vertical rectangle (green with dashed stroke) overlayed with three blurred circles (red/green/blue with dashed stroke).</li>
<li>The result for in="SourceAlpha" is a non blurred vertical rectangle (green with dashed stroke) overlayed with three blurred circles (dark gray with dashed stroke).</li>
<li>The result for in="BackgroundImage" is a blurred vertical rectangle (green with dashed stroke).</li>
<li>The result for in="BackgroundAlpha" is blurred vertical rectangle (dark gray with dashed stroke).</li>
<li>The results for in="FillPaint" and in="StrokePaint" are the same. They consists of a non blurred vertical rectangle (green with dashed stroke) overlayed with a blurred gradiant (blue/white/red/yellow).</li>
<li>The size of the gradients are bigger than the blurred circles.</li>
</ol>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: filters-overview-02-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="grad1" gradientUnits="userSpaceOnUse" x1="140.5" y1="57.75" x2="140.5" y2="139.5">
<stop offset="0.00" stop-color="#0000ff"/>
<stop offset="0.33" stop-color="#ffffff"/>
<stop offset="0.67" stop-color="#ff0000"/>
<stop offset="1.00" stop-color="#ffff00"/>
</linearGradient>
<linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="140.5" y1="192.75" x2="140.5" y2="274.5">
<stop offset="0.00" stop-color="#0000ff"/>
<stop offset="0.33" stop-color="#ffffff"/>
<stop offset="0.67" stop-color="#ff0000"/>
<stop offset="1.00" stop-color="#ffff00"/>
</linearGradient>
<filter id="GaussianBlur1" filterUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
</filter>
<filter id="GaussianBlur2" filterUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
<filter id="GaussianBlur3" filterUnits="objectBoundingBox" x="-30%" y="-30%" width="160%" height="160%">
<feFlood flood-color="white" result="flood"/>
<feGaussianBlur in="BackgroundAlpha" stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="flood"/>
<feMergeNode in="blur"/>
</feMerge>
</filter>
<filter id="GaussianBlur4" filterUnits="objectBoundingBox" x="-40%" y="-40%" width="180%" height="180%">
<feFlood flood-color="white" result="flood"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="flood"/>
<feMergeNode in="blur"/>
</feMerge>
</filter>
<filter id="GaussianBlur5" filterUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="StrokePaint" stdDeviation="5"/>
</filter>
<filter id="GaussianBlur6" filterUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="FillPaint" stdDeviation="5"/>
</filter>
</defs>
<g enable-background="new" stroke-dasharray="25 5" stroke="black" stroke-width="3" font-size="14" fill="black">
<rect x="90" y="50" width="16" height="95" fill="green"/>
<g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#GaussianBlur1)">
<circle cx="098" cy="085" r="25" fill="red"/>
<circle cx="080" cy="110" r="25" fill="blue"/>
<circle cx="116" cy="110" r="25" fill="green"/>
</g>
<text x="98" y="160" stroke="none" text-anchor="middle">SourceAlpha</text>
<desc> =========================================================================================== </desc>
<rect x="90" y="185" width="16" height="95" fill="green"/>
<g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#GaussianBlur2)">
<circle cx="098" cy="220" r="25" fill="red"/>
<circle cx="080" cy="245" r="25" fill="blue"/>
<circle cx="116" cy="245" r="25" fill="green"/>
</g>
<text x="98" y="295" stroke="none" text-anchor="middle">SourceGraphic</text>
<desc> =========================================================================================== </desc>
<rect x="230" y="50" width="16" height="95" fill="green"/>
<g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#GaussianBlur3)">
<circle cx="238" cy="085" r="25" fill="red"/>
<circle cx="220" cy="110" r="25" fill="blue"/>
<circle cx="256" cy="110" r="25" fill="green"/>
</g>
<text x="238" y="160" stroke="none" text-anchor="middle">BackgroundAlpha</text>
<desc> =========================================================================================== </desc>
<rect x="230" y="185" width="16" height="95" fill="green"/>
<g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#GaussianBlur4)">
<circle cx="238" cy="220" r="25" fill="red"/>
<circle cx="220" cy="245" r="25" fill="blue"/>
<circle cx="256" cy="245" r="25" fill="green"/>
</g>
<text x="238" y="295" stroke="none" text-anchor="middle">BackgroundImage</text>
<desc> =========================================================================================== </desc>
<rect x="370" y="50" width="16" height="95" fill="green"/>
<!-- bbox: 335 60 86 75 -->
<g stroke-opacity="0.6" stroke="url(#grad1)" stroke-width="3" filter="url(#GaussianBlur5)">
<circle cx="378" cy="085" r="25" fill="red"/>
<circle cx="360" cy="110" r="25" fill="blue"/>
<circle cx="396" cy="110" r="25" fill="green"/>
</g>
<text x="378" y="160" stroke="none" text-anchor="middle">FillPaint</text>
<desc> =========================================================================================== </desc>
<rect x="370" y="185" width="16" height="95" fill="green"/>
<!-- bbox: 335 195 86 75 -->
<g fill-opacity="0.6" fill="url(#grad2)" stroke="black" stroke-width="3" filter="url(#GaussianBlur6)">
<circle cx="378" cy="220" r="25"/>
<circle cx="360" cy="245" r="25"/>
<circle cx="396" cy="245" r="25"/>
</g>
<text x="378" y="295" stroke="none" text-anchor="middle">StrokePaint</text>
</g>
<text x="240" y="30" font-size="20" text-anchor="middle">Filter input test</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.1 $</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>
<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="CL" author="BB" status="created"
version="$Revision: 1.1 $" testname="$RCSfile: filters-overview-02-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitivesOverview">
<p>
The purpose of this file is to test the 'in' attribute on filter primitives.
This test is the same as filters-overview-01-b.svg but uses gradients with gradientUnits="userSpaceOnUse" instead for the
FillPaint/StrokePaint.
</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>
To pass this test, the UA must render all 6 cases (SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint) correctly.
</p>
<ol>
<li>The result for in="SourceGraphic" is a non blurred vertical rectangle (green with dashed stroke) overlayed with three blurred circles (red/green/blue with dashed stroke).</li>
<li>The result for in="SourceAlpha" is a non blurred vertical rectangle (green with dashed stroke) overlayed with three blurred circles (dark gray with dashed stroke).</li>
<li>The result for in="BackgroundImage" is a blurred vertical rectangle (green with dashed stroke).</li>
<li>The result for in="BackgroundAlpha" is blurred vertical rectangle (dark gray with dashed stroke).</li>
<li>The results for in="FillPaint" and in="StrokePaint" are the same. They consists of a non blurred vertical rectangle (green with dashed stroke) overlayed with a blurred gradiant (blue/white/red/yellow).</li>
<li>The size of the gradients are bigger than the blurred circles.</li>
</ol>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: filters-overview-02-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="grad1" gradientUnits="userSpaceOnUse" x1="140.5" y1="57.75" x2="140.5" y2="139.5">
<stop offset="0.00" stop-color="#0000ff"/>
<stop offset="0.33" stop-color="#ffffff"/>
<stop offset="0.67" stop-color="#ff0000"/>
<stop offset="1.00" stop-color="#ffff00"/>
</linearGradient>
<linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="140.5" y1="192.75" x2="140.5" y2="274.5">
<stop offset="0.00" stop-color="#0000ff"/>
<stop offset="0.33" stop-color="#ffffff"/>
<stop offset="0.67" stop-color="#ff0000"/>
<stop offset="1.00" stop-color="#ffff00"/>
</linearGradient>
<filter id="GaussianBlur1" filterUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
</filter>
<filter id="GaussianBlur2" filterUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
<filter id="GaussianBlur3" filterUnits="objectBoundingBox" x="-30%" y="-30%" width="160%" height="160%">
<feFlood flood-color="white" result="flood"/>
<feGaussianBlur in="BackgroundAlpha" stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="flood"/>
<feMergeNode in="blur"/>
</feMerge>
</filter>
<filter id="GaussianBlur4" filterUnits="objectBoundingBox" x="-40%" y="-40%" width="180%" height="180%">
<feFlood flood-color="white" result="flood"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="2" result="blur"/>
<feMerge>
<feMergeNode in="flood"/>
<feMergeNode in="blur"/>
</feMerge>
</filter>
<filter id="GaussianBlur5" filterUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="StrokePaint" stdDeviation="5"/>
</filter>
<filter id="GaussianBlur6" filterUnits="objectBoundingBox" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="FillPaint" stdDeviation="5"/>
</filter>
</defs>
<g enable-background="new" stroke-dasharray="25 5" stroke="black" stroke-width="3" font-size="14" fill="black">
<rect x="90" y="50" width="16" height="95" fill="green"/>
<g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#GaussianBlur1)">
<circle cx="098" cy="085" r="25" fill="red"/>
<circle cx="080" cy="110" r="25" fill="blue"/>
<circle cx="116" cy="110" r="25" fill="green"/>
</g>
<text x="98" y="160" stroke="none" text-anchor="middle">SourceAlpha</text>
<desc> =========================================================================================== </desc>
<rect x="90" y="185" width="16" height="95" fill="green"/>
<g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#GaussianBlur2)">
<circle cx="098" cy="220" r="25" fill="red"/>
<circle cx="080" cy="245" r="25" fill="blue"/>
<circle cx="116" cy="245" r="25" fill="green"/>
</g>
<text x="98" y="295" stroke="none" text-anchor="middle">SourceGraphic</text>
<desc> =========================================================================================== </desc>
<rect x="230" y="50" width="16" height="95" fill="green"/>
<g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#GaussianBlur3)">
<circle cx="238" cy="085" r="25" fill="red"/>
<circle cx="220" cy="110" r="25" fill="blue"/>
<circle cx="256" cy="110" r="25" fill="green"/>
</g>
<text x="238" y="160" stroke="none" text-anchor="middle">BackgroundAlpha</text>
<desc> =========================================================================================== </desc>
<rect x="230" y="185" width="16" height="95" fill="green"/>
<g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#GaussianBlur4)">
<circle cx="238" cy="220" r="25" fill="red"/>
<circle cx="220" cy="245" r="25" fill="blue"/>
<circle cx="256" cy="245" r="25" fill="green"/>
</g>
<text x="238" y="295" stroke="none" text-anchor="middle">BackgroundImage</text>
<desc> =========================================================================================== </desc>
<rect x="370" y="50" width="16" height="95" fill="green"/>
<!-- bbox: 335 60 86 75 -->
<g stroke-opacity="0.6" stroke="url(#grad1)" stroke-width="3" filter="url(#GaussianBlur5)">
<circle cx="378" cy="085" r="25" fill="red"/>
<circle cx="360" cy="110" r="25" fill="blue"/>
<circle cx="396" cy="110" r="25" fill="green"/>
</g>
<text x="378" y="160" stroke="none" text-anchor="middle">FillPaint</text>
<desc> =========================================================================================== </desc>
<rect x="370" y="185" width="16" height="95" fill="green"/>
<!-- bbox: 335 195 86 75 -->
<g fill-opacity="0.6" fill="url(#grad2)" stroke="black" stroke-width="3" filter="url(#GaussianBlur6)">
<circle cx="378" cy="220" r="25"/>
<circle cx="360" cy="245" r="25"/>
<circle cx="396" cy="245" r="25"/>
</g>
<text x="378" y="295" stroke="none" text-anchor="middle">StrokePaint</text>
</g>
<text x="240" y="30" font-size="20" text-anchor="middle">Filter input test</text>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.1 $</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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Before After
Before After

22
tests/wpt/web-platform-tests/svg/import/filters-turb-02-f-manual.svg
View file

@ -19,7 +19,7 @@
<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">
@ -59,17 +59,17 @@
</filter>
<filter id="turbneg2" x="0" y="0" width="100%" height="100%">
<feTurbulence seed="-0.5" baseFrequency="0.01" type="turbulence"/>
</filter>
</filter>
<filter id="turbneg3" x="0" y="0" width="100%" height="100%">
<feTurbulence seed="-0.8" baseFrequency="0.01" type="turbulence"/>
</filter>
<!-- the reference for seed="0" -->
<filter id="turbzero" x="0" y="0" width="100%" height="100%">
<feTurbulence seed="0" baseFrequency="0.01" type="turbulence"/>
</filter>
<!-- seed="0" is transformed by the setup_seed method to be equal to seed="1" -->
<!-- seed="0" is transformed by the setup_seed method to be equal to seed="1" -->
<filter id="turbpos1" x="0" y="0" width="100%" height="100%">
<feTurbulence seed="0.2" baseFrequency="0.01" type="turbulence"/>
</filter>
@ -87,7 +87,7 @@
<filter id="turbneg5" x="0" y="0" width="100%" height="100%">
<feTurbulence seed="-1.5" baseFrequency="0.01" type="turbulence"/>
</filter>
<!-- These should be the same -->
<filter id="turbneg6" x="0" y="0" width="100%" height="100%">
<feTurbulence seed="-2" baseFrequency="0.01" type="turbulence"/>
@ -95,14 +95,14 @@
<filter id="turbneg7" x="0" y="0" width="100%" height="100%">
<feTurbulence seed="-2.6" baseFrequency="0.01" type="turbulence"/>
</filter>
<style type="text/css">
#subtests text { fill: black }
</style>
</defs>
<text x="50%" y="2em" style="font-size:24px; text-anchor:middle">feTurbulence seed</text>
<g id="subtests" transform="translate(65 80)" text-anchor="middle" fill="red">
<rect width="50" height="50" filter="url(#turbneg3)"/>
<text x="25" y="80">-0.8</text>
@ -119,13 +119,13 @@
<rect width="50" height="50" filter="url(#turbpos3)" transform="translate(300 0)"/>
<text x="325" y="80">1.5</text>
<rect x="-5" y="-5" width="360" height="100" stroke="black" fill="none"/>
<rect width="50" height="50" filter="url(#turbneg4)" transform="translate(0 120)"/>
<text x="25" y="200">-1</text>
<rect width="50" height="50" filter="url(#turbneg5)" transform="translate(50 120)"/>
<text x="75" y="200">-1.5</text>
<rect x="-5" y="115" width="110" height="100" stroke="black" fill="none"/>
<rect width="50" height="50" filter="url(#turbneg6)" transform="translate(250 120)"/>
<text x="275" y="200">-2</text>
<rect width="50" height="50" filter="url(#turbneg7)" transform="translate(300 120)"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/fonts-desc-01-t-manual.svg
View file

@ -19,7 +19,7 @@
based on the font-size attribute.
</p>
<!-- the test creator appears to have misunderstood the specification here.
None of the supplied fonts specifies a font-size descriptor.
None of the supplied fonts specifies a font-size descriptor.
Its not clear what this test is trying to test.
-->
</d:testDescription>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Before After
Before After

2
tests/wpt/web-platform-tests/svg/import/fonts-desc-02-t-manual.svg
View file

@ -82,7 +82,6 @@
<glyph unicode="a" glyph-name="upward-triangle" d="M0 0L500 0L250 900Z"/>
</font>
<font horiz-adv-x="500">
<font-face font-family="SVGFont2" font-variant="small-caps" units-per-em="1000" ascent="800" descent="200" alphabetic="200"/>
<missing-glyph horiz-adv-x="500" d="M0 0L500 0L500 1000L0 1000M50 50L50 950L450 950L450 50Z"/>
@ -97,7 +96,6 @@
<glyph unicode="a" glyph-name="square" d="M0 250L500 250L500 750L0 750Z"/>
</font>
<font horiz-adv-x="500">
<font-face font-family="SVGFont4" font-variant="normal" units-per-em="1000" ascent="800" descent="200" alphabetic="200"/>
<missing-glyph horiz-adv-x="500" d="M0 0L500 0L500 1000L0 1000M50 50L50 950L450 950L450 50Z"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

Before After
Before After

4
tests/wpt/web-platform-tests/svg/import/fonts-desc-03-t-manual.svg
View file

@ -71,7 +71,6 @@
<glyph unicode="a" glyph-name="upward-triangle" d="M0 0L500 0L250 900Z"/>
</font>
<font horiz-adv-x="500">
<font-face font-family="SVGFont2" font-weight="bold" units-per-em="1000" ascent="800" descent="200" alphabetic="200"/>
<missing-glyph horiz-adv-x="500" d="M0 0L500 0L500 1000L0 1000M50 50L50 950L450 950L450 50Z"/>
@ -86,7 +85,6 @@
<glyph unicode="a" glyph-name="upward-triangle" d="M0 0L500 0L250 900Z"/>
</font>
<font horiz-adv-x="500">
<font-face font-family="SVGFont3" font-weight="300" units-per-em="1000" ascent="800" descent="200" alphabetic="200"/>
<missing-glyph horiz-adv-x="500" d="M0 0L500 0L500 1000L0 1000M50 50L50 950L450 950L450 50Z"/>
@ -119,7 +117,7 @@
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.6 $</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
<!-- 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"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

3
tests/wpt/web-platform-tests/svg/import/fonts-desc-04-t-manual.svg
View file

@ -79,7 +79,6 @@
<glyph unicode="a" glyph-name="upward-triangle" d="M0 0L500 0L250 900Z"/>
</font>
<font horiz-adv-x="500">
<font-face font-family="SVGFont2" font-style="italic" units-per-em="1000" ascent="800" descent="200" alphabetic="200"/>
<missing-glyph horiz-adv-x="500" d="M0 0L500 0L500 1000L0 1000M50 50L50 950L450 950L450 50Z"/>
@ -94,7 +93,6 @@
<glyph unicode="a" glyph-name="square" d="M0 250L500 250L500 750L0 750Z"/>
</font>
<font horiz-adv-x="500">
<font-face font-family="SVGFont3" font-style="italic" units-per-em="1000" ascent="800" descent="200" alphabetic="200"/>
<missing-glyph horiz-adv-x="500" d="M0 0L500 0L500 1000L0 1000M50 50L50 950L450 950L450 50Z"/>
@ -109,7 +107,6 @@
<glyph unicode="a" glyph-name="upward-triangle" d="M0 0L500 0L250 900Z"/>
</font>
<font horiz-adv-x="500">
<font-face font-family="SVGFont4" font-style="italic" units-per-em="1000" ascent="800" descent="200" alphabetic="200"/>
<missing-glyph horiz-adv-x="500" d="M0 0L500 0L500 1000L0 1000M50 50L50 950L450 950L450 50Z"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before After
Before After

Some files were not shown because too many files have changed in this diff Show more