blob: 62698303a8476eba7f25a61f007185c50956447c [file] [log] [blame]
var timingFunctionTests = {
tests: {
translateSteps: {
keyframes: [
{transform: 'translateX(100px)'},
{transform: 'translateX(500px)'}
],
easing: 'steps(9)',
style: 'background: maroon; float: none;',
samples: [
{at: 0},
{at: 0.25},
{at: 0.5},
{at: 0.75},
{at: 1.1},
]
},
translateStepsPerKeyframe: {
keyframes: [
{transform: 'translateX(100px)', easing: 'steps(18)'},
{transform: 'translateX(400px)', easing: 'steps(9)'},
{transform: 'translateX(500px)'}
],
style: 'background: navy; float: none;',
samples: [
{at: 0},
{at: 0.25},
{at: 0.35},
{at: 0.5},
{at: 0.65},
{at: 0.75},
{at: 1.1},
]
},
translateStepsWithCubicBezier: {
keyframes: [
{transform: 'translateX(100px)', easing: 'steps(9)'},
{transform: 'translateX(500px)'}
],
easing: 'cubic-bezier(.5, -1, .5, 2)',
style: 'background: black; float: none;',
samples: [
{at: 0},
{at: 0.4},
{at: 0.45},
{at: 0.5},
{at: 0.6},
{at: 1.41},
]
},
translateCubicBezierWithSteps: {
keyframes: [
{transform: 'translateX(100px)', easing: 'cubic-bezier(.5, -1, .5, 2)'},
{transform: 'translateX(500px)'}
],
easing: 'steps(9)',
style: 'background: peru; float: none;',
samples: [
{at: 0},
{at: 0.25},
{at: 0.35},
{at: 0.5},
{at: 0.65},
{at: 0.75},
{at: 1.39},
]
},
}
};