RubyGems - polymer-paper-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-paper-rails 0.1.0 → 0.2.0

Files changed (558) hide show

data/app/assets/components/web-animations-js/test/testcases/auto-test-visibility.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!--
+Copyright 2012 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<body>
+<style>
+body {
+  margin: 0px;
+}
+.test {
+  height: 50px;
+  background: lightsteelblue;
+}
+.red {
+  background: red;
+}
+.expectation {
+  position: relative;
+  background: red;
+}
+</style>
+<script>
+"use strict";
+// Create the elements
+var states = {'visible':1, 'hidden':1, 'collapse':1};
+for (var start in states) {
+  for (var end in states) {
+    var frames = [start, end];
+    var testContainer = document.createElement('div');
+    testContainer.textContent = 'visibility: ' + JSON.stringify(frames);
+    document.body.appendChild(testContainer);
+    if (end == 'visible') {
+      var expectation = document.createElement('div');
+      expectation.classList.add('expectation');
+      testContainer.appendChild(expectation);
+    }
+    var testElement = document.createElement('div');
+    testElement.classList.add('test');
+    testElement.id = start + "_" + end
+    if (end == 'hidden' || end == 'collapse') {
+      testElement.classList.add('red');
+    }
+    testContainer.appendChild(testElement);
+  }
+}
+</script>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var timing = {duration: 0.5 * 1000, easing: 'steps(2, end)', fill: 'forwards'};
+// Add the animations
+var animations = [];
+for (var start in states) {
+  for (var end in states) {
+    var effect = [{visibility: start}, {visibility: end}];
+    var testElement = document.getElementById(start + "_" + end);
+    animations.push(
+        new Animation(testElement, effect, timing));
+  }
+}
+</script>
+<script>
+"use strict";
+animations.forEach(function(anim) { document.timeline.play(anim); });
+</script>

data/app/assets/components/web-animations-js/test/testcases/auto-test-wrapping-bug-checks.js ADDED Viewed

@@ -0,0 +1,58 @@
+timing_test(function() {
+  at(0 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]);
+  }, "Autogenerated");
+  at(0.1 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]);
+  }, "Autogenerated");
+  at(0.2 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]);
+  }, "Autogenerated");
+  at(0.30000000000000004 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'transform':'matrix(1, 0, 0, 1, -666.6666870117188, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -533.3333129882813, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -533.3599853515625, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -533.3333129882813, 0)'}]);
+  }, "Autogenerated");
+  at(0.4 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'transform':'matrix(1, 0, 0, 1, -400, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -266.6666564941406, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -266.6933288574219, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -266.6666564941406, 0)'}]);
+  }, "Autogenerated");
+  at(0.5 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'transform':'matrix(1, 0, 0, 1, -133.3333282470703, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, 0, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -0.02666666731238365, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]);
+  }, "Autogenerated");
+  at(0.6 * 1000, function() {
+    assert_styles(
+      '.anim',
+      [{'transform':'matrix(1, 0, 0, 1, 0, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, 0, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'},
+       {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]);
+  }, "Autogenerated");
+}, "Autogenerated checks.");

data/app/assets/components/web-animations-js/test/testcases/auto-test-wrapping-bug.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!--
+Copyright 2012 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+.anim {
+    width: 800px;
+    height: 70px;
+    -webkit-transform: translate(-800px, 0px);
+    transform: translate(-800px, 0px);
+    background-color: lightsteelblue;
+}
+</style>
+<div class="anim" id="overflow"></div>
+<div class="anim" id="overflowControl"></div>
+<div class="anim" id="underflow"></div>
+<div class="anim" id="underflowControl"></div>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var effect = [{transform: "translate(-800px,0px)"}, {transform: "translate(0px,0px)"}];
+var group = new AnimationGroup();
+document.timeline.play(new AnimationGroup([
+    new Animation(overflow,
+                  effect,
+                  { duration: 0.3 * 1000, delay: 0.25 * 1000, fill: 'forwards' })]));
+document.timeline.play(new AnimationGroup([
+    new Animation(overflowControl,
+                  effect,
+                  { duration: 0.3 * 1000, delay: 0.2 * 1000, fill: 'forwards' })]));
+document.timeline.play(new AnimationGroup([
+    new Animation(underflow,
+                  effect,
+                  { duration: 0.3 * 1000, delay: 0.20001 * 1000, fill: 'none' })]));
+document.timeline.play(new AnimationGroup([
+    new Animation(underflowControl,
+                  effect,
+                  { duration: 0.3 * 1000, delay: 0.2 * 1000, fill: 'none' })]));
+</script>

data/app/assets/components/web-animations-js/test/testcases/background.png ADDED Viewed

Binary file

data/app/assets/components/web-animations-js/test/testcases/disabled-auto-test-change-playback-rate.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!--
+Copyright 2012 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!--
+This test is currently broken.
+1) The test doesn't work without simulating all the frames
+2) The test fails when you simulate on t=0 boundary because currentTime_ ends
+   up null
+3) The test fails when you simulate on t=0 boundary because relativeTime
+   returns null when zeroTime is null
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+.anim {
+  left: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: #FAA;
+  position: absolute;
+}
+#a {
+  top: 0px
+}
+</style>
+<div id="a" class="anim a"></div>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+var a1 = new Animation(document.querySelector("#a"),
+    [{left: "0px"}, {left: "500px"}],
+    {duration: 10 * 1000, direction: 'alternating', iterations: Infinity});
+var player1 = document.timeline.play(a1);
+var a2 = new Animation(undefined,
+    function(timeFraction) {
+      var playbackRate = 0.01 + 10 * timeFraction;
+      player1.playbackRate  = playbackRate
+      player2.playbackRate = playbackRate;
+      document.querySelector("#a").textContent = playbackRate;
+    },
+    a1.timing.clone());
+var player2 = document.timeline.play(a2);
+</script>

data/app/assets/components/web-animations-js/test/testcases/disabled-auto-test-position-list-type.html ADDED Viewed

@@ -0,0 +1,103 @@
+<!--
+Copyright 2012 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style>
+.anim {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  border-style: solid;
+  font-weight: bold;
+  border-color: white;
+  color: white;
+  background-color: #888;
+  background-repeat: no-repeat;
+}
+</style>
+All divs should end up with a green block in the top left corner.
+<div id="container"></div>
+<script src="../bootstrap.js"></script>
+<script>
+"use strict";
+function generateGridLinesURI(size) {
+  var canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  var context = canvas.getContext('2d');
+  context.fillStyle = 'green';
+  context.fillRect(0.5, 0.5, size - 1, size - 1);
+  context.lineWidth = 2;
+  context.strokeStyle = 'black';
+  context.strokeRect(1, 1, size - 2, size - 2);
+  return canvas.toDataURL();
+}
+var backgroundImage = 'url(' + generateGridLinesURI(150) + ')';
+var startPosition = '0% 0%';
+var endPositions = [
+  'left',
+  'center',
+  'right',
+  'top',
+  'bottom',
+  '10px',
+  '20%',
+  'center left',
+  'center center',
+  'right bottom',
+  'right 25%',
+  '10px bottom',
+  '10px 40px',
+  'left bottom 10px',
+  'center top 20%',
+  'right top 10px',
+  'right bottom 80%',
+  'right 80% bottom',
+  'bottom left 10px',
+  'left 40px bottom 10px',
+  'left 20% top 20%',
+  'calc(25% - 5px)',
+  'calc(25% - 5px) 25%',
+  'top calc(25% - 5px) center',
+  'bottom left 10px',
+  'bottom calc(25% - 5px) right',
+  'left 10px bottom 10px',
+  'left 25% top 25%',
+  'left calc(25% - 5px) top 10px',
+  'top 10px right calc(25% - 5px)',
+  'bottom calc(25% - 5px) left 10px',
+];
+for (var i = 0; i < endPositions.length; i++) {
+  var endPosition = endPositions[i];
+  var pre = document.createElement('pre');
+  pre.style.backgroundImage = backgroundImage;
+  pre.className = 'anim';
+  pre.innerText = 'background-position:\nfrom: ' + startPosition + '\nto: ' + endPosition;
+  document.querySelector('#container').appendChild(pre);
+  document.timeline.play(new Animation(pre, new KeyframeEffect([
+    { backgroundPosition: startPosition },
+    { backgroundPosition: endPosition },
+  ]), { duration:2, easing: 'ease-in'}));
+}
+</script>

data/app/assets/components/web-animations-js/test/testcases/disabled-media.html ADDED Viewed

