Bug 1234403 - Part 5: Test for CSSPseudoElement.getAnimations. r=birtles
authorBoris Chiou <boris.chiou@gmail.com>
Wed, 24 Feb 2016 19:12:00 +0100
changeset 285590 2899d594244e661e00b7cbe47def2164792475d2
parent 285589 a40b8d9d7e46b3f4f7d9fc52d7939cf5d1323cf3
child 285591 7bcbdd73b99f84aef3da7e68ea1b54d49f9841d8
push id17831
push userkwierso@gmail.com
push dateThu, 25 Feb 2016 22:42:17 +0000
treeherderfx-team@8e34b12969bf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1234403
milestone47.0a1
Bug 1234403 - Part 5: Test for CSSPseudoElement.getAnimations. r=birtles
dom/animation/test/css-animations/file_pseudoElement-get-animations.html
dom/animation/test/css-animations/test_pseudoElement-get-animations.html
dom/animation/test/css-transitions/file_pseudoElement-get-animations.html
dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
dom/animation/test/mochitest.ini
new file mode 100644
--- /dev/null
+++ b/dom/animation/test/css-animations/file_pseudoElement-get-animations.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="../testcommon.js"></script>
+<style>
+@keyframes anim1 { }
+@keyframes anim2 { }
+.before::before {
+  animation: anim1 10s;
+}
+.after-with-mix-anims-trans::after {
+  content: '';
+  animation: anim1 10s, anim2 10s;
+  width: 0px;
+  height: 0px;
+  transition: all 100s;
+}
+.after-change::after {
+  width: 100px;
+  height: 100px;
+}
+</style>
+<body>
+<script>
+'use strict';
+
+test(function(t) {
+  var div = addDiv(t, { class: 'before' });
+  var pseudoTarget = document.getAnimations()[0].effect.target;
+  assert_equals(pseudoTarget.getAnimations().length, 1,
+                'Expected number of animations are returned');
+  assert_equals(pseudoTarget.getAnimations()[0].animationName, 'anim1',
+                'CSS animation name matches');
+}, 'getAnimations returns CSSAnimation objects');
+
+test(function(t) {
+  var div = addDiv(t, { class: 'after-with-mix-anims-trans' });
+  // Trigger transitions
+  flushComputedStyle(div);
+  div.classList.add('after-change');
+
+  // Create additional animation on the pseudo-element from script
+  var pseudoTarget = document.getAnimations()[0].effect.target;
+  var effect = new KeyframeEffectReadOnly(pseudoTarget,
+                                          { background: ["blue", "red"] },
+                                          3000);
+  var newAnimation = new Animation(effect, document.timeline);
+  newAnimation.id = 'scripted-anim';
+  newAnimation.play();
+
+  // Check order - the script-generated animation should appear later
+  var anims = pseudoTarget.getAnimations();
+  assert_equals(anims.length, 5,
+                'Got expected number of animations/trnasitions running on ' +
+                '::after pseudo element');
+  assert_equals(anims[0].transitionProperty, 'height',
+                '1st animation is the 1st transition sorted by name');
+  assert_equals(anims[1].transitionProperty, 'width',
+                '2nd animation is the 2nd transition sorted by name ');
+  assert_equals(anims[2].animationName, 'anim1',
+                '3rd animation is the 1st animation in animation-name list');
+  assert_equals(anims[3].animationName, 'anim2',
+                '4rd animation is the 2nd animation in animation-name list');
+  assert_equals(anims[4].id, 'scripted-anim',
+                'Animation added by script appears last');
+}, 'getAnimations returns css transitions/animations, and script-generated ' +
+   'animations in the expected order');
+
+done();
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/dom/animation/test/css-animations/test_pseudoElement-get-animations.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+'use strict';
+setup({explicit_done: true});
+SpecialPowers.pushPrefEnv(
+  { "set": [["dom.animations-api.core.enabled", true]]},
+  function() {
+    window.open("file_pseudoElement-get-animations.html");
+  });
+</script>
new file mode 100644
--- /dev/null
+++ b/dom/animation/test/css-transitions/file_pseudoElement-get-animations.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="../testcommon.js"></script>
+<style>
+.init::before {
+  content: '';
+  height: 0px;
+  width: 0px;
+  opacity: 0;
+  transition: all 100s;
+}
+.change::before {
+  height: 100px;
+  width: 100px;
+  opacity: 1;
+}
+</style>
+<body>
+<script>
+'use strict';
+
+test(function(t) {
+  var div = addDiv(t, { class: 'init' });
+  flushComputedStyle(div);
+  div.classList.add('change');
+
+  // Sanity checks
+  assert_equals(document.getAnimations().length, 3,
+                'Got expected number of animations on document');
+  var pseudoTarget = document.getAnimations()[0].effect.target;
+  assert_class_string(pseudoTarget, 'CSSPseudoElement',
+                      'Got pseudo-element target');
+
+  // Check animations returned from the pseudo element are in correct order
+  var anims = pseudoTarget.getAnimations();
+  assert_equals(anims.length, 3,
+                'Got expected number of animations on pseudo-element');
+  assert_equals(anims[0].transitionProperty, 'height');
+  assert_equals(anims[1].transitionProperty, 'opacity');
+  assert_equals(anims[2].transitionProperty, 'width');
+}, 'getAnimations sorts simultaneous transitions by name');
+
+done();
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/dom/animation/test/css-transitions/test_pseudoElement-get-animations.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+'use strict';
+setup({explicit_done: true});
+SpecialPowers.pushPrefEnv(
+  { "set": [["dom.animations-api.core.enabled", true]]},
+  function() {
+    window.open("file_pseudoElement-get-animations.html");
+  });
+</script>
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -43,16 +43,18 @@ support-files = css-animations/file_cssa
 support-files = css-animations/file_document-get-animations.html
 [css-animations/test_effect-target.html]
 support-files = css-animations/file_effect-target.html
 [css-animations/test_element-get-animations.html]
 skip-if = buildapp == 'mulet'
 support-files = css-animations/file_element-get-animations.html
 [css-animations/test_keyframeeffect-getframes.html]
 support-files = css-animations/file_keyframeeffect-getframes.html
