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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/filters/filter-animation-hw.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-multi-hw-expected.txt ('k') | LayoutTests/css3/filters/filter-animation-hw-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 transform:translateZ(0); 12 transform:translateZ(0);
13 -webkit-animation-duration:2s !important; 13 -webkit-animation-duration:2s !important;
14 } 14 }
15 15
16 #grayscale-box { 16 #grayscale-box {
17 -webkit-animation: grayscale-anim 2s linear 17 -webkit-animation: grayscale-anim 2s linear
18 } 18 }
19 19
20 #sepia-box { 20 #sepia-box {
21 -webkit-animation: sepia-anim 2s linear 21 -webkit-animation: sepia-anim 2s linear
22 } 22 }
23 23
24 #saturate-box { 24 #saturate-box {
25 -webkit-animation: saturate-anim 2s linear 25 -webkit-animation: saturate-anim 2s linear
26 } 26 }
27 27
28 #huerotate-box { 28 #hue-rotate-box {
29 -webkit-animation: huerotate-anim 2s linear 29 -webkit-animation: hue-rotate-anim 2s linear
30 } 30 }
31 31
32 #invert-box { 32 #invert-box {
33 -webkit-animation: invert-anim 2s linear 33 -webkit-animation: invert-anim 2s linear
34 } 34 }
35 35
36 #opacity-box { 36 #opacity-box {
37 -webkit-animation: opacity-anim 2s linear 37 -webkit-animation: opacity-anim 2s linear
38 } 38 }
39 39
(...skipping 22 matching lines...) Expand all
62 @-webkit-keyframes sepia-anim { 62 @-webkit-keyframes sepia-anim {
63 from { -webkit-filter: sepia(0); } 63 from { -webkit-filter: sepia(0); }
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 { -webkit-filter: saturate(0); } 68 from { -webkit-filter: saturate(0); }
69 to { -webkit-filter: saturate(1); } 69 to { -webkit-filter: saturate(1); }
70 } 70 }
71 71
72 @-webkit-keyframes huerotate-anim { 72 @-webkit-keyframes hue-rotate-anim {
73 from { -webkit-filter: hue-rotate(0); } 73 from { -webkit-filter: hue-rotate(0); }
74 to { -webkit-filter: hue-rotate(180deg); } 74 to { -webkit-filter: hue-rotate(180deg); }
75 } 75 }
76 76
77 @-webkit-keyframes invert-anim { 77 @-webkit-keyframes invert-anim {
78 from { -webkit-filter: invert(0); } 78 from { -webkit-filter: invert(0); }
79 to { -webkit-filter: invert(1); } 79 to { -webkit-filter: invert(1); }
80 } 80 }
81 81
82 @-webkit-keyframes opacity-anim { 82 @-webkit-keyframes opacity-anim {
(...skipping 22 matching lines...) Expand all
105 } 105 }
106 106
107 </style> 107 </style>
108 <script src="../../animations/resources/animation-test-helpers.js"></script> 108 <script src="../../animations/resources/animation-test-helpers.js"></script>
109 <script type="text/javascript"> 109 <script type="text/javascript">
110 const expectedValues = [ 110 const expectedValues = [
111 // [time, element-id, property, expected-value, tolerance] 111 // [time, element-id, property, expected-value, tolerance]
112 [1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05], 112 [1, "grayscale-box", "webkitFilter", 'grayscale(0.5)', 0.05],
113 [1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05], 113 [1, "sepia-box", "webkitFilter", 'sepia(0.5)', 0.05],
114 [1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05], 114 [1, "saturate-box", "webkitFilter", 'saturate(0.5)', 0.05],
115 [1, "huerotate-box", "webkitFilter", 'huerotate(90deg)', 2], 115 [1, "hue-rotate-box", "webkitFilter", 'hue-rotate(90deg)', 2],
116 [1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05], 116 [1, "invert-box", "webkitFilter", 'invert(0.5)', 0.05],
117 [1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05], 117 [1, "opacity-box", "webkitFilter", 'opacity(0.5)', 0.05],
118 [1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05], 118 [1, "brightness-box", "webkitFilter", 'brightness(0.5)', 0.05],
119 [1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05], 119 [1, "contrast-box", "webkitFilter", 'contrast(0.5)', 0.05],
120 [1, "blur-box", "webkitFilter", 'blur(10px)', 1], 120 [1, "blur-box", "webkitFilter", 'blur(10px)', 1],
121 // FIXME when we implement computed filter style for drop-shadow. 121 // FIXME when we implement computed filter style for drop-shadow.
122 // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow( rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2], 122 // ["dropshadow-anim", 1, "dropshadow-box", "webkitFilter", 'drop-shadow( rgba(0, 0, 0, 0.5) 10px 15px 5px )', 2],
123 ]; 123 ];
124 124
125 runAnimationTest(expectedValues); 125 runAnimationTest(expectedValues);
126 </script> 126 </script>
127 </head> 127 </head>
128 <body> 128 <body>
129 129
130 <div class="box" id="grayscale-box"></div> 130 <div class="box" id="grayscale-box"></div>
131 <div class="box" id="sepia-box"></div> 131 <div class="box" id="sepia-box"></div>
132 <div class="box" id="saturate-box"></div> 132 <div class="box" id="saturate-box"></div>
133 <div class="box" id="huerotate-box"></div> 133 <div class="box" id="hue-rotate-box"></div>
134 <div class="box" id="invert-box"></div> 134 <div class="box" id="invert-box"></div>
135 <div class="box" id="opacity-box"></div> 135 <div class="box" id="opacity-box"></div>
136 <div class="box" id="brightness-box"></div> 136 <div class="box" id="brightness-box"></div>
137 <div class="box" id="contrast-box"></div> 137 <div class="box" id="contrast-box"></div>
138 <div class="box" id="blur-box"></div> 138 <div class="box" id="blur-box"></div>
139 <!-- <div class="box" id="dropshadow-box"></div> --> 139 <!-- <div class="box" id="dropshadow-box"></div> -->
140 140
141 <div id="result"> 141 <div id="result">
142 </div> 142 </div>
143 </body> 143 </body>
144 </html> 144 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/filters/filter-animation-from-none-multi-hw-expected.txt ('k') | LayoutTests/css3/filters/filter-animation-hw-expected.txt » ('j') | LayoutTests/transitions/cubic-bezier-overflow-shadow.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698