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