<!doctype html>
<html>
<head>
    <style>
        /* Pack them to fit everything in 800*600 */
        fieldset {
            padding: 5px;
            width: 100px;
            float: left;
        }
    </style>
</head>
<body style="color: green;">
    <p style="color: green;">Test the styling with the pseudo class :valid with the &lt;fieldset&gt; element.</p>

    <!-- Fieldset by itself. -->
    <fieldset style="color: green;">Text</fieldset>

    <!-- Fieldset with a direct child inputs without any requirements. -->
    <fieldset style="color: green;">
        Text
        <input style="color: green;">
        <input style="color: green;" value>
        <input style="color: green;" value="text">
    </fieldset>

    <!-- Fieldset with an indirect direct child inputs without any requirements. -->
    <fieldset style="color: green;">
        Text
        <div style="color: green;">
            Text
            <div style="color: green;">
                Text
                <input style="color: green;">
                <input style="color: green;" value>
                <input style="color: green;" value="text">
            </div>
        </div>
    </fieldset>

    <!-- Fieldset with a direct child inputs with unsatisfied requirements. -->
    <fieldset style="background-color: red;">
        <input style="background-color: red;" required>
        <input style="background-color: red;" required value>
        <input style="background-color: red;" required value="">
    </fieldset>

    <!-- Fieldset with an indirect direct child inputs with unsatisfied requirements. -->
    <fieldset style="background-color: red;">
        Text
        <div style="color: green;">
            Text
            <div style="color: green;">
                Text
                <input style="background-color: red;" required>
                <input style="background-color: red;" required value>
                <input style="background-color: red;" required value="">
            </div>
        </div>
    </fieldset>

    <!-- Fieldset with a direct child inputs with satisfied requirements. -->
    <fieldset style="color: green;">
        <input style="color: green;" required value="text">
    </fieldset>

    <!-- Fieldset with an indirect direct child inputs with satisfied requirements. -->
    <fieldset style="color: green;">
        Text
        <div style="color: green;">
            Text
            <div style="color: green;">
                Text
                <input style="color: green;" required value="text">
            </div>
        </div>
    </fieldset>

    <!-- Fieldset with a direct child inputs with a mix of satisfied and unsatisfied requirements. -->
    <fieldset style="background-color: red;">
        <input style="background-color: red;" required>
        <input style="background-color: red;" required value>
        <input style="background-color: red;" required value="">
        <input style="color: green;" required value="text">
    </fieldset>

    <!-- Fieldset with an indirect direct child inputs with satisfied and unsatisfied requirements. -->
    <fieldset style="background-color: red;">
        Text
        <div style="color: green;">
            Text
            <div style="color: green;">
                Text
                <input style="background-color: red;" required>
                <input style="background-color: red;" required value>
                <input style="background-color: red;" required value="">
                <input style="color: green;" required value="text">
            </div>
        </div>
    </fieldset>

    <!-- The cases above repeated with multiple nested fieldset -->
    <fieldset style="color: green;">
        <div style="color: green;">
            <fieldset style="color: green;">
                <fieldset style="color: green;">
                    Text
                    <div style="color: green;">
                        Text
                        <div style="color: green;">
                            Text
                            <input style="color: green;">
                            <input style="color: green;" value>
                            <input style="color: green;" value="text">
                        </div>
                    </div>
                </fieldset>
            </fieldset>
        </div>
    </fieldset>
    <fieldset style="background-color: red;">
        <div style="color: green;">
            <fieldset style="background-color: red;">
                <fieldset style="background-color: red;">
                    Text
                    <div style="color: green;">
                        Text
                        <div style="color: green;">
                            Text
                            <input style="background-color: red;" required>
                            <input style="background-color: red;" required value>
                            <input style="background-color: red;" required value="">
                        </div>
                    </div>
                </fieldset>
            </fieldset>
        </div>
    </fieldset>
    <fieldset style="color: green;">
        <div style="color: green;">
            <fieldset style="color: green;">
                <fieldset style="color: green;">
                    Text
                    <div style="color: green;">
                        Text
                        <div style="color: green;">
                            Text
                            <input style="color: green;" required value="text">
                        </div>
                    </div>
                </fieldset>
            </fieldset>
        </div>
    </fieldset>
    <fieldset style="background-color: red;">
        <div style="color: green;">
            <fieldset style="background-color: red;">
                <fieldset style="background-color: red;">
                    Text
                    <div style="color: green;">
                        Text
                        <div style="color: green;">
                            Text
                            <input style="background-color: red;" required>
                            <input style="background-color: red;" required value>
                            <input style="background-color: red;" required value="">
                            <input style="color: green;" required value="text">
                        </div>
                    </div>
                </fieldset>
            </fieldset>
        </div>
    </fieldset>
</body>
</html>
