OLD | NEW |
---|---|
(Empty) | |
1 <script> | |
Timothy Loh
2016/05/11 07:23:08
This should have <!doctype html>
Noel Gordon
2016/05/12 01:59:26
Done.
| |
2 if (window.testRunner) | |
3 testRunner.dumpAsText(); | |
4 | |
5 var TESTS = [ | |
6 ["#000", 0, 0, 0], | |
7 ["#001", 0, 0, 17], | |
8 ["#012", 0, 17, 34], | |
9 ["#123", 17, 34, 51], | |
10 ["#0001", 0, 0, 0, 17], | |
11 ["#0012", 0, 0, 17,34], | |
12 ["#0123", 0, 17, 34, 51], | |
13 ["#1234", 17, 34, 51, 68], | |
14 ["#000000", 0, 0, 0], | |
15 ["#000012", 0, 0, 18], | |
16 ["#001234", 0, 18, 52], | |
17 ["#123456", 18, 52, 86], | |
18 ["#00000000", 0, 0, 0, 0], | |
19 ["#00000012", 0, 0, 0, 18], | |
20 ["#00001234", 0, 0, 18, 52], | |
21 ["#00123456", 0, 18, 52, 86], | |
22 ["#12345678", 18, 52, 86, 120], | |
23 // Bad content from here on shows the red failure color. | |
24 ["#12x3", 255, 0, 0], | |
25 ["#123x", 255, 0, 0], | |
26 ["#123x4567", 255, 0, 0], | |
27 ["#1234567r", 255, 0, 0], | |
28 ["#123456x6", 255, 0, 0], | |
29 ]; | |
30 | |
31 function extractComponents(rgbValue) { | |
32 var re = /rgba?\((\d+),\s(\d+),\s(\d+)(,\s([\d\.]+))?\)/; | |
33 var match = re.exec(rgbValue); | |
34 var results = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])]; | |
35 if (match[5]) | |
36 results.push(Math.round(parseFloat(match[5]) * 255)); | |
37 return results; | |
38 } | |
39 | |
40 function componentsMatch(components, expectedR, expectedG, expectedB, expectedA) { | |
41 if (components[0] == expectedR && components[1] == expectedG && components[2 ] == expectedB) { | |
42 if (components.length != 4) | |
43 return true; | |
44 return components[3] == expectedA; | |
45 } | |
46 } | |
47 | |
48 function componentsAsRGBA(r, g, b, a) { | |
49 if (a !== undefined) | |
50 return "red:" + r + " green: " + g + " blue: " + b + " alpha: " + a; | |
51 return "red:" + r + " green: " + g + " blue: " + b; | |
52 } | |
53 | |
54 function runTest() { | |
55 var element = document.querySelector("p"); | |
56 var results = ""; | |
57 | |
58 for (var test of TESTS) { | |
59 element.style.color = test[0]; | |
60 var components = extractComponents(window.getComputedStyle(element).colo r); | |
61 if (componentsMatch(components, test[1], test[2], test[3], test[4])) | |
62 results += "PASS " + test[0] + " was " + componentsAsRGBA(test[1], t est[2], test[3], test[4]) + "<br>"; | |
63 else | |
64 results += "FAIL " + test[0] + " should be " + componentsAsRGBA(test [1], test[2], test[3], test[4]) + " but was " + componentsAsRGBA(components[0], components[1], components[2], components[3]) + "<br>"; | |
65 | |
66 // Force a color reset and style recalc. | |
67 element.style.color = "red"; | |
68 computedStyle = window.getComputedStyle(element).color; | |
69 } | |
70 | |
71 document.querySelector("div").innerHTML = results; | |
72 } | |
73 | |
74 window.addEventListener("load", runTest, false); | |
75 </script> | |
76 <div id="results"></div> | |
77 <p></p> | |
OLD | NEW |