third_party/WebKit/LayoutTests/svg/animations/animate-setcurrenttime.html

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