1 <?xml version=
"1.0" encoding=
"UTF-8"?>
2 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <html xmlns=
"http://www.w3.org/1999/xhtml">
6 <title>Testing controls that should match :enabled/:disabled
</title>
7 <style type=
"text/css">
8 input, textarea, button, *.hideme { display: none; }
9 div { margin-bottom:
0.2em; }
11 span, option, optgroup { background-color: red; }
12 *:enabled + span.true, option.true:enabled, optgroup.true:enabled { color: lime; background-color: lime; }
13 *:disabled + span.false, option.false:disabled, optgroup.false:disabled { color: lime; background-color: lime; }
15 <script type=
"text/javascript">
16 // Runs through i1, i2, .... in and toggles the |disabled| attribute
19 var el = document.getElementById(
"i1");
21 if (el.hasAttribute(
"disabled")) {
22 el.removeAttribute(
"disabled");
24 el.setAttribute(
"disabled",
"disabled");
27 el = document.getElementById(
"i" + i);
30 alert(
"onLoad() handler failed!");
34 window.addEventListener(
"load", onLoad);
39 There should be no red in the following (note: form styling should be enabled).
42 <form method=
"get" action=
".">
45 <input/> <span class=
"true">FAIL
</span>
46 <input disabled=
"disabled"/> <span class=
"false">FAIL
</span>
47 <input id=
"i1"/> <span class=
"false">FAIL
</span>
48 <input id=
"i2" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
53 <input type=
"password"/> <span class=
"true">FAIL
</span>
54 <input type=
"password" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
55 <input type=
"password" id=
"i3"/> <span class=
"false">FAIL
</span>
56 <input type=
"password" id=
"i4" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
61 <input type=
"checkbox"/> <span class=
"true">FAIL
</span>
62 <input type=
"checkbox" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
63 <input type=
"checkbox" id=
"i5"/> <span class=
"false">FAIL
</span>
64 <input type=
"checkbox" id=
"i6" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
69 <input type=
"radio"/> <span class=
"true">FAIL
</span>
70 <input type=
"radio" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
71 <input type=
"radio" id=
"i7"/> <span class=
"false">FAIL
</span>
72 <input type=
"radio" id=
"i8" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
77 <input type=
"submit"/> <span class=
"true">FAIL
</span>
78 <input type=
"submit" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
79 <input type=
"submit" id=
"i9"/> <span class=
"false">FAIL
</span>
80 <input type=
"submit" id=
"i10" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
85 <input type=
"reset"/> <span class=
"true">FAIL
</span>
86 <input type=
"reset" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
87 <input type=
"reset" id=
"i11"/> <span class=
"false">FAIL
</span>
88 <input type=
"reset" id=
"i12" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
93 <input type=
"file"/> <span class=
"true">FAIL
</span>
94 <input type=
"file" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
95 <input type=
"file" id=
"i13"/> <span class=
"false">FAIL
</span>
96 <input type=
"file" id=
"i14" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
101 <input type=
"hidden"/> <span class=
"true">FAIL
</span>
102 <input type=
"hidden" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
103 <input type=
"hidden" id=
"i15"/> <span class=
"false">FAIL
</span>
104 <input type=
"hidden" id=
"i16" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
109 <input type=
"image"/> <span class=
"true">FAIL
</span>
110 <input type=
"image" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
111 <input type=
"image" id=
"i17"/> <span class=
"false">FAIL
</span>
112 <input type=
"image" id=
"i18" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
117 <input type=
"button"/> <span class=
"true">FAIL
</span>
118 <input type=
"button" disabled=
"disabled"/> <span class=
"false">FAIL
</span>
119 <input type=
"button" id=
"i19"/> <span class=
"false">FAIL
</span>
120 <input type=
"button" id=
"i20" disabled=
"disabled"/> <span class=
"true">FAIL
</span>
125 <textarea cols=
"5" rows=
"5"></textarea> <span class=
"true">FAIL
</span>
126 <textarea cols=
"5" rows=
"5" disabled=
"disabled"></textarea> <span class=
"false">FAIL
</span>
127 <textarea cols=
"5" rows=
"5" id=
"i21"></textarea> <span class=
"false">FAIL
</span>
128 <textarea cols=
"5" rows=
"5" id=
"i22" disabled=
"disabled"></textarea> <span class=
"true">FAIL
</span>
133 <button>bogus
</button> <span class=
"true">FAIL
</span>
134 <button disabled=
"disabled">bogus
</button> <span class=
"false">FAIL
</span>
135 <button id=
"i23">bogus
</button> <span class=
"false">FAIL
</span>
136 <button id=
"i24" disabled=
"disabled">bogus
</button> <span class=
"true">FAIL
</span>
141 <select class=
"hideme"><option>bogus
</option></select> <span class=
"true">FAIL
</span>
142 <select class=
"hideme" disabled=
"disabled"><option>bogus
</option></select> <span class=
"false">FAIL
</span>
143 <select class=
"hideme" id=
"i25"><option>bogus
</option></select> <span class=
"false">FAIL
</span>
144 <select class=
"hideme" id=
"i26" disabled=
"disabled"><option>bogus
</option></select> <span class=
"true">FAIL
</span>
151 <option class=
"true">FAIL
</option>
152 <option class=
"false" disabled=
"disabled">FAIL
</option>
153 <option class=
"false" id=
"i27">FAIL
</option>
154 <option class=
"true" id=
"i28" disabled=
"disabled">FAIL
</option>
161 <optgroup class=
"true" label=
"FAIL">
162 <option class=
"hideme">bogus
</option>
164 <optgroup class=
"false" disabled=
"disabled" label=
"FAIL">
165 <option class=
"hideme">bogus
</option>
167 <optgroup class=
"false" id=
"i29" label=
"FAIL">
168 <option class=
"hideme">bogus
</option>
170 <optgroup class=
"true" disabled=
"disabled" id=
"i30" label=
"FAIL">
171 <option class=
"hideme">bogus
</option>