Bug 1305325 - Part 8: Tests composed style for missing keyframe for properties running on the main thread. r?birtles
MozReview-Commit-ID: 7QuksI30bwY
--- 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>