| Index: third_party/WebKit/LayoutTests/animations/composition/clip-composition.html
|
| diff --git a/third_party/WebKit/LayoutTests/animations/composition/clip-composition.html b/third_party/WebKit/LayoutTests/animations/composition/clip-composition.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..abeed21a97d3331a2d6bb532c0093078b80cb746
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/animations/composition/clip-composition.html
|
| @@ -0,0 +1,88 @@
|
| +<!DOCTYPE html>
|
| +<body>
|
| +<script src="../interpolation/resources/interpolation-test.js"></script>
|
| +<script>
|
| +assertComposition({
|
| + property: 'clip',
|
| + underlying: 'rect(0px 10px 20px 30px)',
|
| + addFrom: 'rect(40px 50px 60px 70px)',
|
| + addTo: 'rect(140px 150px 160px 170px)',
|
| +}, [
|
| + {at: -1, is: 'rect(-60px -40px -20px 0px)'},
|
| + {at: 0, is: 'rect(40px 60px 80px 100px)'},
|
| + {at: 0.25, is: 'rect(65px 85px 105px 125px)'},
|
| + {at: 0.75, is: 'rect(115px 135px 155px 175px)'},
|
| + {at: 1, is: 'rect(140px 160px 180px 200px)'},
|
| + {at: 2, is: 'rect(240px 260px 280px 300px)'},
|
| +]);
|
| +
|
| +assertComposition({
|
| + property: 'clip',
|
| + underlying: 'auto',
|
| + addFrom: 'rect(0px 0px 0px 0px)',
|
| + addTo: 'rect(100px 100px 100px 100px)',
|
| +}, [
|
| + {at: -1, is: 'rect(-100px -100px -100px -100px)'},
|
| + {at: 0, is: 'rect(0px 0px 0px 0px)'},
|
| + {at: 0.25, is: 'rect(25px 25px 25px 25px)'},
|
| + {at: 0.75, is: 'rect(75px 75px 75px 75px)'},
|
| + {at: 1, is: 'rect(100px 100px 100px 100px)'},
|
| + {at: 2, is: 'rect(200px 200px 200px 200px)'},
|
| +]);
|
| +
|
| +assertComposition({
|
| + property: 'clip',
|
| + underlying: 'rect(50px auto auto 50px)',
|
| + addFrom: 'rect(50px auto auto 50px)',
|
| + addTo: 'rect(100px 100px 100px 100px)',
|
| +}, [
|
| + {at: -1, is: 'rect(100px auto auto 100px)'},
|
| + {at: 0, is: 'rect(100px auto auto 100px)'},
|
| + {at: 0.25, is: 'rect(100px auto auto 100px)'},
|
| + {at: 0.75, is: 'rect(100px 100px 100px 100px)'},
|
| + {at: 1, is: 'rect(100px 100px 100px 100px)'},
|
| + {at: 2, is: 'rect(100px 100px 100px 100px)'},
|
| +]);
|
| +
|
| +assertComposition({
|
| + property: 'clip',
|
| + underlying: 'rect(50px 50px 50px 50px)',
|
| + addFrom: 'rect(50px auto auto 50px)',
|
| + addTo: 'rect(100px auto auto 100px)',
|
| +}, [
|
| + {at: -1, is: 'rect(0px auto auto 0px)'},
|
| + {at: 0, is: 'rect(50px auto auto 50px)'},
|
| + {at: 0.25, is: 'rect(62.5px auto auto 62.5px)'},
|
| + {at: 0.75, is: 'rect(87.5px auto auto 87.5px)'},
|
| + {at: 1, is: 'rect(100px auto auto 100px)'},
|
| + {at: 2, is: 'rect(150px auto auto 150px)'},
|
| +]);
|
| +
|
| +assertComposition({
|
| + property: 'clip',
|
| + underlying: 'rect(50px auto auto 50px)',
|
| + addFrom: 'rect(50px 50px 50px 50px)',
|
| + replaceTo: 'rect(100px auto auto 100px)',
|
| +}, [
|
| + {at: -1, is: 'rect(50px 50px 50px 50px)'},
|
| + {at: 0, is: 'rect(50px 50px 50px 50px)'},
|
| + {at: 0.25, is: 'rect(50px 50px 50px 50px)'},
|
| + {at: 0.75, is: 'rect(100px auto auto 100px)'},
|
| + {at: 1, is: 'rect(100px auto auto 100px)'},
|
| + {at: 2, is: 'rect(100px auto auto 100px)'},
|
| +]);
|
| +
|
| +assertComposition({
|
| + property: 'clip',
|
| + underlying: 'rect(50px 50px 50px 50px)',
|
| + addFrom: 'rect(50px auto auto 50px)',
|
| + addTo: 'auto',
|
| +}, [
|
| + {at: -1, is: 'rect(50px auto auto 50px)'},
|
| + {at: 0, is: 'rect(50px auto auto 50px)'},
|
| + {at: 0.25, is: 'rect(50px auto auto 50px)'},
|
| + {at: 0.75, is: 'auto'},
|
| + {at: 1, is: 'auto'},
|
| + {at: 2, is: 'auto'},
|
| +]);
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 1640643002:
Add additive animation support for CSS property clip (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@_propertyInterpolationTypesMapping