@@ -0,0 +1,439 @@
+<!--
+Copyright 2013 Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!--
+Requires the test harness to allow tests to be added after page load. See
+https://github.com/web-animations/web-animations-js/issues/321
+-->
+<!DOCTYPE html><meta charset="UTF-8">
+<style type="text/css">
+video {
+  width: 100px;
+}
+</style>
+<!--
+Videos are taken from
+http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5
+We serve them from a remote host to make sure they are served with a 206
+response code, to work around Chrome bug
+https://code.google.com/p/chromium/issues/detail?id=121765.
+-->
+<div id="videos">
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+  <video preload="auto">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.webm" type="video/webm">
+    <source src="http://web-animations.github.io/web-animations-js/test/testcases/small.mp4" type="video/mp4">
+  </video>
+</div>
+<script src="../bootstrap.js" nochecks></script>
+<script>
+"use strict";
+var dt = document.timeline;
+// Most of these tests require the video to have loaded before they run.
+// However, the test harness does not allow timing_test()s to be started after
+// the page has finished loading. This means that we can't add the video
+// dynamically then wait for it to load before testing.
+//
+// As a best-effort work-around, we include all videos in static HTML with
+// preload="auto" to hint to the browser that they should be loaded
+// immediately. However, this does not guarantee that they will be loaded when
+// the page's load event fires, so the tests are flaky.
+//
+// TODO: Fix the test runner to allow the use of async_test() with
+// timing_test(), which will allow the video elements to be created dynamically.
+// See https://github.com/web-animations/web-animations-js/issues/321
+var videos = document.getElementById("videos").getElementsByTagName('video');
+// Cache this length, as videos is a live NodeList.
+var numStaticVideos = videos.length;
+var nextIndex = 0;
+function getNextVideo() {
+  if (nextIndex >= numStaticVideos) {
+    throw new Error('No more videos!');
+  }
+  return videos[nextIndex++];
+}
+function createVideo() {
+  // Videos taken from
+  // http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5
+  var video = document.createElement("video");
+  var webmSource = document.createElement("source");
+  webmSource.setAttribute("src", "small.webm");
+  webmSource.setAttribute("type", "video/webm");
+  video.appendChild(webmSource);
+  var mp4Source = document.createElement("source");
+  mp4Source.setAttribute("src", "small.mp4");
+  mp4Source.setAttribute("type", "video/mp4");
+  video.appendChild(mp4Source);
+  document.getElementById("videos").appendChild(video);
+  return video;
+}
+function testOnceVideosLoaded(callback, message) {
+  timing_test(function() {
+    at(0.0 * 1000, callback);
+  }, message);
+}
+function createTestMediaReference(mediaElement, timing, parent) {
+  return new MediaReference(mediaElement, timing, parent, 0.0);
+}
+var expectedVideoLength = 5.568;
+// Test that MediaReference disables looping.
+test(function() {
+  var video = getNextVideo();
+  video.loop = true;
+  createTestMediaReference(video);
+  assert_false(video.loop);
+}, "MediaReference should disable looping");
+// Test intrinsic iteration duration before media loads.
+test(function() {
+  assert_equals(createTestMediaReference(createVideo()).duration,
+      Infinity);
+}, "Intrinsic duration should be Infinity before media loads");
+// Test intrinisc iteration duration.
+testOnceVideosLoaded(function() {
+  assert_approx_equals(
+      createTestMediaReference(getNextVideo()).duration,
+      expectedVideoLength, 0.001);
+}, "Intrinsic iteration duration should be media duration");
+// Test that iteration duration can be overridden.
+testOnceVideosLoaded(function() {
+  assert_equals(createTestMediaReference(getNextVideo(), 1.0).duration,
+      1.0);
+}, "Iteration duration should be overridable");
+// Test basic use.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video));
+    assert_equals(video.playbackRate,  1.0);
+    assert_false(video.paused);
+  });
+}, "Basic use");
+// Test clipping where duration limits. Video should be frozen at end
+// of duration.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video, 3.0));
+  });
+  at(3.0 * 1000, function() {
+    assert_equals(video.currentTime, 3.0);
+    assert_true(video.paused);
+  });
+  at(4.0 * 1000, function() {
+    assert_equals(video.currentTime, 3.0);
+    assert_true(video.paused);
+  });
+}, "Video should be frozen at duration");
+// Test clipping where video length limits. Video should be frozen at end for
+// remainder of duration.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video, video.duration + 2));
+  });
+  // We can't use video.duration here because the video isn't yet loaded.
+  at(expectedVideoLength + 1, function() {
+    assert_equals(video.currentTime, video.duration);
+    assert_true(video.paused);
+  });
+  // We can't use video.duration here because the video isn't yet loaded.
+  at(expectedVideoLength + 2, function() {
+    assert_equals(video.currentTime, video.duration);
+    assert_true(video.paused);
+  });
+}, "Video should be frozen at end");
+// Test fill with duration limiting. Video should be frozen at end of
+// duration.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video, 1.0));
+  });
+  at(2.0 * 1000, function() {
+    assert_equals(video.currentTime,  1.0);
+    assert_equals(video.paused,  true);
+  });
+}, "Should freeze video at duration for fill");
+// Test fill with video length limiting. Video should be at end.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video), video.duration + 1.0);
+  });
+  // We can't use video.duration here because the video isn't yet loaded.
+  at(expectedVideoLength + 2, function() {
+    assert_equals(video.currentTime,  video.duration);
+  });
+}, "Should freeze video at end for fill");
+// Test no fill. Video should be frozen at start.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video, {fill: "none"}));
+  });
+  // We can't use video.duration here because the video isn't yet loaded.
+  at(expectedVideoLength + 1, function() {
+    assert_equals(video.currentTime,  0);
+    assert_equals(video.paused,  true);
+  });
+}, "Should freeze video at start for no fill");
+// Test iterations.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video,
+        {iterations: 2.0, duration: 1.0 * 1000}));
+  });
+  at(1.5 * 1000, function() {
+    assert_equals(video.currentTime,  0.5);
+  });
+}, "Video should respect iterations");
+// Test iterationStart.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video,
+        {iterationStart: 0.5, duration: 2.0 * 1000}));
+  });
+  at(0.5 * 1000, function() {
+    assert_equals(video.currentTime,  1.5);
+  });
+}, "Video should respect iterationStart");
+// Test playback rate.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video, {playbackRate: 2.0}));
+  });
+  at(1.0 * 1000, function() {
+    assert_equals(video.currentTime, 2.0);
+    assert_equals(video.playbackRate, 2.0);
+  });
+}, "Video should respect playbackRate");
+// Test heirachy of playback rates.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(new AnimationGroup([createTestMediaReference(video, {playbackRate: 1.5})],
+        {playbackRate: 2.5}));
+  });
+  at(1.0 * 1000, function() {
+    assert_equals(video.currentTime, 3.75);
+    assert_equals(video.playbackRate, 3.75);
+  });
+}, "Video should respect playbackRate heirachy");
+// Test interaction with MediaElement.defaultPlaybackRate.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    video.defaultPlaybackRate = 2.5;
+    dt.play(createTestMediaReference(video, {playbackRate: 1.5}));
+  });
+  at(1.0 * 1000, function() {
+    assert_equals(video.currentTime, 3.75);
+    assert_equals(video.playbackRate, 3.75);
+  });
+}, "Video should respect playbackRate after setting defaultPlaybackRate");
+// Test reversing.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video, {direction: "reverse"}));
+  });
+  at(1.0 * 1000, function() {
+    assert_approx_equals(video.currentTime, video.duration - 1.0, 0.0001);
+    assert_equals(video.playbackRate, -1.0);
+  });
+}, "Video should respect reversing");
+// Test negative playback rate.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video, {playbackRate: -0.5}));
+  });
+  at(1.0 * 1000, function() {
+    assert_approx_equals(video.currentTime, video.duration - 0.5, 0.0001);
+    assert_equals(video.playbackRate, -0.5);
+  });
+}, "Video should respect negative playbackRate");
+// Test interaction of reversing and playback rate.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(new AnimationGroup(
+        [createTestMediaReference(video, {playbackRate: -0.5})],
+        {playbackRate: 3.0, direction: "reverse"}));
+  });
+  at(1.0 * 1000, function() {
+    assert_equals(video.currentTime, 1.5);
+    assert_equals(video.playbackRate, 1.5);
+  });
+}, "Video should respect reversing and playbackRate");
+// Test zero duration.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    dt.play(createTestMediaReference(video, 0.0));
+    assert_equals(video.currentTime,  0.0);
+  });
+  at(1.0 * 1000, function() {
+    assert_equals(video.currentTime,  0.0);
+  });
+}, "Video should start at time zero when duration is zero");
+// Test zero intrinsic duration.
+// TODO: Need to find a zero length video.
+// Test that media elements are removed from their MediaController.
+timing_test(function() {
+  var video = getNextVideo();
+  at(0.0 * 1000, function() {
+    video.controller = new MediaController();
+    dt.play(createTestMediaReference(video));
+    assert_equals(video.controller,  null);
+  });
+  // Seeking the video will throw if the controller has not been detached.
+  at(1.0 * 1000, function() {
+    assert_equals(video.currentTime,  1.0);
+  });
+}, "Video should be detached from controller when used in MediaReference");
+// Test limited seek ranges.
+// TODO: Need to find a video with limited seek ranges.
+// Test that video is paused when its MediaReference is detached from its
+// AnimationPlayer.
+timing_test(function() {
+  var video = getNextVideo();
+  var player;
+  at(0.0 * 1000, function() {
+    player = dt.play(createTestMediaReference(video));
+  });
+  at(1.0 * 1000, function() {
+    assert_false(video.paused);
+    player.source = null;
+  });
+  at(2.0 * 1000, function() {
+    assert_true(video.paused);
+  });
+}, "Video should be paused when MediaReference is detached from its AnimationPlayer");
+</script>