Update web-platform-tests and CSS tests.

- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger 2017-02-06 11:06:12 +01:00
parent fb4f421c8b
commit 296fa2512b
21852 changed files with 2080936 additions and 892894 deletions

View file

@ -66,30 +66,17 @@ async_test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] },
{ duration: 100000, endDelay: 30000 });
var finishedTimelineTime;
anim.finished.then(function() {
finishedTimelineTime = anim.timeline.currentTime;
});
var receivedEvents = [];
anim.onfinish = function(event) {
receivedEvents.push(event);
}
anim.ready.then(function() {
anim.currentTime = 110000; // during endDelay
anim.onfinish = t.step_func(function(event) {
assert_unreached('onfinish event should not be fired during endDelay');
});
return waitForAnimationFrames(2);
}).then(t.step_func(function() {
assert_equals(receivedEvents.length, 0,
'onfinish event is should not be fired' +
'when currentTime is during endDelay');
anim.onfinish = t.step_func(function(event) {
t.done();
});
anim.currentTime = 130000; // after endTime
return waitForAnimationFrames(2);
})).then(t.step_func_done(function() {
assert_equals(receivedEvents.length, 1, 'length of array should be one');
assert_equals(receivedEvents[0].timelineTime, finishedTimelineTime,
'receivedEvents[0].timelineTime should equal to the animation timeline '
+ 'when finished promise is resolved');
}));
}, 'onfinish event is fired currentTime is after endTime');

View file

@ -0,0 +1,47 @@
<!doctype html>
<meta charset=utf-8>
<title>KeyframeEffect.composite tests</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-composite">
<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(null);
assert_equals(anim.effect.composite, 'replace',
'The default value should be replace');
}, 'Default value');
test(function(t) {
var anim = createDiv(t).animate(null);
anim.effect.composite = 'add';
assert_equals(anim.effect.composite, 'add',
'The effect composite value should be replaced');
}, 'Change composite value');
test(function(t) {
var anim = createDiv(t).animate({ left: '10px' });
anim.effect.composite = 'add';
var keyframes = anim.effect.getKeyframes();
assert_equals(keyframes[0].composite, undefined,
'unspecified keyframe composite value should be absent even ' +
'if effect composite is set');
}, 'Unspecified keyframe composite value when setting effect composite');
test(function(t) {
var anim = createDiv(t).animate({ left: '10px', composite: 'replace' });
anim.effect.composite = 'add';
var keyframes = anim.effect.getKeyframes();
assert_equals(keyframes[0].composite, 'replace',
'specified keyframe composite value should not be overridden ' +
'by setting effect composite');
}, 'Specified keyframe composite value when setting effect composite');
</script>

View file

