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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/animations/interpolation/list-style-image-interpolation.html

Issue 1262283002: Fix 50% flip handling of CSS Animations using CSS wide keywords (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/border-image-source-interpolation-expected.txt ('k') | LayoutTests/animations/interpolation/list-style-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/list-style-image-interpolation.html
diff --git a/LayoutTests/animations/interpolation/list-style-image-interpolation.html b/LayoutTests/animations/interpolation/list-style-image-interpolation.html
index 098d2150cd51920392929ca2b96cca249692426a..373f7996b4ebb33f001ab03dc1a069a9111b377c 100644
--- a/LayoutTests/animations/interpolation/list-style-image-interpolation.html
+++ b/LayoutTests/animations/interpolation/list-style-image-interpolation.html
@@ -1,9 +1,13 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
+.parent {
+ list-style-image: url(../resources/blue-20.png);
+}
.target {
background-color: black;
width: 100px;
+ list-style-image: url(../resources/green-20.png);
}
.expected {
background-color: green;
@@ -17,74 +21,76 @@
</template>
<script src="resources/interpolation-test.js"></script>
<script>
-// Constant image
-var from = 'url(../resources/stripes-20.png)';
-var to = 'url(../resources/stripes-20.png)';
-assertInterpolation({
+function assertCrossfadeInterpolation(options) {
+ var fromComputed = options.fromComputed || options.from;
+ assertInterpolation({
+ property: 'list-style-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},
+ ]);
+}
+
+assertCrossfadeInterpolation({
+ from: '',
+ fromComputed: 'url(../resources/green-20.png)',
+ to: 'url(../resources/stripes-20.png)',
+});
+
+assertNoInterpolation({
property: 'list-style-image',
- from: from,
- to: to
-}, [
- {at: -0.3, is: from},
- {at: 0, is: from},
- {at: 0.3, is: '-webkit-cross-fade(url(../resources/stripes-20.png), url(../resources/stripes-20.png), 0.3)'},
- {at: 0.6, is: '-webkit-cross-fade(url(../resources/stripes-20.png), url(../resources/stripes-20.png), 0.6)'},
- {at: 1, is: to},
- {at: 1.5, is: to},
-]);
+ from: 'initial',
+ to: 'url(../resources/stripes-20.png)',
+});
+
+assertCrossfadeInterpolation({
+ from: 'inherit',
+ fromComputed: 'url(../resources/blue-20.png)',
+ to: 'url(../resources/stripes-20.png)',
+});
+
+assertCrossfadeInterpolation({
+ from: 'unset',
+ fromComputed: 'url(../resources/blue-20.png)',
+ to: 'url(../resources/stripes-20.png)',
+});
+
+// Constant image
+assertCrossfadeInterpolation({
+ from: 'url(../resources/stripes-20.png)',
+ to: 'url(../resources/stripes-20.png)',
+});
// None to image
-from = 'none';
assertNoInterpolation({
property: 'list-style-image',
- from: from,
- to: to
+ from: 'none',
+ to: 'url(../resources/stripes-20.png)',
});
// Image to image
-from = 'url(../resources/green-20.png)';
-to = 'url(../resources/stripes-20.png)';
-assertInterpolation({
- property: 'list-style-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: 'url(../resources/green-20.png)',
+ to: 'url(../resources/stripes-20.png)',
+});
// Image to gradient
-to = 'linear-gradient(45deg, blue, orange)';
-assertInterpolation({
- property: 'list-style-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: 'url(../resources/green-20.png)',
+ to: 'linear-gradient(45deg, blue, orange)',
+});
// Gradient to gradient
-from = 'linear-gradient(-45deg, red, yellow)';
-assertInterpolation({
- property: 'list-style-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, red, yellow)',
+ to: 'linear-gradient(45deg, blue, orange)',
+});
</script>
</body>
« no previous file with comments | « LayoutTests/animations/interpolation/border-image-source-interpolation-expected.txt ('k') | LayoutTests/animations/interpolation/list-style-image-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698