third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1/animate-elem-34-t.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- =====================================================================-->
   3 <!-- animate-elem-34-t.svg                                                -->
   4 <!--                                                                      -->
   5 <!-- Tests animation of attributes 'points' and 'fill-rule'.              -->
   6 <!--                                                                      -->
   7 <!-- Author : Ola Andersson,  14-Oct-2003                                 --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
   8
   9 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
  10    <SVGTestCase xmlns:testcase="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/2000/02/svg/testsuite/description/" reviewed="YES" reviewer="VH" owner="OA" desc="Tests animation of attributes 'points' and 'fill-rule'" status="accepted" version="$Revision: 1.7 $" testname="$RCSfile: animate-elem-34-t.svg,v $">
  11       <OperatorScript>
  12          <Paragraph>
  13             The purpose of this test is to test animation of attributes points and fill-rule.
  14          </Paragraph>
  15          <Paragraph>
  16             The test consists of 2 sub-tests. The first test is a polygon shaped as a digit. The polygon
  17             has an animation on its vertex points which  morphs the polygon between the numbers 1, 2, 3
  18             and 4. The gray outlines indicates the expected position of the polygon at 1, 2, 3 and 4s.
  19             The second test is 4 paths in a u-shape. They have animated fill-rules. There initial
  20             fill-rules are, from left to right, nonzero, evenodd, evenodd (by default value) and evenodd
  21             (by default value) The expected result is that one path at a time is filled. The other three
  22             paths are not filled but have the u-shape. Which path that should be filled at
  23             which time is indicated by the number above it (indicating time in seconds). To enhance the
  24             difference between the filled path and the rest, the filled path should always have the
  25             same color as the morphing polygon. This is achieved by a discrete color animation.
  26          </Paragraph>
  27       </OperatorScript>
  28    </SVGTestCase>
  29
  30    <g transform="translate(40,0) scale(0.8)">
  31       <!-- GRAY SILHOUETTES INDICATING TIME IN SECONDS-->
  32       <polygon points="248.5,38.5 276.5,22.5 298.5,19.5 316.5,26.5 332.5,40.5 331.5,57.5 322.5,70.5 307.5,76.5             314.5,80.5 324.5,86.5 333.5,99.5 333.5,121.5 327.5,130.5 312.5,143.5 292.5,149.5             270.5,148.5 248.5,142.5 252.5,114.5 267.5,119.5 282.5,119.5 297.5,115.5             304.5,109.5 295.5,99.5 284.5,92.5 277.5,84.5 270.5,74.5 281.5,66.5 293.5,60.5             297.5,50.5 292.5,45.5 281.5,45.5 274.5,49.5 266.5,53.5" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
  33
  34       <polygon points="108.5,38.5 123.5,26.5 148.5,16.5 172.5,17.5 188.5,19.5 202.5,23.5 206.5,26.5 210.5,37.5          213.5,44.5 215.5,57.5 209.5,68.5 203.5,81.5 187.5,98.5 164.5,120.5 206.5,121.5          224.5,121.5 220.5,149.5 194.5,147.5 181.5,147.5 167.5,146.5 150.5,147.5          133.5,149.5 117.5,148.5 117.5,136.5 118.5,124.5 133.5,115.5 151.5,97.5 170.5,78.5          186.5,59.5 179.5,43.5 159.5,35.5 139.5,40.5 125.5,49.5" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
  35
  36       <polygon points="26.5,32.5 33.5,32.5 40.5,29.5 47.5,23.5 61.5,17.5 73.5,16.5 74.5,33.5 73.5,50.5 73.5,64.5          72.5,77.5 72.5,90.5 72.5,105.5 71.5,126.5 89.5,128.5 90.5,138.5 89.5,151.5          72.5,151.5 54.5,152.5 38.5,152.5 27.5,152.5 28.5,139.5 30.5,127.5 44.5,125.5          46.5,112.5 47.5,99.5 46.5,87.5 48.5,73.5 48.5,53.5 34.5,52.5 22.5,52.5          22.5,51.5 22.5,41.5 22.5,33.5" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
  37
  38       <polygon points="427.5,17.5 439.5,15.5 449.5,15.5 449.5,29.5 447.5,44.5 447.5,59.5 465.5,60.5 466.5,74.5          465.5,89.5 450.5,87.5 449.5,102.5 449.5,123.5 449.5,140.5 449.5,153.5          420.5,154.5 421.5,137.5 420.5,123.5 420.5,111.5 419.5,99.5 392.5,97.5 367.5,99.5          366.5,79.5 367.5,69.5 376.5,43.5 381.5,27.5 384.5,17.5 412.5,16.5 406.5,36.5          400.5,49.5 394.5,70.5 419.5,71.5 423.5,49.5 424.5,33.5" fill="#ccc" stroke="rgb(0,0,0)" stroke-width="1"/>
  39
  40       <!-- FIRST TEST, POINTS-->
  41       <polygon points="26.5,32.5 33.5,32.5 40.5,29.5 47.5,23.5 61.5,17.5 73.5,16.5 74.5,33.5 73.5,50.5 73.5,64.5              72.5,77.5 72.5,90.5 72.5,105.5 71.5,126.5 89.5,128.5 90.5,138.5 89.5,151.5              72.5,151.5 54.5,152.5 38.5,152.5 27.5,152.5 28.5,139.5 30.5,127.5 44.5,125.5              46.5,112.5 47.5,99.5 46.5,87.5 48.5,73.5 48.5,53.5 34.5,52.5 22.5,52.5              22.5,51.5 22.5,41.5 22.5,33.5" fill="rgb(204,0,102)" stroke="rgb(0,0,0)" stroke-width="4">
  42       <animate attributeName="points" values="26.5,32.5 33.5,32.5 40.5,29.5 47.5,23.5 61.5,17.5 73.5,16.5 74.5,33.5 73.5,50.5 73.5,64.5              72.5,77.5 72.5,90.5 72.5,105.5 71.5,126.5 89.5,128.5 90.5,138.5 89.5,151.5              72.5,151.5 54.5,152.5 38.5,152.5 27.5,152.5 28.5,139.5 30.5,127.5 44.5,125.5              46.5,112.5 47.5,99.5 46.5,87.5 48.5,73.5 48.5,53.5 34.5,52.5 22.5,52.5              22.5,51.5 22.5,41.5 22.5,33.5 ; 108.5,38.5 123.5,26.5 148.5,16.5 172.5,17.5 188.5,19.5 202.5,23.5 206.5,26.5 210.5,37.5          213.5,44.5 215.5,57.5 209.5,68.5 203.5,81.5 187.5,98.5 164.5,120.5 206.5,121.5          224.5,121.5 220.5,149.5 194.5,147.5 181.5,147.5 167.5,146.5 150.5,147.5          133.5,149.5 117.5,148.5 117.5,136.5 118.5,124.5 133.5,115.5 151.5,97.5 170.5,78.5          186.5,59.5 179.5,43.5 159.5,35.5 139.5,40.5 125.5,49.5;           248.5,38.5 276.5,22.5 298.5,19.5 316.5,26.5 332.5,40.5 331.5,57.5 322.5,70.5 307.5,76.5             314.5,80.5 324.5,86.5 333.5,99.5 333.5,121.5 327.5,130.5 312.5,143.5 292.5,149.5             270.5,148.5 248.5,142.5 252.5,114.5 267.5,119.5 282.5,119.5 297.5,115.5             304.5,109.5 295.5,99.5 284.5,92.5 277.5,84.5 270.5,74.5 281.5,66.5 293.5,60.5             297.5,50.5 292.5,45.5 281.5,45.5 274.5,49.5 266.5,53.5 ;              427.5,17.5 439.5,15.5 449.5,15.5 449.5,29.5 447.5,44.5 447.5,59.5 465.5,60.5 466.5,74.5          465.5,89.5 450.5,87.5 449.5,102.5 449.5,123.5 449.5,140.5 449.5,153.5          420.5,154.5 421.5,137.5 420.5,123.5 420.5,111.5 419.5,99.5 392.5,97.5 367.5,99.5          366.5,79.5 367.5,69.5 376.5,43.5 381.5,27.5 384.5,17.5 412.5,16.5 406.5,36.5          400.5,49.5 394.5,70.5 419.5,71.5 423.5,49.5 424.5,33.5" fill="freeze" begin="1" dur="3s"/>
  43
  44     </polygon>
  45
  46
  47     <!-- SECOND TEST, FILL-RULE-->
  48     <g transform="scale(0.3) translate(-450, 500)">
  49       <path fill-rule="nonzero" fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
  50          <animate attributeName="fill-rule" values="nonzero; evenodd; evenodd; evenodd" begin="1" dur="4" fill="freeze"/>
  51          <animate attributeName="fill" from="rgb(204,0,102)" to="#ccc" begin="0" dur="4" calcMode="discrete" fill="freeze"/>
  52       </path>
  53     </g>
  54     <g transform="scale(0.3) translate(-30, 500)">
  55           <path fill-rule="evenodd" fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
  56          <animate attributeName="fill-rule" values="evenodd; nonzero; evenodd; evenodd" begin="1" dur="4" fill="freeze"/>
  57          <animate attributeName="fill" from="#ccc" to="rgb(204,0,102)" begin="1" dur="2" calcMode="discrete" fill="remove"/>
  58       </path>
  59     </g>
  60     <g transform="scale(0.3) translate(390, 500)">
  61           <path fill-rule="evenodd" fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
  62          <animate attributeName="fill-rule" values="evenodd; evenodd; nonzero; evenodd" begin="1" dur="4" fill="freeze"/>
  63          <animate attributeName="fill" from="#ccc" to="rgb(204,0,102)" begin="2" dur="2" calcMode="discrete" fill="remove"/>
  64       </path>
  65     </g>
  66     <g transform="scale(0.3) translate(810, 500)">
  67           <path fill-rule="evenodd" fill="#ccc" stroke="none" d="M 500,100 L 500,300 700,300 700,100 550,100 550,250 650,250 650,100 500,100 z">
  68          <animate attributeName="fill-rule" values="evenodd; evenodd; evenodd; nonzero" begin="1" dur="4" fill="freeze"/>
  69          <animate attributeName="fill" from="#ccc" to="rgb(204,0,102)" begin="3" dur="2" calcMode="discrete" fill="freeze"/>
  70       </path>
  71     </g>
  72  </g>
  73
  74
  75  <text x="5" y="225" font-size="28">Animation on: 'points' and 'fill-rule'.</text>
  76  <text x="5" y="255" font-size="18">Digit should match outline at indicated time.</text>
  77  <text x="5" y="275" font-size="18">Filled square should follow morphing digit discretely.</text>
  78
  79 <text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.7 $</text>
  80 <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
  81 </svg>