mirror of
https://github.com/servo/servo.git
synced 2025-08-12 08:55:32 +01:00
Update web-platform-tests to revision 8a2ceb5f18911302b7a5c1cd2791f4ab50ad4326
This commit is contained in:
Josh Matthews
parent
462c272380
commit
1f531f66ea
5377 changed files with 174916 additions and 84369 deletions
|
|
@ -0,0 +1,108 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Animatable.animate tests in combination with elements in documents
|
||||
without a browsing context</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animatable-animate">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
//
|
||||
// The following tests relate to animations on elements in documents without
|
||||
// a browsing context. This is NOT the same as documents that are not bound to
|
||||
// a document tree.
|
||||
//
|
||||
|
||||
function getXHRDoc(t) {
|
||||
return new Promise(resolve => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '../../resources/xhr-doc.py');
|
||||
xhr.responseType = 'document';
|
||||
xhr.onload = t.step_func(() => {
|
||||
assert_equals(xhr.readyState, xhr.DONE,
|
||||
'Request should complete successfully');
|
||||
assert_equals(xhr.status, 200,
|
||||
'Response should be OK');
|
||||
resolve(xhr.responseXML);
|
||||
});
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
promise_test(t => {
|
||||
return getXHRDoc(t).then(xhrdoc => {
|
||||
const div = xhrdoc.getElementById('test');
|
||||
const anim = div.animate(null);
|
||||
assert_class_string(anim.timeline, 'DocumentTimeline',
|
||||
'Animation should have a timeline');
|
||||
assert_equals(anim.timeline, xhrdoc.timeline,
|
||||
'Animation timeline should be the default document timeline'
|
||||
+ ' of the XHR doc');
|
||||
assert_not_equals(anim.timeline, document.timeline,
|
||||
'Animation timeline should NOT be the same timeline as'
|
||||
+ ' the default document timeline for the current'
|
||||
+ ' document');
|
||||
|
||||
});
|
||||
}, 'Element.animate() creates an animation with the correct timeline'
|
||||
+ ' when called on an element in a document without a browsing context');
|
||||
|
||||
//
|
||||
// The following tests are cross-cutting tests that are not specific to the
|
||||
// Animatable.animate() interface. Instead, they draw on assertions from
|
||||
// various parts of the spec. These assertions are tested in other tests
|
||||
// but are repeated here to confirm that user agents are not doing anything
|
||||
// different in the particular case of document without a browsing context.
|
||||
//
|
||||
|
||||
promise_test(t => {
|
||||
return getXHRDoc(t).then(xhrdoc => {
|
||||
const div = xhrdoc.getElementById('test');
|
||||
const anim = div.animate(null);
|
||||
// Since a document from XHR will not be active by itself, its document
|
||||
// timeline will also be inactive.
|
||||
assert_equals(anim.timeline.currentTime, null,
|
||||
'Document timeline time should be null');
|
||||
});
|
||||
}, 'The timeline associated with an animation trigger on an element in'
|
||||
+ ' a document without a browsing context is inactive');
|
||||
|
||||
promise_test(t => {
|
||||
let anim;
|
||||
return getXHRDoc(t).then(xhrdoc => {
|
||||
const div = xhrdoc.getElementById('test');
|
||||
anim = div.animate(null);
|
||||
anim.timeline = document.timeline;
|
||||
assert_equals(anim.playState, 'pending',
|
||||
'The animation should be initially pending');
|
||||
return waitForAnimationFrames(2);
|
||||
}).then(() => {
|
||||
// Because the element is in a document without a browsing context, it will
|
||||
// not be rendered and hence the user agent will never deem it ready to
|
||||
// animate.
|
||||
assert_equals(anim.playState, 'pending',
|
||||
'The animation should still be pending after replacing'
|
||||
+ ' the document timeline');
|
||||
});
|
||||
}, 'Replacing the timeline of an animation targetting an element in a'
|
||||
+ ' document without a browsing context leaves it in the pending state');
|
||||
|
||||
promise_test(t => {
|
||||
let anim;
|
||||
return getXHRDoc(t).then(xhrdoc => {
|
||||
const div = xhrdoc.getElementById('test');
|
||||
anim = div.animate({ opacity: [ 0, 1 ] }, 1000);
|
||||
anim.timeline = document.timeline;
|
||||
document.body.appendChild(div);
|
||||
assert_equals(getComputedStyle(div).opacity, '0',
|
||||
'Style should be updated');
|
||||
});
|
||||
}, 'Replacing the timeline of an animation targetting an element in a'
|
||||
+ ' document without a browsing context and then adopting that element'
|
||||
+ ' causes it to start updating style');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -25,7 +25,7 @@ interface DocumentTimeline : AnimationTimeline {
|
|||
var idlArray;
|
||||
test(function() {
|
||||
idlArray = new IdlArray();
|
||||
idlArray.add_untested_idls(
|
||||
idlArray.add_idls(
|
||||
document.getElementById('AnimationTimeline-IDL').textContent);
|
||||
idlArray.add_idls(
|
||||
document.getElementById('DocumentTimeline-IDL').textContent);
|
||||
|
|
|
|||
|
|
@ -228,8 +228,6 @@ test(function(t) {
|
|||
assert_equals(effect.composite, "replace", "default composite");
|
||||
assert_equals(effect.iterationComposite, "replace",
|
||||
"default iterationComposite");
|
||||
assert_equals(effect.spacing, "distribute",
|
||||
"default spacing");
|
||||
}, "a KeyframeEffectReadOnly constructed without any " +
|
||||
"KeyframeEffectOptions object");
|
||||
|
||||
|
|
|
|||
|
|
@ -447,15 +447,15 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg)
|
||||
'Animated transform(rotate) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg)
|
||||
'Animated transform(rotate) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg)
|
||||
'Animated transform(rotate) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform(rotate) animation');
|
||||
|
|
@ -471,16 +471,16 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element,
|
||||
// not accumulated.
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity
|
||||
// element, not accumulated.
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
|
|
@ -497,15 +497,15 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1))
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform: [ scale(1), scale(2) ] animation');
|
||||
|
|
@ -521,15 +521,15 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 0, 0)', // scale(1)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2)
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform: scale(2) animation');
|
||||
|
|
@ -546,15 +546,15 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px)
|
||||
'Animated transform list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px)
|
||||
'Animated transform list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px)
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform list animation');
|
||||
|
|
@ -571,16 +571,16 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_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,
|
||||
assert_matrix_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,
|
||||
assert_matrix_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
|
||||
|
|
@ -600,20 +600,20 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// 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,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// '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,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// 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)',
|
||||
|
|
@ -634,20 +634,20 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// 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,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// '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,
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// 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)
|
||||
|
|
@ -668,16 +668,19 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 5, 0)', // (0px + 10px) / 2
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// translateX(none) -> translateX(10px) @ 50%
|
||||
'matrix(1, 0, 0, 1, 5, 0)',
|
||||
'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.
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 0%
|
||||
'matrix(1, 0, 0, 1, 20, 0)',
|
||||
'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
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 50%
|
||||
'matrix(1, 0, 0, 1, 25, 0)',
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform from none to translate');
|
||||
|
||||
|
|
@ -699,16 +702,16 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_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,
|
||||
assert_matrix_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,
|
||||
assert_matrix_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)',
|
||||
|
|
@ -727,7 +730,7 @@ test(function(t) {
|
|||
anim.pause();
|
||||
|
||||
anim.currentTime = 0;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
assert_matrix_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;
|
||||
|
|
|
|||
|
|
@ -258,9 +258,10 @@ test(() => {
|
|||
{done: true},
|
||||
]));
|
||||
assert_frame_lists_equal(effect.getKeyframes(), [
|
||||
{offset: null, computedOffset: 1, easing: 'linear', left: '100px,200px'}
|
||||
{offset: null, computedOffset: 1, easing: 'linear'}
|
||||
]);
|
||||
}, 'Custom iterator with value list in keyframe should give bizarre string representation of list.');
|
||||
}, 'Custom iterator with value list in keyframe should not contain invalid ' +
|
||||
'property value pair of list.');
|
||||
|
||||
test(function(t) {
|
||||
var keyframe = {};
|
||||
|
|
|
|||
|
|
@ -85,76 +85,5 @@ test(function(t) {
|
|||
'changing the animation current time.');
|
||||
}, 'Test setting target from a valid target to another target');
|
||||
|
||||
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.target = null;
|
||||
|
||||
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 falling back to distribute spacing mode after setting null target');
|
||||
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffect(null,
|
||||
[ { marginLeft: '0px' },
|
||||
{ marginLeft: '-20px' },
|
||||
{ marginLeft: '100px' },
|
||||
{ marginLeft: '50px' } ],
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
spacing: 'paced(margin-left)' });
|
||||
var frames = 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 mode if there is no context ' +
|
||||
'element');
|
||||
|
||||
test(function(t) {
|
||||
var div1 = createDiv(t);
|
||||
var div2 = createDiv(t);
|
||||
div1.style.marginLeft = '-20px';
|
||||
div2.style.marginLeft = '-50px';
|
||||
var child1 = document.createElement('div');
|
||||
var child2 = document.createElement('div');
|
||||
div1.appendChild(child1);
|
||||
div2.appendChild(child2);
|
||||
// body
|
||||
// / \
|
||||
// div1 div2
|
||||
// (-20px) (-50px)
|
||||
// | |
|
||||
// child1 child2
|
||||
var anim = child1.animate([ { marginLeft: '0px' },
|
||||
{ marginLeft: 'inherit' },
|
||||
{ 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[1].computedOffset, cumDist[1] / cumDist[3],
|
||||
'2nd frame offset');
|
||||
assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
|
||||
'3rd frame offset');
|
||||
|
||||
anim.effect.target = child2;
|
||||
frames = anim.effect.getKeyframes();
|
||||
cumDist = [0, 50, 200, 250];
|
||||
assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
|
||||
'2nd frame offset after setting a new target');
|
||||
assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
|
||||
'3rd frame offset after setting a new target');
|
||||
}, 'Test paced spacing mode after setting a new target');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect spacing attribute tests</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-spacing">
|
||||
<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_throws(new TypeError, function() {
|
||||
anim.effect.spacing = '';
|
||||
});
|
||||
}, 'Test throwing TypeError if using empty string');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
assert_throws(new TypeError, function() {
|
||||
anim.effect.spacing = 'dist';
|
||||
});
|
||||
}, 'Test throwing TypeError if not using the correct keyword');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'paced(A)';
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a unrecognized property');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'paced(--bg-color)';
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using CSS variables');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'paced(animation-duration)';
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a non-animatable ' +
|
||||
'property');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'distribute';
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test spacing value if setting distribute');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'paced(transform)';
|
||||
assert_equals(anim.effect.spacing, 'paced(transform)', 'spacing mode');
|
||||
}, 'Test spacing value if setting paced');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -1,239 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffectReadOnly spacing attribute tests</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffectreadonly-spacing">
|
||||
<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) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: '' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using empty string');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'dist' });
|
||||
});
|
||||
}, 'Test throwing TypeError if not using the correct keyword');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: ' paced(margin-left)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if adding leading spaces');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(margin-left) ' });
|
||||
});
|
||||
}, 'Test throwing TypeError if adding trailing spaces');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced( margin-left)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if adding leading spaces before the ' +
|
||||
'paced property');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(margin-left )' });
|
||||
});
|
||||
}, 'Test throwing TypeError if adding trailing spaces after the ' +
|
||||
'paced property');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced()' });
|
||||
});
|
||||
}, 'Test throwing TypeError if these is no paced property');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(.margin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'a period');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(1margin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'a number');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(\\)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'an invalid escape');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(\\\fmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'an invalid escape (FF)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(\\\rmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'an invalid escape (CR)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(\\\nmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'an invalid escape (LF)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(- )' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'a leading minus and an invalid name-start code point');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(-\\)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'a leading minus and an invalid escape');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(-\\\fmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'a leading minus and an invalid escape (FF)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(-\\\rmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'a leading minus and an invalid escape (CR)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(-\\\nmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident started string with ' +
|
||||
'a leading minus and an invalid escape (LF)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(--\\)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
|
||||
'escape');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(--\\\fmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
|
||||
'escape (FF)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(--\\\rmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
|
||||
'escape (CR)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(--\\\nmargin)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
|
||||
'escape (LF)');
|
||||
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
createDiv(t).animate(null, { spacing: 'paced(margin.left)' });
|
||||
});
|
||||
}, 'Test throwing TypeError if using a non-ident string with an invalid name ' +
|
||||
'code point');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(A)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a unrecognized property');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(\\.margin)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
|
||||
'which starts with a valid escape (Full stop)');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(\\ margin)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
|
||||
'which starts with a valid escape (white space)');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(_margin)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
|
||||
'which starts with a valid escape (low line)');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(-_margin)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
|
||||
'which starts with a minus and a low line');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(-\\.margin)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a unrecognized property ' +
|
||||
'which starts with a minus and a valid escape');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(--bg-color)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using CSS variables');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(animation)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a non-animatable ' +
|
||||
'shorthand property');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null,
|
||||
{ spacing: 'paced(animation-duration)' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a non-animatable ' +
|
||||
'property');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test default value of spacing');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'distribute' });
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test spacing value if setting distribute');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null, { spacing: 'paced(margin-left)' });
|
||||
assert_equals(anim.effect.spacing, 'paced(margin-left)', 'spacing mode');
|
||||
}, 'Test spacing value if setting paced');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue