175 lines
6.3 KiB
HTML
175 lines
6.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
fieldset {
|
|
padding: 5px;
|
|
width: 100px;
|
|
float: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="color: red;">
|
|
<p style="color: red;">Test the styling with the pseudo class :valid with the <fieldset> element.</p>
|
|
|
|
<!-- Fieldset by itself. -->
|
|
<fieldset style="background-color: green;">Text</fieldset>
|
|
|
|
<!-- Fieldset with a direct child inputs without any requirements. -->
|
|
<fieldset style="background-color: green;">
|
|
Text
|
|
<input style="background-color: green;">
|
|
<input style="background-color: green;" value>
|
|
<input style="background-color: green;" value="text">
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with an indirect direct child inputs without any requirements. -->
|
|
<fieldset style="background-color: green;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<input style="background-color: green;">
|
|
<input style="background-color: green;" value>
|
|
<input style="background-color: green;" value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with a direct child inputs with unsatisfied requirements. -->
|
|
<fieldset style="color: red;">
|
|
<input style="color: red;" required>
|
|
<input style="color: red;" required value>
|
|
<input style="color: red;" required value="">
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with an indirect direct child inputs with unsatisfied requirements. -->
|
|
<fieldset style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<input style="color: red;" required>
|
|
<input style="color: red;" required value>
|
|
<input style="color: red;" required value="">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with a direct child inputs with satisfied requirements. -->
|
|
<fieldset style="background-color: green;">
|
|
<input style="background-color: green;" required value="text">
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with an indirect direct child inputs with satisfied requirements. -->
|
|
<fieldset style="background-color: green;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<input style="background-color: green;" required value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with a direct child inputs with a mix of satisfied and unsatisfied requirements. -->
|
|
<fieldset style="color: red;">
|
|
<input style="color: red;" required>
|
|
<input style="color: red;" required value>
|
|
<input style="color: red;" required value="">
|
|
<input style="background-color: green;" required value="text">
|
|
</fieldset>
|
|
|
|
<!-- Fieldset with an indirect direct child inputs with satisfied and unsatisfied requirements. -->
|
|
<fieldset style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<input style="color: red;" required>
|
|
<input style="color: red;" required value>
|
|
<input style="color: red;" required value="">
|
|
<input style="background-color: green;" required value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- The cases above repeated with multiple nested fieldset -->
|
|
<fieldset style="background-color: green;">
|
|
<div style="color: red;">
|
|
<fieldset style="background-color: green;">
|
|
<fieldset style="background-color: green;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<input style="background-color: green;">
|
|
<input style="background-color: green;" value>
|
|
<input style="background-color: green;" value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</fieldset>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset style="color: red;">
|
|
<div style="color: red;">
|
|
<fieldset style="color: red;">
|
|
<fieldset style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<input style="color: red;" required>
|
|
<input style="color: red;" required value>
|
|
<input style="color: red;" required value="">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</fieldset>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset style="background-color: green;">
|
|
<div style="color: red;">
|
|
<fieldset style="background-color: green;">
|
|
<fieldset style="background-color: green;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<input style="background-color: green;" required value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</fieldset>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset style="color: red;">
|
|
<div style="color: red;">
|
|
<fieldset style="color: red;">
|
|
<fieldset style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<div style="color: red;">
|
|
Text
|
|
<input style="color: red;" required>
|
|
<input style="color: red;" required value>
|
|
<input style="color: red;" required value="">
|
|
<input style="background-color: green;" required value="text">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</fieldset>
|
|
</div>
|
|
</fieldset>
|
|
</body>
|
|
</html>
|