1 <!DOCTYPE html>
2 <html><head><meta charset="utf-8">
3 <title>CSS Basic User Interface Test: caret-color test animation</title>
4 <link href="mailto:rego@igalia.com" rel="author" title="Manuel Rego Casasnovas">
5 <link href="http://www.w3.org/TR/css3-ui/#caret-color" rel="help">
6 <link href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate" rel="help">
7 <link href="https://www.w3.org/TR/css3-color/#color0" rel="help">
8 <meta content="Test checks that caret-color is animatable as a color, and that the computed values during the animation are the expected ones." name="assert">
9 <script src="/resources/testharness.js"></script>
10 <script src="/resources/testharnessreport.js"></script>
11 <style>
12 textarea {
13 caret-color: red;
14 }
15 </style>
16 </head><body>
17 <textarea id="textarea"></textarea>
18 <div id="log"></div>
19
20 <script>
21 test(
22 function(){
23 var textarea = document.getElementById("textarea");
24 assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');
25
26 var keyframes = [
27 { caretColor: 'magenta' },
28 { caretColor: 'lime' }
29 ];
30 var options = {
31 duration: 10,
32 fill: "forwards"
33 };
34
35 var player = textarea.animate(keyframes, options);
36 player.pause();
37 player.currentTime = 0;
38 assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
39 player.currentTime = 5;
40 assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)');
41 player.currentTime = 10;
42 assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
43 }, "The caret-color property is animatable");
44 </script>
45
46 </body></html>