Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1968)

Unified Diff: third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html

Issue 1689383002: Add additive animation support for CSS property background-size (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@_transformOriginInterpolationType
Patch Set: Rebased Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html
diff --git a/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html b/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html
index 0e6bae1da70f31e9839339112f2250e00fd88eea..1894880e7744e2bf5f23667760a040bd612e7bd9 100644
--- a/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html
+++ b/third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-size-interpolation.html
@@ -2,7 +2,7 @@
<meta charset="UTF-8">
<style>
.parent {
- -webkit-mask-size: 30px;
+ -webkit-mask-size: 300px 300px;
}
.target {
width: 100px;
@@ -15,7 +15,7 @@
url(../resources/stripes-100.png),
url(../resources/green-100.png);
-webkit-mask-position: 20% 20%, 20% 80%, 80% 20%, 80% 80%;
- -webkit-mask-size: 10px;
+ -webkit-mask-size: 100px 100px;
margin-bottom: 100px;
}
.expected {
@@ -29,41 +29,41 @@
assertInterpolation({
property: '-webkit-mask-size',
from: '',
- to: '20px',
+ to: '200px 250px',
}, [
- {at: -0.25, is: '7.5px, 7.5px, 7.5px, 7.5px'},
- {at: 0, is: '10px, 10px, 10px, 10px'},
- {at: 0.25, is: '12.5px, 12.5px, 12.5px, 12.5px'},
- {at: 0.5, is: '15px, 15px, 15px, 15px'},
- {at: 0.75, is: '17.5px, 17.5px, 17.5px, 17.5px'},
- {at: 1, is: '20px, 20px, 20px, 20px'},
- {at: 1.25, is: '22.5px, 22.5px, 22.5px, 22.5px'},
+ {at: -0.25, is: '75px 62.5px, 75px 62.5px, 75px 62.5px, 75px 62.5px'},
+ {at: 0, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
+ {at: 0.25, is: '125px 137.5px, 125px 137.5px, 125px 137.5px, 125px 137.5px'},
+ {at: 0.5, is: '150px 175px, 150px 175px, 150px 175px, 150px 175px'},
+ {at: 0.75, is: '175px 212.5px, 175px 212.5px, 175px 212.5px, 175px 212.5px'},
+ {at: 1, is: '200px 250px, 200px 250px, 200px 250px, 200px 250px'},
+ {at: 1.25, is: '225px 287.5px, 225px 287.5px, 225px 287.5px, 225px 287.5px'},
]);
assertNoInterpolation({
property: '-webkit-mask-size',
from: 'initial',
- to: '20px',
+ to: '200px 250px',
});
assertInterpolation({
property: '-webkit-mask-size',
from: 'inherit',
- to: '20px',
+ to: '200px 250px',
}, [
- {at: -0.25, is: '32.5px, 32.5px, 32.5px, 32.5px'},
- {at: 0, is: '30px, 30px, 30px, 30px'},
- {at: 0.25, is: '27.5px, 27.5px, 27.5px, 27.5px'},
- {at: 0.5, is: '25px, 25px, 25px, 25px'},
- {at: 0.75, is: '22.5px, 22.5px, 22.5px, 22.5px'},
- {at: 1, is: '20px, 20px, 20px, 20px'},
- {at: 1.25, is: '17.5px, 17.5px, 17.5px, 17.5px'},
+ {at: -0.25, is: '325px 312.5px, 325px 312.5px, 325px 312.5px, 325px 312.5px'},
+ {at: 0, is: '300px 300px, 300px 300px, 300px 300px, 300px 300px'},
+ {at: 0.25, is: '275px 287.5px, 275px 287.5px, 275px 287.5px, 275px 287.5px'},
+ {at: 0.5, is: '250px 275px, 250px 275px, 250px 275px, 250px 275px'},
+ {at: 0.75, is: '225px 262.5px, 225px 262.5px, 225px 262.5px, 225px 262.5px'},
+ {at: 1, is: '200px 250px, 200px 250px, 200px 250px, 200px 250px'},
+ {at: 1.25, is: '175px 237.5px, 175px 237.5px, 175px 237.5px, 175px 237.5px'},
]);
assertNoInterpolation({
property: '-webkit-mask-size',
from: 'unset',
- to: '20px',
+ to: '200px 250px',
});
// Matched keywords in size value list.

Powered by Google App Engine
This is Rietveld 408576698