polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/background-image-interpolation.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Unified Diff: polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/background-image-interpolation.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: Created 5 years, 12 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 | « polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/background-color-interpolation.html ('k') | polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/background-position-interpolation.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/background-image-interpolation.html

diff --git a/polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/background-image-interpolation.html b/polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/background-image-interpolation.html

new file mode 100644

index 0000000000000000000000000000000000000000..fec614cbd39adb5285fb30ea6647cd104955adc6

--- /dev/null

+++ b/polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/background-image-interpolation.html

@@ -0,0 +1,143 @@

+<!DOCTYPE html>

+<meta charset="UTF-8">

+<style>

+.target {

+ width: 100px;

+ height: 100px;

+ display: inline-block;

+ border: 10px solid black;

+ background-repeat: no-repeat;

+.replica {

+ border-color: green;

+ margin-right: 2px;

+</style>

+<body>

+<script src="../testharness/testharness.js"></script>

+<script src="../testharness/testharnessreport.js"></script>

+<script src="resources/interpolation-test.js"></script>

+<script>

+// Image to image

+var from = 'url(../resources/blue-100.png)';

+var to = 'url(../resources/green-100.png)';

+assertInterpolation({

+ property: 'background-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},

+]);

+// Image to gradient

+from = 'url(../resources/blue-100.png)';

+to = 'linear-gradient(45deg, blue, orange)';

+assertInterpolation({

+ property: 'background-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},

+]);

+// Gradient to gradient

+from = 'linear-gradient(-45deg, red, yellow)';

+to = 'linear-gradient(45deg, blue, orange)';

+assertInterpolation({

+ property: 'background-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},

+]);

+// Keyword to image

+from = 'none';

+to = 'url(../resources/green-100.png)';

+assertInterpolation({

+ property: 'background-image',

+ from: from,

+ to: to,

+}, [

+ {at: -0.3, is: from},

+ {at: 0, is: from},

+ {at: 0.3, is: from},

+ {at: 0.6, is: to},

+ {at: 1, is: to},

+ {at: 1.5, is: to},

+]);

+// Multiple to multiple

+var fromA = 'url(../resources/stripes-100.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;

+assertInterpolation({

+ property: 'background-image',

+ from: from,

+ to: to,

+}, [

+ {at: -0.3, is: from},

+ {at: 0, is: from},

+ {at: 0.3, is: '-webkit-cross-fade(' + fromA + ', ' + toA + ', 0.3), -webkit-cross-fade(' + fromB + ', ' + toB + ', 0.3)'},

+ {at: 0.6, is: '-webkit-cross-fade(' + fromA + ', ' + toA + ', 0.6), -webkit-cross-fade(' + fromB + ', ' + toB + ', 0.6)'},

+ {at: 1, is: to},

+ {at: 1.5, is: to},

+]);

+// Single to multiple

+from = 'url(../resources/blue-100.png)';

+var toA = 'url(../resources/stripes-100.png)';

+var toB = 'url(../resources/green-100.png)';

+to = toA + ', ' + toB;

+assertInterpolation({

+ property: 'background-image',

+ from: from,

+ to: to,

+}, [

+ // The interpolation of different numbers of background-images looks a bit strange here.

+ // Animating background-image is not specified to be possible however we do it for backwards compatibility.

+ // With this in mind we kept the implementation simple at the expense of this corner case because there is

+ // no official specification to support.

+ {at: -0.3, is: from + ', ' + from},

+ {at: 0, is: from},

+ {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + toA + ', 0.3), -webkit-cross-fade(' + from + ', ' + toB + ', 0.3)'},

+ {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + toA + ', 0.6), -webkit-cross-fade(' + from + ', ' + toB + ', 0.6)'},

+ {at: 1, is: to},

+ {at: 1.5, is: to},

+]);

+// Multiple mismatched types

+from = 'url(../resources/blue-100.png), none';

+to = 'url(../resources/stripes-100.png), url(../resources/green-100.png)';

+assertInterpolation({

+ property: 'background-image',

+ from: from,

+ to: to,

+}, [

+ {at: -0.3, is: from},

+ {at: 0, is: from},

+ {at: 0.3, is: from},

+ {at: 0.6, is: to},

+ {at: 1, is: to},

+ {at: 1.5, is: to},

+]);

+</script>

+</body>