<!doctype html>
<html>
<head>
    <style>
        /* Pack them to fit everything in 800*600 */
        fieldset {
            padding: 5px;
            width: 100px;
            float: left;
        }
        textarea:valid {
            background-color: green;
        }
        fieldset:valid {
            background-color: lime;
        }
    </style>
</head>
<body>
    <p>Verify style sharing does not ignore :valid affecting a &lt;fieldset&gt;.</p>

    <!-- Empty fieldset are :valid, non-empty's :valid depend on the children. -->
    <div>
        <fieldset></fieldset>
        <fieldset></fieldset>
        <fieldset>
            <textarea></textarea>
        </fieldset>
        <fieldset>
            <textarea required></textarea>
        </fieldset>
        <fieldset>
            <textarea required>Foobar</textarea>
        </fieldset>

        <fieldset></fieldset>
    </div>

    <!-- The style of field set varies with its required children. -->
    <div>
        <fieldset>
            <textarea required></textarea>
        </fieldset>
        <fieldset>
            <textarea required></textarea>
        </fieldset>
        <fieldset>
            <textarea required>Foobar</textarea>
        </fieldset>
        <fieldset>
            <textarea required></textarea>
        </fieldset>
    </div>
    <div>
        <fieldset>
            <textarea required>Foobar</textarea>
        </fieldset>
        <fieldset>
            <textarea required></textarea>
        </fieldset>
        <fieldset>
            <textarea required></textarea>
        </fieldset>
        <fieldset>
            <textarea required></textarea>
        </fieldset>
    </div>
</body>
</html>
