diff options
Diffstat (limited to 'testing/web-platform/tests/web-animations/animation-model/keyframe-effects')
3 files changed, 608 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html new file mode 100644 index 000000000..07fb6097c --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Tests that property values respond to changes to their context</title> +<link rel="help" href="https://w3c.github.io/web-animations/#keyframes-section"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<script> + +test(function(t) { + var div = createDiv(t); + div.style.fontSize = '10px'; + var animation = div.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + animation.currentTime = 500; + assert_equals(getComputedStyle(div).marginLeft, '150px', + 'Effect value before updating font-size'); + div.style.fontSize = '20px'; + assert_equals(getComputedStyle(div).marginLeft, '300px', + 'Effect value after updating font-size'); +}, 'Effect values reflect changes to font-size on element'); + +test(function(t) { + var parentDiv = createDiv(t); + var div = createDiv(t); + parentDiv.appendChild(div); + parentDiv.style.fontSize = '10px'; + + var animation = div.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + animation.currentTime = 500; + assert_equals(getComputedStyle(div).marginLeft, '150px', + 'Effect value before updating font-size on parent element'); + parentDiv.style.fontSize = '20px'; + assert_equals(getComputedStyle(div).marginLeft, '300px', + 'Effect value after updating font-size on parent element'); +}, 'Effect values reflect changes to font-size on parent element'); + +promise_test(function(t) { + var parentDiv = createDiv(t); + var div = createDiv(t); + parentDiv.appendChild(div); + parentDiv.style.fontSize = '10px'; + var animation = div.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + + animation.pause(); + animation.currentTime = 500; + parentDiv.style.fontSize = '20px'; + + return animation.ready.then(function() { + assert_equals(getComputedStyle(div).marginLeft, '300px', + 'Effect value after updating font-size on parent element'); + }); +}, 'Effect values reflect changes to font-size when computed style is not' + + ' immediately flushed'); + +promise_test(function(t) { + var divWith10pxFontSize = createDiv(t); + divWith10pxFontSize.style.fontSize = '10px'; + var divWith20pxFontSize = createDiv(t); + divWith20pxFontSize.style.fontSize = '20px'; + + var div = createDiv(t); + div.remove(); // Detach + var animation = div.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + animation.pause(); + + return animation.ready.then(function() { + animation.currentTime = 500; + + divWith10pxFontSize.appendChild(div); + assert_equals(getComputedStyle(div).marginLeft, '150px', + 'Effect value after attaching to font-size:10px parent'); + divWith20pxFontSize.appendChild(div); + assert_equals(getComputedStyle(div).marginLeft, '300px', + 'Effect value after attaching to font-size:20px parent'); + }); +}, 'Effect values reflect changes to font-size from reparenting'); + +test(function(t) { + var divA = createDiv(t); + divA.style.fontSize = '10px'; + + var divB = createDiv(t); + divB.style.fontSize = '20px'; + + var animation = divA.animate([ { marginLeft: '10em' }, + { marginLeft: '20em' } ], 1000); + animation.currentTime = 500; + assert_equals(getComputedStyle(divA).marginLeft, '150px', + 'Effect value before updating target element'); + + animation.effect.target = divB; + assert_equals(getComputedStyle(divB).marginLeft, '300px', + 'Effect value after updating target element'); +}, 'Effect values reflect changes to target element'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html new file mode 100644 index 000000000..90e26d276 --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html @@ -0,0 +1,391 @@ +<!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'); + +// Tests for setting spacing by KeyframeEffect.spacing. + +test(function(t) { + var anim = createDiv(t).animate([ { marginLeft: '0px' }, + { marginLeft: '-20px' }, + { marginLeft: '100px' }, + { marginLeft: '50px' } ], + { duration: 100 * MS_PER_SEC }); + + anim.effect.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 by setter'); + +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)' }); + + anim.effect.spacing = 'distribute'; + + 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 by setter'); + +test(function(t) { + var anim = + createDiv(t).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)' }); + + anim.effect.spacing = 'paced(border-radius)'; + + var frames = anim.effect.getKeyframes(); + var cumDist = [0, 50, 50 + 25, 50 + 25 + 75]; + + 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 by changing the paced property'); + +</script> +</body> diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/the-effect-value-of-a-keyframe-effect.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/the-effect-value-of-a-keyframe-effect.html new file mode 100644 index 000000000..eb67f669a --- /dev/null +++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/the-effect-value-of-a-keyframe-effect.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Keyframe handling tests</title> +<link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of-a-keyframe-animation-effect"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +<body> +<div id="log"></div> +<div id="target"></div> +<script> +'use strict'; + +test(function(t) { + var div = createDiv(t); + var anim = div.animate([ { offset: 0, opacity: 0 }, + { offset: 0, opacity: 0.1 }, + { offset: 0, opacity: 0.2 }, + { offset: 1, opacity: 0.8 }, + { offset: 1, opacity: 0.9 }, + { offset: 1, opacity: 1 } ], + { duration: 1000, + easing: 'cubic-bezier(0.5, -0.5, 0.5, 1.5)' }); + assert_equals(getComputedStyle(div).opacity, '0.2', + 'When progress is zero the last keyframe with offset 0 should' + + ' be used'); + // http://cubic-bezier.com/#.5,-0.5,.5,1.5 + // At t=0.15, the progress should be negative + anim.currentTime = 150; + assert_equals(getComputedStyle(div).opacity, '0', + 'When progress is negative, the first keyframe with a 0 offset' + + ' should be used'); + // At t=0.71, the progress should be just less than 1 + anim.currentTime = 710; + assert_approx_equals(parseFloat(getComputedStyle(div).opacity), 0.8, 0.01, + 'When progress is just less than 1, the first keyframe with an' + + ' offset of 1 should be used as the interval endpoint'); + // At t=0.85, the progress should be > 1 + anim.currentTime = 850; + assert_equals(getComputedStyle(div).opacity, '1', + 'When progress is greater than 1.0, the last keyframe with a 1' + + ' offset should be used'); + anim.finish(); + assert_equals(getComputedStyle(div).opacity, '1', + 'When progress is equal to 1.0, the last keyframe with a 1' + + ' offset should be used'); +}, 'Overlapping keyframes at 0 and 1 use the appropriate value when the' + + ' progress is outside the range [0, 1]'); + +test(function(t) { + var div = createDiv(t); + var anim = div.animate([ { offset: 0, opacity: 0 }, + { offset: 0.5, opacity: 0.3 }, + { offset: 0.5, opacity: 0.5 }, + { offset: 0.5, opacity: 0.7 }, + { offset: 1, opacity: 1 } ], 1000); + anim.currentTime = 250; + assert_equals(getComputedStyle(div).opacity, '0.15', + 'Before the overlap point, the first keyframe from the' + + ' overlap point should be used as interval endpoint'); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).opacity, '0.7', + 'At the overlap point, the last keyframe from the' + + ' overlap point should be used as interval startpoint'); + anim.currentTime = 750; + assert_equals(getComputedStyle(div).opacity, '0.85', + 'After the overlap point, the last keyframe from the' + + ' overlap point should be used as interval startpoint'); +}, 'Overlapping keyframes between 0 and 1 use the appropriate value on each' + + ' side of the overlap point'); + +test(function(t) { + var div = createDiv(t); + var anim = div.animate({ visibility: ['hidden','visible'] }, + { duration: 100 * MS_PER_SEC, fill: 'both' }); + + anim.currentTime = 0; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress = 0.'); + + anim.currentTime = 10 * MS_PER_SEC + 1; + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress > 0 due to linear easing.'); + + anim.finish(); + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress = 1.'); + +}, "Test visibility clamping behavior."); + +test(function(t) { + var div = createDiv(t); + var anim = div.animate({ visibility: ['hidden', 'visible'] }, + { duration: 100 * MS_PER_SEC, fill: 'both', + easing: 'cubic-bezier(0.25, -0.6, 0, 0.5)' }); + + anim.currentTime = 0; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress = 0.'); + + // Timing function is below zero. So we expected visibility is hidden. + anim.currentTime = 10 * MS_PER_SEC + 1; + assert_equals(getComputedStyle(div).visibility, 'hidden', + 'Visibility when progress < 0 due to cubic-bezier easing.'); + + anim.currentTime = 60 * MS_PER_SEC; + assert_equals(getComputedStyle(div).visibility, 'visible', + 'Visibility when progress > 0 due to cubic-bezier easing.'); + +}, "Test visibility clamping behavior with an easing that has a negative component"); + +done(); +</script> +</body> |