summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg
blob: 414a6c718be4b9b47d89938974aa1547a13baff8 (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
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     class="reftest-wait">
  <style>
    .background { fill: lime }
    .workspace  { fill: red  }
    .test       { fill: lime }
    .filler     { fill: lime }
  </style>

  <script xlink:href="../smil-util.js" type="text/javascript"/>
  <script type="text/javascript">
    function doTest() {
      setTimeAndSnapshot(101, true);
    }
    window.addEventListener("MozReftestInvalidate", doTest, false);
  </script>

  <!-- Big green background to match lime.svg -->
  <rect class="background" width="100%" height="100%" />
  <!-- Red "workspace" (should be covered up, if tests pass) -->
  <rect class="workspace" x="100" y="100" width="100" height="100"/>

  <!-- FIRST ROW -->
  <!-- Check that 'rotate' gets applied at begin time -->
  <g>
    <animateMotion from="150, 100" to="500, 500" rotate="90"
                   begin="101" dur="1"/>
    <rect class="test" x="0" y="0" width="20" height="50"/>
    <rect class="test" x="0" y="0" width="50" height="20"/>
  </g>
  <rect class="filler" x="100" y="120" width="30" height="30"/>

  <!-- Check that 'rotate' gets applied at end time -->
  <g>
    <animateMotion from="600, 700" to="200, 150" rotate="180" begin="100"
                   dur="1" fill="freeze"/>
    <rect class="test" x="0" y="0" width="20" height="50"/>
    <rect class="test" x="0" y="0" width="50" height="20"/>
  </g>
  <rect class="filler" x="150" y="100" width="30" height="30"/>

  <!-- SECOND ROW -->
  <!-- Check that rotate combines with existing rotate -->
  <g transform="rotate(90)">
    <animateMotion from="150,200" to="600,600" rotate="90"
                   begin="101" dur="1"/>
    <rect class="test" x="0" y="0" width="20" height="50"/>
    <rect class="test" x="0" y="0" width="50" height="20"/>
  </g>
  <rect class="filler" x="100" y="150" width="30" height="30"/>

  <!-- Check additivity of <animateMotion> "rotate" adds -->
  <g>
    <animateMotion from="100,100" to="100,200" rotate="90"
                   begin="100.5" dur="1"/>
    <animateMotion by="100,-200" rotate="90"
                   begin="100.5" dur="1"/>
    <rect class="test" x="0" y="0" width="20" height="50"/>
    <rect class="test" x="0" y="0" width="50" height="20"/>
  </g>
  <rect class="filler" x="150" y="150" width="30" height="30"/>
</svg>