Merge pull request #1152 from mrego/caret-color-new-tests

frivoal · web-flow · commit ab2484fcb41f · 2016-11-25T10:31:22.000+09:00
[css-ui] Add new tests for caret-color property
diff --git a/css-ui-3/caret-color-016.html b/css-ui-3/caret-color-016.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: caret-color visited link computed value</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/css3-color/#color0">
+<link rel="help" href="https://www.w3.org/TR/selectors4/#link">
+<meta name="flags" content="may interact">
+<meta name="assert" content="Test checks that computed style of caret-color on visited links doesn't leak privacy information.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  a {
+    font-size: 3em;
+    font-weight: bold;
+    width: 10em;
+    padding: 10px;
+    background: black; /* the color of a thin object like the caret is easier to see on a black background. */
+
+    color: white;
+    caret-color: lime;
+  }
+
+  a:link {
+    color: yellow;
+  }
+
+  a:visited {
+    caret-color: cyan;
+  }
+</style>
+<body>
+  <p>Before running this test, the link below must have been visited. It will have yellow text if this is not the case. If it its text is yellow, you need to navigate to this link first.
+  <p><a id="link" contenteditable href="caret-color-016.html">link</a></p>
+  <div id=log></div>
+
+  <script>
+    test(
+      function(){
+        var link = document.getElementById("link");
+        assert_equals(window.getComputedStyle(link)["caret-color"], "rgb(0, 255, 0)");
+    }, "The computed value of a visited link should be the same than a non-visited link");
+  </script>
+</body>
diff --git a/css-ui-3/caret-color-017.html b/css-ui-3/caret-color-017.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Basic User Interface Test: caret-color transition</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/css3-transitions/#transition">
+<meta name="flags" content="interact">
+<meta name="assert" content="Test checks that caret-color can be used in a transition">
+<style>
+  textarea {
+    font-size: 3em;
+    font-weight: bold;
+    width: 10em;
+    padding: 10px;
+    background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */
+
+    caret-color: magenta;
+    transition: caret-color 5s;
+  }
+
+  textarea:focus {
+    caret-color: lime;
+  }
+</style>
+<body>
+  <p>Test passes if, when the text area below is focused for editing, the text insertion caret color gradually changes from magenta to green.</p>
+  <p>The shape of the caret, and whether it flashes, are not part of the test.</p>
+  <textarea></textarea>
+</body>
