third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/coords-units-02-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 <!--======================================================================-->
   5 <!--=  Copyright 2000 World Wide Web Consortium, (Massachusetts          =-->
   6 <!--=  Institute of Technology, Institut National de Recherche en        =-->
   7 <!--=  Informatique et en Automatique, Keio University). All Rights      =-->
   8 <!--=  Reserved. See http://www.w3.org/Consortium/Legal/.                =-->
   9 <!--======================================================================-->
  10 <!-- ===================================================================== -->
  11 <!--                                                                       -->
  12 <!-- coords-unitsProc-BE-04.svg                                            -->
  13 <!-- renamed for 1.1 suite to coords-units-02-f.svg                        -->
  14 <!-- renamed for 1.1 basic profile suite to coords-units-02-b.svg          -->
  15 <!--                                                                       -->
  16 <!-- This test validates the CSS units and percentages processing rules    -->
  17 <!--                                                                       -->
  18 <!-- Author : Vincent Hardy, 29-Feb-2000                                   -->
  19 <!-- Modified for svg 1.1 by Ola Andersson, 07-Mar-2002                    -->
  20 <!-- Modified for svg 1.1 basic profile by Luc Minnebo, 05-July-2002       -->
  21 <!--                                                                       -->
  22 <!-- History:                                                              -->
  23 <!--  29-Feb-2000, VH: Created.  Matches 20000302 SVG spec.                -->
  24 <!--  09-Mar-2000, LH: suite integration (name, editorial, ..), ser#2      -->
  25 <!--  09-Mar-2000, LH:  fix framing rect,  ser#3.                          -->
  26 <!--  30-Apr-2000, VH="  fix stroke properties bug" ser#3.                  -->
  27 <!--  12-May-2000, LH:  fix title and integrate,  ser#4.                   -->
  28 <!--  01-Jun-2000, LH:  remove text-anchor,  ser#5.                        -->
  29 <!--  03-Aug-2000, LH=" update DOCTYPE for CR DTD, 20000802" ser# .         -->
  30 <!--  16-Aug-2000, LH="rename" ser#6.                                      -->
  31 <!--  13-Dec-2000, JF: Adapt to new rules for CSS units and pcts in        -->
  32 <!--                   02Nov2000 spec.                                     -->
  33 <!--                                                                       -->
  34 <!-- ===================================================================== -->
  35 <!--======================================================================-->
  36 <!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
  37 <!--= log messages, and therefore is no longer in the preceding preamble.=-->
  38 <!--======================================================================-->
  39 <svg 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" version="1.1" baseProfile="basic">
  40    <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
  41                 <OperatorScript version="$Revision: 1.4 $" testname="coords-units-02-b.svg">
  42          <Paragraph>
  43          Verify the conversion processing of CSS units and percentage values for both
  44          coordinates and length values. Note that the test uses the CSS px unit to be usable
  45          in all pixel resolutions. Hence, the conversion from other CSS units to CSS px is
  46          left out of the test.
  47       </Paragraph>
  48       <Paragraph>
  49          There are six atomic tests in this test. For each, the approach is to draw two similar
  50          elements (circles or rects) with coordinates specified in user space for one and in
  51          CSS units or percentage for the other. Each test is such that these two values (or
  52          value pairs) should match.
  53       </Paragraph>
  54       <Paragraph>
  55          For example, in the first two tests, that validate coordinate processing, the circles
  56          should have the same center. In the following two tests, the rectangles should have
  57          the same height and width. And finally, in the last test, the 3 circles should have the
  58          same radius.
  59       </Paragraph>
  60       <Paragraph>
  61          The rendered image should match the reference image except for the text which may
  62          show minor differences, per CSS2 rules for font selection and matching.
  63       </Paragraph>
  64      </OperatorScript>
  65    </SVGTestCase>
  66    <title id="test-title">coords-units-02-b</title>
  67    <desc id="test-desc">This test validates the processing rules for converting coordinates and length in CSS units to user space coordinate values.</desc>
  68    <!--======================================================================-->
  69    <!--Content of Test Case follows...                  =====================-->
  70    <!--======================================================================-->
  71    <g id="test-body-content" font-size="13pt">
  72       <!-- ==================================================================== -->
  73       <!-- First test, converting CSS coordinates to user space.                -->
  74       <!-- If implemented properly, the red marker should appear on top of      -->
  75       <!-- the black marker.                                                    -->
  76       <!-- ==================================================================== -->
  77       <!-- Draw Text Comment -->
  78       <text x="60" y="35">CSS pixel coordinate to user space conversion</text>
  79       <g transform="translate(5, 0) scale(4)">
  80          <!-- Draw marker using user space units -->
  81          <circle cx="7.5" cy="7.5" r="2.5" fill="black" />
  82          <!-- Draw CSS marker using px units -->
  83          <circle cx="7.5px" cy="7.5px" r="1.5px" fill="red" />
  84       </g>
  85       <!-- ==================================================================== -->
  86       <!-- Same test, using percentage values for the coordinates               -->
  87       <!-- ==================================================================== -->
  88       <!-- Draw Text Comment -->
  89       <text x="60" y="85">Percentage coordinates to user space conversion</text>
  90       <g transform="translate(5, 50) scale(4)">
  91          <!-- Draw marker using user space units -->
  92          <circle cx="7.5" cy="7.5" r="2.5" fill="black" />
  93          <!-- Draw marker using percentages: 7.5 = 1.563% of 480 (cx)      -->
  94          <!-- Draw marker using percentages: 7.5 = 2.083% of 360 (cy)      -->
  95          <circle cx="1.563%" cy="2.083%" r=".3535%" fill="red" />
  96       </g>
  97       <!-- ==================================================================== -->
  98       <!-- Second test, converting CSS width and height to user space.          -->
  99       <!-- If implemented properly, the red marker should appear bellow the     -->
 100       <!-- black one and have the same size                                     -->
 101       <!-- ==================================================================== -->
 102       <!-- Draw Text Comment -->
 103       <text x="60" y="140">CSS width/height to user space conversion</text>
 104       <g transform="translate(30, 115) scale(4)">
 105          <!-- Draw marker using user space units -->
 106          <rect x="-5" y="0" width="10" height="5" fill="black" />
 107          <!-- Draw CSS marker using px units -->
 108          <rect x="-5" y="5" width="10px" height="5px" fill="red" />
 109       </g>
 110       <!-- ==================================================================== -->
 111       <!-- Same test, using percentage values for the length                    -->
 112       <!-- ==================================================================== -->
 113       <!-- Draw Text Comment -->
 114       <text x="60" y="200">Percentage width/height to user space conversion</text>
 115       <g transform="translate(30, 175) scale(4)">
 116          <!-- Draw marker using user space units -->
 117          <rect x="-5" y="0" width="10" height="5" fill="black" />
 118          <!-- Draw CSS marker using percentages: 5*2  = 10 = 2.083% of 480  -->
 119          <!--                                  2.5*2  =  5 = 1.389% of 360  -->
 120          <rect x="-5" y="5" width="2.083%" height="1.389%" fill="red" />
 121       </g>
 122       <!-- ==================================================================== -->
 123       <!-- Third test, converting CSS arbitrary length to user space .          -->
 124       <!-- If implemented properly, the three circles which are side by side    -->
 125       <!-- should have the same radius                                          -->
 126       <!-- ==================================================================== -->
 127       <!-- Draw Text Comment -->
 128       <text x="140" y="265">CSS and percentage length conversion</text>
 129       <g transform="translate(30, 260)  skewX(45) scale(4)">
 130          <!-- Draw marker using user space units -->
 131          <circle cx="0" cy="0" r="3.536" fill="black" />
 132          <!-- Draw CSS marker using px units.                                    -->
 133          <circle cx="10" cy="0" r="3.536px" fill="red" />
 134          <!-- Draw marker using percentages. This should yield a value of 3.536  -->
 135          <!-- in user space. 3.536 = .8334% of 424.268px                              -->
 136          <circle cx="20" cy="0" r=".8334%" fill="green" />
 137          <!-- Draw control lines at the top and bottom of the circles            -->
 138          <line x1="-3.536" y1="-3.536" x2="25" y2="-3.536" fill="none" stroke="#cccccc" stroke-width=".5" />
 139          <line x1="-3.536" y1="3.536" x2="25" y2="3.536" fill="none" stroke="#cccccc" stroke-width=".5" />
 140       </g>
 141    </g>
 142         <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.4 $</text>
 143         <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
 144 </svg>
 145