Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/keyframe-effects/spacing-keyframes.html

Issue 2110093002: Import wpt@00af177447b0a4b2de95f051b040290f7307acd3 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@wpt-rewrite-nopathhacks
Patch Set: Merge branch 'master' into wpt_import2 Created 4 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/html/webappapis/system-state-and-capabilities/the-navigator-object/NavigatorID.html ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/AnimationTimeline/document-timeline.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
diff --git a/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/keyframe-effects/spacing-keyframes.html b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
new file mode 100644
index 0000000000000000000000000000000000000000..14dc32bf57eeb9f0334c477d6ce4b1c2bbccfd47
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/wpt/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
@@ -0,0 +1,328 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Keyframe spacing tests</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#spacing-keyframes">
+<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(function(t) {
+ var anim = createDiv(t).animate([ { marginLeft: '0px' },
+ { marginLeft: '-20px' },
+ { marginLeft: '100px' },
+ { marginLeft: '50px' } ],
+ { duration: 100 * MS_PER_SEC });
+
+ var frames = anim.effect.getKeyframes();
+ var slots = frames.length - 1;
+ assert_equals(frames[0].computedOffset, 0.0, '1st frame offset');
+ assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset');
+ assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset');
+ assert_equals(frames[3].computedOffset, 1.0, 'last frame offset');
+}, 'Test distribute spacing');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { marginLeft: '0px' },
+ { marginLeft: '-20px' },
+ { marginLeft: '100px', offset: 0.5 },
+ { marginLeft: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'distribute' });
+
+ var frames = anim.effect.getKeyframes();
+ assert_equals(frames[0].computedOffset, 0.0, '1st frame offset');
+ assert_equals(frames[1].computedOffset, 0.5 * 1 / 2, '2nd frame offset');
+ assert_equals(frames[2].computedOffset, 0.5, '3rd frame offset');
+ assert_equals(frames[3].computedOffset, 1.0, 'last frame offset');
+}, 'Test distribute spacing with specific offsets');
+
+test(function(t) {
+ var anim = createDiv(t).animate(null,
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+
+ var frames = anim.effect.getKeyframes();
+ assert_equals(frames.length, 0, "empty keyframe list");
+}, 'Test paced spacing without any keyframe');
+
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { marginLeft: '0px' },
+ { marginLeft: '-20px' },
+ { marginLeft: '100px' },
+ { marginLeft: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+
+ var frames = anim.effect.getKeyframes();
+ var cumDist = [0, 20, 140, 190];
+ assert_equals(frames[0].computedOffset, 0.0,
+ '1st frame offset');
+ assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
+ '2nd frame offset');
+ assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
+ '3rd frame offset');
+ assert_equals(frames[3].computedOffset, 1.0,
+ 'last frame offset');
+}, 'Test paced spacing');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { marginLeft: '0px' },
+ { marginLeft: '-20px' },
+ { marginLeft: '100px', offset: 0.5 },
+ { marginLeft: '120px' },
+ { marginLeft: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+
+ var frames = anim.effect.getKeyframes();
+ var cumDist1 = [ 0, 20, 140 ];
+ var cumDist2 = [ 0, 20, 90 ];
+ assert_equals(frames[1].computedOffset, 0.5 * cumDist1[1] / cumDist1[2],
+ '2nd frame offset');
+ assert_equals(frames[2].computedOffset, 0.5,
+ '3rd frame offset');
+ assert_equals(frames[3].computedOffset, 0.5 + 0.5 * cumDist2[1] / cumDist2[2],
+ '4th frame offset');
+}, 'Test paced spacing with specific offsets');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { marginLeft: '0px' },
+ { marginLeft: '0px' },
+ { marginLeft: '100px' },
+ { marginLeft: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+
+ var frames = anim.effect.getKeyframes();
+ var cumDist = [0, 0, 100, 150];
+ assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
+ '2nd frame offset');
+ assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
+ '3rd frame offset');
+}, 'Test paced spacing if some paced property values are equal');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { marginLeft: '0px' },
+ { marginLeft: '0px' },
+ { marginLeft: '0px' },
+ { marginLeft: '0px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+
+ var frames = anim.effect.getKeyframes();
+ var slots = frames.length - 1;
+ assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset');
+ assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset');
+}, 'Test falling back to distribute spacing if all paced property value ' +
+ 'are equal');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { margin: '0px' },
+ { marginTop: '-20px' },
+ { marginLeft: '100px' },
+ { margin: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+
+ var frames = anim.effect.getKeyframes();
+ assert_equals(frames[1].computedOffset, frames[2].computedOffset * 1 / 2,
+ '2nd frame offset using distribute spacing');
+ assert_equals(frames[2].computedOffset, 100 / 150,
+ '3rd frame offset using paced spacing');
+}, 'Test paced spacing if there a keyframe without the paced property');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { margin: '0px' },
+ { marginTop: '40px' },
+ { marginTop: '-20px' },
+ { marginLeft: '40px' },
+ { marginTop: '60px' },
+ { margin: '10px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+
+ var frames = anim.effect.getKeyframes();
+ var cumDist = [0, 0, 0, 40, 40, 70];
+ assert_equals(frames[1].computedOffset, frames[3].computedOffset * 1 / 3,
+ '2nd frame offset using distribute spacing');
+ assert_equals(frames[2].computedOffset, frames[3].computedOffset * 2 / 3,
+ '3rd frame offset using distribute spacing');
+ assert_equals(frames[3].computedOffset, cumDist[3] / cumDist[5],
+ '4th frame offset using paced spacing');
+ assert_equals(frames[4].computedOffset,
+ frames[3].computedOffset +
+ (1 - frames[3].computedOffset) * 1 / 2,
+ '5th frame offset using distribute spacing');
+}, 'Test paced spacing if a paced property that appears on only some ' +
+ 'keyframes');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { margin: '0px' },
+ { marginTop: '-20px', offset: 0.5 },
+ { marginLeft: '40px' },
+ { marginLeft: '100px' },
+ { margin: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+
+ var frames = anim.effect.getKeyframes();
+ assert_equals(frames[2].computedOffset, 0.5 + 0.5 * 1 / 3,
+ '3rd frame offset using distribute spacing because it is the ' +
+ 'first paceable keyframe');
+ assert_equals(frames[3].computedOffset,
+ frames[2].computedOffset +
+ (1.0 - frames[2].computedOffset) * 60 / 110,
+ '4th frame offset using paced spacing');
+}, 'Test paced spacing if a paced property that appears on only some ' +
+ 'keyframes and there is a specific offset');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { margin: '0px' },
+ { marginTop: '20px', offset: 0.2 },
+ { marginTop: '40px' },
+ { marginTop: '-20px' },
+ { marginLeft: '-20px' },
+ { marginLeft: '40px' },
+ { marginTop: '60px' },
+ { marginLeft: '100px' },
+ { marginTop: '50px' },
+ { marginTop: '100px', offset: 0.8 },
+ { margin: '0px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin-left)' });
+ var frames = anim.effect.getKeyframes();
+ // Test distribute spacing in (A, Paced A] and [Paced B, frame B).
+ var slots = frames.length - 3;
+ var start = 0.2;
+ var diff = 0.8 - start;
+ assert_equals(frames[2].computedOffset, start + diff * 1.0 / slots,
+ '3nd frame offset using distribute spacing');
+ assert_equals(frames[3].computedOffset, start + diff * 2.0 / slots,
+ '4rd frame offset using distribute spacing');
+ assert_equals(frames[4].computedOffset, start + diff * 3.0 / slots,
+ '5th frame offset using distribute spacing because it is ' +
+ 'the first paceable keyframe');
+ assert_equals(frames[7].computedOffset, start + diff * 6.0 / slots,
+ '8th frame offset using distribute spacing because it is ' +
+ 'the last paceable keyframe');
+ assert_equals(frames[8].computedOffset, start + diff * 7.0 / slots,
+ '9th frame offset using distribute spacing');
+ // Test paced spacing and other null computed offsets in (Paced A, Paced B).
+ var cumDist = [0, 60, 60, 120];
+ assert_equals(frames[5].computedOffset,
+ frames[4].computedOffset + cumDist[2] / cumDist[3] *
+ (frames[7].computedOffset - frames[4].computedOffset),
+ '6th frame offset using paced spacing');
+ assert_equals(frames[6].computedOffset,
+ frames[5].computedOffset + 1.0 / 2.0 *
+ (frames[7].computedOffset - frames[5].computedOffset),
+ '7th frame offset using distribute spacing');
+}, 'Test paced spacing where there are some keyframes without offsets and ' +
+ 'without the paced property before the first paceable keyframe and ' +
+ 'after the last paceable keyframe');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { margin: '0px' },
+ { margin: '-20px' },
+ { margin: '100px' },
+ { margin: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin)' });
+
+ var frames = anim.effect.getKeyframes();
+ var cumDist = [0, 20, 140, 190];
+ assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
+ '2nd frame offset');
+ assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
+ '3rd frame offset');
+}, 'Test paced spacing for using shorthand property');
+
+test(function(t) {
+ var anim =
+ createDiv(t).animate([ { marginLeft: '0px', marginRight: '0px',
+ marginTop: '10px', marginBottom: '10px' },
+ { marginLeft: '-20px', marginRight: '-20px',
+ marginTop: '0px', marginBottom: '0px' },
+ { marginLeft: '100px', marginRight: '100px',
+ marginTop: '-50px', marginBottom: '-50px' },
+ { marginLeft: '50px', marginRight: '50px',
+ marginTop: '80px', marginBottom: '80px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin)' });
+
+ var frames = anim.effect.getKeyframes();
+ var dist = [ 0,
+ Math.sqrt(20 * 20 * 2 + 10 * 10 * 2),
+ Math.sqrt(120 * 120 * 2 + 50 * 50 * 2),
+ Math.sqrt(50 * 50 * 2 + 130 * 130 * 2) ];
+ var cumDist = [];
+ dist.reduce(function(prev, curr, i) { return cumDist[i] = prev + curr; }, 0);
+ assert_approx_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
+ 0.0001, '2nd frame offset');
+ assert_approx_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
+ 0.0001, '3rd frame offset');
+}, 'Test paced spacing using shorthand property where only the longhand ' +
+ 'components are specified');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { marginLeft: '0px', marginTop: '0px' },
+ { marginLeft: '-20px', marginTop: '-20px' },
+ { marginLeft: '100px', marginTop: '100px' },
+ { marginLeft: '50px', marginTop: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin)' });
+
+ var frames = anim.effect.getKeyframes();
+ var slots = frames.length - 1;
+ assert_equals(frames[1].computedOffset, 1 / slots, '2nd frame offset');
+ assert_equals(frames[2].computedOffset, 2 / slots, '3rd frame offset');
+}, 'Test falling back to distribute spacing if all keyframe miss some ' +
+ 'components');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { margin: '0px' },
+ { marginLeft: '-20px' },
+ { marginTop: '40px' },
+ { margin: '100px' },
+ { margin: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin)' });
+
+ var frames = anim.effect.getKeyframes();
+ assert_equals(frames[1].computedOffset, frames[3].computedOffset * 1 / 3,
+ '2nd frame offset using distribute spacing');
+ assert_equals(frames[2].computedOffset, frames[3].computedOffset * 2 / 3,
+ '3rd frame offset using distribute spacing');
+ assert_equals(frames[3].computedOffset, 100 / 150,
+ '4th frame offset using paced spacing');
+}, 'Test paced spacing only for keyframes specifying all longhand ' +
+ 'components, and falling back to distribute spacing for the reset');
+
+test(function(t) {
+ var anim = createDiv(t).animate([ { margin: '0px' },
+ { marginLeft: '-20px' },
+ { marginTop: '40px', offset: 0.5 },
+ { margin: '100px' },
+ { margin: '50px' } ],
+ { duration: 100 * MS_PER_SEC,
+ spacing: 'paced(margin)' });
+
+ var frames = anim.effect.getKeyframes();
+ assert_equals(frames[1].computedOffset, 0.5 * 1 / 2,
+ '2nd frame offset using distribute spacing');
+ assert_equals(frames[3].computedOffset, 0.5 + 0.5 * 1 / 2,
+ '4th frame offset using distribute spacing because it is the ' +
+ 'first paceable keyframe from a non-null offset keyframe');
+}, 'Test paced spacing only for keyframes specifying all some components, ' +
+ 'and falling back to distribute spacing for the reset with some specific ' +
+ 'offsets');
+
+// Bug 1276193: Test for mixing percent and pixel values.
+
+</script>
+</body>
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/html/webappapis/system-state-and-capabilities/the-navigator-object/NavigatorID.html ('k') | third_party/WebKit/LayoutTests/imported/wpt/web-animations/interfaces/AnimationTimeline/document-timeline.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698