1 <!DOCTYPE html>
2 <html><head><meta charset="utf-8">
3 <title>CSS Basic User Interface Test: caret-color dynamic changes</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/css3-color/#color0" rel="help">
7 <meta content="dom" name="flags">
8 <meta content="Test checks checks that carret-color can be correctly changed using the style attribute, and that the computed value is done correctly." name="assert">
9 <script src="/resources/testharness.js"></script>
10 <script src="/resources/testharnessreport.js"></script>
11
12 </head><body><div id="log"></div>
13 <div id="wrapper">
14 <textarea id="textarea"></textarea>
15 </div>
16
17 <script>
18 function testStyleCaretColor(element, value) {
19 assert_equals(element.style.caretColor, value, "The style attribute's caret-color should be '" + value + "'");
20 }
21
22 function testComputedStyleCaretColor(element, value) {
23 assert_equals(getComputedStyle(element).getPropertyValue("caret-color"), value, "caret-color computed style should be '" + value + "'");
24 }
25
26 function setAndCheckCaretColor(element, caretColor, styleValue, computedStyleValue, description) {
27 element.style.caretColor = caretColor;
28 test(function() {
29 testStyleCaretColor(element, styleValue);
30 testComputedStyleCaretColor(element, computedStyleValue);
31 }, description);
32 }
33
34 var textarea = document.getElementById("textarea");
35 setAndCheckCaretColor(textarea, "", "", "rgb(0, 0, 0)", "Test default caret-color");
36 setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial");
37 setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 0, 0)", "Test caret-color: inherit");
38 setAndCheckCaretColor(textarea, "auto", "auto", "rgb(0, 0, 0)", "Test caret-color: auto");
39 setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "rgb(0, 0, 0)", "Test caret-color: currentcolor");
40 setAndCheckCaretColor(textarea, "lime", "lime", "rgb(0, 255, 0)", "Test caret-color: lime");
41 setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Reset caret-color: initial");
42 setAndCheckCaretColor(textarea, "rgb(0, 100, 100)", "rgb(0, 100, 100)", "rgb(0, 100, 100)", "Test caret-color: rgb(0, 100, 100)");
43
44 var wrapper = document.getElementById("wrapper");
45 wrapper.style.caretColor = "green";
46
47 setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial (inherited)");
48 setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 128, 0)", "Test caret-color: inherit (inherited)");
49 setAndCheckCaretColor(textarea, "blue", "blue", "rgb(0, 0, 255)", "Test caret-color: blue (inherited)");
50 </script>
51 </body></html>