| <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> |
