GNOME.org
 

[lasem] test: new filter test files.

commit 65bdf5acd104055228a34b82d191ae9d3201a097
Author: Emmanuel Pacaud <emmanuel gnome org>
Date:   Sun Oct 14 21:25:23 2012 +0200

    test: new filter test files.

 tests/data/svg/misc/feBlend.svg     |   46 ++++++++++
 tests/data/svg/misc/feComposite.svg |  170 +++++++++++++++++++++++++++++++++++
 2 files changed, 216 insertions(+), 0 deletions(-)
---
diff --git a/tests/data/svg/misc/feBlend.svg b/tests/data/svg/misc/feBlend.svg
new file mode 100644
index 0000000..f8f131d
--- /dev/null
+++ b/tests/data/svg/misc/feBlend.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg width="5cm" height="5cm" viewBox="0 0 500 500"
+     xmlns="http://www.w3.org/2000/svg"; version="1.1">
+  <title>Example feBlend - Examples of feBlend modes</title>
+  <desc>Five text strings blended into a gradient,
+        with one text string for each of the five feBlend modes.</desc>
+  <defs>
+    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
+            x1="100" y1="0" x2="300" y2="0">
+      <stop offset="0" stop-color="#000000" />
+      <stop offset=".33" stop-color="#ffffff" />
+      <stop offset=".67" stop-color="#ff0000" />
+      <stop offset="1" stop-color="#808080" />
+    </linearGradient>
+    <filter id="Normal">
+      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
+    </filter>
+    <filter id="Multiply">
+      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
+    </filter>
+    <filter id="Screen">
+      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
+    </filter>
+    <filter id="Darken">
+      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
+    </filter>
+    <filter id="Lighten">
+      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <rect fill="none" stroke="blue"  
+        x="1" y="1" width="498" height="498"/>
+  <g enable-background="new" >
+    <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
+    <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
+      <text x="50" y="90" filter="url(#Normal)" >Normal</text>
+      <text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
+      <text x="50" y="270" filter="url(#Screen)" >Screen</text>
+      <text x="50" y="360" filter="url(#Darken)" >Darken</text>
+      <text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
+    </g>
+  </g>
+</svg>
+
diff --git a/tests/data/svg/misc/feComposite.svg b/tests/data/svg/misc/feComposite.svg
new file mode 100644
index 0000000..6c74747
--- /dev/null
+++ b/tests/data/svg/misc/feComposite.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+  <title>Example feComposite - Examples of feComposite operations</title>
+  <desc>Four rows of six pairs of overlapping triangles depicting
+        the six different feComposite operators under different
+        opacity values and different clearing of the background.</desc>
+	<defs>
+    <desc>Define two sets of six filters for each of the six compositing operators.
+          The first set wipes out the background image by flooding with opaque white.
+          The second set does not wipe out the background, with the result
+          that the background sometimes shines through and is other cases
+          is blended into itself (i.e., "double-counting").</desc>
+    <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="arithmeticFlood" filterUnits="objectBoundingBox" 
+            x="-5%" y="-5%" width="110%" height="110%">
+      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
+                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
+      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
+    </filter>
+    <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
+    </filter>
+    <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
+    </filter>
+    <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
+    </filter>
+    <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
+    </filter>
+    <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
+    </filter>
+    <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox" 
+            x="-5%" y="-5%" width="110%" height="110%">
+      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
+                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
+    </filter>
+    <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
+    <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
+    <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
+    <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
+    <g id="TwoBlueTriangles">
+      <use xlink:href="#Blue100"/>
+      <use xlink:href="#Blue50"/>
+    </g>
+    <g id="BlueTriangles">
+      <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
+      <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
+    </g>
+  </defs>
+
+  <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
+  <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
+    <desc>Render the examples using the filters that draw on top of
+          an opaque white surface, thus obliterating the background.</desc>
+    <g enable-background="new">
+      <text x="15" y="75">opacity 1.0</text>
+      <text x="15" y="115" font-size="27">(with feFlood)</text>
+      <text x="15" y="200">opacity 0.5</text>
+      <text x="15" y="240" font-size="27">(with feFlood)</text>
+      <use xlink:href="#BlueTriangles"/>
+      <g transform="translate(275,25)">
+        <use xlink:href="#Red100" filter="url(#overFlood)" />
+        <use xlink:href="#Red50" filter="url(#overFlood)" />
+        <text x="5" y="275">over</text>
+      </g>
+      <g transform="translate(400,25)">
+        <use xlink:href="#Red100" filter="url(#inFlood)" />
+        <use xlink:href="#Red50" filter="url(#inFlood)" />
+        <text x="35" y="275">in</text>
+      </g>
+      <g transform="translate(525,25)">
+        <use xlink:href="#Red100" filter="url(#outFlood)" />
+        <use xlink:href="#Red50" filter="url(#outFlood)" />
+        <text x="15" y="275">out</text>
+      </g>
+      <g transform="translate(650,25)">
+        <use xlink:href="#Red100" filter="url(#atopFlood)" />
+        <use xlink:href="#Red50" filter="url(#atopFlood)" />
+        <text x="10" y="275">atop</text>
+      </g>
+      <g transform="translate(775,25)">
+        <use xlink:href="#Red100" filter="url(#xorFlood)" />
+        <use xlink:href="#Red50" filter="url(#xorFlood)" />
+        <text x="15" y="275">xor</text>
+      </g>
+      <g transform="translate(900,25)">
+        <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
+        <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
+        <text x="-25" y="275">arithmetic</text>
+      </g>
+    </g>
+    <g transform="translate(0,325)" enable-background="new">
+    <desc>Render the examples using the filters that do not obliterate
+          the background, thus sometimes causing the background to continue
+          to appear in some cases, and in other cases the background
+          image blends into itself ("double-counting").</desc>
+      <text x="15" y="75">opacity 1.0</text>
+      <text x="15" y="115" font-size="27">(without feFlood)</text>
+      <text x="15" y="200">opacity 0.5</text>
+      <text x="15" y="240" font-size="27">(without feFlood)</text>
+      <use xlink:href="#BlueTriangles"/>
+      <g transform="translate(275,25)">
+        <use xlink:href="#Red100" filter="url(#overNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#overNoFlood)" />
+        <text x="5" y="275">over</text>
+      </g>
+      <g transform="translate(400,25)">
+        <use xlink:href="#Red100" filter="url(#inNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#inNoFlood)" />
+        <text x="35" y="275">in</text>
+      </g>
+      <g transform="translate(525,25)">
+        <use xlink:href="#Red100" filter="url(#outNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#outNoFlood)" />
+        <text x="15" y="275">out</text>
+      </g>
+      <g transform="translate(650,25)">
+        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
+        <text x="10" y="275">atop</text>
+      </g>
+      <g transform="translate(775,25)">
+        <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
+        <text x="15" y="275">xor</text>
+      </g>
+      <g transform="translate(900,25)">
+        <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
+        <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
+        <text x="-25" y="275">arithmetic</text>
+      </g>
+    </g>
+  </g>
+</svg>
+
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]