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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/filters/filter-animation.html

Issue 716963002: Remove property-specific handling in animation-test-helpers.js (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@animhelpercleanup
Patch Set: Created 6 years, 1 month 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 unified diff | Download patch
« no previous file with comments | « LayoutTests/animations/transition-and-animation-2-expected.txt ('k') | LayoutTests/css3/filters/filter-animation-expected.txt » ('j') | LayoutTests/transitions/cubic-bezier-overflow-shadow.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 2
3 <html> 3 <html>
4 <head> 4 <head>
5 <style> 5 <style>
6 .box { 6 .box {
7 height: 100px; 7 height: 100px;
8 width: 100px; 8 width: 100px;
9 margin: 10px; 9 margin: 10px;
10 background-color: blue; 10 background-color: blue;
11 display: inline-block; 11 display: inline-block;
12 } 12 }
13 13
14 #grayscale-box { 14 #grayscale-box {
15 -webkit-animation: grayscale-anim 2s linear 15 -webkit-animation: grayscale-anim 2s linear
16 } 16 }
17 17
18 #sepia-box { 18 #sepia-box {
19 -webkit-animation: sepia-anim 2s linear 19 -webkit-animation: sepia-anim 2s linear
20 } 20 }
21 21
22 #saturate-box { 22 #saturate-box {
23 -webkit-animation: saturate-anim 2s linear 23 -webkit-animation: saturate-anim 2s linear
24 } 24 }
25 25
26 #huerotate-box { 26 #hue-rotate-box {
27 -webkit-animation: huerotate-anim 2s linear 27 -webkit-animation: hue-rotate-anim 2s linear
28 } 28 }
29 29
30 #invert-box { 30 #invert-box {
31 -webkit-animation: invert-anim 2s linear 31 -webkit-animation: invert-anim 2s linear
32 } 32 }
33 33
34 #opacity-box { 34 #opacity-box {
35 -webkit-animation: opacity-anim 2s linear 35 -webkit-animation: opacity-anim 2s linear
36 } 36 }
37 37
(...skipping 22 matching lines...) Expand all
60 @-webkit-keyframes sepia-anim { 60 @-webkit-keyframes sepia-anim {
61 from { -webkit-filter: sepia(0); } 61 from { -webkit-filter: sepia(0); }
62 to { -webkit-filter: sepia(1); } 62 to { -webkit-filter: sepia(1); }
63 } 63 }
64 64
65 @-webkit-keyframes saturate-anim { 65 @-webkit-keyframes saturate-anim {
66 from { -webkit-filter: saturate(0); } 66 from { -webkit-filter: saturate(0); }
67 to { -webkit-filter: saturate(1); } 67 to { -webkit-filter: saturate(1); }
68 } 68 }
69 69
70 @-webkit-keyframes huerotate-anim { 70 @-webkit-keyframes hue-rotate-anim {
71 from { -webkit-filter: hue-rotate(0); } 71 from { -webkit-filter: hue-rotate(0); }
72 to { -webkit-filter: hue-rotate(180deg); } 72 to { -webkit-filter: hue-rotate(180deg); }
73 } 73 }
74 74
75 @-webkit-keyframes invert-anim { 75 @-webkit-keyframes invert-anim {
76 from { -webkit-filter: invert(0); } 76 from { -webkit-filter: invert(0); }
77 to { -webkit-filter: invert(1); } 77 to { -webkit-filter: invert(1); }
78 } 78 }
79 79
80 @-webkit-keyframes opacity-anim { 80 @-webkit-keyframes opacity-anim {
(...skipping 22 matching lines...) Expand all
103 } 103 }
104 104
105 </style> 105 </style>
106 <script src="../../animations/resources/animation-test-helpers.js"></script> 106 <script src="../../animations/resources/animation-test-helpers.js"></script>
107 <script type="text/javascript"> 107 <script type="text/javascript">
108 const expectedValues = [ 108 const expectedValues = [
109 // [time, element-id, property, expected-value, tolerance] 109 // [time, element-id, property, expected-value, tolerance]
110 [1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05], 110 [1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05],
111 [1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05], 111 [1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05],
112 [1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05], 112 [1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05],
113 [1, "huerotate-box", "webkitFilter", 'huerotate(90deg)', 2], 113 [1, "hue-rotate-box", "webkitFilter", 'hue-rotate(90deg)', 2],
114 [1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05], 114 [1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05],
115 [1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05], 115 [1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05],
116 [1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05], 116 [1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05],
117 [1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05], 117 [1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05],
118 [1, "blur-box", "webkitFilter", 'blur(10px)', 1], 118 [1, "blur-box", "webkitFilter", 'blur(10px)', 1],
119 // FIXME when we implement computed filter style for drop-shadow. 119 // FIXME when we implement computed filter style for drop-shadow.
120 // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow( rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2], 120 // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow( rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2],
121 ]; 121 ];
122 122
123 runAnimationTest(expectedValues); 123 runAnimationTest(expectedValues);
124 </script> 124 </script>
125 </head> 125 </head>
126 <body> 126 <body>
127 127
128 <div class="box" id="grayscale-box"></div> 128 <div class="box" id="grayscale-box"></div>
129 <div class="box" id="sepia-box"></div> 129 <div class="box" id="sepia-box"></div>
130 <div class="box" id="saturate-box"></div> 130 <div class="box" id="saturate-box"></div>
131 <div class="box" id="huerotate-box"></div> 131 <div class="box" id="hue-rotate-box"></div>
132 <div class="box" id="invert-box"></div> 132 <div class="box" id="invert-box"></div>
133 <div class="box" id="opacity-box"></div> 133 <div class="box" id="opacity-box"></div>
134 <div class="box" id="brightness-box"></div> 134 <div class="box" id="brightness-box"></div>
135 <div class="box" id="contrast-box"></div> 135 <div class="box" id="contrast-box"></div>
136 <div class="box" id="blur-box"></div> 136 <div class="box" id="blur-box"></div>
137 <!-- <div class="box" id="dropshadow-box"></div> --> 137 <!-- <div class="box" id="dropshadow-box"></div> -->
138 138
139 <div id="result"> 139 <div id="result">
140 </div> 140 </div>
141 </body> 141 </body>
142 </html> 142 </html>
OLDNEW
« no previous file with comments | « LayoutTests/animations/transition-and-animation-2-expected.txt ('k') | LayoutTests/css3/filters/filter-animation-expected.txt » ('j') | LayoutTests/transitions/cubic-bezier-overflow-shadow.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698