<!doctype html>
<html>
<head>
    <style>
        form {
            padding: 5px;
            margin: 2px;
            border: 1px solid black;
        }
        form:valid {
            background-color: green;
        }
        form:not(:valid) {
            background-color: red;
        }
    </style>
    <script>
        function createTestDOM() {
            var body = document.body;

            {
                body.appendChild(document.createElement("form"));
            }
            {
                var form = document.createElement("form");
                form.appendChild(document.createElement("input"));
                body.appendChild(form);
            }
            {
                var container = document.createElement("div");
                var form = document.createElement("form");
                form.setAttribute("id", "basic_input");
                container.appendChild(form);

                var input = document.createElement("input");
                input.setAttribute("form", "basic_input");
                container.appendChild(input);

                body.appendChild(container);
            }
            {
                var form = document.createElement("form");
                var input = document.createElement("input");
                input.setAttribute("required", "");
                form.appendChild(input);
                body.appendChild(form);
            }
            {
                var container = document.createElement("div");
                var form = document.createElement("form");
                form.setAttribute("id", "required_input");
                container.appendChild(form);

                var input = document.createElement("input");
                input.setAttribute("form", "required_input");
                input.setAttribute("required", "");
                container.appendChild(input);

                body.appendChild(container);
            }
            {
                var form = document.createElement("form");
                var input = document.createElement("input");
                input.setAttribute("required", "");
                input.value = "WebKit!";
                form.appendChild(input);
                body.appendChild(form);
            }
            {
                var container = document.createElement("div");
                var form = document.createElement("form");
                form.setAttribute("id", "valid_required_input");
                container.appendChild(form);

                var input = document.createElement("input");
                input.setAttribute("form", "valid_required_input");
                input.setAttribute("required", "");
                input.value = "WebKit!";
                container.appendChild(input);

                body.appendChild(container);
            }
        }
        window.addEventListener("load", createTestDOM);
    </script>
</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>
</body>
</html>