| <!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 <fieldset>.</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> |
