LayoutTests/svg/animations/animate-setcurrenttime.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4   <script src="../../fast/js/resources/js-test-pre.js"></script>
   5 </head>
   6
   7 <body>
   8   <h1>SVG 1.1 dynamic animation tests</h1>
   9
  10   <svg id='outer-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'>
  11     <!-- sequential animations -->
  12     <rect id='plain' x='0' y='0' width='32' height='32' fill='green'>
  13       <animate id='plain-anim' attributeName='x' from='0' to='128' begin='0s' dur='4s' fill='freeze'/>
  14     </rect>
  15
  16     <!-- sequential animations -->
  17     <rect id='sequential' x='0' y='32' width='32' height='32' fill='green'>
  18       <animate attributeName='x'  from='0'  to='32' begin='0s' dur='1s' fill='freeze'/>
  19       <animate attributeName='x' from='64' to='128' begin='3s' dur='1s' fill='freeze'/>
  20     </rect>
  21
  22     <!-- accumulating values -->
  23     <rect id='accumulating' x='0' y='64' width='32' height='32' fill='green'>
  24       <animate attributeName='x' values='0; 256; 128' additive='sum' accumulate='sum' begin='0s' dur='4s' fill='freeze'/>
  25     </rect>
  26
  27     <!-- repeating -->
  28     <rect id='repeating' x='0' y='96' width='32' height='32' fill='green'>
  29       <animate attributeName='x' values='0; 256; 128; 0; 128' begin='0s' dur='2s' fill='freeze' repeatCount='2'/>
  30     </rect>
  31
  32     <!-- nested -->
  33     <svg id='nested-svg' x='0' y='128'>
  34       <rect id='nested' x='0' y='0' width='32' height='32' fill='green'>
  35         <animate attributeName='x' from='0' to='128' begin='0s' dur='4s' fill='freeze'/>
  36       </rect>
  37     </svg>
  38
  39     <script>
  40     var svg = document.getElementById('outer-svg'),
  41         nestedsvg = document.getElementById('nested-svg');
  42     var tests, curIdx = 0;
  43
  44     var plain = document.getElementById('plain');
  45     var sequential = document.getElementById('sequential');
  46     var accumulating = document.getElementById('accumulating');
  47     var repeating = document.getElementById('repeating');
  48     var nested = document.getElementById('nested');
  49
  50     function runTest() {
  51       var test = tests[curIdx++];
  52
  53       svg.setCurrentTime(test.time[0]);
  54       nestedsvg.setCurrentTime(test.time[1]);
  55
  56       setTimeout(function() {
  57         for (var attr in test.values) {
  58           shouldBe(attr + '.animVal.value', String(test.values[attr]));
  59         }
  60
  61         if (curIdx == tests.length) {
  62           if (window.layoutTestController)
  63             layoutTestController.notifyDone();
  64         }
  65         else
  66           runTest();
  67       }, 0);
  68     }
  69
  70     function executeTests() {
  71       nestedsvg.pauseAnimations();
  72       svg.pauseAnimations();
  73
  74       tests = [
  75         // Test invalid values.
  76         { time: ['tintin', NaN], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
  77
  78         // Test out-of-range values.
  79         { time: [-1, -1], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
  80         { time: [ 5,  5], values: { 'plain.x': 128, 'sequential.x': 128, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x': 128 } },
  81
  82         // Test changing time only for all elements.
  83         { time: [0, 0], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
  84         { time: [1, 1], values: { 'plain.x':  32, 'sequential.x':  32, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x':  32 } },
  85         { time: [2, 2], values: { 'plain.x':  64, 'sequential.x':  32, 'accumulating.x': 256, 'repeating.x':   0, 'nested.x':  64 } },
  86         { time: [3, 3], values: { 'plain.x':  96, 'sequential.x':  64, 'accumulating.x': 192, 'repeating.x': 128, 'nested.x':  96 } },
  87         { time: [4, 4], values: { 'plain.x': 128, 'sequential.x': 128, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x': 128 } },
  88
  89         // Test changing time only for the nested svg element.
  90         { time: [0, 0], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
  91         { time: [0, 1], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':  32 } },
  92         { time: [0, 2], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':  64 } },
  93         { time: [0, 3], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':  96 } },
  94         { time: [0, 4], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x': 128 } },
  95
  96         // Test changing time only for the outer svg element.
  97         { time: [0, 0], values: { 'plain.x':   0, 'sequential.x':   0, 'accumulating.x':   0, 'repeating.x':   0, 'nested.x':   0 } },
  98         { time: [1, 0], values: { 'plain.x':  32, 'sequential.x':  32, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x':   0 } },
  99         { time: [2, 0], values: { 'plain.x':  64, 'sequential.x':  32, 'accumulating.x': 256, 'repeating.x':   0, 'nested.x':   0 } },
 100         { time: [3, 0], values: { 'plain.x':  96, 'sequential.x':  64, 'accumulating.x': 192, 'repeating.x': 128, 'nested.x':   0 } },
 101         { time: [4, 0], values: { 'plain.x': 128, 'sequential.x': 128, 'accumulating.x': 128, 'repeating.x': 128, 'nested.x':   0 } },
 102       ];
 103
 104       runTest();
 105     }
 106
 107     // Begin test async
 108     if (window.layoutTestController) {
 109       layoutTestController.dumpAsText()
 110       layoutTestController.waitUntilDone()
 111     }
 112     executeTests();
 113     </script>
 114   </svg>
 115
 116   <p id="description"></p>
 117   <div id="console"></div>
 118 </body>
 119 </html>
 120