diff options
Diffstat (limited to 'testing/web-platform/tests/web-animations/animation-model/keyframe-effects')
3 files changed, 0 insertions, 608 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 deleted file mode 100644 index 07fb6097c..000000000 --- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-context.html +++ /dev/null @@ -1,103 +0,0 @@ -<!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 deleted file mode 100644 index 90e26d276..000000000 --- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html +++ /dev/null @@ -1,391 +0,0 @@ -<!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 deleted file mode 100644 index eb67f669a..000000000 --- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/the-effect-value-of-a-keyframe-effect.html +++ /dev/null @@ -1,114 +0,0 @@ -<!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> |