Bug 1305325 - Part 12: Tests composed style for missing keyframe for properties running on the main thread. r?birtles draft
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Wed, 16 Nov 2016 06:30:58 +0900
changeset 439353 c89ac06cbf5a6f4ee591e718ba6fe05933222f79
parent 439352 7fc1dc09b91d056336448519fb5ffa489558ef66
child 439354 de15112c458363512615f1751de88707e487f40a
push id35977
push userhiikezoe@mozilla-japan.org
push dateTue, 15 Nov 2016 21:34:46 +0000
reviewersbirtles
bugs1305325
milestone53.0a1
Bug 1305325 - Part 12: Tests composed style for missing keyframe for properties running on the main thread. r?birtles MozReview-Commit-ID: 7QuksI30bwY * * * [mq]: FIX MozReview-Commit-ID: LELkYGh35iY
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
@@ -49,16 +49,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]
@@ -104,8 +105,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>