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