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

   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-vportClip-BE-09.svg                                           -->
  11 <!-- renamed for 1.1 suite to masking-path-03-b.svg                        -->
  12 <!-- Author : Jon Ferraiolo 05-Aug-2000                                    -->
  13 <!-- 1.1 revision by Charles Ying                                          -->
  14 <!--======================================================================-->
  15 <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
  16         <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  17                 <OperatorScript version="$Revision: 1.3 $" testname="masking-path-03-b.svg">
  18                         <Paragraph>
  19                                 Test 'overflow'/'clip' on outermost and inner 'svg' elements.
  20                         </Paragraph>
  21                         <Paragraph>
  22                                 There are two parts to the test. The first part tests viewport clipping
  23                                 on outermost 'svg' elements. The second part tests viewport clipping
  24                                 on inner 'svg' elements.
  25                         </Paragraph>
  26                         <Paragraph>
  27                                 The test case also tests the initial value of the 'overflow' property
  28                                 to ensure that it is set to 'hidden' for all 'svg' elements.
  29                                 Tester should zoom out and/or pan to check this.
  30                         </Paragraph>
  31                         <Paragraph>
  32                                 To test clipping to the outermost 'svg' element,
  33                                 a rectangle with a light blue interior, a light red border and a black
  34                                 string that says "Clip to outer 'svg'" is painted four times such that
  35                                 it will overflow each of the top, left, right and bottom
  36                                 sides of the bounds of the outermost 'svg' element, respectively.
  37                                 The UA should clip the rectangle and string to the bounds of the
  38                                 outermost 'svg' element (the 480x360 rectangular viewport) and
  39                                 continue to clip to this viewport if the image is zoommed in or out,
  40                                 or panned.
  41                         </Paragraph>
  42                         <Paragraph>
  43                                 To test clipping to inner 'svg' elements, a rectangle with a light red
  44                                 interior, a light blue border and a black string that says "Clip to
  45                                 inner 'svg'" is painted four times such that it will overflow each of
  46                                 the top, left, right and bottom sides of the bounds of an inner 'svg'
  47                                 element, respectively.  The UA should clip the rectangle and string to
  48                                 the bounds of the inner 'svg' element, which are depicted by a
  49                                 rectangle with a thick, dark-green perimeter and no fill.
  50                         </Paragraph>
  51                         <Paragraph>
  52                                 Note that minor text layout differences, as are permissible under CSS2
  53                                 rules, can lead to slightly different visual results regarding where
  54                                 the text strings get clipped.
  55                         </Paragraph>
  56                 </OperatorScript>
  57         </SVGTestCase>
  58         <title id="test-title">masking-path-03-b</title>
  59         <desc id="test-desc">Test 'overflow'/'clip' on outermost and inner 'svg' elements.</desc>
  60         <!--======================================================================-->
  61         <!--Content of Test Case follows...                  =====================-->
  62         <!--======================================================================-->
  63         <g id="test-body-content">
  64                 <!--text font-family="Arial" font-size="18" text-anchor="middle" x="240" y="70">Test 'overflow'/'clip' on outermost and inner 'svg' elements</text-->
  65                 <text font-family="Arial" font-size="18" x="10" y="70">Test 'overflow'/'clip' on outermost and inner 'svg' elements</text>
  66                 <!-- Test initial value for 'overflow' property (i.e., hidden)
  67        on outermost 'svg' -->
  68                 <g font-family="Arial" font-size="48" stroke-width="2">
  69                         <g transform="translate(115,-20)">
  70                                 <rect width="250" height="60" fill="#ccccff" stroke="#ff8888"/>
  71                                 <text x="15" y="45">Outer Clip</text>
  72                         </g>
  73                         <g transform="translate(-175,150)">
  74                                 <rect width="250" height="60" fill="#ccccff" stroke="#ff8888"/>
  75                                 <text x="15" y="45">Outer Clip</text>
  76                         </g>
  77                         <g transform="translate(405,150)">
  78                                 <rect width="250" height="60" fill="#ccccff" stroke="#ff8888"/>
  79                                 <text x="15" y="45">Outer Clip</text>
  80                         </g>
  81                         <g transform="translate(115,330)">
  82                                 <rect width="250" height="60" fill="#ccccff" stroke="#ff8888"/>
  83                                 <text x="15" y="45">Outer Clip</text>
  84                         </g>
  85                 </g>
  86                 <!-- Test initial value for 'overflow' property (i.e., hidden)
  87        on inner 'svg' -->
  88                 <rect x="115" y="100" width="250" height="160" fill="none" stroke="#006600" stroke-width="5"/>
  89                 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="115" y="100" width="250" height="160">
  90                         <g font-family="Arial" font-size="32" stroke-width="2">
  91                                 <g transform="translate(50,-15)">
  92                                         <rect width="150" height="35" fill="#ffaaaa" stroke="#6666ff"/>
  93                                         <text x="6" y="26">Inner Clip</text>
  94                                 </g>
  95                                 <g transform="translate(-50,62.5)">
  96                                         <rect width="150" height="35" fill="#ffaaaa" stroke="#6666ff"/>
  97                                         <text x="6" y="26">Inner Clip</text>
  98                                 </g>
  99                                 <g transform="translate(150,62.5)">
 100                                         <rect width="150" height="35" fill="#ffaaaa" stroke="#6666ff"/>
 101                                         <text x="6" y="26">Inner Clip</text>
 102                                 </g>
 103                                 <g transform="translate(50,140)">
 104                                         <rect width="150" height="35" fill="#ffaaaa" stroke="#6666ff"/>
 105                                         <text x="6" y="26">Inner Clip</text>
 106                                 </g>
 107                         </g>
 108                 </svg>
 109         </g>
 110         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.3 $</text>
 111         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
 112 </svg>