mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -125,7 +125,7 @@ test_composition({
|
|||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '0 -1 0 100deg'},
|
||||
{at: 0, expect: '0.27 0.53 0.8 360deg'},
|
||||
{at: 0, expect: '0deg'},
|
||||
{at: 0.25, expect: 'y 25deg'},
|
||||
{at: 0.75, expect: 'y 75deg'},
|
||||
{at: 1, expect: 'y 100deg'},
|
||||
|
|
@ -141,7 +141,7 @@ test_composition({
|
|||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '0 -1 0 100deg'},
|
||||
{at: 0, expect: '0.27 0.53 0.8 360deg'},
|
||||
{at: 0, expect: '0deg'},
|
||||
{at: 0.25, expect: 'y 25deg'},
|
||||
{at: 0.75, expect: 'y 75deg'},
|
||||
{at: 1, expect: 'y 100deg'},
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Rotate transform equivalent</title>
|
||||
<link rel="match" href="rotate-transform-equivalent-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-46;totalPixels=0-277">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ test_composition({
|
|||
{at: 0, expect: '4 5 6'},
|
||||
{at: 0.25, expect: '3.25 4 4.75'},
|
||||
{at: 0.75, expect: '1.75 2 2.25'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 1, expect: '1'},
|
||||
{at: 2, expect: '-2 -3 -4'},
|
||||
]);
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ test_composition({
|
|||
{at: 0.25, expect: '3.25 7.75 13.75'},
|
||||
{at: 0.5, expect: '2.5 5.5 9.5'},
|
||||
{at: 0.75, expect: '1.75 3.25 5.25'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 1, expect: '1'},
|
||||
{at: 1.5, expect: '-0.5 -3.5 -7.5'},
|
||||
]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -73,8 +73,23 @@ const transformTests = {
|
|||
matrix: [
|
||||
// matched matrix parameters do not collapse the values after them
|
||||
['matrix(1,0,0,1,0,0) rotate(0deg)', 'matrix(1.5,0,0,1.5,0,0) rotate(180deg)', 'matrix(2,0,0,2,0,0) rotate(360deg)']
|
||||
],
|
||||
perspective: [
|
||||
// Since perspective doesn't do anything on its own, we need to
|
||||
// combine it with a transform that does.
|
||||
['perspective(none) translateZ(15px)', 'perspective(none) translateZ(15px)', 'perspective(none) translateZ(15px)'],
|
||||
['perspective(100px) translateZ(50px)', 'perspective(200px) translateZ(50px)', 'perspective(none) translateZ(50px)'],
|
||||
['perspective(none) translateZ(15px)', 'perspective(50px) translateZ(15px)', 'perspective(25px) translateZ(15px)'],
|
||||
['perspective(100px) translateZ(15px)', 'perspective(40px) translateZ(15px)', 'perspective(25px) translateZ(15px)'],
|
||||
|
||||
// Test that perspective is clamped to 1px.
|
||||
['perspective(0.1px) translateZ(0.25px)', 'perspective(1px) translateZ(0.25px)', 'perspective(0.1px) translateZ(0.25px)'],
|
||||
['perspective(0px) translateZ(0.25px)', 'perspective(1px) translateZ(0.25px)', 'perspective(0px) translateZ(0.25px)'],
|
||||
['perspective(0px) translateZ(0.5px)', 'perspective(1.5px) translateZ(0.5px)', 'perspective(3px) translateZ(0.5px)'],
|
||||
{ test: ['perspective(10px) translateZ(0.5px)', 'translateZ(0.5px)', 'perspective(1px) translateZ(0.5px)'], midpoint: -1 },
|
||||
{ test: ['perspective(1px) translateZ(0.5px)', 'perspective(1px) translateZ(0.5px)', 'perspective(10px) translateZ(0.5px)'], midpoint: -1 }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// Initial setup, which includes properties that will be overridden to
|
||||
// test invalidation.
|
||||
|
|
@ -101,13 +116,25 @@ function styleBody(){
|
|||
body.style.flexWrap = 'wrap';
|
||||
}
|
||||
|
||||
// Simulate a static image at 50% progeress with a running animation.
|
||||
// Simulate a static image at 50% progress with a running animation.
|
||||
// The easing curve has zero slope and curvature at its midpoint of 50% -> 50%.
|
||||
// The timing values are chosen so as so that a delay of up to 10s will not
|
||||
// cause a visual change.
|
||||
const easing = 'cubic-bezier(0,1,1,0)';
|
||||
const duration = 1e9;
|
||||
const delay = -duration/2;
|
||||
const midpointOptions = {
|
||||
easing: 'cubic-bezier(0,1,1,0)',
|
||||
duration: duration,
|
||||
delay: -duration/2
|
||||
};
|
||||
|
||||
// Similar to midpointOptions, but to produce the interpolation result
|
||||
// at -1 instead of the interpolation result at 0.5. This easing curve
|
||||
// has zero slope at its midpoint of -100% (though does have curvature).
|
||||
const negoneOptions = {
|
||||
easing: 'cubic-bezier(0,-1,1,-2)',
|
||||
duration: duration,
|
||||
delay: -duration/2
|
||||
};
|
||||
|
||||
// Indices to unpack a test case, which is in the format
|
||||
// [start, midpoint, end]
|
||||
|
|
@ -117,13 +144,22 @@ const endIndex = 2;
|
|||
|
||||
async function createTests(tests) {
|
||||
styleBody();
|
||||
for (const test of tests) {
|
||||
for (const obj of tests) {
|
||||
let test = ("test" in obj) ? obj.test : obj;
|
||||
let midpoint = ("midpoint" in obj) ? obj.midpoint : 0.5;
|
||||
let options;
|
||||
if (midpoint == 0.5) {
|
||||
options = midpointOptions;
|
||||
} else if (midpoint == -1) {
|
||||
options = negoneOptions;
|
||||
} else {
|
||||
document.appendChild(document.createTextNode("unexpected midpoint " + midpoint));
|
||||
}
|
||||
let div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
initialStyle(div);
|
||||
var anim = div.animate(
|
||||
{transform: [test[startIndex], test[endIndex]]},
|
||||
{duration: duration, delay: delay, easing: easing});
|
||||
var anim =
|
||||
div.animate({transform: [test[startIndex], test[endIndex]]}, options);
|
||||
await anim.ready;
|
||||
finalStyle(div); // Change size to test invalidation.
|
||||
}
|
||||
|
|
@ -138,14 +174,15 @@ async function createTests(tests) {
|
|||
// animated and non-animated pathways.
|
||||
async function createRefs(tests) {
|
||||
styleBody();
|
||||
for (const test of tests) {
|
||||
for (const obj of tests) {
|
||||
let test = ("test" in obj) ? obj.test : obj;
|
||||
let div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
initialStyle(div);
|
||||
finalStyle(div);
|
||||
var anim = div.animate(
|
||||
{transform: [test[midIndex], test[midIndex]]},
|
||||
{duration: duration, delay: delay, easing: easing});
|
||||
midpointOptions);
|
||||
await anim.ready;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,12 +45,27 @@
|
|||
// everything to two decimal places, which isn't OK for the matrices
|
||||
// that result from large perspective values.
|
||||
const compareWithPerspective = (actual, expected) => {
|
||||
const matrixRegExp = /^matrix3d\(((?:(?:[-0-9.]+), ){15}(?:[-0-9.]+))\)$/;
|
||||
const actualArray = actual.match(matrixRegExp)[1].split(", ").map(Number);
|
||||
const expectedArray = expected.match(matrixRegExp)[1].split(", ").map(Number);
|
||||
// TODO: This RegExp should be more precise to capture only what is a
|
||||
// valid float, and this code should be merged with other code doing
|
||||
// the same thing, e.g., RoundMatrix in
|
||||
// web-animations/animation-model/animation-types/property-list.js .
|
||||
const matrixRegExp = /^matrix3d\(((?:(?:[-0-9.e]+), ){15}(?:[-0-9.]+))\)$/;
|
||||
const actualMatch = actual.match(matrixRegExp);
|
||||
const expectedMatch = expected.match(matrixRegExp);
|
||||
assert_not_equals(actualMatch, null, `${actual} should be a matrix`);
|
||||
assert_not_equals(expectedMatch, null, `${expected} should be a matrix`);
|
||||
if (actualMatch === null || expectedMatch === null) {
|
||||
return;
|
||||
}
|
||||
const actualArray = actualMatch[1].split(", ").map(Number);
|
||||
const expectedArray = expectedMatch[1].split(", ").map(Number);
|
||||
assert_equals(actualArray.length, 16);
|
||||
assert_equals(expectedArray.length, 16);
|
||||
|
||||
if (actualArray.length != expectedArray.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i in actualArray) {
|
||||
const error = Math.abs((actualArray[i] - expectedArray[i])) /
|
||||
Math.max(1e-6,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#interpolation-of-transform-functions">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#transformvalue-objects">
|
||||
<meta name="assert" content="transform gives the correct computed values when interpolated">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
@ -31,42 +31,34 @@ function interpolation_test(from, to, expected_50) {
|
|||
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
|
||||
}, "Interpolation between " + from + " and " + to + " gives the correct " +
|
||||
"computed value halfway according to computedStyleMap with zoom active.");
|
||||
|
||||
test(t => {
|
||||
let div = createDiv(t);
|
||||
let anim = div.animate({transform: [from, to]}, 2000);
|
||||
anim.pause();
|
||||
anim.currentTime = 1000;
|
||||
anim.commitStyles()
|
||||
let halfway = div.style.transform;
|
||||
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
|
||||
}, "Interpolation between " + from + " and " + to + " gives the correct " +
|
||||
"computed value halfway according to commitStyles.");
|
||||
}
|
||||
|
||||
interpolation_test('translateX(0px)', 'translateX(50px)', 'translateX(25px)');
|
||||
interpolation_test('translateX(0%)', 'translateX(50%)', 'translateX(25%)');
|
||||
interpolation_test('translateX(0px)', 'translateX(50px)', 'translate(25px, 0px)');
|
||||
interpolation_test('translateX(0%)', 'translateX(50%)', 'translate(25%, 0px)');
|
||||
interpolation_test('translateY(0%)', 'translateX(50%)', 'translate(25%, 0px)');
|
||||
interpolation_test('translateX(50px)', 'translateY(50px)', 'translate(25px, 25px)');
|
||||
interpolation_test('translateX(50px)', 'translateZ(50px)', 'translate3d(25px, 0px, 25px)');
|
||||
interpolation_test('translateZ(50px)', 'translateX(50px)', 'translate3d(25px, 0px, 25px)');
|
||||
interpolation_test('translateZ(-50px)','translateZ(50px)', 'translateZ(0px)');
|
||||
interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%)');
|
||||
interpolation_test('translateZ(-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)');
|
||||
interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%, 0px)');
|
||||
interpolation_test('translate(50%)', 'translate(100%, 50%)', 'translate(75%, 25%)');
|
||||
interpolation_test('translate(0%, 50%)', 'translate(50%, 100%)', 'translate(25%, 75%)');
|
||||
interpolation_test('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)');
|
||||
interpolation_test('translate(50px, 0px)', 'translate(100px, 0px)', 'translate(75px, 0px)');
|
||||
interpolation_test('translate(50px, -50px)', 'translate(100px, 50px)', 'translate(75px, 0px)');
|
||||
|
||||
interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)');
|
||||
interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotateZ(60deg)');
|
||||
interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 60deg)');
|
||||
interpolation_test('rotate(0deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 45deg)');
|
||||
interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotateX(45deg)');
|
||||
interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)');
|
||||
interpolation_test('rotate(0deg)', 'rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)');
|
||||
|
||||
interpolation_test('scale(1)', 'scale(2)', 'scale(1.5)');
|
||||
interpolation_test('scale(1)', 'scale(2)', 'scale(1.5, 1.5)');
|
||||
interpolation_test('scale(1, 3)', 'scale(2)', 'scale(1.5, 2.5)');
|
||||
interpolation_test('scaleX(1)', 'scaleX(2)', 'scaleX(1.5)');
|
||||
interpolation_test('scaleY(1)', 'scaleY(2)', 'scaleY(1.5)');
|
||||
interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scaleZ(1.5)');
|
||||
interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5)');
|
||||
interpolation_test('scaleX(1)', 'scaleX(2)', 'scale(1.5, 1)');
|
||||
interpolation_test('scaleY(1)', 'scaleY(2)', 'scale(1, 1.5)');
|
||||
interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scale3d(1, 1, 1.5)');
|
||||
interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5, 1.5)');
|
||||
interpolation_test('scaleX(2)', 'scaleY(3)', 'scale(1.5, 2)');
|
||||
interpolation_test('scaleZ(1)', 'scale(2)', 'scale3d(1.5, 1.5, 1)');
|
||||
interpolation_test('scale(1, 2)', 'scale(3, 4)', 'scale(2, 3)');
|
||||
|
|
@ -80,4 +72,19 @@ interpolation_test('skewX(0deg)', 'skewX(180deg)', 'skewX(90deg)');
|
|||
interpolation_test('skew(0deg, 0deg)', 'skew(60deg, 60deg)', 'skew(30deg, 30deg)');
|
||||
interpolation_test('skew(45deg, 0deg)', 'skew(0deg, 45deg)', 'skew(22.5deg, 22.5deg)');
|
||||
|
||||
interpolation_test('perspective(10px)', 'perspective(2.5px)', 'perspective(4px)');
|
||||
interpolation_test('perspective(10px)', 'perspective(none)', 'perspective(20px)');
|
||||
interpolation_test('perspective(none)', 'perspective(none)', 'perspective(none)');
|
||||
|
||||
// A matrix() with just scale and translation.
|
||||
interpolation_test('matrix(2, 0, 0, 2, 10, 30)', 'matrix(4, 0, 0, 6, 14, 10)', 'matrix(3, 0, 0, 4, 12, 20)');
|
||||
|
||||
// A matrix3d() with just scale and translation.
|
||||
interpolation_test('matrix3d(1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 5, 10, 4, 1)', 'matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, -11, 2, 2, 1)', 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, -3, 6, 3, 1)');
|
||||
// A matrix3d() with just perspective.
|
||||
interpolation_test('matrix3d(1, 0, 0, 3, 0, 1, 0, 2, 0, 0, 1, 8, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 5, 0, 1, 0, 8, 0, 0, 1, 14, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 4, 0, 1, 0, 5, 0, 0, 1, 11, 0, 0, 0, 1)');
|
||||
|
||||
// NOTE: New tests added here should also be added in
|
||||
// transform-interpolation-inline-value.html.
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#interpolation-of-transform-functions">
|
||||
<meta name="assert" content="transform gives the correct inline values when interpolated">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
function interpolation_test(from, to, expected_50) {
|
||||
test(t => {
|
||||
let div = createDiv(t);
|
||||
let anim = div.animate({transform: [from, to]}, 2000);
|
||||
anim.pause();
|
||||
anim.currentTime = 1000;
|
||||
anim.commitStyles()
|
||||
let halfway = div.style.transform;
|
||||
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
|
||||
}, "Interpolation between " + from + " and " + to + " gives the correct " +
|
||||
"computed value halfway according to commitStyles.");
|
||||
}
|
||||
|
||||
interpolation_test('translateX(0px)', 'translateX(50px)', 'translateX(25px)');
|
||||
interpolation_test('translateX(0%)', 'translateX(50%)', 'translateX(25%)');
|
||||
interpolation_test('translateY(0%)', 'translateX(50%)', 'translate(25%)');
|
||||
interpolation_test('translateX(50px)', 'translateY(50px)', 'translate(25px, 25px)');
|
||||
interpolation_test('translateX(50px)', 'translateZ(50px)', 'translate3d(25px, 0px, 25px)');
|
||||
interpolation_test('translateZ(50px)', 'translateX(50px)', 'translate3d(25px, 0px, 25px)');
|
||||
interpolation_test('translateZ(-50px)','translateZ(50px)', 'translateZ(0px)');
|
||||
interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%)');
|
||||
interpolation_test('translate(50%)', 'translate(100%, 50%)', 'translate(75%, 25%)');
|
||||
interpolation_test('translate(0%, 50%)', 'translate(50%, 100%)', 'translate(25%, 75%)');
|
||||
interpolation_test('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)');
|
||||
interpolation_test('translate(50px, 0px)', 'translate(100px, 0px)', 'translate(75px)');
|
||||
interpolation_test('translate(50px, -50px)', 'translate(100px, 50px)', 'translate(75px)');
|
||||
|
||||
interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)');
|
||||
interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotateZ(60deg)');
|
||||
interpolation_test('rotate(0deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 45deg)');
|
||||
interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotateX(45deg)');
|
||||
interpolation_test('rotate(0deg)', 'rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)');
|
||||
|
||||
interpolation_test('scale(1)', 'scale(2)', 'scale(1.5)');
|
||||
interpolation_test('scale(1, 3)', 'scale(2)', 'scale(1.5, 2.5)');
|
||||
interpolation_test('scaleX(1)', 'scaleX(2)', 'scaleX(1.5)');
|
||||
interpolation_test('scaleY(1)', 'scaleY(2)', 'scaleY(1.5)');
|
||||
interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scaleZ(1.5)');
|
||||
interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5)');
|
||||
interpolation_test('scaleX(2)', 'scaleY(3)', 'scale(1.5, 2)');
|
||||
interpolation_test('scaleZ(1)', 'scale(2)', 'scale3d(1.5, 1.5, 1)');
|
||||
interpolation_test('scale(1, 2)', 'scale(3, 4)', 'scale(2, 3)');
|
||||
interpolation_test('scale3d(1, 2, 3)', 'scale3d(4, 5, 6)', 'scale3d(2.5, 3.5, 4.5)');
|
||||
interpolation_test('scale3d(1, 2, 3)', 'scale(4, 5)', 'scale3d(2.5, 3.5, 2)');
|
||||
interpolation_test('scale(1, 2)', 'scale3d(3, 4, 5)', 'scale3d(2, 3, 3)');
|
||||
|
||||
interpolation_test('skewX(0deg)', 'skewX(60deg)', 'skewX(30deg)');
|
||||
interpolation_test('skewX(0deg)', 'skewX(90deg)', 'skewX(45deg)');
|
||||
interpolation_test('skewX(0deg)', 'skewX(180deg)', 'skewX(90deg)');
|
||||
interpolation_test('skew(0deg, 0deg)', 'skew(60deg, 60deg)', 'skew(30deg, 30deg)');
|
||||
interpolation_test('skew(45deg, 0deg)', 'skew(0deg, 45deg)', 'skew(22.5deg, 22.5deg)');
|
||||
|
||||
interpolation_test('perspective(10px)', 'perspective(2.5px)', 'perspective(4px)');
|
||||
interpolation_test('perspective(10px)', 'perspective(none)', 'perspective(20px)');
|
||||
interpolation_test('perspective(none)', 'perspective(none)', 'perspective(none)');
|
||||
|
||||
// A matrix() with just scale and translation.
|
||||
interpolation_test('matrix(2, 0, 0, 2, 10, 30)', 'matrix(4, 0, 0, 6, 14, 10)', 'matrix(3, 0, 0, 4, 12, 20)');
|
||||
|
||||
// A matrix3d() with just scale and translation.
|
||||
interpolation_test('matrix3d(1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 5, 10, 4, 1)', 'matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, -11, 2, 2, 1)', 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, -3, 6, 3, 1)');
|
||||
// A matrix3d() with just perspective.
|
||||
interpolation_test('matrix3d(1, 0, 0, 3, 0, 1, 0, 2, 0, 0, 1, 8, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 5, 0, 1, 0, 8, 0, 0, 1, 14, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 4, 0, 1, 0, 5, 0, 0, 1, 11, 0, 0, 0, 1)');
|
||||
|
||||
// NOTE: New tests added here should also be added in
|
||||
// transform-interpolation-computed-value.html.
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="transform-interpolation-ref.html?perspective">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
|
||||
|
||||
<script src="../../../common/reftest-wait.js"></script>
|
||||
<script src="support/transform-interpolation-reftests.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
createTests(transformTests.perspective);
|
||||
</script>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="transform-interpolation-ref.html?rotate">
|
||||
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-17">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
|
||||
|
||||
<script src="../../../common/reftest-wait.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset="UTF-8">
|
||||
<title>transform interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#interpolation-of-transforms">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
<script src="support/transform-interpolation-reftests.js"></script>
|
||||
|
||||
<!--
|
||||
|
||||
The tests in transform-interpolation-reftests.js are used for reftests
|
||||
that are designed to test animation that happens on the compositor.
|
||||
Here we run those same tests through test_interpolation to check that
|
||||
they match the non-compositor codepath.
|
||||
|
||||
-->
|
||||
|
||||
<body>
|
||||
<script>
|
||||
for (const set in transformTests) {
|
||||
for (const obj of transformTests[set]) {
|
||||
let test = ("test" in obj) ? obj.test : obj;
|
||||
let midpoint = ("midpoint" in obj) ? obj.midpoint : 0.5;
|
||||
test_interpolation({
|
||||
property: 'transform',
|
||||
from: test[0],
|
||||
to: test[2]
|
||||
}, [
|
||||
{ at: midpoint, expect: test[1] },
|
||||
]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -65,7 +65,7 @@ test_composition({
|
|||
addTo: '100px',
|
||||
}, [
|
||||
{at: -1, expect: '-100px'},
|
||||
{at: 0, expect: 'none'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.25, expect: '25px'},
|
||||
{at: 0.75, expect: '75px'},
|
||||
{at: 1, expect: '100px'},
|
||||
|
|
@ -79,7 +79,7 @@ test_composition({
|
|||
addTo: '100px',
|
||||
}, [
|
||||
{at: -1, expect: '-100px'},
|
||||
{at: 0, expect: 'none'},
|
||||
{at: 0, expect: '0px'},
|
||||
{at: 0.25, expect: '25px'},
|
||||
{at: 0.75, expect: '75px'},
|
||||
{at: 1, expect: '100px'},
|
||||
|
|
@ -96,7 +96,7 @@ test_composition({
|
|||
{at: 0, expect: '0px 40px 60px'},
|
||||
{at: 0.25, expect: '0px 30px 45px'},
|
||||
{at: 0.75, expect: '0px 10px 15px'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 1, expect: '0px'},
|
||||
{at: 2, expect: '0px -40px -60px'},
|
||||
]);
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ test_composition({
|
|||
{at: 0, expect: '0px 40px 60px'},
|
||||
{at: 0.25, expect: '0px 30px 45px'},
|
||||
{at: 0.75, expect: '0px 10px 15px'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 1, expect: '0px'},
|
||||
{at: 2, expect: '0px -40px -60px'},
|
||||
]);
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ test_composition({
|
|||
{at: 0.25, expect: '60px 45px 45px'},
|
||||
{at: 0.5, expect: '40px 30px 30px'},
|
||||
{at: 0.75, expect: '20px 15px 15px'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 1, expect: '0px'},
|
||||
{at: 2, expect: '-80px -60px -60px'},
|
||||
]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@
|
|||
to: '240% 160%',
|
||||
}, [
|
||||
{at: -1, expect: 'calc(960px - 240%) calc(800px - 160%) 640px'},
|
||||
{at: 0, expect: '480px 400px 320px'},
|
||||
{at: 0, expect: 'calc(0% + 480px) calc(0% + 400px) 320px'},
|
||||
{at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%) 280px'},
|
||||
{at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px) 40px'},
|
||||
{at: 1, expect: '240% 160%'},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue