summaryrefslogtreecommitdiffstats
path: root/dom/animation/test/style/test_missing-keyframe.html
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--dom/animation/test/style/test_missing-keyframe.html110
1 files changed, 110 insertions, 0 deletions
diff --git a/dom/animation/test/style/test_missing-keyframe.html b/dom/animation/test/style/test_missing-keyframe.html
new file mode 100644
index 0000000000..4047e62408
--- /dev/null
+++ b/dom/animation/test/style/test_missing-keyframe.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../testcommon.js"></script>
+<body>
+<div id="log"></div>
+<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 ' +
+ 'the transition and animation');
+}, 'margin-left value at 50% for an animation with no keyframe at offset 1 ' +
+ 'is that of transition');
+
+test(t => {
+ var div = addDiv(t, { style: 'margin-left: 100px' });
+
+ var animation = div.animate([{ offset: 0, marginLeft: '200px' }],
+ { duration: 100 * MS_PER_SEC,
+ iterationStart: 1,
+ iterationComposite: 'accumulate' });
+
+ assert_equals(getComputedStyle(div).marginLeft, '300px',
+ 'The margin-left value should be additive value of the ' +
+ 'accumulation of the initial value onto the base value ');
+}, 'margin-left value for an animation with no keyframe at offset 1 and its ' +
+ 'iterationComposite is accumulate');
+
+</script>
+</body>