mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1398038 - Use single quotes in keyframe-*.js; r=hiro 

This is the generally preferred JS style these days and what we have been using
in more recent tests.

MozReview-Commit-ID: 9kir1D2Imqe

--HG--
extra : rebase_source : 5285761516abd2a902549bc98b8d3d7f7dfdc3eb
This commit is contained in:
Brian Birtles 2017-10-18 14:12:16 +09:00
Родитель 0645c4b964
Коммит 45d82398fa
2 изменённых файлов: 444 добавлений и 444 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

884
testing/web-platform/tests/web-animations/resources/keyframe-tests.js
Просмотреть файл

@ -1,4 +1,4 @@
"use strict"; 'use strict';
// ============================== // ==============================
// //
@ -12,15 +12,15 @@
// ------------------------------ // ------------------------------
const gGoodKeyframeCompositeValueTests = [ const gGoodKeyframeCompositeValueTests = [
"replace", "add", "accumulate", undefined 'replace', 'add', 'accumulate', undefined
]; ];
const gGoodOptionsCompositeValueTests = [ const gGoodOptionsCompositeValueTests = [
"replace", "add", "accumulate" 'replace', 'add', 'accumulate'
]; ];
const gBadCompositeValueTests = [ const gBadCompositeValueTests = [
"unrecognised", "replace ", "Replace", null 'unrecognised', 'replace ', 'Replace', null
]; ];
// ------------------------------ // ------------------------------
@ -34,409 +34,409 @@ const gEmptyKeyframeListTests = [
]; ];
const gPropertyIndexedKeyframesTests = [ const gPropertyIndexedKeyframesTests = [
{ desc: "a one property two value property-indexed keyframes specification", { desc: 'a one property two value property-indexed keyframes specification',
input: { left: ["10px", "20px"] }, input: { left: ['10px', '20px'] },
output: [{ offset: null, computedOffset: 0, easing: "linear", output: [{ offset: null, computedOffset: 0, easing: 'linear',
left: "10px" }, left: '10px' },
{ offset: null, computedOffset: 1, easing: "linear", { offset: null, computedOffset: 1, easing: 'linear',
left: "20px" }] }, left: '20px' }] },
{ desc: "a one shorthand property two value property-indexed keyframes" { desc: 'a one shorthand property two value property-indexed keyframes'
+ " specification", + ' specification',
input: { margin: ["10px", "10px 20px 30px 40px"] }, input: { margin: ['10px', '10px 20px 30px 40px'] },
output: [{ offset: null, computedOffset: 0, easing: "linear", output: [{ offset: null, computedOffset: 0, easing: 'linear',
margin: "10px" }, margin: '10px' },
{ offset: null, computedOffset: 1, easing: "linear", { offset: null, computedOffset: 1, easing: 'linear',
margin: "10px 20px 30px 40px" }] }, margin: '10px 20px 30px 40px' }] },
{ desc: "a two property (one shorthand and one of its longhand components)" { desc: 'a two property (one shorthand and one of its longhand components)'
+ " two value property-indexed keyframes specification", + ' two value property-indexed keyframes specification',
input: { marginTop: ["50px", "60px"], input: { marginTop: ['50px', '60px'],
margin: ["10px", "10px 20px 30px 40px"] }, margin: ['10px', '10px 20px 30px 40px'] },
output: [{ offset: null, computedOffset: 0, easing: "linear", output: [{ offset: null, computedOffset: 0, easing: 'linear',
marginTop: "50px", margin: "10px" }, marginTop: '50px', margin: '10px' },
{ offset: null, computedOffset: 1, easing: "linear", { offset: null, computedOffset: 1, easing: 'linear',
marginTop: "60px", margin: "10px 20px 30px 40px" }] }, marginTop: '60px', margin: '10px 20px 30px 40px' }] },
{ desc: "a two property two value property-indexed keyframes specification", { desc: 'a two property two value property-indexed keyframes specification',
input: { left: ["10px", "20px"], input: { left: ['10px', '20px'],
top: ["30px", "40px"] }, top: ['30px', '40px'] },
output: [{ offset: null, computedOffset: 0, easing: "linear", output: [{ offset: null, computedOffset: 0, easing: 'linear',
left: "10px", top: "30px" }, left: '10px', top: '30px' },
{ offset: null, computedOffset: 1, easing: "linear", { offset: null, computedOffset: 1, easing: 'linear',
left: "20px", top: "40px" }] }, left: '20px', top: '40px' }] },
{ desc: "a two property property-indexed keyframes specification with" { desc: 'a two property property-indexed keyframes specification with'
+ " different numbers of values", + ' different numbers of values',
input: { left: ["10px", "20px", "30px"], input: { left: ['10px', '20px', '30px'],
top: ["40px", "50px"] }, top: ['40px', '50px'] },
output: [{ offset: null, computedOffset: 0.0, easing: "linear", output: [{ offset: null, computedOffset: 0.0, easing: 'linear',
left: "10px", top: "40px" }, left: '10px', top: '40px' },
{ offset: null, computedOffset: 0.5, easing: "linear", { offset: null, computedOffset: 0.5, easing: 'linear',
left: "20px" }, left: '20px' },
{ offset: null, computedOffset: 1.0, easing: "linear", { offset: null, computedOffset: 1.0, easing: 'linear',
left: "30px", top: "50px" }] }, left: '30px', top: '50px' }] },
{ desc: "a property-indexed keyframes specification with an invalid value", { desc: 'a property-indexed keyframes specification with an invalid value',
input: { left: ["10px", "20px", "30px", "40px", "50px"], input: { left: ['10px', '20px', '30px', '40px', '50px'],
top: ["15px", "25px", "invalid", "45px", "55px"] }, top: ['15px', '25px', 'invalid', '45px', '55px'] },
output: [{ offset: null, computedOffset: 0.00, easing: "linear", output: [{ offset: null, computedOffset: 0.00, easing: 'linear',
left: "10px", top: "15px" }, left: '10px', top: '15px' },
{ offset: null, computedOffset: 0.25, easing: "linear", { offset: null, computedOffset: 0.25, easing: 'linear',
left: "20px", top: "25px" }, left: '20px', top: '25px' },
{ offset: null, computedOffset: 0.50, easing: "linear", { offset: null, computedOffset: 0.50, easing: 'linear',
left: "30px" }, left: '30px' },
{ offset: null, computedOffset: 0.75, easing: "linear", { offset: null, computedOffset: 0.75, easing: 'linear',
left: "40px", top: "45px" }, left: '40px', top: '45px' },
{ offset: null, computedOffset: 1.00, easing: "linear", { offset: null, computedOffset: 1.00, easing: 'linear',
left: "50px", top: "55px" }] }, left: '50px', top: '55px' }] },
{ desc: "a one property two value property-indexed keyframes specification" { desc: 'a one property two value property-indexed keyframes specification'
+ " that needs to stringify its values", + ' that needs to stringify its values',
input: { opacity: [0, 1] }, input: { opacity: [0, 1] },
output: [{ offset: null, computedOffset: 0, easing: "linear", output: [{ offset: null, computedOffset: 0, easing: 'linear',
opacity: "0" }, opacity: '0' },
{ offset: null, computedOffset: 1, easing: "linear", { offset: null, computedOffset: 1, easing: 'linear',
opacity: "1" }] }, opacity: '1' }] },
{ desc: "a property-indexed keyframes specification with a CSS variable" { desc: 'a property-indexed keyframes specification with a CSS variable'
+ " reference", + ' reference',
input: { left: [ "var(--dist)", "calc(var(--dist) + 100px)" ] }, input: { left: [ 'var(--dist)', 'calc(var(--dist) + 100px)' ] },
output: [{ offset: null, computedOffset: 0.0, easing: "linear", output: [{ offset: null, computedOffset: 0.0, easing: 'linear',
left: "var(--dist)" }, left: 'var(--dist)' },
{ offset: null, computedOffset: 1.0, easing: "linear", { offset: null, computedOffset: 1.0, easing: 'linear',
left: "calc(var(--dist) + 100px)" }] }, left: 'calc(var(--dist) + 100px)' }] },
{ desc: "a property-indexed keyframes specification with a CSS variable" { desc: 'a property-indexed keyframes specification with a CSS variable'
+ " reference in a shorthand property", + ' reference in a shorthand property',
input: { margin: [ "var(--dist)", "calc(var(--dist) + 100px)" ] }, input: { margin: [ 'var(--dist)', 'calc(var(--dist) + 100px)' ] },
output: [{ offset: null, computedOffset: 0.0, easing: "linear", output: [{ offset: null, computedOffset: 0.0, easing: 'linear',
margin: "var(--dist)" }, margin: 'var(--dist)' },
{ offset: null, computedOffset: 1.0, easing: "linear", { offset: null, computedOffset: 1.0, easing: 'linear',
margin: "calc(var(--dist) + 100px)" }] }, margin: 'calc(var(--dist) + 100px)' }] },
{ desc: "a one property one value property-indexed keyframes specification", { desc: 'a one property one value property-indexed keyframes specification',
input: { left: ["10px"] }, input: { left: ['10px'] },
output: [{ offset: null, computedOffset: 1, easing: "linear", output: [{ offset: null, computedOffset: 1, easing: 'linear',
left: "10px" }] }, left: '10px' }] },
{ desc: "a one property one non-array value property-indexed keyframes" { desc: 'a one property one non-array value property-indexed keyframes'
+ " specification", + ' specification',
input: { left: "10px" }, input: { left: '10px' },
output: [{ offset: null, computedOffset: 1, easing: "linear", output: [{ offset: null, computedOffset: 1, easing: 'linear',
left: "10px" }] }, left: '10px' }] },
{ desc: "a one property two value property-indexed keyframes specification" { desc: 'a one property two value property-indexed keyframes specification'
+ " where the first value is invalid", + ' where the first value is invalid',
input: { left: ["invalid", "10px"] }, input: { left: ['invalid', '10px'] },
output: [{ offset: null, computedOffset: 0, easing: "linear" }, output: [{ offset: null, computedOffset: 0, easing: 'linear' },
{ offset: null, computedOffset: 1, easing: "linear", { offset: null, computedOffset: 1, easing: 'linear',
left: "10px" }] }, left: '10px' }] },
{ desc: "a one property two value property-indexed keyframes specification" { desc: 'a one property two value property-indexed keyframes specification'
+ " where the second value is invalid", + ' where the second value is invalid',
input: { left: ["10px", "invalid"] }, input: { left: ['10px', 'invalid'] },
output: [{ offset: null, computedOffset: 0, easing: "linear", output: [{ offset: null, computedOffset: 0, easing: 'linear',
left: "10px" }, left: '10px' },
{ offset: null, computedOffset: 1, easing: "linear" }] }, { offset: null, computedOffset: 1, easing: 'linear' }] },
]; ];
const gKeyframeSequenceTests = [ const gKeyframeSequenceTests = [
{ desc: "a one property one keyframe sequence", { desc: 'a one property one keyframe sequence',
input: [{ offset: 1, left: "10px" }], input: [{ offset: 1, left: '10px' }],
output: [{ offset: 1, computedOffset: 1, easing: "linear", output: [{ offset: 1, computedOffset: 1, easing: 'linear',
left: "10px" }] }, left: '10px' }] },
{ desc: "a one property two keyframe sequence", { desc: 'a one property two keyframe sequence',
input: [{ offset: 0, left: "10px" }, input: [{ offset: 0, left: '10px' },
{ offset: 1, left: "20px" }], { offset: 1, left: '20px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, output: [{ offset: 0, computedOffset: 0, easing: 'linear', left: '10px' },
{ offset: 1, computedOffset: 1, easing: "linear", left: "20px" }] { offset: 1, computedOffset: 1, easing: 'linear', left: '20px' }]
}, },
{ desc: "a two property two keyframe sequence", { desc: 'a two property two keyframe sequence',
input: [{ offset: 0, left: "10px", top: "30px" }, input: [{ offset: 0, left: '10px', top: '30px' },
{ offset: 1, left: "20px", top: "40px" }], { offset: 1, left: '20px', top: '40px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", output: [{ offset: 0, computedOffset: 0, easing: 'linear',
left: "10px", top: "30px" }, left: '10px', top: '30px' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
left: "20px", top: "40px" }] }, left: '20px', top: '40px' }] },
{ desc: "a one shorthand property two keyframe sequence", { desc: 'a one shorthand property two keyframe sequence',
input: [{ offset: 0, margin: "10px" }, input: [{ offset: 0, margin: '10px' },
{ offset: 1, margin: "20px 30px 40px 50px" }], { offset: 1, margin: '20px 30px 40px 50px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", output: [{ offset: 0, computedOffset: 0, easing: 'linear',
margin: "10px" }, margin: '10px' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
margin: "20px 30px 40px 50px" }] }, margin: '20px 30px 40px 50px' }] },
{ desc: "a two property (a shorthand and one of its component longhands)" { desc: 'a two property (a shorthand and one of its component longhands)'
+ " two keyframe sequence", + ' two keyframe sequence',
input: [{ offset: 0, margin: "10px", marginTop: "20px" }, input: [{ offset: 0, margin: '10px', marginTop: '20px' },
{ offset: 1, marginTop: "70px", margin: "30px 40px 50px 60px" }], { offset: 1, marginTop: '70px', margin: '30px 40px 50px 60px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", output: [{ offset: 0, computedOffset: 0, easing: 'linear',
margin: "10px", marginTop: "20px" }, margin: '10px', marginTop: '20px' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
marginTop: "70px", margin: "30px 40px 50px 60px" }] }, marginTop: '70px', margin: '30px 40px 50px 60px' }] },
{ desc: "a keyframe sequence with duplicate values for a given interior" { desc: 'a keyframe sequence with duplicate values for a given interior'
+ " offset", + ' offset',
input: [{ offset: 0.0, left: "10px" }, input: [{ offset: 0.0, left: '10px' },
{ offset: 0.5, left: "20px" }, { offset: 0.5, left: '20px' },
{ offset: 0.5, left: "30px" }, { offset: 0.5, left: '30px' },
{ offset: 0.5, left: "40px" }, { offset: 0.5, left: '40px' },
{ offset: 1.0, left: "50px" }], { offset: 1.0, left: '50px' }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", output: [{ offset: 0.0, computedOffset: 0.0, easing: 'linear',
left: "10px" }, left: '10px' },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", { offset: 0.5, computedOffset: 0.5, easing: 'linear',
left: "20px" }, left: '20px' },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", { offset: 0.5, computedOffset: 0.5, easing: 'linear',
left: "30px" }, left: '30px' },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", { offset: 0.5, computedOffset: 0.5, easing: 'linear',
left: "40px" }, left: '40px' },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", { offset: 1.0, computedOffset: 1.0, easing: 'linear',
left: "50px" }] }, left: '50px' }] },
{ desc: "a keyframe sequence with duplicate values for offsets 0 and 1", { desc: 'a keyframe sequence with duplicate values for offsets 0 and 1',
input: [{ offset: 0, left: "10px" }, input: [{ offset: 0, left: '10px' },
{ offset: 0, left: "20px" }, { offset: 0, left: '20px' },
{ offset: 0, left: "30px" }, { offset: 0, left: '30px' },
{ offset: 1, left: "40px" }, { offset: 1, left: '40px' },
{ offset: 1, left: "50px" }, { offset: 1, left: '50px' },
{ offset: 1, left: "60px" }], { offset: 1, left: '60px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, output: [{ offset: 0, computedOffset: 0, easing: 'linear', left: '10px' },
{ offset: 0, computedOffset: 0, easing: "linear", left: "20px" }, { offset: 0, computedOffset: 0, easing: 'linear', left: '20px' },
{ offset: 0, computedOffset: 0, easing: "linear", left: "30px" }, { offset: 0, computedOffset: 0, easing: 'linear', left: '30px' },
{ offset: 1, computedOffset: 1, easing: "linear", left: "40px" }, { offset: 1, computedOffset: 1, easing: 'linear', left: '40px' },
{ offset: 1, computedOffset: 1, easing: "linear", left: "50px" }, { offset: 1, computedOffset: 1, easing: 'linear', left: '50px' },
{ offset: 1, computedOffset: 1, easing: "linear", left: "60px" }] { offset: 1, computedOffset: 1, easing: 'linear', left: '60px' }]
}, },
{ desc: "a two property four keyframe sequence", { desc: 'a two property four keyframe sequence',
input: [{ offset: 0, left: "10px" }, input: [{ offset: 0, left: '10px' },
{ offset: 0, top: "20px" }, { offset: 0, top: '20px' },
{ offset: 1, top: "30px" }, { offset: 1, top: '30px' },
{ offset: 1, left: "40px" }], { offset: 1, left: '40px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, output: [{ offset: 0, computedOffset: 0, easing: 'linear', left: '10px' },
{ offset: 0, computedOffset: 0, easing: "linear", top: "20px" }, { offset: 0, computedOffset: 0, easing: 'linear', top: '20px' },
{ offset: 1, computedOffset: 1, easing: "linear", top: "30px" }, { offset: 1, computedOffset: 1, easing: 'linear', top: '30px' },
{ offset: 1, computedOffset: 1, easing: "linear", left: "40px" }] { offset: 1, computedOffset: 1, easing: 'linear', left: '40px' }]
}, },
{ desc: "a single keyframe sequence with omitted offset", { desc: 'a single keyframe sequence with omitted offset',
input: [{ left: "10px" }], input: [{ left: '10px' }],
output: [{ offset: null, computedOffset: 1, easing: "linear", output: [{ offset: null, computedOffset: 1, easing: 'linear',
left: "10px" }] }, left: '10px' }] },
{ desc: "a single keyframe sequence with null offset", { desc: 'a single keyframe sequence with null offset',
input: [{ offset: null, left: "10px" }], input: [{ offset: null, left: '10px' }],
output: [{ offset: null, computedOffset: 1, easing: "linear", output: [{ offset: null, computedOffset: 1, easing: 'linear',
left: "10px" }] }, left: '10px' }] },
{ desc: "a single keyframe sequence with string offset", { desc: 'a single keyframe sequence with string offset',
input: [{ offset: '0.5', left: "10px" }], input: [{ offset: '0.5', left: '10px' }],
output: [{ offset: 0.5, computedOffset: 0.5, easing: "linear", output: [{ offset: 0.5, computedOffset: 0.5, easing: 'linear',
left: "10px" }] }, left: '10px' }] },
{ desc: "a one property keyframe sequence with some omitted offsets", { desc: 'a one property keyframe sequence with some omitted offsets',
input: [{ offset: 0.00, left: "10px" }, input: [{ offset: 0.00, left: '10px' },
{ offset: 0.25, left: "20px" }, { offset: 0.25, left: '20px' },
{ left: "30px" }, { left: '30px' },
{ left: "40px" }, { left: '40px' },
{ offset: 1.00, left: "50px" }], { offset: 1.00, left: '50px' }],
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", output: [{ offset: 0.00, computedOffset: 0.00, easing: 'linear',
left: "10px" }, left: '10px' },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", { offset: 0.25, computedOffset: 0.25, easing: 'linear',
left: "20px" }, left: '20px' },
{ offset: null, computedOffset: 0.50, easing: "linear", { offset: null, computedOffset: 0.50, easing: 'linear',
left: "30px" }, left: '30px' },
{ offset: null, computedOffset: 0.75, easing: "linear", { offset: null, computedOffset: 0.75, easing: 'linear',
left: "40px" }, left: '40px' },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", { offset: 1.00, computedOffset: 1.00, easing: 'linear',
left: "50px" }] }, left: '50px' }] },
{ desc: "a one property keyframe sequence with some null offsets", { desc: 'a one property keyframe sequence with some null offsets',
input: [{ offset: 0.00, left: "10px" }, input: [{ offset: 0.00, left: '10px' },
{ offset: 0.25, left: "20px" }, { offset: 0.25, left: '20px' },
{ offset: null, left: "30px" }, { offset: null, left: '30px' },
{ offset: null, left: "40px" }, { offset: null, left: '40px' },
{ offset: 1.00, left: "50px" }], { offset: 1.00, left: '50px' }],
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", output: [{ offset: 0.00, computedOffset: 0.00, easing: 'linear',
left: "10px" }, left: '10px' },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", { offset: 0.25, computedOffset: 0.25, easing: 'linear',
left: "20px" }, left: '20px' },
{ offset: null, computedOffset: 0.50, easing: "linear", { offset: null, computedOffset: 0.50, easing: 'linear',
left: "30px" }, left: '30px' },
{ offset: null, computedOffset: 0.75, easing: "linear", { offset: null, computedOffset: 0.75, easing: 'linear',
left: "40px" }, left: '40px' },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", { offset: 1.00, computedOffset: 1.00, easing: 'linear',
left: "50px" }] }, left: '50px' }] },
{ desc: "a two property keyframe sequence with some omitted offsets", { desc: 'a two property keyframe sequence with some omitted offsets',
input: [{ offset: 0.00, left: "10px", top: "20px" }, input: [{ offset: 0.00, left: '10px', top: '20px' },
{ offset: 0.25, left: "30px" }, { offset: 0.25, left: '30px' },
{ left: "40px" }, { left: '40px' },
{ left: "50px", top: "60px" }, { left: '50px', top: '60px' },
{ offset: 1.00, left: "70px", top: "80px" }], { offset: 1.00, left: '70px', top: '80px' }],
output: [{ offset: 0.00, computedOffset: 0.00, easing: "linear", output: [{ offset: 0.00, computedOffset: 0.00, easing: 'linear',
left: "10px", top: "20px" }, left: '10px', top: '20px' },
{ offset: 0.25, computedOffset: 0.25, easing: "linear", { offset: 0.25, computedOffset: 0.25, easing: 'linear',
left: "30px" }, left: '30px' },
{ offset: null, computedOffset: 0.50, easing: "linear", { offset: null, computedOffset: 0.50, easing: 'linear',
left: "40px" }, left: '40px' },
{ offset: null, computedOffset: 0.75, easing: "linear", { offset: null, computedOffset: 0.75, easing: 'linear',
left: "50px", top: "60px" }, left: '50px', top: '60px' },
{ offset: 1.00, computedOffset: 1.00, easing: "linear", { offset: 1.00, computedOffset: 1.00, easing: 'linear',
left: "70px", top: "80px" }] }, left: '70px', top: '80px' }] },
{ desc: "a one property keyframe sequence with all omitted offsets", { desc: 'a one property keyframe sequence with all omitted offsets',
input: [{ left: "10px" }, input: [{ left: '10px' },
{ left: "20px" }, { left: '20px' },
{ left: "30px" }, { left: '30px' },
{ left: "40px" }, { left: '40px' },
{ left: "50px" }], { left: '50px' }],
output: [{ offset: null, computedOffset: 0.00, easing: "linear", output: [{ offset: null, computedOffset: 0.00, easing: 'linear',
left: "10px" }, left: '10px' },
{ offset: null, computedOffset: 0.25, easing: "linear", { offset: null, computedOffset: 0.25, easing: 'linear',
left: "20px" }, left: '20px' },
{ offset: null, computedOffset: 0.50, easing: "linear", { offset: null, computedOffset: 0.50, easing: 'linear',
left: "30px" }, left: '30px' },
{ offset: null, computedOffset: 0.75, easing: "linear", { offset: null, computedOffset: 0.75, easing: 'linear',
left: "40px" }, left: '40px' },
{ offset: null, computedOffset: 1.00, easing: "linear", { offset: null, computedOffset: 1.00, easing: 'linear',
left: "50px" }] }, left: '50px' }] },
{ desc: "a keyframe sequence with different easing values, but the same" { desc: 'a keyframe sequence with different easing values, but the same'
+ " easing value for a given offset", + ' easing value for a given offset',
input: [{ offset: 0.0, easing: "ease", left: "10px"}, input: [{ offset: 0.0, easing: 'ease', left: '10px'},
{ offset: 0.0, easing: "ease", top: "20px"}, { offset: 0.0, easing: 'ease', top: '20px'},
{ offset: 0.5, easing: "linear", left: "30px" }, { offset: 0.5, easing: 'linear', left: '30px' },
{ offset: 0.5, easing: "linear", top: "40px" }, { offset: 0.5, easing: 'linear', top: '40px' },
{ offset: 1.0, easing: "step-end", left: "50px" }, { offset: 1.0, easing: 'step-end', left: '50px' },
{ offset: 1.0, easing: "step-end", top: "60px" }], { offset: 1.0, easing: 'step-end', top: '60px' }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", output: [{ offset: 0.0, computedOffset: 0.0, easing: 'ease',
left: "10px" }, left: '10px' },
{ offset: 0.0, computedOffset: 0.0, easing: "ease", { offset: 0.0, computedOffset: 0.0, easing: 'ease',
top: "20px" }, top: '20px' },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", { offset: 0.5, computedOffset: 0.5, easing: 'linear',
left: "30px" }, left: '30px' },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", { offset: 0.5, computedOffset: 0.5, easing: 'linear',
top: "40px" }, top: '40px' },
{ offset: 1.0, computedOffset: 1.0, easing: "steps(1)", { offset: 1.0, computedOffset: 1.0, easing: 'steps(1)',
left: "50px" }, left: '50px' },
{ offset: 1.0, computedOffset: 1.0, easing: "steps(1)", { offset: 1.0, computedOffset: 1.0, easing: 'steps(1)',
top: "60px" }] }, top: '60px' }] },
{ desc: "a keyframe sequence with different composite values, but the" { desc: 'a keyframe sequence with different composite values, but the'
+ " same composite value for a given offset", + ' same composite value for a given offset',
input: [{ offset: 0.0, composite: "replace", left: "10px" }, input: [{ offset: 0.0, composite: 'replace', left: '10px' },
{ offset: 0.0, composite: "replace", top: "20px" }, { offset: 0.0, composite: 'replace', top: '20px' },
{ offset: 0.5, composite: "add", left: "30px" }, { offset: 0.5, composite: 'add', left: '30px' },
{ offset: 0.5, composite: "add", top: "40px" }, { offset: 0.5, composite: 'add', top: '40px' },
{ offset: 1.0, composite: "replace", left: "50px" }, { offset: 1.0, composite: 'replace', left: '50px' },
{ offset: 1.0, composite: "replace", top: "60px" }], { offset: 1.0, composite: 'replace', top: '60px' }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "linear", output: [{ offset: 0.0, computedOffset: 0.0, easing: 'linear',
composite: "replace", left: "10px" }, composite: 'replace', left: '10px' },
{ offset: 0.0, computedOffset: 0.0, easing: "linear", { offset: 0.0, computedOffset: 0.0, easing: 'linear',
composite: "replace", top: "20px" }, composite: 'replace', top: '20px' },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", { offset: 0.5, computedOffset: 0.5, easing: 'linear',
composite: "add", left: "30px" }, composite: 'add', left: '30px' },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", { offset: 0.5, computedOffset: 0.5, easing: 'linear',
composite: "add", top: "40px" }, composite: 'add', top: '40px' },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", { offset: 1.0, computedOffset: 1.0, easing: 'linear',
composite: "replace", left: "50px" }, composite: 'replace', left: '50px' },
{ offset: 1.0, computedOffset: 1.0, easing: "linear", { offset: 1.0, computedOffset: 1.0, easing: 'linear',
composite: "replace", top: "60px" }] }, composite: 'replace', top: '60px' }] },
{ desc: "a one property two keyframe sequence that needs to stringify" { desc: 'a one property two keyframe sequence that needs to stringify'
+ " its values", + ' its values',
input: [{ offset: 0, opacity: 0 }, input: [{ offset: 0, opacity: 0 },
{ offset: 1, opacity: 1 }], { offset: 1, opacity: 1 }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", opacity: "0" }, output: [{ offset: 0, computedOffset: 0, easing: 'linear', opacity: '0' },
{ offset: 1, computedOffset: 1, easing: "linear", opacity: "1" }] { offset: 1, computedOffset: 1, easing: 'linear', opacity: '1' }]
}, },
{ desc: "a keyframe sequence with a CSS variable reference", { desc: 'a keyframe sequence with a CSS variable reference',
input: [{ left: "var(--dist)" }, input: [{ left: 'var(--dist)' },
{ left: "calc(var(--dist) + 100px)" }], { left: 'calc(var(--dist) + 100px)' }],
output: [{ offset: null, computedOffset: 0.0, easing: "linear", output: [{ offset: null, computedOffset: 0.0, easing: 'linear',
left: "var(--dist)" }, left: 'var(--dist)' },
{ offset: null, computedOffset: 1.0, easing: "linear", { offset: null, computedOffset: 1.0, easing: 'linear',
left: "calc(var(--dist) + 100px)" }] }, left: 'calc(var(--dist) + 100px)' }] },
{ desc: "a keyframe sequence with a CSS variable reference in a shorthand" { desc: 'a keyframe sequence with a CSS variable reference in a shorthand'
+ " property", + ' property',
input: [{ margin: "var(--dist)" }, input: [{ margin: 'var(--dist)' },
{ margin: "calc(var(--dist) + 100px)" }], { margin: 'calc(var(--dist) + 100px)' }],
output: [{ offset: null, computedOffset: 0.0, easing: "linear", output: [{ offset: null, computedOffset: 0.0, easing: 'linear',
margin: "var(--dist)" }, margin: 'var(--dist)' },
{ offset: null, computedOffset: 1.0, easing: "linear", { offset: null, computedOffset: 1.0, easing: 'linear',
margin: "calc(var(--dist) + 100px)" }] }, margin: 'calc(var(--dist) + 100px)' }] },
{ desc: "a keyframe sequence where shorthand precedes longhand", { desc: 'a keyframe sequence where shorthand precedes longhand',
input: [{ offset: 0, margin: "10px", marginRight: "20px" }, input: [{ offset: 0, margin: '10px', marginRight: '20px' },
{ offset: 1, margin: "30px" }], { offset: 1, margin: '30px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", output: [{ offset: 0, computedOffset: 0, easing: 'linear',
margin: "10px", marginRight: "20px" }, margin: '10px', marginRight: '20px' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
margin: "30px" }] }, margin: '30px' }] },
{ desc: "a keyframe sequence where longhand precedes shorthand", { desc: 'a keyframe sequence where longhand precedes shorthand',
input: [{ offset: 0, marginRight: "20px", margin: "10px" }, input: [{ offset: 0, marginRight: '20px', margin: '10px' },
{ offset: 1, margin: "30px" }], { offset: 1, margin: '30px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", output: [{ offset: 0, computedOffset: 0, easing: 'linear',
marginRight: "20px", margin: "10px" }, marginRight: '20px', margin: '10px' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
margin: "30px" }] }, margin: '30px' }] },
{ desc: "a keyframe sequence where lesser shorthand precedes greater" { desc: 'a keyframe sequence where lesser shorthand precedes greater'
+ " shorthand", + ' shorthand',
input: [{ offset: 0, input: [{ offset: 0,
borderLeft: "1px solid rgb(1, 2, 3)", borderLeft: '1px solid rgb(1, 2, 3)',
border: "2px dotted rgb(4, 5, 6)" }, border: '2px dotted rgb(4, 5, 6)' },
{ offset: 1, border: "3px dashed rgb(7, 8, 9)" }], { offset: 1, border: '3px dashed rgb(7, 8, 9)' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", output: [{ offset: 0, computedOffset: 0, easing: 'linear',
borderLeft: "1px solid rgb(1, 2, 3)", borderLeft: '1px solid rgb(1, 2, 3)',
border: "2px dotted rgb(4, 5, 6)" }, border: '2px dotted rgb(4, 5, 6)' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
border: "3px dashed rgb(7, 8, 9)" }] }, border: '3px dashed rgb(7, 8, 9)' }] },
{ desc: "a keyframe sequence where greater shorthand precedes lesser" { desc: 'a keyframe sequence where greater shorthand precedes lesser'
+ " shorthand", + ' shorthand',
input: [{ offset: 0, border: "2px dotted rgb(4, 5, 6)", input: [{ offset: 0, border: '2px dotted rgb(4, 5, 6)',
borderLeft: "1px solid rgb(1, 2, 3)" }, borderLeft: '1px solid rgb(1, 2, 3)' },
{ offset: 1, border: "3px dashed rgb(7, 8, 9)" }], { offset: 1, border: '3px dashed rgb(7, 8, 9)' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", output: [{ offset: 0, computedOffset: 0, easing: 'linear',
border: "2px dotted rgb(4, 5, 6)", border: '2px dotted rgb(4, 5, 6)',
borderLeft: "1px solid rgb(1, 2, 3)" }, borderLeft: '1px solid rgb(1, 2, 3)' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
border: "3px dashed rgb(7, 8, 9)" }] }, border: '3px dashed rgb(7, 8, 9)' }] },
{ desc: "a two property keyframe sequence where one property is missing" { desc: 'a two property keyframe sequence where one property is missing'
+ " from the first keyframe", + ' from the first keyframe',
input: [{ offset: 0, left: "10px" }, input: [{ offset: 0, left: '10px' },
{ offset: 1, left: "20px", top: "30px" }], { offset: 1, left: '20px', top: '30px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", left: "10px" }, output: [{ offset: 0, computedOffset: 0, easing: 'linear', left: '10px' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
left: "20px", top: "30px" }] }, left: '20px', top: '30px' }] },
{ desc: "a two property keyframe sequence where one property is missing" { desc: 'a two property keyframe sequence where one property is missing'
+ " from the last keyframe", + ' from the last keyframe',
input: [{ offset: 0, left: "10px", top: "20px" }, input: [{ offset: 0, left: '10px', top: '20px' },
{ offset: 1, left: "30px" }], { offset: 1, left: '30px' }],
output: [{ offset: 0, computedOffset: 0, easing: "linear", output: [{ offset: 0, computedOffset: 0, easing: 'linear',
left: "10px" , top: "20px" }, left: '10px' , top: '20px' },
{ offset: 1, computedOffset: 1, easing: "linear", { offset: 1, computedOffset: 1, easing: 'linear',
left: "30px" }] }, left: '30px' }] },
{ desc: "a keyframe sequence with repeated values at offset 1 with" { desc: 'a keyframe sequence with repeated values at offset 1 with'
+ " different easings", + ' different easings',
input: [{ offset: 0.0, left: "100px", easing: "ease" }, input: [{ offset: 0.0, left: '100px', easing: 'ease' },
{ offset: 0.0, left: "200px", easing: "ease" }, { offset: 0.0, left: '200px', easing: 'ease' },
{ offset: 0.5, left: "300px", easing: "linear" }, { offset: 0.5, left: '300px', easing: 'linear' },
{ offset: 1.0, left: "400px", easing: "ease-out" }, { offset: 1.0, left: '400px', easing: 'ease-out' },
{ offset: 1.0, left: "500px", easing: "step-end" }], { offset: 1.0, left: '500px', easing: 'step-end' }],
output: [{ offset: 0.0, computedOffset: 0.0, easing: "ease", output: [{ offset: 0.0, computedOffset: 0.0, easing: 'ease',
left: "100px" }, left: '100px' },
{ offset: 0.0, computedOffset: 0.0, easing: "ease", { offset: 0.0, computedOffset: 0.0, easing: 'ease',
left: "200px" }, left: '200px' },
{ offset: 0.5, computedOffset: 0.5, easing: "linear", { offset: 0.5, computedOffset: 0.5, easing: 'linear',
left: "300px" }, left: '300px' },
{ offset: 1.0, computedOffset: 1.0, easing: "ease-out", { offset: 1.0, computedOffset: 1.0, easing: 'ease-out',
left: "400px" }, left: '400px' },
{ offset: 1.0, computedOffset: 1.0, easing: "steps(1)", { offset: 1.0, computedOffset: 1.0, easing: 'steps(1)',
left: "500px" }] }, left: '500px' }] },
]; ];
const gInvalidKeyframesTests = [ const gInvalidKeyframesTests = [
{ desc: "keyframes with an out-of-bounded positive offset", { desc: 'keyframes with an out-of-bounded positive offset',
input: [ { opacity: 0 }, input: [ { opacity: 0 },
{ opacity: 0.5, offset: 2 }, { opacity: 0.5, offset: 2 },
{ opacity: 1 } ], { opacity: 1 } ],
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "keyframes with an out-of-bounded negative offset", { desc: 'keyframes with an out-of-bounded negative offset',
input: [ { opacity: 0 }, input: [ { opacity: 0 },
{ opacity: 0.5, offset: -1 }, { opacity: 0.5, offset: -1 },
{ opacity: 1 } ], { opacity: 1 } ],
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "keyframes not loosely sorted by offset", { desc: 'keyframes not loosely sorted by offset',
input: [ { opacity: 0, offset: 1 }, input: [ { opacity: 0, offset: 1 },
{ opacity: 1, offset: 0 } ], { opacity: 1, offset: 0 } ],
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "property-indexed keyframes with an invalid easing value", { desc: 'property-indexed keyframes with an invalid easing value',
input: { opacity: [ 0, 0.5, 1 ], input: { opacity: [ 0, 0.5, 1 ],
easing: "inherit" }, easing: 'inherit' },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a keyframe sequence with an invalid easing value", { desc: 'a keyframe sequence with an invalid easing value',
input: [ { opacity: 0, easing: "jumpy" }, input: [ { opacity: 0, easing: 'jumpy' },
{ opacity: 1 } ], { opacity: 1 } ],
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "keyframes with an invalid composite value", { desc: 'keyframes with an invalid composite value',
input: [ { opacity: 0, composite: "alternate" }, input: [ { opacity: 0, composite: 'alternate' },
{ opacity: 1 } ], { opacity: 1 } ],
expected: { name: "TypeError" } } expected: { name: 'TypeError' } }
]; ];
// ------------------------------ // ------------------------------
@ -444,90 +444,90 @@ const gInvalidKeyframesTests = [
// ------------------------------ // ------------------------------
const gKeyframeEffectOptionTests = [ const gKeyframeEffectOptionTests = [
{ desc: "an empty KeyframeEffectOptions object", { desc: 'an empty KeyframeEffectOptions object',
input: { }, input: { },
expected: { } }, expected: { } },
{ desc: "a normal KeyframeEffectOptions object", { desc: 'a normal KeyframeEffectOptions object',
input: { delay: 1000, input: { delay: 1000,
fill: "auto", fill: 'auto',
iterations: 5.5, iterations: 5.5,
duration: "auto", duration: 'auto',
direction: "alternate" }, direction: 'alternate' },
expected: { delay: 1000, expected: { delay: 1000,
fill: "auto", fill: 'auto',
iterations: 5.5, iterations: 5.5,
duration: "auto", duration: 'auto',
direction: "alternate" } }, direction: 'alternate' } },
{ desc: "a double value", { desc: 'a double value',
input: 3000, input: 3000,
expected: { duration: 3000 } }, expected: { duration: 3000 } },
{ desc: "+Infinity", { desc: '+Infinity',
input: Infinity, input: Infinity,
expected: { duration: Infinity } }, expected: { duration: Infinity } },
{ desc: "an Infinity duration", { desc: 'an Infinity duration',
input: { duration: Infinity }, input: { duration: Infinity },
expected: { duration: Infinity } }, expected: { duration: Infinity } },
{ desc: "an auto duration", { desc: 'an auto duration',
input: { duration: "auto" }, input: { duration: 'auto' },
expected: { duration: "auto" } }, expected: { duration: 'auto' } },
{ desc: "an Infinity iterations", { desc: 'an Infinity iterations',
input: { iterations: Infinity }, input: { iterations: Infinity },
expected: { iterations: Infinity } }, expected: { iterations: Infinity } },
{ desc: "an auto fill", { desc: 'an auto fill',
input: { fill: "auto" }, input: { fill: 'auto' },
expected: { fill: "auto" } }, expected: { fill: 'auto' } },
{ desc: "a forwards fill", { desc: 'a forwards fill',
input: { fill: "forwards" }, input: { fill: 'forwards' },
expected: { fill: "forwards" } } expected: { fill: 'forwards' } }
]; ];
const gInvalidKeyframeEffectOptionTests = [ const gInvalidKeyframeEffectOptionTests = [
{ desc: "-Infinity", { desc: '-Infinity',
input: -Infinity, input: -Infinity,
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "NaN", { desc: 'NaN',
input: NaN, input: NaN,
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a negative value", { desc: 'a negative value',
input: -1, input: -1,
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a negative Infinity duration", { desc: 'a negative Infinity duration',
input: { duration: -Infinity }, input: { duration: -Infinity },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a NaN duration", { desc: 'a NaN duration',
input: { duration: NaN }, input: { duration: NaN },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a negative duration", { desc: 'a negative duration',
input: { duration: -1 }, input: { duration: -1 },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a string duration", { desc: 'a string duration',
input: { duration: "merrychristmas" }, input: { duration: 'merrychristmas' },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a negative Infinity iterations", { desc: 'a negative Infinity iterations',
input: { iterations: -Infinity}, input: { iterations: -Infinity},
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a NaN iterations", { desc: 'a NaN iterations',
input: { iterations: NaN }, input: { iterations: NaN },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a negative iterations", { desc: 'a negative iterations',
input: { iterations: -1 }, input: { iterations: -1 },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a blank easing", { desc: 'a blank easing',
input: { easing: "" }, input: { easing: '' },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "an unrecognized easing", { desc: 'an unrecognized easing',
input: { easing: "unrecognised" }, input: { easing: 'unrecognised' },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "an 'initial' easing", { desc: 'an \'initial\' easing',
input: { easing: "initial" }, input: { easing: 'initial' },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "an 'inherit' easing", { desc: 'an \'inherit\' easing',
input: { easing: "inherit" }, input: { easing: 'inherit' },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a variable easing", { desc: 'a variable easing',
input: { easing: "var(--x)" }, input: { easing: 'var(--x)' },
expected: { name: "TypeError" } }, expected: { name: 'TypeError' } },
{ desc: "a multi-value easing", { desc: 'a multi-value easing',
input: { easing: "ease-in-out, ease-out" }, input: { easing: 'ease-in-out, ease-out' },
expected: { name: "TypeError" } } expected: { name: 'TypeError' } }
]; ];

4
testing/web-platform/tests/web-animations/resources/keyframe-utils.js
Просмотреть файл

@ -1,4 +1,4 @@
"use strict"; 'use strict';
// ======================================= // =======================================
// //
@ -17,7 +17,7 @@
* @param {Array.<ComputedKeyframe>} b - expected computed keyframes * @param {Array.<ComputedKeyframe>} b - expected computed keyframes
*/ */
function assert_frame_lists_equal(a, b) { function assert_frame_lists_equal(a, b) {
assert_equals(a.length, b.length, "number of frames"); assert_equals(a.length, b.length, 'number of frames');
for (let i = 0; i < Math.min(a.length, b.length); i++) { for (let i = 0; i < Math.min(a.length, b.length); i++) {
assert_frames_equal(a[i], b[i], `ComputedKeyframe #${i}`); assert_frames_equal(a[i], b[i], `ComputedKeyframe #${i}`);
} }