Skip to content

GitLab

T
tangled
Commit 7e297cdc authored by Stephen McGruer's avatar Stephen McGruer Committed by Commit Bot
Browse files
Options

Port translate-interpolation.html to WPT 

There were some remaining tests in the Blink-internal version that were
not present in the external/WPT version, so port those over.

Bug: 900581
Change-Id: I40d09b0bd87abe9294e82818688ce60332317438
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1824122Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699925}
parent 3413ccf5
Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 224 deletions
third_party/blink/web_tests/animations/interpolation/translate-interpolation.html deleted 100644 → 0
View file @ 3413ccf5
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
translate: 100px 200px 300px;
}
.target {
width: 100px;
height: 100px;
background-color: black;
translate: 10px;
}
.expected {
background-color: green;
}
</style>
<template id="target-template">
<div class="parent">
<div class="target"></div>
</div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'translate',
from: 'none',
to: '300px 200px 100px',
}, [
{at: -1, is: '-300px -200px -100px'},
{at: 0, is: 'none'},
{at: 0.25, is: '75px 50px 25px'},
{at: 0.75, is: '225px 150px 75px'},
{at: 1, is: '300px 200px 100px'},
{at: 2, is: '600px 400px 200px'},
]);
assertInterpolation({
property: 'translate',
from: neutralKeyframe,
to: '20px',
}, [
{at: -1, is: '0px'},
{at: 0, is: '10px'},
{at: 0.25, is: '12.5px'},
{at: 0.75, is: '17.5px'},
{at: 1, is: '20px'},
{at: 2, is: '30px'},
]);
assertInterpolation({
property: 'translate',
from: 'unset',
to: '20px',
}, [
{at: -1, is: '-20px'},
{at: 0, is: 'none'},
{at: 0.25, is: '5px'},
{at: 0.75, is: '15px'},
{at: 1, is: '20px'},
{at: 2, is: '40px'},
]);
assertInterpolation({
property: 'translate',
from: '-100px',
to: '100px',
}, [
{at: -1, is: '-300px'},
{at: 0, is: '-100px'},
{at: 0.25, is: '-50px'},
{at: 0.75, is: '50px'},
{at: 1, is: '100px'},
{at: 2, is: '300px'},
]);
assertInterpolation({
property: 'translate',
from: '-100%',
to: '100%',
}, [
{at: -1, is: '-300%'},
{at: 0, is: '-100%'},
{at: 0.25, is: '-50%'},
{at: 0.75, is: '50%'},
{at: 1, is: '100%'},
{at: 2, is: '300%'},
]);
assertInterpolation({
property: 'translate',
from: '-100px -50px',
to: '100px 50px',
}, [
{at: -1, is: '-300px -150px'},
{at: 0, is: '-100px -50px'},
{at: 0.25, is: '-50px -25px'},
{at: 0.75, is: '50px 25px'},
{at: 1, is: '100px 50px'},
{at: 2, is: '300px 150px'},
]);
assertInterpolation({
property: 'translate',
from: '-100px -50px 100px',
to: '100px 50px 0px',
}, [
{at: -1, is: '-300px -150px 200px'},
{at: 0, is: '-100px -50px 100px'},
{at: 0.25, is: '-50px -25px 75px'},
{at: 0.75, is: '50px 25px 25px'},
{at: 1, is: '100px 50px 0px'},
{at: 2, is: '300px 150px -100px'},
]);
assertInterpolation({
property: 'translate',
from: '0px',
to: '-100px -50px 100px',
}, [
{at: -1, is: '100px 50px -100px'},
{at: 0, is: '0px'},
{at: 0.25, is: '-25px -12.5px 25px'},
{at: 0.75, is: '-75px -37.5px 75px'},
{at: 1, is: '-100px -50px 100px'},
{at: 2, is: '-200px -100px 200px'},
]);
assertInterpolation({
property: 'translate',
from: '-100px -50px 100px',
to: '0px',
}, [
{at: -1, is: '-200px -100px 200px'},
{at: 0, is: '-100px -50px 100px'},
{at: 0.25, is: '-75px -37.5px 75px'},
{at: 0.75, is: '-25px -12.5px 25px'},
{at: 1, is: '0px'},
{at: 2, is: '100px 50px -100px'},
]);
assertInterpolation({
property: 'translate',
from: 'inherit',
to: '200px 100px 200px',
}, [
{at: -1, is: '0px 300px 400px'},
{at: 0, is: '100px 200px 300px'},
{at: 0.25, is: '125px 175px 275px'},
{at: 0.75, is: '175px 125px 225px'},
{at: 1, is: '200px 100px 200px'},
{at: 2, is: '300px 0px 100px'},
]);
assertInterpolation({
property: 'translate',
from: '200px 100px 200px',
to: 'inherit',
}, [
{at: -1, is: '300px 0px 100px'},
{at: 0, is: '200px 100px 200px'},
{at: 0.25, is: '175px 125px 225px'},
{at: 0.75, is: '125px 175px 275px'},
{at: 1, is: '100px 200px 300px'},
{at: 2, is: '0px 300px 400px'},
]);
assertInterpolation({
property: 'translate',
from: 'initial',
to: '200px 100px 200px',
}, [
{at: -1, is: '-200px -100px -200px'},
{at: 0, is: 'none'},
{at: 0.25, is: '50px 25px 50px'},
{at: 0.75, is: '150px 75px 150px'},
{at: 1, is: '200px 100px 200px'},
{at: 2, is: '400px 200px 400px'},
]);
assertInterpolation({
property: 'translate',
from: '200px 100px 400px',
to: 'initial',
}, [
{at: -1, is: '400px 200px 800px'},
{at: 0, is: '200px 100px 400px'},
{at: 0.25, is: '150px 75px 300px'},
{at: 0.75, is: '50px 25px 100px'},
{at: 1, is: 'none'},
{at: 2, is: '-200px -100px -400px'},
]);
assertInterpolation({
property: 'translate',
from: 'initial',
to: 'inherit',
}, [
{at: -1, is: '-100px -200px -300px'},
{at: 0, is: 'none'},
{at: 0.25, is: '25px 50px 75px'},
{at: 0.75, is: '75px 150px 225px'},
{at: 1, is: '100px 200px 300px'},
{at: 2, is: '200px 400px 600px'},
]);
assertInterpolation({
property: 'translate',
from: 'inherit',
to: 'initial',
}, [
{at: -1, is: '200px 400px 600px'},
{at: 0, is: '100px 200px 300px'},
{at: 0.25, is: '75px 150px 225px'},
{at: 0.75, is: '25px 50px 75px'},
{at: 1, is: 'none'},
{at: 2, is: '-100px -200px -300px'},
]);
</script>
third_party/blink/web_tests/external/wpt/css/css-transforms/animation/translate-interpolation.html
View file @ 7e297cdc
...@@ -18,10 +18,70 @@ ...@@ -18,10 +18,70 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
.parent {
translate: 100px 200px 300px;
}
.target {
width: 100px;
height: 100px;
background-color: black;
translate: 10px;
}
.expected {
background-color: green;
}
</style> </style>
</head> </head>
<body> <body>
<template id="target-template">
<div class="parent">
<div class="target"></div>
</div>
</template>
<script> <script>
// Matching one-length (pixels) animation.
test_interpolation({
property: 'translate',
from: '-100px',
to: '100px',
}, [
{at: -1, expect: '-300px'},
{at: 0, expect: '-100px'},
{at: 0.25, expect: '-50px'},
{at: 0.75, expect: '50px'},
{at: 1, expect: '100px'},
{at: 2, expect: '300px'},
]);
// Matching one-length (percentage) animation.
test_interpolation({
property: 'translate',
from: '-100%',
to: '100%',
}, [
{at: -1, expect: '-300%'},
{at: 0, expect: '-100%'},
{at: 0.25, expect: '-50%'},
{at: 0.75, expect: '50%'},
{at: 1, expect: '100%'},
{at: 2, expect: '300%'},
]);
// Matching two-length (all pixels) animation.
test_interpolation({
property: 'translate',
from: '-100px -50px',
to: '100px 50px',
}, [
{at: -1, expect: '-300px -150px'},
{at: 0, expect: '-100px -50px'},
{at: 0.25, expect: '-50px -25px'},
{at: 0.75, expect: '50px 25px'},
{at: 1, expect: '100px 50px'},
{at: 2, expect: '300px 150px'},
]);
// Matching three-length (all pixels) animation.
test_interpolation({ test_interpolation({
property: 'translate', property: 'translate',
from: '220px 240px 260px', from: '220px 240px 260px',
...@@ -35,6 +95,35 @@ ...@@ -35,6 +95,35 @@
{at: 2, expect: '380px 560px 740px'} {at: 2, expect: '380px 560px 740px'}
]); ]);
// Going from one length to three lengths.
test_interpolation({
property: 'translate',
from: '0px',
to: '-100px -50px 100px',
}, [
{at: -1, expect: '100px 50px -100px'},
{at: 0, expect: '0px'},
{at: 0.25, expect: '-25px -12.5px 25px'},
{at: 0.75, expect: '-75px -37.5px 75px'},
{at: 1, expect: '-100px -50px 100px'},
{at: 2, expect: '-200px -100px 200px'},
]);
// Going from three lengths to one length.
test_interpolation({
property: 'translate',
from: '-100px -50px 100px',
to: '0px',
}, [
{at: -1, expect: '-200px -100px 200px'},
{at: 0, expect: '-100px -50px 100px'},
{at: 0.25, expect: '-75px -37.5px 75px'},
{at: 0.75, expect: '-25px -12.5px 25px'},
{at: 1, expect: '0px'},
{at: 2, expect: '100px 50px -100px'},
]);
// Going from three-lengths to two-percentages.
test_interpolation({ test_interpolation({
property: 'translate', property: 'translate',
from: '480px 400px 320px', from: '480px 400px 320px',
...@@ -48,6 +137,21 @@ ...@@ -48,6 +137,21 @@
{at: 2, expect: 'calc(480% - 480px) calc(320% - 400px) -320px'} {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px) -320px'}
]); ]);
// Handling of the none value.
test_interpolation({
property: 'translate',
from: 'none',
to: 'none',
}, [
{at: -1, expect: 'none'},
{at: 0, expect: 'none'},
{at: 0.125, expect: 'none'},
{at: 0.875, expect: 'none'},
{at: 1, expect: 'none'},
{at: 2, expect: 'none'}
]);
// Going from none to a valid value; test that it converts properly.
test_interpolation({ test_interpolation({
property: 'translate', property: 'translate',
from: 'none', from: 'none',
...@@ -61,17 +165,114 @@ ...@@ -61,17 +165,114 @@
{at: 2, expect: '16px 160% 1600px'} {at: 2, expect: '16px 160% 1600px'}
]); ]);
// Test neutral keyframe; make sure it adds the underlying.
test_interpolation({ test_interpolation({
property: 'translate', property: 'translate',
from: 'none', from: neutralKeyframe,
to: 'none', to: '20px',
}, [ }, [
{at: -1, expect: 'none'}, {at: -1, expect: '0px'},
{at: 0, expect: '10px'},
{at: 0.25, expect: '12.5px'},
{at: 0.75, expect: '17.5px'},
{at: 1, expect: '20px'},
{at: 2, expect: '30px'},
]);
// Test initial value; for 'scale' this is 'none'.
test_interpolation({
property: 'translate',
from: 'initial',
to: '200px 100px 200px',
}, [
{at: -1, expect: '-200px -100px -200px'},
{at: 0, expect: 'none'}, {at: 0, expect: 'none'},
{at: 0.125, expect: 'none'}, {at: 0.25, expect: '50px 25px 50px'},
{at: 0.875, expect: 'none'}, {at: 0.75, expect: '150px 75px 150px'},
{at: 1, expect: '200px 100px 200px'},
{at: 2, expect: '400px 200px 400px'},
]);
test_interpolation({
property: 'translate',
from: '200px 100px 400px',
to: 'initial',
}, [
{at: -1, expect: '400px 200px 800px'},
{at: 0, expect: '200px 100px 400px'},
{at: 0.25, expect: '150px 75px 300px'},
{at: 0.75, expect: '50px 25px 100px'},
{at: 1, expect: 'none'}, {at: 1, expect: 'none'},
{at: 2, expect: 'none'} {at: 2, expect: '-200px -100px -400px'},
]);
// Test unset value; for 'translate' this is 'none'.
test_interpolation({
property: 'translate',
from: 'unset',
to: '20px',
}, [
{at: -1, expect: '-20px'},
{at: 0, expect: 'none'},
{at: 0.25, expect: '5px'},
{at: 0.75, expect: '15px'},
{at: 1, expect: '20px'},
{at: 2, expect: '40px'},
]);
// Test inherited value.
test_interpolation({
property: 'translate',
from: 'inherit',
to: '200px 100px 200px',
}, [
{at: -1, expect: '0px 300px 400px'},
{at: 0, expect: '100px 200px 300px'},
{at: 0.25, expect: '125px 175px 275px'},
{at: 0.75, expect: '175px 125px 225px'},
{at: 1, expect: '200px 100px 200px'},
{at: 2, expect: '300px 0px 100px'},
]);
test_interpolation({
property: 'translate',
from: '200px 100px 200px',
to: 'inherit',
}, [
{at: -1, expect: '300px 0px 100px'},
{at: 0, expect: '200px 100px 200px'},
{at: 0.25, expect: '175px 125px 225px'},
{at: 0.75, expect: '125px 175px 275px'},
{at: 1, expect: '100px 200px 300px'},
{at: 2, expect: '0px 300px 400px'},
]);
// Test combination of initial and inherit.
test_interpolation({
property: 'translate',
from: 'initial',
to: 'inherit',
}, [
{at: -1, expect: '-100px -200px -300px'},
{at: 0, expect: 'none'},
{at: 0.25, expect: '25px 50px 75px'},
{at: 0.75, expect: '75px 150px 225px'},
{at: 1, expect: '100px 200px 300px'},
{at: 2, expect: '200px 400px 600px'},
]);
test_interpolation({
property: 'translate',
from: 'inherit',
to: 'initial',
}, [
{at: -1, expect: '200px 400px 600px'},
{at: 0, expect: '100px 200px 300px'},
{at: 0.25, expect: '75px 150px 225px'},
{at: 0.75, expect: '25px 50px 75px'},
{at: 1, expect: 'none'},
{at: 2, expect: '-100px -200px -300px'},
]); ]);
</script> </script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment