<?xml version=
"1.0" encoding=
"UTF-8" ?>
<!
DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd " >
<
html xmlns=
"http://www.w3.org/1999/xhtml " >
<
head >
<
title >Testing controls that should match :enabled/:disabled</
title >
<
style type=
"text/css" >
input ,
textarea ,
button , *.hideme { display: none; }
div { margin-bottom: 0.2
em ; }
span ,
option ,
optgroup { background-color: red; }
*:enabled +
span .true,
option .true:enabled,
optgroup .true:enabled { color: lime; backgro
und-color: lime; }
*:disabled + span .false, option .false:disabled, optgroup .false:disabled { color: lime; background-color: lime; }
</style >
<script type="text/javascript" >
// Runs through i1, i2, .... in and toggles the |disabled| attribute
function onLoad() {
var i = 1;
var el = document.getElementById("i1" );
while (el) {
if (el.hasAttribute("disabled" )) {
el.removeAttribute("disabled" );
} else {
el.setAttribute("disabled" , "disabled" );
}
++i;
el = document.getElementById("i" + i);
}
if (i != 31) {
alert("onLoad() handler failed!" );
}
}
window.addEventListener("load" , onLoad);
</script >
</head >
<body >
<div >
There should be no red in the following (note: form styling should be enabled).
</div >
<form method="get" action="." >
<div >
input :
<input /> <span class="true" >FAIL</span >
<input disabled="disabled" /> <span class="false" >FAIL</span >
<input id="i1" /> <span class="false" >FAIL</span >
<input id="i2" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
password:
<input type="password" /> <span class="true" >FAIL</span >
<input type="password" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="password" id="i3" /> <span class="false" >FAIL</span >
<input type="password" id="i4" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
checkbox:
<input type="checkbox" /> <span class="true" >FAIL</span >
<input type="checkbox" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="checkbox" id="i5" /> <span class="false" >FAIL</span >
<input type="checkbox" id="i6" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
radio:
<input type="radio" /> <span class="true" >FAIL</span >
<input type="radio" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="radio" id="i7" /> <span class="false" >FAIL</span >
<input type="radio" id="i8" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
submit:
<input type="submit" /> <span class="true" >FAIL</span >
<input type="submit" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="submit" id="i9" /> <span class="false" >FAIL</span >
<input type="submit" id="i10" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
reset:
<input type="reset" /> <span class="true" >FAIL</span >
<input type="reset" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="reset" id="i11" /> <span class="false" >FAIL</span >
<input type="reset" id="i12" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
file:
<input type="file" /> <span class="true" >FAIL</span >
<input type="file" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="file" id="i13" /> <span class="false" >FAIL</span >
<input type="file" id="i14" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
hidden:
<input type="hidden" /> <span class="true" >FAIL</span >
<input type="hidden" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="hidden" id="i15" /> <span class="false" >FAIL</span >
<input type="hidden" id="i16" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
image:
<input type="image" /> <span class="true" >FAIL</span >
<input type="image" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="image" id="i17" /> <span class="false" >FAIL</span >
<input type="image" id="i18" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
button (input ):
<input type="button" /> <span class="true" >FAIL</span >
<input type="button" disabled="disabled" /> <span class="false" >FAIL</span >
<input type="button" id="i19" /> <span class="false" >FAIL</span >
<input type="button" id="i20" disabled="disabled" /> <span class="true" >FAIL</span >
</div >
<div >
textarea :
<textarea cols="5" rows="5" ></textarea > <span class="true" >FAIL</span >
<textarea cols="5" rows="5" disabled="disabled" ></textarea > <span class="false" >FAIL</span >
<textarea cols="5" rows="5" id="i21" ></textarea > <span class="false" >FAIL</span >
<textarea cols="5" rows="5" id="i22" disabled="disabled" ></textarea > <span class="true" >FAIL</span >
</div >
<div >
button :
<button >bogus</button > <span class="true" >FAIL</span >
<button disabled="disabled" >bogus</button > <span class="false" >FAIL</span >
<button id="i23" >bogus</button > <span class="false" >FAIL</span >
<button id="i24" disabled="disabled" >bogus</button > <span class="true" >FAIL</span >
</div >
<div >
select :
<select class="hideme" ><option >bogus</option ></select > <span class="true" >FAIL</span >
<select class="hideme" disabled="disabled" ><option >bogus</option ></select > <span class="false" >FAIL</span >
<select class="hideme" id="i25" ><option >bogus</option ></select > <span class="false" >FAIL</span >
<select class="hideme" id="i26" disabled="disabled" ><option >bogus</option ></select > <span class="true" >FAIL</span >
</div >
<div >
option :
<select size="4" >
<option class="true" >FAIL</option >
<option class="false" disabled="disabled" >FAIL</option >
<option class="false" id="i27" >FAIL</option >
<option class="true" id="i28" disabled="disabled" >FAIL</option >
</select >
</div >
<div >
optgroup :
<select size="4" >
<optgroup class="true" label ="FAIL" >
<option class="hideme" >bogus</option >
</optgroup >
<optgroup class="false" disabled="disabled" label ="FAIL" >
<option class="hideme" >bogus</option >
</optgroup >
<optgroup class="false" id="i29" label ="FAIL" >
<option class="hideme" >bogus</option >
</optgroup >
<optgroup class="true" disabled="disabled" id="i30" label ="FAIL" >
<option class="hideme" >bogus</option >
</optgroup >
</select >
</div >
</form >
</body >
</html >
Messung V0.5 C=95 H=99 G=96
¤ Dauer der Verarbeitung: 0.22 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland