| Torne (Richard Coles) | 5c87bf8 | 2012-11-14 11:46:17 +0000 | [diff] [blame] | 1 | <html> |
| 2 | <head> |
| 3 | <title>Empty and nested optgroup elements</title> |
| 4 | </head> |
| 5 | |
| 6 | <body> |
| 7 | |
| 8 | <select> |
| 9 | <!-- A div here is invalid. However, both IE and Firefox will walk into it |
| 10 | and enumerate the elements inside. --> |
| 11 | <div> |
| 12 | <option value="1">Item one</option> |
| 13 | |
| 14 | <!-- this group has no children. We /should/ render it because that matches |
| 15 | IE and FireFox. --> |
| 16 | <optgroup label="Group one"></optgroup> |
| 17 | |
| 18 | <!-- this group has a text node child. It should render the same as group one. --> |
| 19 | <optgroup label="Group two"> </optgroup> |
| 20 | |
| 21 | <!-- for an optgroup without a label, IE will show an empty, unselectable row. |
| 22 | Firefox doesn't show it. We /do/ show it because someone might be using |
| 23 | it as a spacer. --> |
| 24 | <!-- Additionally, this has been updated to test the crash fixed in |
| 25 | https://bugs.webkit.org/show_bug.cgi?id=26656. When setting the |
| 26 | font-size in the <optgroup> to extra large, opening the select element |
| 27 | must not leave any unpainted areas of overlapping text. --> |
| 28 | <optgroup style="font-size: x-large;"> |
| 29 | <option value="2">Item inside an optgroup without a label</option> |
| 30 | </optgroup> |
| 31 | |
| 32 | <!-- for an optgroup with an empty label, IE will show an empty, |
| 33 | unselectable row. Firefox doesn't show it. We /do/ show it because |
| 34 | someone might be using it as a spacer. --> |
| 35 | <optgroup label=""> |
| 36 | <option value="3">Item inside an optgroup with an empty label</option> |
| 37 | </optgroup> |
| 38 | |
| 39 | <div> |
| 40 | <option value="4"></option> |
| 41 | <optgroup label="Group three"> |
| 42 | <option value="5">Item two</option> |
| 43 | <!-- nested groups are disallowed by the spec, but IE and Firefox will |
| 44 | flatten the tree. We should match them. --> |
| 45 | <optgroup label="Nested group 1"></optgroup> |
| 46 | <optgroup label="Nested group 2"> |
| 47 | <optgroup label="Nested group 3"> |
| 48 | <option value="6">Item three</option> |
| 49 | </optgroup> |
| 50 | </optgroup> |
| 51 | </optgroup> |
| 52 | </div> |
| 53 | <option value="7">Item four</option> |
| 54 | </div> |
| 55 | </select> |
| 56 | |
| 57 | <p>Click on the select element above. When it drops down you should see the following items in the list:</p> |
| 58 | |
| 59 | <ul> |
| 60 | <li>Item one</li> |
| 61 | <li><b>Group one</b></li> |
| 62 | <li><b>Group two</b></li> |
| 63 | <li><i>(unselectable, empty row)</i></li> |
| 64 | <li>Item inside an optgroup without a label</li> |
| 65 | <li><i>(unselectable, empty row)</i></li> |
| 66 | <li>Item inside an optgroup with an empty label</li> |
| 67 | <li><i>(selectable, empty row)</i></li> |
| 68 | <li><b>Group three</b></li> |
| 69 | <li>Item two</li> |
| 70 | <li><b>Nested group 1</b></li> |
| 71 | <li><b>Nested group 2</b></li> |
| 72 | <li><b>Nested group 3</b></li> |
| 73 | <li>Item three</li> |
| 74 | <li>Item four</li> |
| 75 | </ul> |
| 76 | |
| 77 | <p>The text of the rows of the dropdown must not overlap each other.</p> |
| 78 | |
| 79 | </body> |
| 80 | </html> |