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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/animations/interpolation/webkit-mask-box-image-source-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/webkit-mask-box-image-slice-interpolation.html ('k') | LayoutTests/animations/interpolation/webkit-mask-box-image-source-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-box-image-source-interpolation.html
diff --git a/LayoutTests/animations/interpolation/webkit-mask-box-image-source-interpolation.html b/LayoutTests/animations/interpolation/webkit-mask-box-image-source-interpolation.html
index 63055f731a9172075db626c86cdc7471f14fc82b..43060a6a02349154215cc1703989860e1bd0b2d7 100644
--- a/LayoutTests/animations/interpolation/webkit-mask-box-image-source-interpolation.html
+++ b/LayoutTests/animations/interpolation/webkit-mask-box-image-source-interpolation.html
@@ -1,84 +1,97 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
-div.wrapper {
- border: 10px solid black;
+.parent {
+ -webkit-mask-box-image-source: url(../resources/blue-100.png);
+}
+.target {
+ display: inline-block;
width: 100px;
height: 100px;
- display: inline-block;
margin-bottom: 10px;
- background-color: #FF7400;
+ background: black;
+ /*-webkit-mask-box-image-slice: 25;*/
+ -webkit-mask-box-image-source: url(../resources/stripes-100.png);
}
-div.wrapper:nth-child(2n) {
- border-color: green;
-}
-div.wrapper div.target {
- background-color: #009999;
- height: 100%;
- -webkit-mask-box-image-slice: 25;
+.expected {
+ background: 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>
+function assertCrossfadeInterpolation(options) {
+ var fromComputed = options.fromComputed || options.from;
+ assertInterpolation({
+ property: '-webkit-mask-box-image-source',
+ 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-100.png)',
+ to: 'url(../resources/green-100.png)',
+});
+
+// initial
+assertNoInterpolation({
+ property: '-webkit-mask-box-image-source',
+ from: 'initial',
+ to: 'url(../resources/green-100.png)',
+});
+
+// inherit
+assertCrossfadeInterpolation({
+ from: 'inherit',
+ fromComputed: 'url(../resources/blue-100.png)',
+ to: 'url(../resources/green-100.png)',
+});
+
+// unset
+assertNoInterpolation({
+ property: '-webkit-mask-box-image-source',
+ from: 'unset',
+ to: 'url(../resources/stripes-100.png)',
+});
+
// None to image
-var from = 'none';
-var to = 'url(../resources/stripes-100.png)';
assertNoInterpolation({
property: '-webkit-mask-box-image-source',
- from: from,
- to: to
+ from: 'none',
+ to: 'url(../resources/stripes-100.png)',
});
// Image to image
-from = 'url(../resources/green-100.png)';
-to = 'url(../resources/stripes-100.png)';
-assertInterpolation({
+assertCrossfadeInterpolation({
property: '-webkit-mask-box-image-source',
- 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: 'url(../resources/green-100.png)',
+ to: 'url(../resources/stripes-100.png)',
+});
// Image to gradient
-to = 'linear-gradient(45deg, blue, orange)';
-assertInterpolation({
+assertCrossfadeInterpolation({
property: '-webkit-mask-box-image-source',
- 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: 'url(../resources/green-100.png)',
+ to: 'linear-gradient(45deg, blue, orange)',
+});
// Gradient to gradient
-from = 'linear-gradient(-45deg, red, yellow)';
-assertInterpolation({
+assertCrossfadeInterpolation({
property: '-webkit-mask-box-image-source',
- 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: 'linear-gradient(-45deg, red, yellow)',
+ to: 'linear-gradient(45deg, blue, orange)',
+});
</script>
</body>
« no previous file with comments | « LayoutTests/animations/interpolation/webkit-mask-box-image-slice-interpolation.html ('k') | LayoutTests/animations/interpolation/webkit-mask-box-image-source-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698