OLD | NEW |
---|---|
(Empty) | |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
esprehn
2015/08/21 10:18:10
ditto
ramya.v
2015/08/25 10:24:45
Done.
| |
4 <script src="../../resources/js-test.js"></script> | |
5 <style> | |
6 input, textarea { | |
7 background-color: white; | |
8 } | |
9 :placeholder-shown { | |
10 background-color: rgb(1, 2, 3); | |
11 } | |
12 </style> | |
13 </head> | |
14 <body> | |
15 <div> | |
16 <input id="input-with-renderer"> | |
17 <textarea id="textarea-with-renderer"></textarea> | |
18 </div> | |
19 <div style="display:none;"> | |
20 <input id="input-without-renderer"> | |
21 <textarea id="textarea-without-renderer"></textarea> | |
22 </div> | |
23 </body> | |
24 <script> | |
25 description('Test style update of the :placeholder-shown pseudo class.'); | |
26 var inputCaseWithRenderer = document.getElementById("input-with-renderer"); | |
27 var textareaCaseWithRenderer = document.getElementById("textarea-with-renderer") ; | |
28 var inputCaseWithoutRenderer = document.getElementById("input-without-renderer") ; | |
29 var textareaCaseWithoutRenderer = document.getElementById("textarea-without-rend erer"); | |
30 function testBackgroundColor(expectMatch) { | |
31 shouldBeEqualToString('getComputedStyle(document.getElementById("input-with- renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255) '); | |
32 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-wi th-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 2 55)'); | |
33 shouldBeEqualToString('getComputedStyle(document.getElementById("input-witho ut-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 2 55)'); | |
34 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-wi thout-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255 , 255)'); | |
35 } | |
36 function setAttribute(attribute, value) { | |
37 inputCaseWithRenderer.setAttribute(attribute, value); | |
38 textareaCaseWithRenderer.setAttribute(attribute, value); | |
39 inputCaseWithoutRenderer.setAttribute(attribute, value); | |
40 textareaCaseWithoutRenderer.setAttribute(attribute, value); | |
41 } | |
42 debug("Initial state is without placehoder."); | |
43 testBackgroundColor(false); | |
44 debug("Adding a placeholder matches."); | |
45 setAttribute("placeholder", "WebKit!"); | |
46 testBackgroundColor(true); | |
47 debug("Adding a placehoder and an empty value. An empty value does not prevent m atching."); | |
48 setAttribute("placeholder", "WebKit!"); | |
49 inputCaseWithRenderer.value = ""; | |
50 textareaCaseWithRenderer.appendChild(document.createTextNode("")); | |
51 inputCaseWithoutRenderer.value = ""; | |
52 textareaCaseWithoutRenderer.appendChild(document.createTextNode("")); | |
53 testBackgroundColor(true); | |
54 debug("Changing the type of the input to something that does not support placeho lder. The input element should not match."); | |
55 inputCaseWithRenderer.type = "button"; | |
56 inputCaseWithoutRenderer.type = "button"; | |
57 shouldBeEqualToString('getComputedStyle(document.getElementById("input-with-rend erer")).backgroundColor', 'rgb(255, 255, 255)'); | |
58 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-with-r enderer")).backgroundColor', 'rgb(1, 2, 3)'); | |
59 shouldBeEqualToString('getComputedStyle(document.getElementById("input-without-r enderer")).backgroundColor', 'rgb(255, 255, 255)'); | |
60 shouldBeEqualToString('getComputedStyle(document.getElementById("textarea-withou t-renderer")).backgroundColor', 'rgb(1, 2, 3)'); | |
61 debug("Changing the type of the input to text should add the style back."); | |
62 inputCaseWithRenderer.type = "text"; | |
63 inputCaseWithoutRenderer.type = "text"; | |
64 testBackgroundColor(true); | |
65 debug("Adding a non empty value should remove the style."); | |
66 inputCaseWithRenderer.value = "Foobar"; | |
67 textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar")); | |
68 inputCaseWithoutRenderer.value = "Foobar"; | |
69 textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar")); | |
70 testBackgroundColor(false); | |
71 debug("Removing the placeholder, we should not match."); | |
72 setAttribute("placeholder", ""); | |
73 testBackgroundColor(false); | |
74 debug("Removing the value. We should still not match since the placeholder attri bute was removed."); | |
75 inputCaseWithRenderer.value = ""; | |
76 textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild); | |
77 inputCaseWithoutRenderer.value = ""; | |
78 textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild); | |
79 testBackgroundColor(false); | |
80 debug("Putting back a value, no reason to match."); | |
81 inputCaseWithRenderer.value = "Foobar"; | |
82 textareaCaseWithRenderer.appendChild(document.createTextNode("Foobar")); | |
83 inputCaseWithoutRenderer.value = "Foobar"; | |
84 textareaCaseWithoutRenderer.appendChild(document.createTextNode("Foobar")); | |
85 testBackgroundColor(false); | |
86 debug("Adding back the placeholder, the value is still there so we cannot match yet."); | |
87 setAttribute("placeholder", "WebKit!"); | |
88 testBackgroundColor(false); | |
89 debug("Removing the value. A placeholder was added while the value was up, we sh ould get the style now."); | |
90 inputCaseWithRenderer.value = ""; | |
91 textareaCaseWithRenderer.removeChild(textareaCaseWithRenderer.lastChild); | |
92 inputCaseWithoutRenderer.value = ""; | |
93 textareaCaseWithoutRenderer.removeChild(textareaCaseWithoutRenderer.lastChild); | |
94 testBackgroundColor(true); | |
alancutter (OOO until 2018)
2015/08/20 23:36:45
Can't say I'm a fan of giant walls of procedural i
ramya.v
2015/08/25 10:24:45
For now using js-test.js since it was mentioned as
| |
95 </script> | |
96 </html> | |
OLD | NEW |