diff --git a/css-ui-3/caret-color-019.html b/css-ui-3/caret-color-019.html
new file mode 100644
index 0000000000..55d92db804
--- /dev/null
+++ b/css-ui-3/caret-color-019.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: caret-color auto test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
+<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate">
+<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
+<meta name="assert" content="Test checks that 'auto' value for caret-color property is not interpolatible.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  textarea {
+    color: magenta;
+    caret-color: red;
+  }
+</style>
+<body>
+  <textarea id="textarea"></textarea>
+  <div id=log></div>
+
+  <script>
+    test(
+      function(){
+        var textarea = document.getElementById("textarea");
+        assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');
+
+        var keyframes = [
+          { caretColor: 'auto' },
+          { caretColor: 'lime' }
+        ];
+        var options = {
+          duration: 10,
+          fill: "forwards"
+        };
+
+        var player = textarea.animate(keyframes, options);
+        player.pause();
+        player.currentTime = 0;
+        assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
+        player.currentTime = 5;
+        assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
+        player.currentTime = 10;
+        assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
+      }, "caret-color: auto is not interpolatible");
+</script>
+</body>
diff --git a/css-ui-3/caret-color-020.html b/css-ui-3/caret-color-020.html
new file mode 100644
index 0000000000..40048d1c7c
--- /dev/null
+++ b/css-ui-3/caret-color-020.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: caret-color currentcolor test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
+<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate">
+<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
+<meta name="assert" content="Test checks that 'currentcolor' value for caret-color property is interpolatible.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  textarea {
+    color: magenta;
+    caret-color: red;
+  }
+</style>
+<body>
+  <textarea id="textarea"></textarea>
+  <div id=log></div>
+
+  <script>
+    test(
+      function(){
+        var textarea = document.getElementById("textarea");
+        assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');
+
+        var keyframes = [
+          { caretColor: 'currentcolor' },
+          { caretColor: 'lime' }
+        ];
+        var options = {
+          duration: 10,
+          fill: "forwards"
+        };
+
+        var player = textarea.animate(keyframes, options);
+        player.pause();
+        player.currentTime = 0;
+        assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
+        player.currentTime = 5;
+        assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)');
+        player.currentTime = 10;
+        assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
+      }, "caret-color: currentcolor is interpolatible");
+</script>
+</body>
