mirror of
https://github.com/servo/servo.git
synced 2025-08-11 08:25:32 +01:00
Update web-platform-tests to revision 0a518aaff73532a26e175789f7e75fa99593ac64
This commit is contained in:
Ms2ger
parent
9c172f49d0
commit
abcd4b654f
92 changed files with 2869 additions and 642 deletions
|
|
@ -0,0 +1,136 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="/resources/testharness.css">
|
||||
<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,120 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Tests for not animatable properties</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#not-animatable-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({ display: [ 'inline', 'inline-block' ] }, 1000);
|
||||
|
||||
assert_equals(anim.effect.getFrames().length, 0,
|
||||
'Animation specified using property-indexed notation but'
|
||||
+ ' consisting of only non-animatable properties should not'
|
||||
+ ' contain any keyframes');
|
||||
}, '\'display\' property cannot be animated using property-indexed notation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate([ { display: 'inline' }, { display: 'inline-block' } ],
|
||||
1000);
|
||||
|
||||
assert_equals(anim.effect.getFrames().length, 2,
|
||||
'Animation specified using a keyframe sequence where each'
|
||||
+ ' keyframe contains only non-animatable properties should'
|
||||
+ ' return an equal number of (empty) keyframes');
|
||||
assert_false(anim.effect.getFrames()[0].hasOwnProperty('display'),
|
||||
'Initial keyframe should not have the \'display\' property');
|
||||
assert_false(anim.effect.getFrames()[1].hasOwnProperty('display'),
|
||||
'Final keyframe should not have the \'display\' property');
|
||||
}, '\'display\' property cannot be animated using a keyframe sequence');
|
||||
|
||||
test(function(t) {
|
||||
var properties = {
|
||||
// CSS Animations properties
|
||||
animation: [ 'anim 1s', 'anim 2s' ],
|
||||
animationName: [ 'abc', 'xyz' ],
|
||||
animationTimingFunction: [ 'ease', 'steps(2)' ],
|
||||
animationDelay: [ '1s', '2s' ],
|
||||
animationIterationCount: [ 1, 2 ],
|
||||
animationDirection: [ 'normal', 'reverse' ],
|
||||
animationFillMode: [ 'forwards', 'backwards' ],
|
||||
animationPlayState: [ 'paused', 'running' ],
|
||||
|
||||
// CSS Transitions properties
|
||||
transition: [ 'all 1s', 'all 2s' ],
|
||||
transitionDelay: [ '1s', '2s' ],
|
||||
transitionDuration: [ '1s', '2s' ],
|
||||
transitionProperty: [ 'all', 'opacity' ],
|
||||
transitionTimingFunction: [ 'ease', 'ease-out' ]
|
||||
};
|
||||
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate(properties, 1000);
|
||||
|
||||
assert_equals(anim.effect.getFrames().length, 0,
|
||||
'Animation specified using property-indexed notation but'
|
||||
+ ' consisting of only non-animatable properties should not'
|
||||
+ ' contain any keyframes');
|
||||
}, 'CSS animations and CSS transitions properties cannot be animated using'
|
||||
+ ' property-indexed notation');
|
||||
|
||||
test(function(t) {
|
||||
var frames = [
|
||||
{
|
||||
animation: 'anim 1s',
|
||||
animationName: 'abc',
|
||||
animationTimingFunction: 'ease',
|
||||
animationDelay: '1s',
|
||||
animationIterationCount: 1,
|
||||
animationDirection: 'normal',
|
||||
animationFillMode: 'forwards',
|
||||
animationPlayState: 'paused',
|
||||
transition: 'all 1s',
|
||||
transitionDelay: '1s',
|
||||
transitionDuration: '1s',
|
||||
transitionProperty: 'opacity',
|
||||
transitionTimingFunction: 'ease'
|
||||
},
|
||||
{
|
||||
animation: 'anim 2s',
|
||||
animationName: 'xyz',
|
||||
animationTimingFunction: 'steps(2)',
|
||||
animationDelay: '2s',
|
||||
animationIterationCount: 2,
|
||||
animationDirection: 'reverse',
|
||||
animationFillMode: 'backwards',
|
||||
animationPlayState: 'running',
|
||||
transition: 'all 2s',
|
||||
transitionDelay: '2s',
|
||||
transitionDuration: '2s',
|
||||
transitionProperty: 'all',
|
||||
transitionTimingFunction: 'ease-out'
|
||||
}
|
||||
];
|
||||
var defaultKeyframeProperties = [ 'computedOffset', 'easing', 'offset' ];
|
||||
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate(frames, 1000);
|
||||
|
||||
assert_equals(anim.effect.getFrames().length, 2,
|
||||
'Animation specified using a keyframe sequence where each'
|
||||
+ ' keyframe contains only non-animatable properties should'
|
||||
+ ' return an equal number of (empty) keyframes');
|
||||
assert_array_equals(Object.keys(anim.effect.getFrames()[0]),
|
||||
defaultKeyframeProperties,
|
||||
'Initial keyframe should not contain any properties other'
|
||||
+ ' than the default keyframe properties');
|
||||
assert_array_equals(Object.keys(anim.effect.getFrames()[1]),
|
||||
defaultKeyframeProperties,
|
||||
'Final keyframe should not contain any properties other'
|
||||
+ ' than the default keyframe properties');
|
||||
}, 'CSS animations and CSS transitions properties cannot be animated using'
|
||||
+ ' a sequence of keyframes');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!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>
|
||||
<link rel="stylesheet" href="/resources/testharness.css">
|
||||
<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');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue