mirror of
https://github.com/servo/servo.git
synced 2025-08-09 15:35:34 +01:00
Update web-platform-tests to revision 68a256f49be380ca4add535ce8ece9de28820e6b
This commit is contained in:
WPT Sync Bot
parent
e54935c25a
commit
cd5bf022bd
178 changed files with 6082 additions and 795 deletions
|
|
@ -1405,6 +1405,25 @@ const gCSSProperties = {
|
|||
{ type: 'discrete', options: [ [ 'flat', 'preserve-3d' ] ] }
|
||||
]
|
||||
},
|
||||
'rotate': {
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
types: [ 'rotateList' ]
|
||||
},
|
||||
'translate': {
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
types: [ 'translateList' ],
|
||||
setup: t => {
|
||||
// We need to set a width/height for resolving percentages against.
|
||||
const element = createElement(t);
|
||||
element.style.width = '100px';
|
||||
element.style.height = '100px';
|
||||
return element;
|
||||
}
|
||||
},
|
||||
'scale': {
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
types: [ 'scaleList' ]
|
||||
},
|
||||
'unicode-bidi': {
|
||||
// https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi
|
||||
types: [
|
||||
|
|
@ -1519,6 +1538,18 @@ function testAnimationSampleMatrices(animation, idlName, testSamples) {
|
|||
}
|
||||
}
|
||||
|
||||
function testAnimationSampleRotate3d(animation, idlName, testSamples) {
|
||||
const target = animation.effect.target;
|
||||
for (const testSample of testSamples) {
|
||||
animation.currentTime = testSample.time;
|
||||
const actual = getComputedStyle(target)[idlName];
|
||||
const expected = testSample.expected;
|
||||
assert_rotate3d_equals(actual, expected,
|
||||
`The value should be ${expected} at`
|
||||
+ ` ${testSample.time}ms but got ${actual}`);
|
||||
}
|
||||
}
|
||||
|
||||
function createTestElement(t, setup) {
|
||||
return setup ? setup(t) : createElement(t);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1583,6 +1583,382 @@ const transformListType = {
|
|||
},
|
||||
};
|
||||
|
||||
const rotateListType = {
|
||||
testInterpolation: (property, setup) => {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation = target.animate(
|
||||
{
|
||||
[idlName]: ['45deg', '135deg'],
|
||||
},
|
||||
1000
|
||||
);
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '90deg' }]);
|
||||
}, `${property} without rotation axes`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation =
|
||||
target.animate({ [idlName]: [ '0 1 0 0deg',
|
||||
'0 1 0 90deg'] },
|
||||
1000);
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '0 1 0 45deg' }]);
|
||||
}, `${property} with rotation axes`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
|
||||
const animation =
|
||||
target.animate({ [idlName]: [ '0 1 0 0deg',
|
||||
'0 1 0 720deg'] },
|
||||
1000);
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 250, expected: '0 1 0 180deg' }]);
|
||||
}, `${property} with rotation axes and range over 360 degrees`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation =
|
||||
target.animate({ [idlName]: [ '0 1 0 0deg',
|
||||
'0 1 1 90deg'] },
|
||||
1000);
|
||||
|
||||
testAnimationSampleRotate3d(animation, idlName,
|
||||
[{ time: 500, expected: '0 0.707107 0.707107 45deg' }]);
|
||||
}, `${property} with different rotation axes`);
|
||||
},
|
||||
testAddition: function(property, setup) {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '45deg';
|
||||
const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'add' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '-45deg' },
|
||||
{ time: 1000, expected: '135deg' }]);
|
||||
}, `${property} without rotation axes`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
// Rotation specified in transform property should not affect the computed
|
||||
// value of |property|.
|
||||
target.style.transform = 'rotate(20deg)';
|
||||
target.style[idlName] = '0 1 0 -45deg';
|
||||
const animation =
|
||||
target.animate({ [idlName]: ['0 1 0 90deg',
|
||||
'0 1 0 180deg'] },
|
||||
{ duration: 1000, fill: 'both', composite: 'add' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '0 1 0 45deg' },
|
||||
{ time: 1000, expected: '0 1 0 135deg' }]);
|
||||
}, `${property} with underlying transform`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation =
|
||||
target.animate({ [idlName]: [ '0 1 0 0deg',
|
||||
'1 1 1 270deg'] },
|
||||
{ duration: 1000, fill: 'both', composite: 'add' });
|
||||
|
||||
testAnimationSampleRotate3d(animation, idlName,
|
||||
[{ time: 500, expected: '0.57735 0.57735 0.57735 135deg' }]);
|
||||
}, `${property} with different rotation axes`);
|
||||
},
|
||||
testAccumulation: function(property, setup) {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '45deg';
|
||||
const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'accumulate' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '-45deg' },
|
||||
{ time: 1000, expected: '135deg' }]);
|
||||
}, `${property} without rotation axes`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style.transform = 'translateX(100px)';
|
||||
target.style[idlName] = '1 0 0 -45deg';
|
||||
const animation =
|
||||
target.animate({ [idlName]: ['1 0 0 90deg',
|
||||
'1 0 0 180deg'] },
|
||||
{ duration: 1000, fill: 'both', composite: 'accumulate' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '1 0 0 45deg' },
|
||||
{ time: 1000, expected: '1 0 0 135deg' }]);
|
||||
}, `${property} with underlying transform`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation =
|
||||
target.animate({ [idlName]: [ '0 1 0 0deg',
|
||||
'1 0 1 180deg'] },
|
||||
{ duration: 1000, fill: 'both', composite: 'accumulate' });
|
||||
|
||||
testAnimationSampleRotate3d(animation, idlName,
|
||||
[{ time: 500, expected: '0.707107 0 0.707107 90deg' }]);
|
||||
}, `${property} with different rotation axes`);
|
||||
},
|
||||
};
|
||||
|
||||
const translateListType = {
|
||||
testInterpolation: (property, setup) => {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation = target.animate(
|
||||
{
|
||||
[idlName]: ['200px', '400px'],
|
||||
},
|
||||
1000
|
||||
);
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '300px' }]);
|
||||
}, `${property} with two unspecified values`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation = target.animate(
|
||||
{
|
||||
[idlName]: ['200px -200px', '400px 400px'],
|
||||
},
|
||||
1000
|
||||
);
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '300px 100px' }]);
|
||||
}, `${property} with one unspecified value`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation = target.animate(
|
||||
{
|
||||
[idlName]: ['200px -200px 600px', '400px 400px -200px'],
|
||||
},
|
||||
1000
|
||||
);
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '300px 100px 200px' }]);
|
||||
}, `${property} with all three values specified`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation = target.animate(
|
||||
{
|
||||
[idlName]: ['0% -101px 600px', '400px 50% -200px'],
|
||||
},
|
||||
1000
|
||||
);
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '200px -25.5px 200px' }]);
|
||||
}, `${property} with combination of percentages and lengths`);
|
||||
},
|
||||
testAddition: function(property, setup) {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '100px';
|
||||
const animation = target.animate({ [idlName]: ['-200px', '500px'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'add' });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[ { time: 0, expected: '-100px' },
|
||||
{ time: 1000, expected: '600px' }]);
|
||||
|
||||
}, `${property}`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.transform = 'translateY(100px)';
|
||||
target.style[idlName] = '100px';
|
||||
const animation = target.animate({ [idlName]: ['-200px', '500px'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'add' });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[ { time: 0, expected: '-100px' },
|
||||
{ time: 1000, expected: '600px' }]);
|
||||
|
||||
}, `${property} with underlying transform`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '50%';
|
||||
const animation = target.animate({ [idlName]: ['-200px', '500px'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'add' });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[ { time: 0, expected: '-150px' },
|
||||
{ time: 1000, expected: '550px' }]);
|
||||
|
||||
}, `${property} with underlying percentage value`);
|
||||
},
|
||||
testAccumulation: function(property, setup) {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '100px';
|
||||
const animation = target.animate({ [idlName]: ['-200px', '500px'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'accumulate' });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[ { time: 0, expected: '-100px' },
|
||||
{ time: 1000, expected: '600px' }]);
|
||||
}, `${property}`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.transform = 'translateY(100px)';
|
||||
target.style[idlName] = '100px';
|
||||
const animation = target.animate({ [idlName]: ['-200px', '500px'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'accumulate' });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[ { time: 0, expected: '-100px' },
|
||||
{ time: 1000, expected: '600px' }]);
|
||||
}, `${property} with transform`);
|
||||
},
|
||||
};
|
||||
|
||||
const scaleListType = {
|
||||
testInterpolation: (property, setup) => {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation = target.animate({ [idlName]: ['3', '5'] },
|
||||
1000);
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '4' }]);
|
||||
}, `${property} with two unspecified values`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation = target.animate({ [idlName]: ['3 3', '5 5'] },
|
||||
1000);
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '4 4' }]);
|
||||
}, `${property} with one unspecified value`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
const animation = target.animate({ [idlName]: ['3 3 3', '5 5 5'] },
|
||||
1000);
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 500, expected: '4 4 4' }]);
|
||||
}, `${property}`);
|
||||
},
|
||||
testAddition: function(property, setup) {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '2';
|
||||
const animation = target.animate({ [idlName]: ['-3', '5'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'add' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '-6' },
|
||||
{ time: 1000, expected: '10' }]);
|
||||
}, `${property} with two unspecified values`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '2 2';
|
||||
const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'add' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '-6 -6' },
|
||||
{ time: 1000, expected: '10 10' }]);
|
||||
}, `${property} with one unspecified value`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '2 2 2';
|
||||
const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'add' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '-2 -4 -6' },
|
||||
{ time: 1000, expected: '8 10 12' }]);
|
||||
}, `${property}`);
|
||||
},
|
||||
testAccumulation: function(property, setup) {
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '2';
|
||||
const animation = target.animate({ [idlName]: ['-3', '5'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'accumulate' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '-2' },
|
||||
{ time: 1000, expected: '6' }]);
|
||||
}, `${property} with two unspecified values`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '2 2';
|
||||
const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'accumulate' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '-2 -2' },
|
||||
{ time: 1000, expected: '6 6' }]);
|
||||
}, `${property} with one unspecified value`);
|
||||
|
||||
test(t => {
|
||||
const idlName = propertyToIDL(property);
|
||||
const target = createTestElement(t, setup);
|
||||
target.style[idlName] = '2 2 2';
|
||||
const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },
|
||||
{ duration: 1000, fill: 'both',
|
||||
composite: 'accumulate' });
|
||||
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: '0 -1 -2' },
|
||||
{ time: 1000, expected: '5 6 7' }]);
|
||||
}, `${property}`);
|
||||
},
|
||||
};
|
||||
|
||||
const filterListType = {
|
||||
testInterpolation: (property, setup) => {
|
||||
test(t => {
|
||||
|
|
@ -2316,6 +2692,9 @@ const types = {
|
|||
positiveNumber: positiveNumberType,
|
||||
opacity: opacityType,
|
||||
transformList: transformListType,
|
||||
rotateList: rotateListType,
|
||||
translateList: translateListType,
|
||||
scaleList: scaleListType,
|
||||
visibility: visibilityType,
|
||||
boxShadowList: boxShadowListType,
|
||||
textShadowList: textShadowListType,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue