1 <!DOCTYPE html>
2 <html><head><meta charset="utf-8">
3 <title>CSS Basic User Interface Test: caret-color currentcolor 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 'currentcolor' value for caret-color property is interpolable." name="assert">
9 <script src="/resources/testharness.js"></script>
10 <script src="/resources/testharnessreport.js"></script>
11 <style>
12 textarea {
13 color: magenta;
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 var keyframes = [
25 { caretColor: 'currentcolor' },
26 { caretColor: 'lime' }
27 ];
28 var options = {
29 duration: 10,
30 fill: "forwards"
31 };
32
33 var player = textarea.animate(keyframes, options);
34 player.pause();
35 player.currentTime = 5;
36 assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)');
37 }, "caret-color: currentcolor is interpolable");
38 </script>
39
40 </body></html>