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

Side by Side Diff: third_party/WebKit/LayoutTests/animations/interpolation/caret-color-interpolation.html

Issue 2537373005: [css-ui] Make caret-color animatable (Closed)
Patch Set: Patch for landing adding TODO Created 3 years, 12 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 unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <meta charset="UTF-8">
3 <style>
4 .parent {
5 caret-color: blue;
6 }
7 .target {
8 display: inline-block;
9 font-size: 60pt;
10 caret-color: yellow;
11 }
12 .expected {
13 margin-right: 15px;
14 }
15 </style>
16 <body alink="red" link="blue" contenteditable>
17 <template id="target-template">T</template>
18 <script src="resources/interpolation-test.js"></script>
19 <script>
20 assertInterpolation({
21 property: 'caret-color',
22 from: neutralKeyframe,
23 to: 'green',
24 }, [
25 {at: -0.3, is: 'rgb(255, 255, 0)'},
26 {at: 0, is: 'rgb(255, 255, 0)'},
27 {at: 0.3, is: 'rgb(179, 217, 0)'},
28 {at: 0.6, is: 'rgb(102, 179, 0)'},
29 {at: 1, is: 'rgb(0, 128, 0)'},
30 {at: 1.5, is: 'rgb(0, 65, 0)'},
31 ]);
32
33 assertNoInterpolation({
34 property: 'caret-color',
35 from: 'initial',
36 to: 'green',
37 });
38
39 assertNoInterpolation({
40 property: 'caret-color',
41 from: 'auto',
42 to: 'green',
43 });
44
45 assertInterpolation({
46 property: 'caret-color',
47 from: 'currentColor',
48 to: 'green',
49 }, [
50 {at: -0.3, is: 'rgb(0, 0, 0)'},
51 {at: 0, is: 'rgb(0, 0, 0)'},
52 {at: 0.3, is: 'rgb(0, 38, 0)'},
53 {at: 0.6, is: 'rgb(0, 77, 0)'},
54 {at: 1, is: 'rgb(0, 128, 0)'},
55 {at: 1.5, is: 'rgb(0, 192, 0)'},
56 ]);
57
58 assertInterpolation({
59 property: 'caret-color',
60 from: 'inherit',
61 to: 'green',
62 }, [
63 {at: -0.3, is: 'rgb(0, 0, 255)'},
64 {at: 0, is: 'rgb(0, 0, 255)'},
65 {at: 0.3, is: 'rgb(0, 38, 179)'},
66 {at: 0.6, is: 'rgb(0, 77, 102)'},
67 {at: 1, is: 'rgb(0, 128, 0)'},
68 {at: 1.5, is: 'rgb(0, 192, 0)'},
69 ]);
70
71 assertInterpolation({
72 property: 'caret-color',
73 from: 'unset',
74 to: 'green',
75 }, [
76 {at: -0.3, is: 'rgb(0, 0, 255)'},
77 {at: 0, is: 'rgb(0, 0, 255)'},
78 {at: 0.3, is: 'rgb(0, 38, 179)'},
79 {at: 0.6, is: 'rgb(0, 77, 102)'},
80 {at: 1, is: 'rgb(0, 128, 0)'},
81 {at: 1.5, is: 'rgb(0, 192, 0)'},
82 ]);
83
84 assertInterpolation({
85 property: 'caret-color',
86 from: 'black',
87 to: 'orange',
88 }, [
89 {at: -0.3, is: 'rgb(0, 0, 0)'},
90 {at: 0, is: 'rgb(0, 0, 0)'},
91 {at: 0.3, is: 'rgb(77, 50, 0)'},
92 {at: 0.6, is: 'rgb(153, 99, 0)'},
93 {at: 1, is: 'rgb(255, 165, 0)'},
94 {at: 1.5, is: 'rgb(255, 248, 0)'},
95 ]);
96
97 assertInterpolation({
98 property: 'caret-color',
99 from: '-webkit-activelink',
100 to: 'green',
101 }, [
102 {at: -0.3, is: 'rgb(255, 0, 0)'},
103 {at: 0, is: 'rgb(255, 0, 0)'},
104 {at: 0.3, is: 'rgb(179, 38, 0)'},
105 {at: 0.6, is: 'rgb(102, 77, 0)'},
106 {at: 1, is: 'rgb(0, 128, 0)'},
107 {at: 1.5, is: 'rgb(0, 192, 0)'},
108 ]);
109
110 assertInterpolation({
111 property: 'caret-color',
112 from: '-webkit-link',
113 to: 'green',
114 }, [
115 {at: -0.3, is: 'rgb(0, 0, 255)'},
116 {at: 0, is: 'rgb(0, 0, 255)'},
117 {at: 0.3, is: 'rgb(0, 38, 179)'},
118 {at: 0.6, is: 'rgb(0, 77, 102)'},
119 {at: 1, is: 'rgb(0, 128, 0)'},
120 {at: 1.5, is: 'rgb(0, 192, 0)'},
121 ]);
122 </script>
123 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698