blob: 6aa3e7b6bdb29017e2cab07ff86e6bfaa68a47d4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<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>
|