+[css-animations/test_pseudoElement-get-animations.html]
+support-files = css-animations/file_pseudoElement-get-animations.html
 [css-transitions/test_animation-cancel.html]
 support-files = css-transitions/file_animation-cancel.html
 [css-transitions/test_animation-computed-timing.html]
 support-files = css-transitions/file_animation-computed-timing.html
 [css-transitions/test_animation-currenttime.html]
 support-files = css-transitions/file_animation-currenttime.html
 [css-transitions/test_animation-finished.html]
 support-files = css-transitions/file_animation-finished.html
@@ -68,16 +70,18 @@ support-files = css-transitions/file_css
 support-files = css-transitions/file_document-get-animations.html
 [css-transitions/test_effect-target.html]
 support-files = css-transitions/file_effect-target.html
 [css-transitions/test_element-get-animations.html]
 skip-if = buildapp == 'mulet'
 support-files = css-transitions/file_element-get-animations.html
 [css-transitions/test_keyframeeffect-getframes.html]
 support-files = css-transitions/file_keyframeeffect-getframes.html
+[css-transitions/test_pseudoElement-get-animations.html]
+support-files = css-transitions/file_pseudoElement-get-animations.html
 [document-timeline/test_document-timeline.html]
 support-files = document-timeline/file_document-timeline.html
 [document-timeline/test_request_animation_frame.html]
 skip-if = buildapp == 'mulet'
 [mozilla/test_deferred_start.html]
 support-files = mozilla/file_deferred_start.html
 skip-if = (toolkit == 'gonk' && debug)
 [mozilla/test_hide_and_show.html]