@ -110,7 +110,7 @@ test(function(t) {
var effect = new KeyframeEffectReadOnly(target, {
left: ["10px", "20px"]
}, { composite: composite });
assert_equals(effect.getKeyframes()[0].composite, composite,
assert_equals(effect.getKeyframes()[0].composite, undefined,
"resulting composite for '" + composite + "'");
});
gBadCompositeValueTests.forEach(function(composite) {
@ -120,8 +120,8 @@ test(function(t) {
}, { composite: composite });
});
});
}, "composite values are parsed correctly when passed to the " +
"KeyframeEffectReadOnly constructor in KeyframeTimingOptions");
}, "composite value is absent if the composite operation specified on the " +
"keyframe effect is being used");
gPropertyIndexedKeyframesTests.forEach(function(subtest) {
test(function(t) {

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffect copy constructor tests</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-keyframeeffect-source">
<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 effect = new KeyframeEffectReadOnly(createDiv(t), null);
assert_equals(effect.constructor.name, 'KeyframeEffectReadOnly');
assert_equals(effect.timing.constructor.name,
'AnimationEffectTimingReadOnly');
// Make a mutable copy
var copiedEffect = new KeyframeEffect(effect);
assert_equals(copiedEffect.constructor.name, 'KeyframeEffect');
assert_equals(copiedEffect.timing.constructor.name, 'AnimationEffectTiming');
}, 'Test mutable copy from a KeyframeEffectReadOnly source');
</script>
</body>

View file

@ -9,6 +9,26 @@
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
var anim =
div.animate({ alignContent: ['flex-start', 'flex-end'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).alignContent, 'flex-end',
'Animated align-content style at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).alignContent, 'flex-start',
'Animated align-content style at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).alignContent, 'flex-end',
'Animated align-content style at 50s of the third iteration');
}, 'iterationComposite of discrete type animation (align-content)');
test(function(t) {
var div = createDiv(t);
var anim =
@ -541,9 +561,35 @@ test(function(t) {
test(function(t) {
var div = createDiv(t);
// The transform list whose order is mismatched is compounded,
// so below animation is the same as;
// from matrix(2, 0, 0, 2, 0, 0) to matrix(3, 0, 0, 3, 30, 0)
var anim =
div.animate({ transform: ['matrix(2, 0, 0, 2, 0, 0)',
'matrix(3, 0, 0, 3, 30, 0)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
'matrix(2.5, 0, 0, 2.5, 15, 0)',
'Animated transform of matrix function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).transform,
// scale(2) + (scale(3-1)*2) + translateX(30px)*2
'matrix(6, 0, 0, 6, 60, 0)',
'Animated transform of matrix function at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
// from: matrix(6, 0, 0, 6, 60, 0)
// to: matrix(7, 0, 0, 7, 90, 0)
// = scale(3) + (scale(3-1)*2) + translateX(30px)*3
'matrix(6.5, 0, 0, 6.5, 75, 0)',
'Animated transform of matrix function at 50s of the third iteration');
}, 'iterationComposite of transform of matrix function');
test(function(t) {
var div = createDiv(t);
var anim =
div.animate({ transform: ['translateX(0px) scale(2)',
'scale(3) translateX(10px)'] },
@ -555,25 +601,29 @@ test(function(t) {
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
'matrix(2.5, 0, 0, 2.5, 15, 0)', // scale(2.5) (0px + 30px*2) / 2
// Interpolate between matrix(2, 0, 0, 2, 0, 0) = translateX(0px) scale(2)
// and matrix(3, 0, 0, 3, 30, 0) = scale(3) translateX(10px)
'matrix(2.5, 0, 0, 2.5, 15, 0)',
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).transform,
'matrix(4, 0, 0, 4, 60, 0)', // scale(2+(3-2)*2) (0px + 30px*2)
// 'from' and 'to' value are mismatched, so accumulate
// matrix(2, 0, 0, 2, 0, 0) onto matrix(3, 0, 0, 3, 30, 0) * 2
// = scale(2) + (scale(3-1)*2) + translateX(30px)*2
'matrix(6, 0, 0, 6, 60, 0)',
'Animated transform list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
'matrix(5.5, 0, 0, 5.5, 135, 0)', // scale(4+7)/2 (60px + 210px)
// Interpolate between matrix(6, 0, 0, 6, 60, 0)
// and matrix(7, 0, 0, 7, 210, 0) = scale(7) translate(30px)
'matrix(6.5, 0, 0, 6.5, 135, 0)',
'Animated transform list at 50s of the third iteration');
}, 'iterationComposite of transform list animation whose order is mismatched');
test(function(t) {
var div = createDiv(t);
// Even if each transform list does not have functions which exist in
// other pair of the list, we don't fill any missing functions at all,
// it's just computed as compounded matrices
// Below animation is the same as;
// from matrix(1, 0, 0, 1, 0, 0) to matrix(2, 0, 0, 2, 20, 0)
// other pair of the list, we don't fill any missing functions at all.
var anim =
div.animate({ transform: ['translateX(0px)',
'scale(2) translateX(10px)'] },
@ -585,17 +635,110 @@ test(function(t) {
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
'matrix(1.5, 0, 0, 1.5, 10, 0)', // scale(1.5) (0px + 10px*2) / 2
// Interpolate between matrix(1, 0, 0, 1, 0, 0) = translateX(0px)
// and matrix(2, 0, 0, 2, 20, 0) = scale(2) translateX(10px)
'matrix(1.5, 0, 0, 1.5, 10, 0)',
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).transform,
'matrix(3, 0, 0, 3, 40, 0)', // scale(1+(2-1)*2) (0px + 20px*2)
// 'from' and 'to' value are mismatched, so accumulate
// matrix(1, 0, 0, 1, 0, 0) onto matrix(2, 0, 0, 2, 20, 0) * 2
// = scale(1) + (scale(2-1)*2) + translateX(20px)*2
'matrix(3, 0, 0, 3, 40, 0)',
'Animated transform list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
'matrix(3.5, 0, 0, 3.5, 80, 0)', // scale(3+4)/2 (40px + 20px)
// Interpolate between matrix(3, 0, 0, 3, 40, 0)
// and matrix(4, 0, 0, 4, 120, 0) =
// scale(2 + (2-1)*2) translate(10px * 3)
'matrix(3.5, 0, 0, 3.5, 80, 0)',
'Animated transform list at 50s of the third iteration');
}, 'iterationComposite of transform list animation whose order is mismatched');
}, 'iterationComposite of transform list animation whose order is mismatched ' +
'because of missing functions');
test(function(t) {
var div = createDiv(t);
var anim =
div.animate({ transform: ['none',
'translateX(10px)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 5, 0)', // (0px + 10px) / 2
'Animated transform list at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 0, 0)', // 'none' overrides any transforms.
'Animated transform list at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 15, 0)', // (0px + 10px*2)/2
'Animated transform list at 50s of the third iteration');
}, 'iterationComposite of transform from none to translate');
test(function(t) {
var div = createDiv(t);
var anim =
div.animate({ transform: ['matrix3d(1, 0, 0, 0, ' +
'0, 1, 0, 0, ' +
'0, 0, 1, 0, ' +
'0, 0, 30, 1)',
'matrix3d(1, 0, 0, 0, ' +
'0, 1, 0, 0, ' +
'0, 0, 1, 0, ' +
'0, 0, 50, 1)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 40, 1)',
'Animated transform of matrix3d function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_equals(getComputedStyle(div).transform,
// translateZ(30px) + (translateZ(50px)*2)
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)',
'Animated transform of matrix3d function at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_equals(getComputedStyle(div).transform,
// from: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)
// to: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 150, 1)
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 140, 1)',
'Animated transform of matrix3d function at 50s of the third iteration');
}, 'iterationComposite of transform of matrix3d function');
test(function(t) {
var div = createDiv(t);
var anim =
div.animate({ transform: ['rotate3d(1, 1, 0, 0deg)',
'rotate3d(1, 1, 0, 90deg)'] },
{ duration: 100 * MS_PER_SEC,
easing: 'linear',
iterations: 10,
iterationComposite: 'accumulate' });
anim.pause();
anim.currentTime = 0;
assert_equals(getComputedStyle(div).transform,
'matrix(1, 0, 0, 1, 0, 0)', // Actually not rotated at all.
'Animated transform of rotate3d function at 50s of the first iteration');
anim.currentTime = anim.effect.timing.duration * 2;
assert_matrix_equals(getComputedStyle(div).transform,
rotate3dToMatrix3d(1, 1, 0, Math.PI), // 180deg
'Animated transform of rotate3d function at 0s of the third iteration');
anim.currentTime += anim.effect.timing.duration / 2;
assert_matrix_equals(getComputedStyle(div).transform,
rotate3dToMatrix3d(1, 1, 0, 225 * Math.PI / 180), //((270 + 180) * 0.5)deg
'Animated transform of rotate3d function at 50s of the third iteration');
}, 'iterationComposite of transform of rotate3d function');
test(function(t) {
var div = createDiv(t);

View file

@ -0,0 +1,94 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffectReadOnly copy constructor tests</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly-source">
<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 effect = new KeyframeEffectReadOnly(createDiv(t), null);
var copiedEffect = new KeyframeEffectReadOnly(effect);
assert_equals(copiedEffect.target, effect.target, 'same target');
}, 'Test copied keyframeEffectReadOnly has the same target');
test(function(t) {
var effect =
new KeyframeEffectReadOnly(null,
[ { marginLeft: '0px' },
{ marginLeft: '-20px', easing: 'ease-in',
offset: 0.1 },
{ marginLeft: '100px', easing: 'ease-out' },
{ marginLeft: '50px' } ],
{ spacing: 'paced(margin-left)' });
var copiedEffect = new KeyframeEffectReadOnly(effect);
var KeyframesA = effect.getKeyframes();
var KeyframesB = copiedEffect.getKeyframes();
assert_equals(KeyframesA.length, KeyframesB.length, 'same keyframes length');
for (var i = 0; i < KeyframesA.length; ++i) {
assert_equals(KeyframesA[i].offset, KeyframesB[i].offset,
'Keyframe ' + i + ' has the same offset');
assert_equals(KeyframesA[i].computedOffset, KeyframesB[i].computedOffset,
'keyframe ' + i + ' has the same computedOffset');
assert_equals(KeyframesA[i].easing, KeyframesB[i].easing,
'keyframe ' + i + ' has the same easing');
assert_equals(KeyframesA[i].composite, KeyframesB[i].composite,
'keyframe ' + i + ' has the same composite');
assert_true(!!KeyframesA[i].marginLeft,
'original keyframe ' + i + ' has the valid property value');
assert_true(!!KeyframesB[i].marginLeft,
'new keyframe ' + i + ' has the valid property value');
assert_equals(KeyframesA[i].marginLeft, KeyframesB[i].marginLeft,
'keyframe ' + i + ' has the same property value pair');
}
}, 'Test copied keyframeEffectReadOnly has the same keyframes');
test(function(t) {
var effect = new KeyframeEffectReadOnly(null, null,
{ spacing: 'paced(margin-left)',
iterationComposite: 'accumulate' });
var copiedEffect = new KeyframeEffectReadOnly(effect);
assert_equals(copiedEffect.spacing, effect.spacing, 'same spacing');
assert_equals(copiedEffect.iterationComposite, effect.iterationComposite,
'same iterationCompositeOperation');
assert_equals(copiedEffect.composite, effect.composite,
'same compositeOperation');
}, 'Test copied keyframeEffectReadOnly has the same keyframeEffectOptions');
test(function(t) {
var effect = new KeyframeEffectReadOnly(null, null,
{ duration: 100 * MS_PER_SEC,
delay: -1 * MS_PER_SEC,
endDelay: 2 * MS_PER_SEC,
fill: 'forwards',
iterationStart: 2,
iterations: 20,
easing: 'ease-out',
direction: 'alternate' } );
var copiedEffect = new KeyframeEffectReadOnly(effect);
var timingA = effect.timing;
var timingB = copiedEffect.timing;
assert_not_equals(timingA, timingB, 'different timing objects');
assert_equals(timingA.delay, timingB.delay, 'same delay');
assert_equals(timingA.endDelay, timingB.endDelay, 'same endDelay');
assert_equals(timingA.fill, timingB.fill, 'same fill');
assert_equals(timingA.iterationStart, timingB.iterationStart,
'same iterationStart');
assert_equals(timingA.iterations, timingB.iterations, 'same iterations');
assert_equals(timingA.duration, timingB.duration, 'same duration');
assert_equals(timingA.direction, timingB.direction, 'same direction');
assert_equals(timingA.easing, timingB.easing, 'same easing');
}, 'Test copied keyframeEffectReadOnly has the same timing content');
</script>
</body>