diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /dom/animation/test/style/file_animation-setting-spacing.html | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'dom/animation/test/style/file_animation-setting-spacing.html')
| -rw-r--r-- | dom/animation/test/style/file_animation-setting-spacing.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/dom/animation/test/style/file_animation-setting-spacing.html b/dom/animation/test/style/file_animation-setting-spacing.html new file mode 100644 index 000000000..6098b7433 --- /dev/null +++ b/dom/animation/test/style/file_animation-setting-spacing.html @@ -0,0 +1,111 @@ +<!doctype html> +<head> +<meta charset=utf-8> +<title>Tests for setting spacing by using KeyframeEffect.spacing</title> +<script src='../testcommon.js'></script> +</head> +<body> +<script> +'use strict'; + +function calculateInterpolation(pacedDistances, values, progress) { + if (progress == 0.0) { + return values[0]; + } else if (progress == 1.0) { + return values[valus.length - 1]; + } + + const cumDist = pacedDistances.reduce( (prev, curr) => { + prev.push(prev.length == 0 ? curr : curr + prev[prev.length - 1]); + return prev; + }, []); + + const last = cumDist[cumDist.length - 1]; + const offsets = cumDist.map( (curr) => { return curr / last; } ); + + let idx = 0; + for (let i = 0; i < offsets.length - 1; ++i) { + if (progress >= offsets[i] && progress < offsets[i + 1]) { + idx = i; + break; + } + } + + const ratio = (progress - offsets[idx]) / (offsets[idx + 1] - offsets[idx]); + return values[idx] + ratio * (values[idx + 1] - values[idx]) + 'px'; +} + +promise_test(function(t) { + var target = addDiv(t); + var anim = target.animate([ { marginLeft: '0px' }, + { marginLeft: '-20px' }, + { marginLeft: '100px' }, + { marginLeft: '50px' } ], + 100 * MS_PER_SEC); + + return anim.ready.then(function() { + anim.currentTime = 50 * MS_PER_SEC; + assert_equals(getComputedStyle(target).marginLeft, '40px', + 'computed value before setting a new spacing'); + + var dist = [0, 20, 120, 50]; + var marginLeftValues = [0, -20, 100, 50]; + anim.effect.spacing = 'paced(margin-left)'; + assert_equals(getComputedStyle(target).marginLeft, + calculateInterpolation(dist, marginLeftValues, 0.5), + 'computed value after setting a new spacing'); + }); +}, 'Test for setting spacing from distribute to paced'); + +promise_test(function(t) { + var target = addDiv(t); + var anim = target.animate([ { marginLeft: '0px' }, + { marginLeft: '-20px' }, + { marginLeft: '100px' }, + { marginLeft: '50px' } ], + { duration: 100 * MS_PER_SEC, + spacing: 'paced(margin-left)' }); + + return anim.ready.then(function() { + var dist = [0, 20, 120, 50]; + var marginLeftValues = [0, -20, 100, 50]; + anim.currentTime = 50 * MS_PER_SEC; + assert_equals(getComputedStyle(target).marginLeft, + calculateInterpolation(dist, marginLeftValues, 0.5), + 'computed value before setting a new spacing'); + + anim.effect.spacing = 'distribute'; + assert_equals(getComputedStyle(target).marginLeft, '40px', + 'computed value after setting a new spacing'); + }); +}, 'Test for setting spacing from paced to distribute'); + +promise_test(function(t) { + var target = addDiv(t); + var anim = + target.animate([ { marginLeft: '0px', borderRadius: '0%' }, + { marginLeft: '-20px', borderRadius: '50%' }, + { marginLeft: '100px', borderRadius: '25%' }, + { marginLeft: '50px', borderRadius: '100%' } ], + { duration: 100 * MS_PER_SEC, + spacing: 'paced(margin-left)' }); + + return anim.ready.then(function() { + var dist = [0, 20, 120, 50]; + var marginLeftValues = [0, -20, 100, 50]; + anim.currentTime = 50 * MS_PER_SEC; + assert_equals(getComputedStyle(target).marginLeft, + calculateInterpolation(dist, marginLeftValues, 0.5), + 'computed value before setting a new spacing'); + + dist = [0, 50, 25, 75]; + anim.effect.spacing = 'paced(border-radius)'; + assert_equals(getComputedStyle(target).marginLeft, + calculateInterpolation(dist, marginLeftValues, 0.5), + 'computed value after setting a new spacing'); + }); +}, 'Test for setting spacing from paced to a different paced'); + +done(); +</script> +</body> |