caret-color-013

caret-color dynamic changes

WeasyPrint

This browser

Flags
dom, script
Assertion
Test checks checks that carret-color can be correctly changed using the style attribute, and that the computed value is done correctly.

Source

 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>