1 files changed, 93 insertions, 0 deletions
diff --git a/dom/animation/test/css-transitions/file_document-get-animations.html b/dom/animation/test/css-transitions/file_document-get-animations.html
new file mode 100644
index 000000000..a5d55b76c
--- /dev/null
+++ b/dom/animation/test/css-transitions/file_document-get-animations.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="../testcommon.js"></script>
+<body>
+<script>
+'use strict';
+
+test(function(t) {
+  assert_equals(document.getAnimations().length, 0,
+    'getAnimations returns an empty sequence for a document'
+    + ' with no animations');
+}, 'getAnimations for non-animated content');
+
+test(function(t) {
+  var div = addDiv(t);
+
+  // Add a couple of transitions
+  div.style.left = '0px';
+  div.style.top = '0px';
+  getComputedStyle(div).transitionProperty;
+
+  div.style.transition = 'all 100s';
+  div.style.left = '100px';
+  div.style.top = '100px';
+  assert_equals(document.getAnimations().length, 2,
+                'getAnimations returns two running CSS Transitions');
+
+  // Remove both
+  div.style.transitionProperty = 'none';
+  assert_equals(document.getAnimations().length, 0,
+                'getAnimations returns no running CSS Transitions');
+}, 'getAnimations for CSS Transitions');
+
+test(function(t) {
+  addStyle(t, { '.init::after': 'content: ""; width: 0px; ' +
+                                'transition: all 100s;',
+                '.init::before': 'content: ""; width: 0px; ' +
+                                 'transition: all 10s;',
+                '.change::after': 'width: 100px;',
+                '.change::before': 'width: 100px;' });
+  // create two divs with these arrangement:
+  //       parent
+  //     ::before,
+  //     ::after
+  //        |
+  //       child
+  var parent = addDiv(t);
+  var child = addDiv(t);
+  parent.appendChild(child);
+
+  parent.style.left = '0px';
+  parent.style.transition = 'left 10s';
+  parent.classList.add('init');
+  child.style.left = '0px';
+  child.style.transition = 'left 10s';
+  flushComputedStyle(parent);
+
+  parent.style.left = '100px';
+  parent.classList.add('change');
+  child.style.left = '100px';
+
+  var anims = document.getAnimations();
+  assert_equals(anims.length, 4,
+                'CSS transition on both pseudo-elements and elements ' +
+                'are returned');
+  assert_equals(anims[0].effect.target, parent,
+                'The animation targeting the parent element comes first');
+  assert_equals(anims[1].effect.target.type, '::before',
+                'The animation targeting the ::before element comes second');
+  assert_equals(anims[2].effect.target.type, '::after',
+                'The animation targeting the ::after element comes third');
+  assert_equals(anims[3].effect.target, child,
+                'The animation targeting the child element comes last');
+}, 'CSS Transitions targetting (pseudo-)elements should have correct order ' +
+   'after sorting');
+
+async_test(function(t) {
+  var div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
+  flushComputedStyle(div);
+
+  div.style.left = '100px';
+  var animations = div.getAnimations();
+  assert_equals(animations.length, 1, 'Got transition');
+  animations[0].finished.then(t.step_func(function() {
+    assert_equals(document.getAnimations().length, 0,
+                  'No animations returned');
+    t.done();
+  }));
+}, 'Transitions are not returned after they have finished');
+
+done();
+</script>
+</body>