mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-10-11 17:57:32 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Tests for discrete animation</title>
|
||||
<link rel="help" href="http://w3c.github.io/web-animations/#animatable-as-string-section">
|
||||
<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 div = createDiv(t);
|
||||
|
||||
var anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
|
||||
{ duration: 1000, fill: 'forwards' });
|
||||
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'normal',
|
||||
'Animation produces \'from\' value at start of interval');
|
||||
anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'normal',
|
||||
'Animation produces \'from\' value just before the middle of'
|
||||
+ ' the interval');
|
||||
anim.currentTime++;
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'italic',
|
||||
'Animation produces \'to\' value at exact middle of'
|
||||
+ ' the interval');
|
||||
anim.finish();
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'italic',
|
||||
'Animation produces \'to\' value during forwards fill');
|
||||
}, 'Test animating discrete values');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var originalHeight = getComputedStyle(div).height;
|
||||
|
||||
var anim = div.animate({ height: [ 'auto', '200px' ] },
|
||||
{ duration: 1000, fill: 'forwards' });
|
||||
|
||||
assert_equals(getComputedStyle(div).height, originalHeight,
|
||||
'Animation produces \'from\' value at start of interval');
|
||||
anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
|
||||
assert_equals(getComputedStyle(div).height, originalHeight,
|
||||
'Animation produces \'from\' value just before the middle of'
|
||||
+ ' the interval');
|
||||
anim.currentTime++;
|
||||
assert_equals(getComputedStyle(div).height, '200px',
|
||||
'Animation produces \'to\' value at exact middle of'
|
||||
+ ' the interval');
|
||||
anim.finish();
|
||||
assert_equals(getComputedStyle(div).height, '200px',
|
||||
'Animation produces \'to\' value during forwards fill');
|
||||
}, 'Test discrete animation is used when interpolation fails');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var originalHeight = getComputedStyle(div).height;
|
||||
|
||||
var anim = div.animate({ height: [ 'auto',
|
||||
'200px',
|
||||
'300px',
|
||||
'auto',
|
||||
'400px' ] },
|
||||
{ duration: 1000, fill: 'forwards' });
|
||||
|
||||
// There are five values, so there are four pairs to try to interpolate.
|
||||
// We test at the middle of each pair.
|
||||
assert_equals(getComputedStyle(div).height, originalHeight,
|
||||
'Animation produces \'from\' value at start of interval');
|
||||
anim.currentTime = 125;
|
||||
assert_equals(getComputedStyle(div).height, '200px',
|
||||
'First non-interpolable pair uses discrete interpolation');
|
||||
anim.currentTime += 250;
|
||||
assert_equals(getComputedStyle(div).height, '250px',
|
||||
'Second interpolable pair uses linear interpolation');
|
||||
anim.currentTime += 250;
|
||||
assert_equals(getComputedStyle(div).height, originalHeight,
|
||||
'Third non-interpolable pair uses discrete interpolation');
|
||||
anim.currentTime += 250;
|
||||
assert_equals(getComputedStyle(div).height, '400px',
|
||||
'Fourth non-interpolable pair uses discrete interpolation');
|
||||
}, 'Test discrete animation is used only for pairs of values that cannot'
|
||||
+ ' be interpolated');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var originalHeight = getComputedStyle(div).height;
|
||||
|
||||
// Easing: http://cubic-bezier.com/#.68,0,1,.01
|
||||
// With this curve, we don't reach the 50% point until about 95% of
|
||||
// the time has expired.
|
||||
var anim = div.animate({ fontStyle: [ 'italic', 'oblique' ] },
|
||||
{ duration: 1000, fill: 'forwards',
|
||||
easing: 'cubic-bezier(0.68,0,1,0.01)' });
|
||||
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'italic',
|
||||
'Animation produces \'from\' value at start of interval');
|
||||
anim.currentTime = 940;
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'italic',
|
||||
'Animation produces \'from\' value at 94% of the iteration'
|
||||
+ ' time');
|
||||
anim.currentTime = 960;
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'oblique',
|
||||
'Animation produces \'to\' value at 96% of the iteration'
|
||||
+ ' time');
|
||||
}, 'Test the 50% switch point for discrete animation is based on the'
|
||||
+ ' effect easing');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var originalHeight = getComputedStyle(div).height;
|
||||
|
||||
// Easing: http://cubic-bezier.com/#.68,0,1,.01
|
||||
// With this curve, we don't reach the 50% point until about 95% of
|
||||
// the time has expired.
|
||||
var anim = div.animate([ { fontStyle: 'italic',
|
||||
easing: 'cubic-bezier(0.68,0,1,0.01)' },
|
||||
{ fontStyle: 'oblique' } ],
|
||||
{ duration: 1000, fill: 'forwards' });
|
||||
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'italic',
|
||||
'Animation produces \'from\' value at start of interval');
|
||||
anim.currentTime = 940;
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'italic',
|
||||
'Animation produces \'from\' value at 94% of the iteration'
|
||||
+ ' time');
|
||||
anim.currentTime = 960;
|
||||
assert_equals(getComputedStyle(div).fontStyle, 'oblique',
|
||||
'Animation produces \'to\' value at 96% of the iteration'
|
||||
+ ' time');
|
||||
}, 'Test the 50% switch point for discrete animation is based on the'
|
||||
+ ' keyframe easing');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Keyframe spacing tests on shapes</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";
|
||||
|
||||
// Help function for testing the computed offsets by the distance array.
|
||||
function assert_animation_offsets(anim, dist) {
|
||||
const frames = anim.effect.getKeyframes();
|
||||
const cumDist = dist.reduce( (prev, curr) => {
|
||||
prev.push(prev.length == 0 ? curr : curr + prev[prev.length - 1]);
|
||||
return prev;
|
||||
}, []);
|
||||
|
||||
const total = cumDist[cumDist.length - 1];
|
||||
for (var i = 0; i < frames.length; ++i) {
|
||||
assert_equals(frames[i].computedOffset, cumDist[i] / total,
|
||||
'computedOffset of frame ' + i);
|
||||
}
|
||||
}
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { clipPath: 'circle(20px)' },
|
||||
{ clipPath: 'ellipse(10px 20px)' },
|
||||
{ clipPath: 'polygon(50px 0px, 100px 50px, ' +
|
||||
' 50px 100px, 0px 50px)' },
|
||||
{ clipPath: 'inset(20px round 10px)' } ],
|
||||
{ spacing: 'paced(clip-path)' });
|
||||
|
||||
const frames = anim.effect.getKeyframes();
|
||||
const slots = frames.length - 1;
|
||||
for (var i = 0; i < frames.length; ++i) {
|
||||
assert_equals(frames[i].computedOffset, i / slots,
|
||||
'computedOffset of frame ' + i);
|
||||
}
|
||||
}, 'Test falling back to distribute spacing when using different basic shapes');
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { clipPath: 'circle(10px)' },
|
||||
{ clipPath: 'circle(20px) content-box' },
|
||||
{ clipPath: 'circle(70px)' },
|
||||
{ clipPath: 'circle(10px) padding-box' } ],
|
||||
{ spacing: 'paced(clip-path)' });
|
||||
|
||||
const frames = anim.effect.getKeyframes();
|
||||
const slots = frames.length - 1;
|
||||
for (var i = 0; i < frames.length; ++i) {
|
||||
assert_equals(frames[i].computedOffset, i / slots,
|
||||
'computedOffset of frame ' + i);
|
||||
}
|
||||
}, 'Test falling back to distribute spacing when using different ' +
|
||||
'reference boxes');
|
||||
|
||||
test(function(t) {
|
||||
// 1st: circle(calc(20px) at calc(20px + 0%) calc(10px + 0%))
|
||||
// 2nd: circle(calc(50px) at calc(10px + 0%) calc(10px + 0%))
|
||||
// 3rd: circle(70px at calc(10px + 0%) calc(50px + 0%))
|
||||
// 4th: circle(10px at calc(50px + 0%) calc(30px + 0%))
|
||||
var anim =
|
||||
createDiv(t).animate([ { clipPath: 'circle(calc(10px + 10px) ' +
|
||||
' at 20px 10px)' },
|
||||
{ clipPath: 'circle(calc(20px + 30px) ' +
|
||||
' at 10px 10px)' },
|
||||
{ clipPath: 'circle(70px at 10px 50px)' },
|
||||
{ clipPath: 'circle(10px at 50px 30px)' } ],
|
||||
{ spacing: 'paced(clip-path)' });
|
||||
|
||||
var dist = [ 0,
|
||||
Math.sqrt(30 * 30 + 10 * 10),
|
||||
Math.sqrt(20 * 20 + 40 * 40),
|
||||
Math.sqrt(60 * 60 + 40 * 40 + 20 * 20) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on circle' );
|
||||
|
||||
test(function(t) {
|
||||
// 1st: ellipse(20px calc(20px) at calc(0px + 50%) calc(0px + 50%))
|
||||
// 2nd: ellipse(20px calc(50px) at calc(0px + 50%) calc(0px + 50%))
|
||||
// 3rd: ellipse(30px 70px at calc(0px + 50%) calc(0px + 50%))
|
||||
// 4th: ellipse(30px 10px at calc(0px + 50%) calc(0px + 50%))
|
||||
var anim =
|
||||
createDiv(t).animate([ { clipPath: 'ellipse(20px calc(10px + 10px))' },
|
||||
{ clipPath: 'ellipse(20px calc(20px + 30px))' },
|
||||
{ clipPath: 'ellipse(30px 70px)' },
|
||||
{ clipPath: 'ellipse(30px 10px)' } ],
|
||||
{ spacing: 'paced(clip-path)' });
|
||||
|
||||
var dist = [ 0,
|
||||
Math.sqrt(30 * 30),
|
||||
Math.sqrt(10 * 10 + 20 * 20),
|
||||
Math.sqrt(60 * 60) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on ellipse' );
|
||||
|
||||
test(function(t) {
|
||||
// 1st: polygon(nonzero, 50px 0px, 100px 50px, 50px 100px, 0px 50px)
|
||||
// 2nd: polygon(nonzero, 40px 0px, 100px 70px, 10px 100px, 0px 70px)
|
||||
// 3rd: polygon(nonzero, 100px 0px, 100px 100px, 10px 80px, 0px 50px)
|
||||
// 4th: polygon(nonzero, 100px 100px, -10px 100px, 20px 80px, 20px 50px)
|
||||
var anim =
|
||||
createDiv(t).animate([ { clipPath: 'polygon(50px 0px, 100px 50px, ' +
|
||||
' 50px 100px, 0px 50px)' },
|
||||
{ clipPath: 'polygon(40px 0px, 100px 70px, ' +
|
||||
' 10px 100px, 0px 70px)' },
|
||||
{ clipPath: 'polygon(100px 0px, 100px 100px, ' +
|
||||
' 10px 80px, 0px 50px)' },
|
||||
{ clipPath: 'polygon(100px 100px, -10px 100px, ' +
|
||||
' 20px 80px, 20px 50px)' } ],
|
||||
{ spacing: 'paced(clip-path)' });
|
||||
|
||||
var dist = [ 0,
|
||||
Math.sqrt(10 * 10 + 20 * 20 + 40 * 40 + 20 * 20),
|
||||
Math.sqrt(60 * 60 + 30 * 30 + 20 * 20 + 20 * 20),
|
||||
Math.sqrt(100 * 100 + 110 * 110 + 10 * 10 + 20 * 20) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on polygon' );
|
||||
|
||||
test(function(t) {
|
||||
// Note: Rounding corners are 4 CSS pair values and
|
||||
// each pair has x & y components.
|
||||
// 1st: inset(5px 5px 5px 5px round 40px 30px 20px 5px / 40px 30px 20px 5px)
|
||||
// 2nd: inset(10px 5px 10px 5px round 50px 60px / 50px 60px)
|
||||
// 3rd: inset(40px 40px 40px 40px round 10px / 10px)
|
||||
// 4th: inset(30px 40px 30px 40px round 20px / 20px)
|
||||
var anim =
|
||||
createDiv(t).animate([ { clipPath: 'inset(5px 5px 5px 5px ' +
|
||||
' round 40px 30px 20px 5px)' },
|
||||
{ clipPath: 'inset(10px 5px round 50px 60px)' },
|
||||
{ clipPath: 'inset(40px 40px round 10px)' },
|
||||
{ clipPath: 'inset(30px 40px round 20px)' } ],
|
||||
{ spacing: 'paced(clip-path)' });
|
||||
|
||||
var dist = [ 0,
|
||||
Math.sqrt(5 * 5 * 2 + (50 - 40) * (50 - 40) * 2 +
|
||||
(60 - 30) * (60 - 30) * 2 +
|
||||
(50 - 20) * (50 - 20) * 2 +
|
||||
(60 - 5) * (60 - 5) * 2),
|
||||
Math.sqrt(30 * 30 * 2 + 35 * 35 * 2 + (50 - 10) * (50 - 10) * 4 +
|
||||
(60 - 10) * (60 - 10) * 4),
|
||||
Math.sqrt(10 * 10 * 2 + (20 - 10) * (20 - 10) * 8) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on inset' );
|
||||
|
||||
</script>
|
||||
</body>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue