Bug 1305325 - Part 8: Tests composed style for missing keyframe for properties running on the main thread. r=birtles
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Sun, 04 Dec 2016 08:07:40 +0900
changeset 372472 30f9abc97cc3f750f68907376889ee933d66a7df
parent 372471 126968a8a0100a3371b83df57a6df4ef1d9054af
child 372473 60857c37bcfac0cac3609b146de0306b7699ba49
push id1419
push userjlund@mozilla.com
push dateMon, 10 Apr 2017 20:44:07 +0000
treeherdermozilla-release@5e6801b73ef6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1305325
milestone53.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1305325 - Part 8: Tests composed style for missing keyframe for properties running on the main thread. r=birtles MozReview-Commit-ID: 7QuksI30bwY
dom/animation/test/mochitest.ini
dom/animation/test/style/file_missing-keyframe.html
dom/animation/test/style/test_missing-keyframe.html
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -48,16 +48,17 @@ support-files =
   mozilla/file_transform_limits.html
   mozilla/file_transition_finish_on_compositor.html
   mozilla/file_underlying-discrete-value.html
   mozilla/file_set-easing.html
   style/file_animation-seeking-with-current-time.html
   style/file_animation-seeking-with-start-time.html
   style/file_animation-setting-effect.html
   style/file_animation-setting-spacing.html
+  style/file_missing-keyframe.html
   testcommon.js
 
 [css-animations/test_animations-dynamic-changes.html]
 [css-animations/test_animation-cancel.html]
 [css-animations/test_animation-computed-timing.html]
 [css-animations/test_animation-currenttime.html]
 [css-animations/test_animation-finish.html]
 [css-animations/test_animation-finished.html]
@@ -102,8 +103,9 @@ support-files =
 [mozilla/test_transform_limits.html]
 [mozilla/test_transition_finish_on_compositor.html]
 skip-if = toolkit == 'android'
 [mozilla/test_underlying-discrete-value.html]
 [style/test_animation-seeking-with-current-time.html]
 [style/test_animation-seeking-with-start-time.html]
 [style/test_animation-setting-effect.html]
 [style/test_animation-setting-spacing.html]
+[style/test_missing-keyframe.html]
new file mode 100644
--- /dev/null
+++ b/dom/animation/test/style/file_missing-keyframe.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="../testcommon.js"></script>
+<body>
+<script>
+'use strict';
+
+test(t => {
+  var div = addDiv(t, { style: 'margin-left: 100px' });
+  div.animate([{ marginLeft: '200px' }], 100 * MS_PER_SEC);
+
+  assert_equals(getComputedStyle(div).marginLeft, '100px',
+                'The initial margin-left value should be the base value');
+}, 'Initial margin-left value for an animation with no keyframe at offset 0');
+
+test(t => {
+  var div = addDiv(t, { style: 'margin-left: 100px' });
+  div.animate([{ offset: 0, marginLeft: '200px' },
+               { offset: 1, marginLeft: '300px' }],
+              100 * MS_PER_SEC);
+  div.animate([{ marginLeft: '200px' }], 100 * MS_PER_SEC);
+
+  assert_equals(getComputedStyle(div).marginLeft, '200px',
+                'The initial margin-left value should be the initial value ' +
+                'of lower-priority animation');
+}, 'Initial margin-left value for an animation with no keyframe at offset 0 ' +
+   'is that of lower-priority animations');
+
+test(t => {
+  var div = addDiv(t, { style: 'margin-left: 100px;' +
+                               'transition: margin-left 100s -50s linear'});
+  flushComputedStyle(div);
+
+  div.style.marginLeft = '200px';
+  flushComputedStyle(div);
+
+  div.animate([{ marginLeft: '300px' }], 100 * MS_PER_SEC);
+
+  assert_equals(getComputedStyle(div).marginLeft, '150px',
+                'The initial margin-left value should be the initial value ' +
+                'of the transition');
+}, 'Initial margin-left value for an animation with no keyframe at offset 0 ' +
+   'is that of transition');
+
+test(t => {
+  var div = addDiv(t, { style: 'margin-left: 100px' });
+  var animation = div.animate([{ offset: 0, marginLeft: '200px' }],
+                              100 * MS_PER_SEC);
+
+  animation.currentTime = 50 * MS_PER_SEC;
+  assert_equals(getComputedStyle(div).marginLeft, '150px',
+                'The margin-left value at 50% should be the base value');
+}, 'margin-left value at 50% for an animation with no keyframe at offset 1');
+
+test(t => {
+  var div = addDiv(t, { style: 'margin-left: 100px' });
+  var lowerAnimation = div.animate([{ offset: 0, marginLeft: '200px' },
+                                    { offset: 1, marginLeft: '300px' }],
+                                   100 * MS_PER_SEC);
+  var higherAnimation = div.animate([{ offset: 0, marginLeft: '400px' }],
+                                    100 * MS_PER_SEC);
+
+  lowerAnimation.currentTime = 50 * MS_PER_SEC;
+  higherAnimation.currentTime = 50 * MS_PER_SEC;
+                                                 // (250px + 400px) * 0.5
+  assert_equals(getComputedStyle(div).marginLeft, '325px',
+                'The margin-left value at 50% should be additive value of ' +
+                'lower-priority animation and higher-priority animation');
+}, 'margin-left value at 50% for an animation with no keyframe at offset 1 ' +
+   'is that of lower-priority animations');
+
+test(t => {
+  var div = addDiv(t, { style: 'margin-left: 100px;' +
+                               'transition: margin-left 100s linear' });
+  flushComputedStyle(div);
+
+  div.style.marginLeft = '300px';
+  flushComputedStyle(div);
+
+  div.animate([{ offset: 0, marginLeft: '200px' }], 100 * MS_PER_SEC);
+
+  div.getAnimations().forEach(animation => {
+    animation.currentTime = 50 * MS_PER_SEC;
+  });
+                                                 // (200px + 200px) * 0.5
+  assert_equals(getComputedStyle(div).marginLeft, '200px',
+                'The margin-left value at 50% should be additive value of ' +
+                'of the transition and animation');
+}, 'margin-left value at 50% for an animation with no keyframe at offset 1 ' +
+   'is that of transition');
+
+done();
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/dom/animation/test/style/test_missing-keyframe.html
@@ -0,0 +1,15 @@
+<!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_missing-keyframe.html');
+  });
+</script>
+</html>