<!doctype html>
<html>
<head>
    <style>
        form, fieldset {
            padding: 5px;
            margin: 2px;
            border: 1px solid black;
        }
        /* Pack them to fit everything in 800*600 */
        body > :not(p) {
            float: left;
        }
    </style>
</head>
<body>
    <p>Test the basics of the pseudo class :valid with the &lt;form&gt; and &lt;fieldset&gt; elements.</p>

    <!-- Empty stuff. -->
    <form style="background-color: green">
        <fieldset style="background-color: green"></fieldset>
    </form>

    <!-- Basic input as a descendant. -->
    <form style="background-color: green">
        <fieldset style="background-color: green">
            <input>
        </fieldset>
    </form>

    <!-- Basic input associated. -->
    <div>
        <form id="basic_input1" style="background-color: green">
            <fieldset style="background-color: green"></fieldset>
        </form>
        <fieldset form="basic_input1" style="background-color: green">
            <input>
        </fieldset>
    </div>

    <div>
        <form id="basic_input2" style="background-color: green">
            <fieldset style="background-color: green"></fieldset>
        </form>
        <fieldset style="background-color: green">
            <input form="basic_input2">
        </fieldset>
    </div>

    <!-- Required input as a descendant. -->
    <form style="background-color: red">
        <fieldset style="background-color: red">
            <input required>
        </fieldset>
    </form>

    <!-- Required input associated. -->
    <div>
        <form id="required_input1" style="background-color: red">
            <fieldset style="background-color: green"></fieldset>
        </form>
        <fieldset style="background-color: red">
            <input form="required_input1" required>
        </fieldset>
    </div>

    <div>
        <form id="required_input2" style="background-color: green">
            <fieldset style="background-color: green"></fieldset>
        </form>
        <fieldset form="required_input2" style="background-color: red">
            <input required>
        </fieldset>
    </div>

    <!-- Valid required input as a descendant. -->
    <form style="background-color: green">
        <fieldset style="background-color: green">
            <input value="WebKit!" required>
        </fieldset>
    </form>

    <!-- Valid required input associated. -->
    <div>
        <form id="valid_required_input1" style="background-color: green">
            <fieldset style="background-color: green"></fieldset>
        </form>
        <fieldset style="background-color: green">
            <input value="WebKit!" form="valid_required_input1" required>
        </fieldset>
    </div>
    <div>
        <form id="valid_required_input2" style="background-color: green">
            <fieldset style="background-color: green"></fieldset>
        </form>
        <fieldset form="valid_required_input2" style="background-color: green">
            <input value="WebKit!" required>
        </fieldset>
    </div>
</body>
</html>
