Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / ManualTests / optgroup-empty-and-nested.html
blob6aa3e7b6bdb29017e2cab07ff86e6bfaa68a47d4
1 <html>
2 <head>
3 <title>Empty and nested optgroup elements</title>
4 </head>
6 <body>
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>
14 <!-- this group has no children. We /should/ render it because that matches
15 IE and FireFox. -->
16 <optgroup label="Group one"></optgroup>
18 <!-- this group has a text node child. It should render the same as group one. -->
19 <optgroup label="Group two"> </optgroup>
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>
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>
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>
57 <p>Click on the select element above. When it drops down you should see the following items in the list:</p>
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>
77 <p>The text of the rows of the dropdown must not overlap each other.</p>
79 </body>
80 </html>