1 <?xml version=
"1.0" encoding=
"UTF-8"?>
2 <!DOCTYPE svg PUBLIC
"-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
3 <!--======================================================================-->
4 <!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
5 <!--= Institute of Technology, Institut National de Recherche en =-->
6 <!--= Informatique et en Automatique, Keio University). All Rights =-->
7 <!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
8 <!--======================================================================-->
9 <!-- ===================================================================== -->
10 <!-- masking-mask-BE-05.svg -->
11 <!-- renamed for 1.1 suite to masking-mask-01-b.svg -->
12 <!-- Author : Haroon Sheikh 13-Mar-2000 -->
13 <!-- 1.1 revision by Charles Ying -->
14 <!-- Further revision by Chris Lilley -->
15 <!-- ====================================================================== -->
16 <svg version=
"1.1" xmlns=
"http://www.w3.org/2000/svg" xmlns:
xlink=
"http://www.w3.org/1999/xlink" id=
"svg-root" baseProfile=
"basic" width=
"100%" height=
"100%" viewBox=
"0 0 480 360">
17 <SVGTestCase xmlns=
"http://www.w3.org/2000/02/svg/testsuite/description/">
18 <OperatorScript version=
"$Revision: 1.7 $" testname=
"masking-mask-01-b.svg">
20 Test to see if the masking features using the mask element and mask
21 property are available.
24 A red rectangle is displayed in the background to help view the result
25 of transparency and masking.
28 From top to bottom, the tests are as follows.
31 In the top test, a linear gradient is used inside the mask to change the opacity
32 of the rectangle from
1.0 (at the top) to
0.5 (at the bottom).
35 In the second test, a simple
50% opaque rectangle is used as a mask.
38 In the third test, no mask is used, but a rectangle is shown with
50% opacity.
39 The second and third test should look the same.
42 Lastly, a string of text has a mask applied to it. The mask only covers a partial
43 area of the text, so the text should only be half visible. Also the mask consists
44 of
4 rectangles with various levels of opacity.
47 The rendered picture should match the reference image, except
48 variations are possible in the labelling text (per CSS2 rules).
52 <title id=
"test-title">masking-mask-
01-b
</title>
54 Test to see if the masking features using the mask element and
55 mask property are available.
57 <!-- ====================================================================== -->
58 <!-- Content of Test Case follows... ===================== -->
59 <!-- ====================================================================== -->
60 <g id=
"test-body-content">
62 <font horiz-adv-x=
"313">
63 <!-- Converted from Larabie Anglepoise by Batik ttf2svg -->
64 <font-face font-family=
"larabie-anglepoise" units-per-em=
"1000" panose-1=
"0 0 4 0 0 0 0 0 0 0" ascent=
"703" descent=
"-300" alphabetic=
"0"/>
65 <missing-glyph horiz-adv-x=
"500" d=
"M63 0V700H438V0H63ZM125 63H375V638H125V63Z"/>
66 <glyph unicode=
"S" glyph-name=
"S" horiz-adv-x=
"385" d=
"M371 1H29V144H264Q264 151 264 166Q265 180 265 188Q265 212 249 212H132Q83 212 55 247Q29 279 29 329V566H335V422H136V375Q136 360 144 356Q148 355 168 355H279Q327 355 352 309Q371 273 371 221V1Z"/>
67 <glyph unicode=
"V" glyph-name=
"V" horiz-adv-x=
"351" d=
"M365 563L183 -33L0 563H101L183 296L270 563H365Z"/>
68 <glyph unicode=
"G" glyph-name=
"G" horiz-adv-x=
"367" d=
"M355 1H18V564H355V420H125V144H248V211H156V355H355V1Z"/>
69 <hkern g1=
"V" g2=
"G" k=
"-40"/>
72 <text font-family=
"Arial" font-size=
"14" x=
"10" y=
"20">Test for mask support
</text>
73 <!-- Draw a red rectangle in the background -->
74 <rect x=
"10" y=
"30" width=
"100" height=
"260" fill=
"red"/>
75 <!-- Apply a gradient ramp based opacity -->
76 <mask id=
"mask1" maskUnits=
"userSpaceOnUse" x=
"60" y=
"50" width=
"100" height=
"60">
78 <linearGradient gradientUnits=
"userSpaceOnUse" id=
"Grad1" x1=
"60" y1=
"50" x2=
"60" y2=
"120">
79 <stop stop-color=
"white" stop-opacity=
"1" offset=
"0"/>
80 <stop stop-color=
"white" stop-opacity=
"0.5" offset=
"1"/>
83 <rect x=
"60" y=
"50" width=
"100" height=
"60" fill=
"url(#Grad1)"/>
85 <rect x=
"60" y=
"50" width=
"100" height=
"60" fill=
"lime" mask=
"url(#mask1)"/>
86 <text font-family=
"Arial" font-size=
"12" x=
"200" y=
"65">Mask with linear gradient from
</text>
87 <text font-family=
"Arial" font-size=
"12" x=
"200" y=
"80">opacity=
1 to opactity=
0.5</text>
88 <!-- Simulate a uniform opacity using a mask -->
89 <mask id=
"mask2" maskUnits=
"userSpaceOnUse" x=
"60" y=
"120" width=
"100" height=
"30">
90 <rect x=
"60" y=
"120" width=
"100" height=
"30" fill-opacity=
"0.5" fill=
"white"/>
92 <rect x=
"60" y=
"120" width=
"100" height=
"30" fill=
"lime" mask=
"url(#mask2)"/>
93 <text font-family=
"Arial" font-size=
"12" x=
"200" y=
"135">Mask with uniform opacity of
0.5</text>
94 <!-- Apply a uniform opacity -->
95 <rect x=
"60" y=
"160" width=
"100" height=
"30" fill=
"lime" fill-opacity=
"0.5"/>
96 <text font-family=
"Arial" font-size=
"12" x=
"200" y=
"175">Rectangle with uniform opacity of
0.5</text>
97 <!-- Apply a mask to text -->
98 <mask id=
"mask3" maskUnits=
"userSpaceOnUse" x=
"60" y=
"200" width=
"200" height=
"100">
99 <rect x=
"60" y=
"200" width=
"200" height=
"25" fill=
"white" fill-opacity=
"0.5"/>
100 <rect x=
"60" y=
"225" width=
"200" height=
"25" fill=
"white" fill-opacity=
"0.2"/>
101 <rect x=
"60" y=
"250" width=
"200" height=
"25" fill=
"white" fill-opacity=
"1"/>
102 <rect x=
"60" y=
"275" width=
"200" height=
"25" fill=
"white" fill-opacity=
"0.7"/>
104 <text x=
"60" y=
"280" font-family=
"larabie-anglepoise" font-size=
"110" fill=
"lime" mask=
"url(#mask3)">SVG
</text>
105 <text font-family=
"Arial" font-size=
"12" x=
"200" y=
"225">Text with mask containing rectangles
</text>
106 <text font-family=
"Arial" font-size=
"12" x=
"200" y=
"240">of various opacities
</text>
108 <text id=
"revision" x=
"10" y=
"340" font-size=
"40" stroke=
"none" fill=
"black">$Revision:
1.7 $
</text>
109 <rect id=
"test-frame" x=
"1" y=
"1" width=
"478" height=
"358" fill=
"none" stroke=
"#000000"/>