blob: f9e6f435e393723d988200c584e495c2a3f1cd4f (
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
81
|
<!DocType html>
<html>
<head>
<style>
div {
border:1px solid red;
line-height:1em;
}
.borderRadius {
padding:10px;
-webkit-border-radius: 9px;
}
</style>
</head>
<body>
<script>
if (window.testRunner)
testRunner.setUseMockTheme(false);
</script>
<div>
Whitespace in option text:<select><option>f o o</option></select>a<select><option DISABLED>f o o</option></select>b<br><br>
Simple select control:<select><option>foo</option><option>bar</option></select>a<select DISABLED><option>foo</option><option>bar</option></select>b<br><br>
Line-height should be ignored:<select style="line-height:2em"><option>foo</option></select>a<select style="line-height:2em" DISABLED><option DISABLED>foo</option><option>bar</option></select>b<br><br>
Padding should be respected, the arrow button shouldn't change size:<select style="padding:4px;"><option>foo</option></select>a<select style="padding:4px;" DISABLED><option>foo</option></select>b<br><br>
Border should be respected:<select style="border:8px solid #3cf;"><option>foo</option></select>a<select style="border:8px solid #3cf;" DISABLED><option>foo</option></select>b<br><br>
Border + padding:<select style="padding:5px;border:4px solid #3cf;"><option>foo</option></select>a<select style="padding:5px;border:4px solid #3cf;" DISABLED><option>foo</option></select>b<br><br>
Height larger than font-size, button should grow, text baseline should center:<select style="height:30px"><option>foo</option></select>a<select style="height:30px" DISABLED><option DISABLED>foo</option></select>b<br><br>
Height smaller than font-size, whole select shrinks but baseline is unchanged:<select style="height:3px"><option>foo</option><option>bar</option></select>a<select style="height:3px"><option DISABLED>foo</option><option>bar</option></select>b<br><br>
select control with size=0:
<br>
<select size=0>
<option>Future Series </option>
<option>ICC Intercontinental Cup </option>
<option>Twenty20 World Championship </option>
<option>Stanford 20/20 </option>
<option>All future series </option>
</select>
<br>
select control with size=1:
<br>
<select size=1>
<option>Future Series </option>
<option>ICC Intercontinental Cup </option>
<option>Twenty20 World Championship </option>
<option>Stanford 20/20 </option>
<option>All future series </option>
</select>
<br>
Non-styled select control:
<br>
<select class="borderRadius" style="border-width:1px">
<option>Future Series </option>
<option>ICC Intercontinental Cup </option>
<option>Twenty20 World Championship </option>
<option>Stanford 20/20 </option>
<option>All future series </option>
</select>
<br>
Styled select control with large border-radius:
<br>
<select class="borderRadius" style="background-color:#3cf">
<option>Future Series </option>
<option>ICC Intercontinental Cup </option>
<option>Twenty20 World Championship </option>
<option>Stanford 20/20 </option>
<option>All future series </option>
</select>
<br>
</div>
</body>
</html>
|
