mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
Update web-platform-tests to revision 1e42017386ce1eaeed4925fb8bc7f5417752019a
This commit is contained in:
Ms2ger
parent
5574a4e4c8
commit
a972fdb353
2003 changed files with 16788 additions and 3140 deletions
|
|
@ -0,0 +1,328 @@
|
|||
<!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');
|
||||
|
||||
// Bug 1276193: Test for mixing percent and pixel values.
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Web Animations API: DocumentTimeline tests</title>
|
||||
<title>Default document timeline tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#the-documents-default-timeline">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
|
|
@ -16,15 +17,9 @@ test(function() {
|
|||
'document.timeline returns a different object for each document');
|
||||
assert_not_equals(iframe.contentDocument.timeline, null,
|
||||
'document.timeline on an iframe is not null');
|
||||
},
|
||||
'document.timeline identity tests',
|
||||
{
|
||||
help: 'http://dev.w3.org/fxtf/web-animations/#the-document-timeline',
|
||||
assert: [ 'Each document has a timeline called the document timeline' ],
|
||||
author: 'Brian Birtles'
|
||||
});
|
||||
}, 'document.timeline identity tests');
|
||||
|
||||
async_test(function(t) {
|
||||
promise_test(function(t) {
|
||||
assert_true(document.timeline.currentTime > 0,
|
||||
'document.timeline.currentTime is positive');
|
||||
// document.timeline.currentTime should be set even before document
|
||||
|
|
@ -40,31 +35,14 @@ async_test(function(t) {
|
|||
// We can't just compare document.timeline.currentTime to
|
||||
// window.performance.now() because currentTime is only updated on a sample
|
||||
// so we use requestAnimationFrame instead.
|
||||
window.requestAnimationFrame(t.step_func(function(rafTime) {
|
||||
return window.requestAnimationFrame(t.step_func(function(rafTime) {
|
||||
assert_equals(document.timeline.currentTime, rafTime,
|
||||
'document.timeline.currentTime matches' +
|
||||
' requestAnimationFrame time');
|
||||
t.done();
|
||||
}));
|
||||
},
|
||||
'document.timeline.currentTime value tests',
|
||||
{
|
||||
help: [
|
||||
'http://dev.w3.org/fxtf/web-animations/#the-global-clock',
|
||||
'http://dev.w3.org/fxtf/web-animations/#the-document-timeline'
|
||||
],
|
||||
assert: [
|
||||
'The global clock is a source of monotonically increasing time values',
|
||||
'The time values of the document timeline are calculated as a fixed' +
|
||||
' offset from the global clock',
|
||||
'the zero time corresponds to the navigationStart moment',
|
||||
'the time value of each document timeline must be equal to the time ' +
|
||||
'passed to animation frame request callbacks for that browsing context'
|
||||
],
|
||||
author: 'Brian Birtles'
|
||||
});
|
||||
}, 'document.timeline.currentTime value tests');
|
||||
|
||||
async_test(function(t) {
|
||||
promise_test(function(t) {
|
||||
var valueAtStart = document.timeline.currentTime;
|
||||
var timeAtStart = window.performance.now();
|
||||
while (window.performance.now() - timeAtStart < 100) {
|
||||
|
|
@ -72,18 +50,10 @@ async_test(function(t) {
|
|||
}
|
||||
assert_equals(document.timeline.currentTime, valueAtStart,
|
||||
'document.timeline.currentTime does not change within a script block');
|
||||
window.requestAnimationFrame(t.step_func(function() {
|
||||
return window.requestAnimationFrame(t.step_func(function() {
|
||||
assert_true(document.timeline.currentTime > valueAtStart,
|
||||
'document.timeline.currentTime increases between script blocks');
|
||||
t.done();
|
||||
}));
|
||||
},
|
||||
'document.timeline.currentTime liveness tests',
|
||||
{
|
||||
help: 'http://dev.w3.org/fxtf/web-animations/#script-execution-and-live-updates-to-the-model',
|
||||
assert: [ 'The value returned by the currentTime attribute of a' +
|
||||
' document timeline will not change within a script block' ],
|
||||
author: 'Brian Birtles'
|
||||
});
|
||||
}, 'document.timeline.currentTime liveness tests');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,13 @@
|
|||
<script src="/resources/WebIDLParser.js"></script>
|
||||
<script src="/resources/idlharness.js"></script>
|
||||
<div id="log"></div>
|
||||
<script type="text/plain" id="DocumentTimeline-IDL">
|
||||
<script type="text/plain" id="AnimationTimeline-IDL">
|
||||
interface AnimationTimeline {
|
||||
readonly attribute double? currentTime;
|
||||
};
|
||||
|
||||
</script>
|
||||
<script type="text/plain" id="DocumentTimeline-IDL">
|
||||
[Constructor (DOMHighResTimeStamp originTime)]
|
||||
interface DocumentTimeline : AnimationTimeline {
|
||||
};
|
||||
</script>
|
||||
|
|
@ -20,6 +22,8 @@ interface DocumentTimeline : AnimationTimeline {
|
|||
var idlArray;
|
||||
test(function() {
|
||||
idlArray = new IdlArray();
|
||||
idlArray.add_untested_idls(
|
||||
document.getElementById('AnimationTimeline-IDL').textContent);
|
||||
idlArray.add_idls(
|
||||
document.getElementById('DocumentTimeline-IDL').textContent);
|
||||
idlArray.add_objects( { DocumentTimeline: ['document.timeline'] } );
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>DocumentTimeline constructor tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#the-documenttimeline-interface">
|
||||
<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 timeline = new DocumentTimeline(0);
|
||||
|
||||
assert_times_equal(timeline.currentTime, document.timeline.currentTime);
|
||||
}, 'zero origin time');
|
||||
|
||||
test(function(t) {
|
||||
var timeline = new DocumentTimeline(10 * MS_PER_SEC);
|
||||
|
||||
assert_times_equal(timeline.currentTime,
|
||||
(document.timeline.currentTime - 10 * MS_PER_SEC));
|
||||
}, 'positive origin time');
|
||||
|
||||
test(function(t) {
|
||||
var timeline = new DocumentTimeline(-10 * MS_PER_SEC);
|
||||
|
||||
assert_times_equal(timeline.currentTime,
|
||||
(document.timeline.currentTime + 10 * MS_PER_SEC));
|
||||
}, 'negative origin time');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -85,5 +85,76 @@ 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,237 @@
|
|||
<!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');
|
||||
|
||||
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');
|
||||
|
||||
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