third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/masking-path-01-b.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--======================================================================-->
   3 <!--=  Copyright 2000 World Wide Web Consortium, (Massachusetts          =-->
   4 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   5 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   6 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   7 <!--======================================================================-->
   8 <!-- NOTE:  CVS will automatically update the                             -->
   9 <!--        "$RCSfile: masking-path-01-b.svg,v $" and "$Revision: 1.10 $"         -->
  10 <!--        fields in the file.                                           -->
  11 <!--        There is no need to update this information.                  -->
  12 <!-- =====================================================================--><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
  13
  14 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" viewBox="0 0 480 360" width="100%" height="100%" version="1.1" baseProfile="basic">
  15         <SVGTestCase xmlns:testcase="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/2000/02/svg/testsuite/description/" reviewer="[CL]" owner="[LH]" desc="Test to see if the basic clipping works using the clipPath element and the clip-path property." status="imageCreated" version="$Revision: 1.10 $" testname="$RCSfile: masking-path-01-b.svg,v $">&gt;
  16                 <OperatorScript>
  17                         <Paragraph>
  18                                 Test to see if the basic clipping works using the clipPath element
  19                                 and the clip-path property.
  20                         </Paragraph>
  21                         <Paragraph>
  22                                 This test uses the following elements : &lt;clipPath&gt; and the following
  23                                 properties : clip-path.
  24                         </Paragraph>
  25                         <Paragraph>
  26                                 The test at the top shows a red rectangle (with black stroke) being clipped by another rectangle.
  27                                 So only the middle portion of the red rectangle should be visible. Also the black stroke should
  28                                 only be visible along the top and bottom edge of the rectangle.
  29                         </Paragraph>
  30                         <Paragraph>
  31                                 The example at the bottom has a group containing a text string and two rectangles. The group
  32                                 has a clipping path defined using two  overlapping rectangles. Of concern is the overlapping area
  33                                 shared by the two rectangles. There should not be holes in this overlapping area, the
  34                                 clip region is the union of the two rectangles. For clarity,
  35                                 guide rectangles in grey show the position of the clipping rectangles.
  36                         </Paragraph>
  37                         <Paragraph>
  38                                 The rendered picture should match the reference image exactly, except for possible
  39                                 variations in the labelling text (per CSS2 rules).
  40                         </Paragraph>
  41                 </OperatorScript>
  42         </SVGTestCase>
  43         <title id="test-title">$RCSfile: masking-path-01-b.svg,v $</title>
  44         <!--======================================================================-->
  45         <!--Content of Test Case follows...                  =====================-->
  46         <!--======================================================================-->
  47         <g id="test-body-content">
  48                 <!--text font-family="Arial" font-size="14"  x="10" y="20">Test for clipping using clipPath element</text-->
  49                 <defs>
  50                         <clipPath id="clip1">
  51                                 <rect x="200" y="10" width="60" height="100"/>
  52                         </clipPath>
  53                         <clipPath id="clip2">
  54                                 <rect x="90" y="150" width="175" height="100"/>
  55                                 <rect x="225" y="160" width="95" height="75"/>
  56                         </clipPath>
  57                 </defs>
  58                 <rect x="20" y="20" width="440" height="60" fill="red" stroke="black" stroke-width="5" clip-path="url(#clip1)"/>
  59                 <text font-family="Arial" font-size="30" x="20" y="130">Rectangle being clipped</text>
  60                 <g clip-path="url(#clip2)">
  61                         <rect x="115" y="190" width="225" height="40" fill="aqua" stroke="blue" stroke-width="5"/>
  62                         <rect x="115" y="240" width="225" height="40" fill="lime" stroke="green" stroke-width="5"/>
  63                         <text font-family="Arial" font-size="30" x="115" y="180">Line of text to be clipped</text>
  64                 </g>
  65                 <text font-family="Arial" font-size="30" x="20" y="280">Group being clipped</text>
  66                 <!--  show the two rects and the overlap area -->
  67                 <g fill="none" stroke="#999" stroke-width="2">
  68                         <rect x="90" y="150" width="175" height="100"/>
  69                         <rect x="225" y="160" width="95" height="75"/>
  70                 </g>
  71         </g>
  72         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.10 $</text>
  73         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  74 </svg>