blob: 81dbc8da5e30d0f6dea124f81eb70edfac6f5b02 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<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="LH" status="accepted"
version="$Revision: 1.7 $" testname="$RCSfile: masking-path-01-b.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/masking.html#ClippingPaths">
<p>
Test to see if the basic clipping works using the clipPath element
and the clip-path property.
</p>
<p>
This test uses the following elements : <clipPath> and the following
properties : clip-path.
</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 at the top shows an orange rectangle (with black stroke) being clipped by another rectangle.
So only the middle portion of the orange rectangle should be visible. Also the black stroke should
only be visible along the top and bottom edge of the rectangle.
</p>
<p>
The example at the bottom has a group containing a text string and two rectangles. The group
has a clipping path defined using two overlapping rectangles. Of concern is the overlapping area
shared by the two rectangles. There should not be holes in this overlapping area, the
clip region is the union of the two rectangles. For clarity,
guide rectangles in grey show the position of the clipping rectangles.
</p>
<p>
The rendered picture should match the reference image exactly, except for possible
variations in the labelling text (per CSS2 rules).
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: masking-path-01-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">
<g shape-rendering="geometricPrecision">
<!--text font-size="14" x="10" y="20">Test for clipping using clipPath element</text-->
<defs>
<clipPath id="clip1">
<rect x="200" y="10" width="60" height="100"/>
</clipPath>
<clipPath id="clip2">
<rect x="90" y="150" width="175" height="100"/>
<rect x="225" y="160" width="95" height="75"/>
</clipPath>
</defs>
<rect x="20" y="20" width="440" height="60" fill="orange" stroke="black" stroke-width="5" clip-path="url(#clip1)"/>
<text font-size="30" x="20" y="130">Rectangle being clipped</text>
<g clip-path="url(#clip2)">
<rect x="115" y="190" width="225" height="40" fill="aqua" stroke="blue" stroke-width="5"/>
<rect x="115" y="240" width="225" height="40" fill="lime" stroke="green" stroke-width="5"/>
<text font-size="30" x="115" y="180">Line of text to be clipped</text>
</g>
<text font-size="30" x="20" y="280">Group being clipped</text>
<!-- show the two rects and the overlap area -->
<g fill="none" stroke="#999" stroke-width="2">
<rect x="90" y="150" width="175" height="100"/>
<rect x="225" y="160" width="95" height="75"/>
</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.7 $</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>
|
