blob: 09d7938cae27e768b82bf373e67fa582d0dea791 [file] [log] [blame]
<!doctype html>
<html>
<head>
<style>
/* Pack them to fit everything in 800*600 */
fieldset {
padding: 5px;
width: 100px;
float: left;
}
:invalid {
background-color: red;
}
:not(:invalid) {
color: green;
}
</style>
</head>
<body>
<p>Test the styling with the pseudo class :valid with the &lt;fieldset&gt; element.</p>
<!-- Fieldset by itself. -->
<fieldset>Text</fieldset>
<!-- Fieldset with a direct child inputs without any requirements. -->
<fieldset>
Text
<input>
<input value>
<input value="text">
</fieldset>
<!-- Fieldset with an indirect direct child inputs without any requirements. -->
<fieldset>
Text
<div>
Text
<div>
Text
<input>
<input value>
<input value="text">
</div>
</div>
</fieldset>
<!-- Fieldset with a direct child inputs with unsatisfied requirements. -->
<fieldset>
<input required>
<input required value>
<input required value="">
</fieldset>
<!-- Fieldset with an indirect direct child inputs with unsatisfied requirements. -->
<fieldset>
Text
<div>
Text
<div>
Text
<input required>
<input required value>
<input required value="">
</div>
</div>
</fieldset>
<!-- Fieldset with a direct child inputs with satisfied requirements. -->
<fieldset>
<input required value="text">
</fieldset>
<!-- Fieldset with an indirect direct child inputs with satisfied requirements. -->
<fieldset>
Text
<div>
Text
<div>
Text
<input required value="text">
</div>
</div>
</fieldset>
<!-- Fieldset with a direct child inputs with a mix of satisfied and unsatisfied requirements. -->
<fieldset>
<input required>
<input required value>
<input required value="">
<input required value="text">
</fieldset>
<!-- Fieldset with an indirect direct child inputs with satisfied and unsatisfied requirements. -->
<fieldset>
Text
<div>
Text
<div>
Text
<input required>
<input required value>
<input required value="">
<input required value="text">
</div>
</div>
</fieldset>
<!-- The cases above repeated with multiple nested fieldset -->
<fieldset>
<div>
<fieldset>
<fieldset>
Text
<div>
Text
<div>
Text
<input>
<input value>
<input value="text">
</div>
</div>
</fieldset>
</fieldset>
</div>
</fieldset>
<fieldset>
<div>
<fieldset>
<fieldset>
Text
<div>
Text
<div>
Text
<input required>
<input required value>
<input required value="">
</div>
</div>
</fieldset>
</fieldset>
</div>
</fieldset>
<fieldset>
<div>
<fieldset>
<fieldset>
Text
<div>
Text
<div>
Text
<input required value="text">
</div>
</div>
</fieldset>
</fieldset>
</div>
</fieldset>
<fieldset>
<div>
<fieldset>
<fieldset>
Text
<div>
Text
<div>
Text
<input required>
<input required value>
<input required value="">
<input required value="text">
</div>
</div>
</fieldset>
</fieldset>
</div>
</fieldset>
</body>
</html>