<!doctype html>
<html>
<head>
    <style>
        form {
            padding: 5px;
            margin: 2px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>Test the basics of the pseudo class :valid with the &lt;form&gt; element. This test creates the test DOM with JavaScript.</p>

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

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

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

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

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

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

    <!-- Valid required input associated. -->
    <div>
        <form id="valid_required_input" style="background-color: green"></form>
        <input value="WebKit!" form="valid_required_input" required>
    </div>

</body>
</html>
