Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

81 lines (69 sloc) 2.787 kb
<html>
<head>
<title>Empty and nested optgroup elements</title>
</head>
<body>
<select>
<!-- A div here is invalid. However, both IE and Firefox will walk into it
and enumerate the elements inside. -->
<div>
<option value="1">Item one</option>
<!-- this group has no children. We /should/ render it because that matches
IE and FireFox. -->
<optgroup label="Group one"></optgroup>
<!-- this group has a text node child. It should render the same as group one. -->
<optgroup label="Group two"> </optgroup>
<!-- for an optgroup without a label, IE will show an empty, unselectable row.
Firefox doesn't show it. We /do/ show it because someone might be using
it as a spacer. -->
<!-- Additionally, this has been updated to test the crash fixed in
https://bugs.webkit.org/show_bug.cgi?id=26656. When setting the
font-size in the <optgroup> to extra large, opening the select element
must not leave any unpainted areas of overlapping text. -->
<optgroup style="font-size: x-large;">
<option value="2">Item inside an optgroup without a label</option>
</optgroup>
<!-- for an optgroup with an empty label, IE will show an empty,
unselectable row. Firefox doesn't show it. We /do/ show it because
someone might be using it as a spacer. -->
<optgroup label="">
<option value="3">Item inside an optgroup with an empty label</option>
</optgroup>
<div>
<option value="4"></option>
<optgroup label="Group three">
<option value="5">Item two</option>
<!-- nested groups are disallowed by the spec, but IE and Firefox will
flatten the tree. We should match them. -->
<optgroup label="Nested group 1"></optgroup>
<optgroup label="Nested group 2">
<optgroup label="Nested group 3">
<option value="6">Item three</option>
</optgroup>
</optgroup>
</optgroup>
</div>
<option value="7">Item four</option>
</div>
</select>
<p>Click on the select element above. When it drops down you should see the following items in the list:</p>
<ul>
<li>Item one</li>
<li><b>Group one</b></li>
<li><b>Group two</b></li>
<li><i>(unselectable, empty row)</i></li>
<li>Item inside an optgroup without a label</li>
<li><i>(unselectable, empty row)</i></li>
<li>Item inside an optgroup with an empty label</li>
<li><i>(selectable, empty row)</i></li>
<li><b>Group three</b></li>
<li>Item two</li>
<li><b>Nested group 1</b></li>
<li><b>Nested group 2</b></li>
<li><b>Nested group 3</b></li>
<li>Item three</li>
<li>Item four</li>
</ul>
<p>The text of the rows of the dropdown must not overlap each other.</p>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.