Merge pull request #1161 from mrego/caret-color-resolved-value

[css-ui] Resolved value of caret-color should be the used value

Author: mrego

css-ui-3/caret-color-009.html

@@ -5,17 +5,20 @@
 <link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color">
 <meta name="flags" content="dom">
-<meta name="assert" content="Test checks that auto and currentcolor compute to themselves for caret-color and that initial computes to auto">
+<meta name="assert" content="Test checks that the resolved value of auto, currentcolor and initial for caret-color property, is the used value.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <style>
 #d1 {
+	color: lime;
 	caret-color: auto;
 }
 #d2 {
+	color: cyan;
 	caret-color: currentcolor;
 }
 #d3 {
+	color: magenta;
 	caret-color: initial;
 }
 </style>
@@ -29,18 +32,18 @@
 test(
   function(){
    var d1 = document.getElementById("d1");
-   assert_equals(window.getComputedStyle(d1)["caret-color"], "auto");
-  }, "The computed value of auto should be auto");
+   assert_equals(window.getComputedStyle(d1)["caret-color"], "rgb(0, 255, 0)");
+  }, "Check the resolved value of 'auto'");
 test(
   function(){
    var d2 = document.getElementById("d2");
-   assert_equals(window.getComputedStyle(d2)["caret-color"], "currentcolor");
-  }, "The computed value of currentcolor should be currentcolor");
+   assert_equals(window.getComputedStyle(d2)["caret-color"], "rgb(0, 255, 255)");
+  }, "Check the resolved value of 'currentcolor'");
 test(
   function(){
    var d3 = document.getElementById("d3");
-   assert_equals(window.getComputedStyle(d3)["caret-color"], "auto");
-  }, "The computed value of initial should be auto");
+   assert_equals(window.getComputedStyle(d3)["caret-color"], "rgb(255, 0, 255)");
+  }, "Check the resolved value of 'initial'");
 </script>
 </body>
 </html>

css-ui-3/caret-color-013.html

@@ -32,19 +32,19 @@
   }
 
   var textarea = document.getElementById("textarea");
-  setAndCheckCaretColor(textarea, "", "", "auto", "Test default caret-color");
-  setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Test caret-color: initial");
-  setAndCheckCaretColor(textarea, "inherit", "inherit", "auto", "Test caret-color: inherit");
-  setAndCheckCaretColor(textarea, "auto", "auto", "auto", "Test caret-color: auto");
-  setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "currentcolor", "Test caret-color: currentcolor");
+  setAndCheckCaretColor(textarea, "", "", "rgb(0, 0, 0)", "Test default caret-color");
+  setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial");
+  setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 0, 0)", "Test caret-color: inherit");
+  setAndCheckCaretColor(textarea, "auto", "auto", "rgb(0, 0, 0)", "Test caret-color: auto");
+  setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "rgb(0, 0, 0)", "Test caret-color: currentcolor");
   setAndCheckCaretColor(textarea, "lime", "lime", "rgb(0, 255, 0)", "Test caret-color: lime");
-  setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Reset caret-color: initial");
+  setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Reset caret-color: initial");
   setAndCheckCaretColor(textarea, "rgb(0, 100, 100)", "rgb(0, 100, 100)", "rgb(0, 100, 100)", "Test caret-color: rgb(0, 100, 100)");
 
   var wrapper = document.getElementById("wrapper");
   wrapper.style.caretColor = "green";
 
-  setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Test caret-color: initial (inherited)");
+  setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial (inherited)");
   setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 128, 0)", "Test caret-color: inherit (inherited)");
   setAndCheckCaretColor(textarea, "blue", "blue", "rgb(0, 0, 255)", "Test caret-color: blue (inherited)");
 </script>