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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/animations/interpolation/webkit-mask-image-interpolation.html

Issue 1265873002: Add test coverage for interpolations using CSS wide keywords and neutral keyframes (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased Created 5 years, 4 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
« no previous file with comments | « LayoutTests/animations/interpolation/webkit-mask-box-image-width-interpolation-expected.txt ('k') | LayoutTests/animations/interpolation/webkit-mask-image-interpolation-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/animations/interpolation/webkit-mask-image-interpolation.html
diff --git a/LayoutTests/animations/interpolation/webkit-mask-image-interpolation.html b/LayoutTests/animations/interpolation/webkit-mask-image-interpolation.html
index 03e20a038bc2ba05dc14431a28be7af901726e0b..e9d5cef626e003427d9fa5d0ac67872c4363ee9f 100644
--- a/LayoutTests/animations/interpolation/webkit-mask-image-interpolation.html
+++ b/LayoutTests/animations/interpolation/webkit-mask-image-interpolation.html
@@ -1,96 +1,101 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
-div.wrapper {
- border: 10px solid black;
- width: 100px;
- height: 100px;
- display: inline-block;
- margin-bottom: 10px;
+.parent {
+ -webkit-mask-image: url(../resources/blue-20.png);
}
.target {
- -webkit-mask-position: top, bottom;
- -webkit-mask-size: 100px 50px;
- -webkit-mask-repeat: no-repeat;
- background-color: blue;
- height: 100%;
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+ background-color: black;
+ -webkit-mask-image: url(../resources/stripes-20.png);
}
-div.wrapper:nth-child(2n) {
- border-color: green;
+.expected {
+ background-color: green;
+ margin-right: 10px;
}
</style>
<body>
-<template id="target-template">
- <div class="wrapper">
- <div class="target"></div>
- </div>
-</template>
<script src="resources/interpolation-test.js"></script>
<script>
-// Image to image
-var from = 'url(../resources/stripes-100.png)';
-var to = 'url(../resources/blue-100.png)';
-assertInterpolation({
+function assertCrossfadeInterpolation(options) {
+ var fromComputed = options.fromComputed || options.from;
+ assertInterpolation({
+ property: '-webkit-mask-image',
+ from: options.from,
+ to: options.to,
+ }, [
+ {at: -0.3, is: fromComputed},
+ {at: 0, is: fromComputed},
+ {at: 0.3, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ', 0.3)'},
+ {at: 0.5, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ', 0.5)'},
+ {at: 0.6, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ', 0.6)'},
+ {at: 1, is: options.to},
+ {at: 1.5, is: options.to},
+ ]);
+}
+
+// neutral
+assertCrossfadeInterpolation({
+ from: '',
+ fromComputed: 'url(../resources/stripes-20.png)',
+ to: 'url(../resources/green-20.png)',
+});
+
+// initial
+assertNoInterpolation({
property: '-webkit-mask-image',
- from: from,
- to: to,
-}, [
- {at: -0.3, is: from},
- {at: 0, is: from},
- {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'},
- {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'},
- {at: 1, is: to},
- {at: 1.5, is: to},
-]);
+ from: 'initial',
+ to: 'url(../resources/green-20.png)',
+});
-// Image to gradient
-from = 'url(../resources/stripes-100.png)';
-to = 'linear-gradient(45deg, blue, transparent)';
-assertInterpolation({
+// inherit
+assertCrossfadeInterpolation({
+ from: 'inherit',
+ fromComputed: 'url(../resources/blue-20.png)',
+ to: 'url(../resources/green-20.png)',
+});
+
+// unset
+assertNoInterpolation({
property: '-webkit-mask-image',
- from: from,
- to: to,
-}, [
- {at: -0.3, is: from},
- {at: 0, is: from},
- {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'},
- {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'},
- {at: 1, is: to},
- {at: 1.5, is: to},
-]);
+ from: 'unset',
+ to: 'url(../resources/stripes-20.png)',
+});
+
+// Image to image
+assertCrossfadeInterpolation({
+ from: 'url(../resources/stripes-20.png)',
+ to: 'url(../resources/blue-20.png)',
+});
+
+// Image to gradient
+assertCrossfadeInterpolation({
+ from: 'url(../resources/stripes-20.png)',
+ to: 'linear-gradient(45deg, blue, transparent)',
+});
// Gradient to gradient
-from = 'linear-gradient(-45deg, blue, transparent)';
-to = 'linear-gradient(45deg, blue, transparent)';
-assertInterpolation({
- property: '-webkit-mask-image',
- from: from,
- to: to,
-}, [
- {at: -0.3, is: from},
- {at: 0, is: from},
- {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'},
- {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'},
- {at: 1, is: to},
- {at: 1.5, is: to},
-]);
+assertCrossfadeInterpolation({
+ from: 'linear-gradient(-45deg, blue, transparent)',
+ to: 'linear-gradient(45deg, blue, transparent)',
+});
// Keyword to image
-from = 'none';
-to = 'url(../resources/blue-100.png)';
assertNoInterpolation({
property: '-webkit-mask-image',
- from: from,
- to: to,
+ from: 'none',
+ to: 'url(../resources/blue-20.png)',
});
// Multiple to multiple
-var fromA = 'url(../resources/stripes-100.png)';
+var fromA = 'url(../resources/stripes-20.png)';
var fromB = 'linear-gradient(-45deg, blue, transparent)';
-var toA = 'url(../resources/blue-100.png)';
-var toB = 'url(../resources/stripes-100.png)';
-from = fromA + ', ' + fromB;
-to = toA + ', ' + toB;
+var toA = 'url(../resources/blue-20.png)';
+var toB = 'url(../resources/stripes-20.png)';
+var from = fromA + ', ' + fromB;
+var to = toA + ', ' + toB;
assertInterpolation({
property: '-webkit-mask-image',
from: from,
@@ -109,9 +114,9 @@ assertInterpolation({
]);
// Single to multiple
-from = 'url(../resources/blue-100.png)';
-var toA = 'url(../resources/stripes-100.png)';
-var toB = 'url(../resources/blue-100.png)';
+from = 'url(../resources/blue-20.png)';
+toA = 'url(../resources/stripes-20.png)';
+toB = 'url(../resources/blue-20.png)';
to = toA + ', ' + toB;
assertInterpolation({
property: '-webkit-mask-image',
@@ -127,12 +132,10 @@ assertInterpolation({
]);
// Multiple mismatched types
-from = 'url(../resources/blue-100.png), none';
-to = 'url(../resources/stripes-100.png), url(../resources/blue-100.png)';
assertNoInterpolation({
property: '-webkit-mask-image',
- from: from,
- to: to,
+ from: 'url(../resources/blue-20.png), none',
+ to: 'url(../resources/stripes-20.png), url(../resources/blue-20.png)',
});
</script>
</body>
« no previous file with comments | « LayoutTests/animations/interpolation/webkit-mask-box-image-width-interpolation-expected.txt ('k') | LayoutTests/animations/interpolation/webkit-mask-image-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698