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

Unified Diff: LayoutTests/animations/interpolation/filter-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
Index: LayoutTests/animations/interpolation/filter-interpolation.html
diff --git a/LayoutTests/animations/interpolation/filter-interpolation.html b/LayoutTests/animations/interpolation/filter-interpolation.html
index c71fa0e21d1f7fbd1572bcd933efa911024c7bb3..ee2885901d7b729f1ffe3036d915ef95b04732a1 100644
--- a/LayoutTests/animations/interpolation/filter-interpolation.html
+++ b/LayoutTests/animations/interpolation/filter-interpolation.html
@@ -1,32 +1,85 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
+.parent {
+ -webkit-filter: hue-rotate(30deg);
+}
.target {
+ display: inline-block;
width: 50px;
height: 50px;
- background-color: lightskyblue;
+ background-color: green;
color: white;
+ margin-right: 2px;
+ -webkit-filter: hue-rotate(10deg);
}
-.container {
- border: solid black 5px;
- background: white;
- display: inline-block;
- -webkit-filter: sepia(0.5);
-}
-.container:nth-child(2n) {
- border-color: green;
+.expected {
+ margin-right: 20px;
}
.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>
+<svg style="display:none">
+ <filter id="svgfilter">
+ <feGaussianBlur stdDeviation="5"></feGaussianBlur>
+ </filter>
+</svg>
<script src="resources/interpolation-test.js"></script>
<script>
+assertInterpolation({
+ property: '-webkit-filter',
+ from: '',
+ to: 'hue-rotate(20deg)',
+}, [
+ {at: -0.5, is: 'hue-rotate(5deg)'},
+ {at: 0, is: 'hue-rotate(10deg)'},
+ {at: 0.3, is: 'hue-rotate(13deg)'},
+ {at: 0.6, is: 'hue-rotate(16deg)'},
+ {at: 1, is: 'hue-rotate(20deg)'},
+ {at: 1.5, is: 'hue-rotate(25deg)'},
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'initial',
+ to: 'hue-rotate(20deg)',
+}, [
+ {at: -0.5, is: 'hue-rotate(-10deg)'},
+ {at: 0, is: 'none'},
+ {at: 0.3, is: 'hue-rotate(6deg)'},
+ {at: 0.6, is: 'hue-rotate(12deg)'},
+ {at: 1, is: 'hue-rotate(20deg)'},
+ {at: 1.5, is: 'hue-rotate(30deg)'},
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'inherit',
+ to: 'hue-rotate(20deg)',
+}, [
+ {at: -0.5, is: 'hue-rotate(35deg)'},
+ {at: 0, is: 'hue-rotate(30deg)'},
+ {at: 0.3, is: 'hue-rotate(27deg)'},
+ {at: 0.6, is: 'hue-rotate(24deg)'},
+ {at: 1, is: 'hue-rotate(20deg)'},
+ {at: 1.5, is: 'hue-rotate(15deg)'},
+]);
+
+assertInterpolation({
+ property: '-webkit-filter',
+ from: 'unset',
+ to: 'hue-rotate(20deg)',
+}, [
+ {at: -0.5, is: 'hue-rotate(-10deg)'},
+ {at: 0, is: 'none'},
+ {at: 0.3, is: 'hue-rotate(6deg)'},
+ {at: 0.6, is: 'hue-rotate(12deg)'},
+ {at: 1, is: 'hue-rotate(20deg)'},
+ {at: 1.5, is: 'hue-rotate(30deg)'},
+]);
+
// Matching lists:
assertInterpolation({
property: '-webkit-filter',
@@ -258,17 +311,5 @@ assertInterpolation({
{at: 1, is: 'sepia(1)'},
{at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
]);
-
-assertInterpolation({
- property: '-webkit-filter',
- from: 'inherit',
- to: 'sepia(1)'
-}, [
- {at: -1, is: 'sepia(0)'},
- {at: 0, is: 'sepia(0.5)'},
- {at: 0.5, is: 'sepia(0.75)'},
- {at: 1, is: 'sepia(1)'},
- {at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
-]);
</script>
</body>

Powered by Google App Engine
This is Rietveld 408576698