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> |