Google Git
Sign in
webkit / WebKit / b387ed984cfa86e07321d6d915fc6d801afbcecc / . / LayoutTests / fast / css / pseudo-valid-fieldset-expected.html
blob: 5fc96e23ce18470a7b057e7e0342e98b27abe73b [file] [log] [blame]
<!doctype html>
<html>
<head>
<style>
fieldset {
padding: 5px;
width: 100px;
float: left;
}
</style>
</head>
<body style="color: red;">
<p style="color: red;">Test the styling with the pseudo class :valid with the &lt;fieldset&gt; element.</p>
<!-- Fieldset by itself. -->
<fieldset style="background-color: green;">Text</fieldset>
<!-- Fieldset with a direct child inputs without any requirements. -->
<fieldset style="background-color: green;">
Text
<input style="background-color: green;">
<input style="background-color: green;" value>
<input style="background-color: green;" value="text">
</fieldset>
<!-- Fieldset with an indirect direct child inputs without any requirements. -->
<fieldset style="background-color: green;">
Text
<div style="color: red;">
Text
<div style="color: red;">
Text
<input style="background-color: green;">
<input style="background-color: green;" value>
<input style="background-color: green;" value="text">
</div>
</div>
</fieldset>
<!-- Fieldset with a direct child inputs with unsatisfied requirements. -->
<fieldset style="color: red;">
<input style="color: red;" required>
<input style="color: red;" required value>
<input style="color: red;" required value="">
</fieldset>
<!-- Fieldset with an indirect direct child inputs with unsatisfied requirements. -->
<fieldset style="color: red;">
Text
<div style="color: red;">
Text
<div style="color: red;">
Text
<input style="color: red;" required>
<input style="color: red;" required value>
<input style="color: red;" required value="">
</div>
</div>
</fieldset>
<!-- Fieldset with a direct child inputs with satisfied requirements. -->
<fieldset style="background-color: green;">
<input style="background-color: green;" required value="text">
</fieldset>
<!-- Fieldset with an indirect direct child inputs with satisfied requirements. -->
<fieldset style="background-color: green;">
Text
<div style="color: red;">
Text
<div style="color: red;">
Text
<input style="background-color: green;" required value="text">
</div>
</div>
</fieldset>
<!-- Fieldset with a direct child inputs with a mix of satisfied and unsatisfied requirements. -->
<fieldset style="color: red;">
<input style="color: red;" required>
<input style="color: red;" required value>
<input style="color: red;" required value="">
<input style="background-color: green;" required value="text">
</fieldset>
<!-- Fieldset with an indirect direct child inputs with satisfied and unsatisfied requirements. -->
<fieldset style="color: red;">
Text
<div style="color: red;">
Text
<div style="color: red;">
Text
<input style="color: red;" required>
<input style="color: red;" required value>
<input style="color: red;" required value="">
<input style="background-color: green;" required value="text">
</div>
</div>
</fieldset>
<!-- The cases above repeated with multiple nested fieldset -->
<fieldset style="background-color: green;">
<div style="color: red;">
<fieldset style="background-color: green;">
<fieldset style="background-color: green;">
Text
<div style="color: red;">
Text
<div style="color: red;">
Text
<input style="background-color: green;">
<input style="background-color: green;" value>
<input style="background-color: green;" value="text">
</div>
</div>
</fieldset>
</fieldset>
</div>
</fieldset>
<fieldset style="color: red;">
<div style="color: red;">
<fieldset style="color: red;">
<fieldset style="color: red;">
Text
<div style="color: red;">
Text
<div style="color: red;">
Text
<input style="color: red;" required>
<input style="color: red;" required value>
<input style="color: red;" required value="">
</div>
</div>
</fieldset>
</fieldset>
</div>
</fieldset>
<fieldset style="background-color: green;">
<div style="color: red;">
<fieldset style="background-color: green;">
<fieldset style="background-color: green;">
Text
<div style="color: red;">
Text
<div style="color: red;">
Text
<input style="background-color: green;" required value="text">
</div>
</div>
</fieldset>
</fieldset>
</div>
</fieldset>
<fieldset style="color: red;">
<div style="color: red;">
<fieldset style="color: red;">
<fieldset style="color: red;">
Text
<div style="color: red;">
Text
<div style="color: red;">
Text
<input style="color: red;" required>
<input style="color: red;" required value>
<input style="color: red;" required value="">
<input style="background-color: green;" required value="text">
</div>
</div>
</fieldset>
</fieldset>
</div>
</fieldset>
</body>
</html>