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