mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
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
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
|
|
@ -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>
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue