LayoutTests/web-animations-api/w3c/eased-keyframes.html - Issue 253963002: Web Animations API: Add layout tests for element.animate() keyframes

Unified Diff: LayoutTests/web-animations-api/w3c/eased-keyframes.html

Issue 253963002: Web Animations API: Add layout tests for element.animate() keyframes (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: More keyframe tests Created 6 years, 8 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 | « LayoutTests/web-animations-api/w3c/3-keyframes-with-offsets.html ('k') | LayoutTests/web-animations-api/w3c/ignored-keyframes.html » ('j') | LayoutTests/web-animations-api/w3c/resources/keyframes-test.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: LayoutTests/web-animations-api/w3c/eased-keyframes.html

diff --git a/LayoutTests/web-animations-api/w3c/eased-keyframes.html b/LayoutTests/web-animations-api/w3c/eased-keyframes.html

new file mode 100644

index 0000000000000000000000000000000000000000..094356fd1b79b8261ed19bf54ebd76e3d0693cfd

--- /dev/null

+++ b/LayoutTests/web-animations-api/w3c/eased-keyframes.html

@@ -0,0 +1,95 @@

+<!DOCTYPE html>

+<script src="../../resources/testharness.js"></script>

+<script src="../../resources/testharnessreport.js"></script>

+<script src="resources/keyframes-test.js"></script>

+<script>

+testInRAF(function() {

+ assertAnimationStyles([

+ {opacity: '0', left: '0px', easing: 'steps(2, start)'},

+ {opacity: '0.25', left: '25px'},

+ {opacity: '0.75', left: '75px'},

+ ], {

+ 0: {opacity: '0.125', left: '12.5px'},

+ 0.125: {opacity: '0.125', left: '12.5px'},

+ 0.25: {opacity: '0.25', left: '25px'},

+ 0.375: {opacity: '0.25', left: '25px'},

+ 0.5: {opacity: '0.25', left: '25px'},

+ 0.625: {opacity: '0.375', left: '37.5px'},

+ 0.75: {opacity: '0.5', left: '50px'},

+ 0.875: {opacity: '0.625', left: '62.5px'},

+ 1: {opacity: '0.75', left: '75px'},

+ }, 'with easing on first keyframe');

+ assertAnimationStyles([

+ {opacity: '0', left: '0px'},

+ {opacity: '0.5', left: '50px', easing: 'steps(2, start)'},

+ {opacity: '0.75', left: '75px'},

+ ], {

+ 0: {opacity: '0', left: '0px'},

+ 0.125: {opacity: '0.125', left: '12.5px'},

+ 0.25: {opacity: '0.25', left: '25px'},

+ 0.375: {opacity: '0.375', left: '37.5px'},

+ 0.5: {opacity: '0.625', left: '62.5px'},

+ 0.625: {opacity: '0.625', left: '62.5px'},

+ 0.75: {opacity: '0.75', left: '75px'},

+ 0.875: {opacity: '0.75', left: '75px'},

+ 1: {opacity: '0.75', left: '75px'},

+ }, 'with easing on second keyframe');

+},

+'element.animate() with eased keyframe',

+ help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',

+ assert: [

+ 'element.animate() should start an animation when keyframes are specified with timing functions',

+ 'for their easing property. The animation should use the given timing function between consecutive',

+ 'keyframe offsets.',

+ ],

+ author: 'Alan Cutter',

+});

+testInRAF(function() {

+ assertAnimationStyles([

+ {opacity: '0', offset: 0, easing: 'steps(2, start)'},

+ {left: '0px', offset: 0},

+ {opacity: '0.5', left: '50px'},

+ ], {

+ 0: {opacity: '0.25', left: '0px'},

+ 0.25: {opacity: '0.25', left: '12.5px'},

+ 0.5: {opacity: '0.5', left: '25px'},

+ 0.75: {opacity: '0.5', left: '37.5px'},

+ 1: {opacity: '0.5', left: '50px'},

+ });

+},

+'element.animate() with eased keyframe on single property',

+ help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',

+ assert: [

+ 'element.animate() should start an animation when keyframes are specified with timing functions',

+ 'for their easing property. The animation should use the given timing function only on the properties',

+ 'specified in the same keyframe.',

+ ],

+ author: 'Alan Cutter',

+});

+testInRAF(function() {

+ assertAnimationStyles([

+ {opacity: '0', left: '0px'},

+ {opacity: '0.5', left: '50px', easing: 'steps(2, start)'},

+ ], {

+ 0: {opacity: '0', left: '0px'},

+ 0.25: {opacity: '0.125', left: '12.5px'},

+ 0.5: {opacity: '0.25', left: '25px'},

+ 0.75: {opacity: '0.375', left: '37.5px'},

+ 1: {opacity: '0.5', left: '50px'},

+ });

+},

+'element.animate() with easing on last keyframe',

+ help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',

+ assert: [

+ 'element.animate() should start an animation when keyframes are specified with timing functions',

+ 'for their easing property. Easing on the last keyframes should have no effect on the animation.',

+ ],

+ author: 'Alan Cutter',

+});

+</script>