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: polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/filter-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/color-interpolation.html ('k') | polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/flex-interpolation.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/filter-interpolation.html
diff --git a/polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/filter-interpolation.html b/polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/filter-interpolation.html
new file mode 100644
index 0000000000000000000000000000000000000000..2fd4bd7d87e0b46f87eb759b514b9a1afd950d8f
--- /dev/null
+++ b/polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/filter-interpolation.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+.target {
+ width: 50px;
+ height: 50px;
+ background-color: lightskyblue;
+ color: white;
+}
+.container {
+ border: solid black 5px;
+ background: white;
+ display: inline-block;
+}
+.container:nth-child(2n) {
+ border-color: green;
+}
+.test {
+ padding-bottom: 10px;
+}
+</style>
+<body>
+<svg style="display:none"><filter id="svgfilter"><feGaussianBlur stdDeviation="5"></feGaussianBlur></filter></svg>
+<template id="target-template">
+<div class="container"><div class="target"></div></div>
+</template>
+<script src="../testharness/testharness.js"></script>
+<script src="../testharness/testharnessreport.js"></script>
+<script src="resources/interpolation-test.js"></script>
+<script>
+// Matching lists:
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'hue-rotate(0deg) blur(6px)',
+ to: 'hue-rotate(180deg) blur(10px)'
+}, [
+ {at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'},
+ {at: 0, is: 'hue-rotate(0deg) blur(6px)'},
+ {at: 0.25, is: 'hue-rotate(45deg) blur(7px)'},
+ {at: 0.5, is: 'hue-rotate(90deg) blur(8px)'},
+ {at: 1, is: 'hue-rotate(180deg) blur(10px)'},
+ {at: 1.5, is: 'hue-rotate(270deg) blur(12px)'}
+]);
+
+// Mismatched lists:
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'grayscale(0) blur(0px)',
+ to: 'blur(10px)'
+}, [
+ {at: -0.5, is: 'grayscale(0) blur(0px)'},
+ {at: 0, is: 'grayscale(0) blur(0px)'},
+ {at: 0.25, is: 'grayscale(0) blur(0px)'},
+ {at: 0.50, is: 'blur(10px)'},
+ {at: 1, is: 'blur(10px)'},
+ {at: 1.5, is: 'blur(10px)'},
+]);
+
+// Partially matching lists:
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'blur(6px)',
+ to: 'blur(10px) hue-rotate(180deg)'
+}, [
+ {at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'},
+ {at: 0, is: 'blur(6px)'},
+ {at: 0.25, is: 'blur(7px) hue-rotate(45deg)'},
+ {at: 0.5, is: 'blur(8px) hue-rotate(90deg)'},
+ {at: 1, is: 'blur(10px) hue-rotate(180deg)'},
+ {at: 1.5, is: 'blur(12px) hue-rotate(270deg)'},
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'none',
+ to: 'hue-rotate(180deg)'
+}, [
+ {at: -0.5, is: 'hue-rotate(-90deg)'},
+ {at: 0, is: 'none'},
+ {at: 0.25, is: 'hue-rotate(45deg)'},
+ {at: 0.5, is: 'hue-rotate(90deg)'},
+ {at: 1, is: 'hue-rotate(180deg)'},
+ {at: 1.5, is: 'hue-rotate(270deg)'},
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'hue-rotate(180deg)',
+ to: 'none'
+}, [
+ {at: -0.5, is: 'hue-rotate(270deg)'},
+ {at: 0, is: 'hue-rotate(180deg)'},
+ {at: 0.25, is: 'hue-rotate(135deg)'},
+ {at: 0.5, is: 'hue-rotate(90deg)'},
+ {at: 1, is: 'none'},
+ {at: 1.5, is: 'hue-rotate(-90deg)'},
+]);
+
+// Filter functions (tests lacuna and clamping):
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'none', // lacuna is 0px
+ to: 'blur(10px)'
+}, [
+ {at: -1, is: 'blur(0px)'}, // Negative values are not allowed.
+ {at: 0, is: 'none'},
+ {at: 0.5, is: 'blur(5px)'},
+ {at: 1, is: 'blur(10px)'},
+ {at: 1.5, is: 'blur(15px)'}
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'brightness(0)',
+ to: 'none' // lacuna is 1
+}, [
+ {at: -1, is: 'brightness(0)'}, // Negative values are not allowed.
+ {at: 0, is: 'brightness(0)'},
+ {at: 0.5, is: 'brightness(0.5)'},
+ {at: 1, is: 'none'},
+ {at: 1.5, is: 'brightness(1.5)'}
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'contrast(0)',
+ to: 'none' // lacuna is 1
+}, [
+ {at: -1, is: 'contrast(0)'}, // Negative values are not allowed.
+ {at: 0, is: 'contrast(0)'},
+ {at: 0.5, is: 'contrast(0.5)'},
+ {at: 1, is: 'none'},
+ {at: 1.5, is: 'contrast(1.5)'}
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'none', // lacuna is drop-shadow(0px 0px 0px currentcolor)
+ to: 'drop-shadow(20px 10px green)'
+}, [
+ {at: -1, is: 'drop-shadow(-20px -10px white)'},
+ {at: 0, is: 'none'},
+ {at: 0.5, is: 'drop-shadow(10px 5px #80C080)'},
+ {at: 1, is: 'drop-shadow(20px 10px green)'},
+ {at: 1.5, is: 'drop-shadow(30px 15px #004000)'}
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'drop-shadow(0px 0px 0px currentcolor)', // lacuna is drop-shadow(0px 0px 0px currentcolor)
+ to: 'drop-shadow(20px 10px green)'
+}, [
+ {at: -1, is: 'drop-shadow(-20px -10px white)'},
+ {at: 0, is: 'drop-shadow(0px 0px 0px currentcolor)'},
+ {at: 0.5, is: 'drop-shadow(10px 5px #80C080)'},
+ {at: 1, is: 'drop-shadow(20px 10px green)'},
+ {at: 1.5, is: 'drop-shadow(30px 15px #004000)'}
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'none', // lacuna is 0
+ to: 'grayscale(1)'
+}, [
+ {at: -1, is: 'grayscale(0)'}, // Negative values are not allowed.
+ {at: 0, is: 'none'},
+ {at: 0.5, is: 'grayscale(0.5)'},
+ {at: 1, is: 'grayscale(1)'},
+ {at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1.
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'none', // lacuna is 0deg
+ to: 'hue-rotate(360deg)'
+}, [
+ {at: -1, is: 'hue-rotate(-360deg)'},
+ {at: 0, is: 'none'},
+ {at: 0.5, is: 'hue-rotate(180deg)'},
+ {at: 1, is: 'hue-rotate(360deg)'},
+ {at: 1.5, is: 'hue-rotate(540deg)'}
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'none', // lacuna is 0
+ to: 'invert(1)'
+}, [
+ {at: -1, is: 'invert(0)'}, // Negative values are not allowed.
+ {at: 0, is: 'none'},
+ {at: 0.5, is: 'invert(0.5)'},
+ {at: 1, is: 'invert(1)'},
+ {at: 1.5, is: 'invert(1)'} // Should clamp values to 1.
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'opacity(0)',
+ to: 'none' // lacuna is 1
+}, [
+ {at: -1, is: 'opacity(0)'}, // Negative values are not allowed.
+ {at: 0, is: 'opacity(0)'},
+ {at: 0.5, is: 'opacity(0.5)'},
+ {at: 1, is: 'none'},
+ {at: 1.5, is: 'opacity(1)'} // Should clamp values to 1.
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'saturate(0)',
+ to: 'none' // lacuna is 1
+}, [
+ {at: -1, is: 'saturate(0)'}, // Negative values are not allowed.
+ {at: 0, is: 'saturate(0)'},
+ {at: 0.5, is: 'saturate(0.5)'},
+ {at: 1, is: 'none'},
+ {at: 1.5, is: 'saturate(1.5)'}
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'none', // lacuna is 0
+ to: 'sepia(1)'
+}, [
+ {at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
+ {at: 0, is: 'none'},
+ {at: 0.5, is: 'sepia(0.5)'},
+ {at: 1, is: 'sepia(1)'},
+ {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'url(#svgfilter)',
+ to: 'none', // lacuna is not defined
+}, [
+ {at: -1, is: 'url(#svgfilter)'},
+ {at: 0, is: 'url(#svgfilter)'},
+ {at: 0.5, is: 'none'},
+ {at: 1, is: 'none'},
+ {at: 1.5, is: 'none'}
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'url(#svgfilter)',
+ to: 'blur(5px)',
+}, [
+ {at: -1, is: 'url(#svgfilter)'},
+ {at: 0, is: 'url(#svgfilter)'},
+ {at: 0.5, is: 'blur(5px)'},
+ {at: 1, is: 'blur(5px)'},
+ {at: 1.5, is: 'blur(5px)'}
+]);
+</script>
+</body>
« no previous file with comments | « polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/color-interpolation.html ('k') | polymer_0.5.0/bower_components/web-animations-js/test/blink/interpolation/flex-interpolation.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698