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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/filters/filter-animation-from-none-multi.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/css3/filters/filter-animation-from-none-hw-expected.txt ('k') | LayoutTests/css3/filters/filter-animation-from-none-multi-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 25 matching lines...) Expand all
63 50% { -webkit-filter: sepia(0.5); } 63 50% { -webkit-filter: sepia(0.5); }
64 to { -webkit-filter: sepia(1); } 64 to { -webkit-filter: sepia(1); }
65 } 65 }
66 66
67 @-webkit-keyframes saturate-anim { 67 @-webkit-keyframes saturate-anim {
68 from { } 68 from { }
69 50% { -webkit-filter: saturate(0.5); } 69 50% { -webkit-filter: saturate(0.5); }
70 to { -webkit-filter: saturate(1); } 70 to { -webkit-filter: saturate(1); }
71 } 71 }
72 72
73 @-webkit-keyframes huerotate-anim { 73 @-webkit-keyframes hue-rotate-anim {
74 from { } 74 from { }
75 50% { -webkit-filter: hue-rotate(90deg); } 75 50% { -webkit-filter: hue-rotate(90deg); }
76 to { -webkit-filter: hue-rotate(180deg); } 76 to { -webkit-filter: hue-rotate(180deg); }
77 } 77 }
78 78
79 @-webkit-keyframes invert-anim { 79 @-webkit-keyframes invert-anim {
80 from { } 80 from { }
81 50% { -webkit-filter: invert(0.5); } 81 50% { -webkit-filter: invert(0.5); }
82 to { -webkit-filter: invert(1); } 82 to { -webkit-filter: invert(1); }
83 } 83 }
(...skipping 29 matching lines...) Expand all
113 } 113 }
114 114
115 </style> 115 </style>
116 <script src="../../animations/resources/animation-test-helpers.js"></script> 116 <script src="../../animations/resources/animation-test-helpers.js"></script>
117 <script type="text/javascript"> 117 <script type="text/javascript">
118 const expectedValues = [ 118 const expectedValues = [
119 // [time, element-id, property, expected-value, tolerance] 119 // [time, element-id, property, expected-value, tolerance]
120 [0.5, "grayscale-box", "webkitFilter", 'grayscale(0.25)', 0.05], 120 [0.5, "grayscale-box", "webkitFilter", 'grayscale(0.25)', 0.05],
121 [0.5, "sepia-box", "webkitFilter", 'sepia(0.25)', 0.05], 121 [0.5, "sepia-box", "webkitFilter", 'sepia(0.25)', 0.05],
122 [0.5, "saturate-box", "webkitFilter", 'saturate(0.75)', 0.05], 122 [0.5, "saturate-box", "webkitFilter", 'saturate(0.75)', 0.05],
123 [0.5, "huerotate-box", "webkitFilter", 'huerotate(45deg)', 5], 123 [0.5, "hue-rotate-box", "webkitFilter", 'hue-rotate(45deg)', 5],
124 [0.5, "invert-box", "webkitFilter", 'invert(0.25)', 0.05], 124 [0.5, "invert-box", "webkitFilter", 'invert(0.25)', 0.05],
125 [0.5, "opacity-box", "webkitFilter", 'opacity(0.75)', 0.05], 125 [0.5, "opacity-box", "webkitFilter", 'opacity(0.75)', 0.05],
126 [0.5, "brightness-box", "webkitFilter", 'brightness(0.75)', 0.05], 126 [0.5, "brightness-box", "webkitFilter", 'brightness(0.75)', 0.05],
127 [0.5, "contrast-box", "webkitFilter", 'contrast(0.75)', 0.05], 127 [0.5, "contrast-box", "webkitFilter", 'contrast(0.75)', 0.05],
128 [0.5, "blur-box", "webkitFilter", 'blur(5px)', 1], 128 [0.5, "blur-box", "webkitFilter", 'blur(5px)', 1],
129 // FIXME when we implement computed filter style for drop-shadow. 129 // FIXME when we implement computed filter style for drop-shadow.
130 // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow( rgba(0, 0, 0, 0.25) 5px 8px 3px )', 2], 130 // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow( rgba(0, 0, 0, 0.25) 5px 8px 3px )', 2],
131 ]; 131 ];
132 132
133 runAnimationTest(expectedValues); 133 runAnimationTest(expectedValues);
134 </script> 134 </script>
135 </head> 135 </head>
136 <body> 136 <body>
137 137
138 <div class="box" id="grayscale-box"></div> 138 <div class="box" id="grayscale-box"></div>
139 <div class="box" id="sepia-box"></div> 139 <div class="box" id="sepia-box"></div>
140 <div class="box" id="saturate-box"></div> 140 <div class="box" id="saturate-box"></div>
141 <div class="box" id="huerotate-box"></div> 141 <div class="box" id="hue-rotate-box"></div>
142 <div class="box" id="invert-box"></div> 142 <div class="box" id="invert-box"></div>
143 <div class="box" id="opacity-box"></div> 143 <div class="box" id="opacity-box"></div>
144 <div class="box" id="brightness-box"></div> 144 <div class="box" id="brightness-box"></div>
145 <div class="box" id="contrast-box"></div> 145 <div class="box" id="contrast-box"></div>
146 <div class="box" id="blur-box"></div> 146 <div class="box" id="blur-box"></div>
147 <!-- <div class="box" id="dropshadow-box"></div> --> 147 <!-- <div class="box" id="dropshadow-box"></div> -->
148 148
149 <div id="result"> 149 <div id="result">
150 </div> 150 </div>
151 </body> 151 </body>
152 </html> 152 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/filters/filter-animation-from-none-hw-expected.txt ('k') | LayoutTests/css3/filters/filter-animation-from-none-multi-expected.txt » ('j') | LayoutTests/transitions/cubic-bezier-overflow-shadow.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698