Add regression tests.
git-svn-id: svn://10.0.0.236/trunk@203489 18797224-902f-48f8-a5cc-f745e15eee43
This commit is contained in:
bzbarsky%mit.edu
@@ -5,6 +5,8 @@ inputtext_tests.html
|
||||
optgroup_test1.html
|
||||
select_js.html
|
||||
selectsize3_js.html
|
||||
select_listbox_sizing.html
|
||||
select_listbox_sizing_quirks.html
|
||||
testarea_wrap.html
|
||||
textarea_sizes.html
|
||||
textarea_tests.html
|
||||
|
||||
@@ -0,0 +1,558 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
select { font-size: 20px }
|
||||
|
||||
div#test2 select {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#test3 select {
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
div#test4 select#subtest1 option + option + option {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
div#test4 select#subtest2 option {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
div#test4 select#subtest2 option + option {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
div#test5 select {
|
||||
max-height: 75px;
|
||||
}
|
||||
|
||||
div#test6 select {
|
||||
min-height: 75px;
|
||||
}
|
||||
|
||||
div#test7 select {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
div#test8 select {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Listbox Tests</h1>
|
||||
<form>
|
||||
<div id="test1">
|
||||
<h2>Various sizes, auto width, auto height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test2">
|
||||
<h2>Various sizes, fixed width, auto height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test3">
|
||||
<h2>Various sizes, auto width, fixed height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test4">
|
||||
<h2>Options with different font sizes</h2>
|
||||
<select size="2" id="subtest1">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2" id="subtest2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="test5">
|
||||
<h2>Various sizes, auto width, fixed max-height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test6">
|
||||
<h2>Various sizes, auto width, fixed min-height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test7">
|
||||
<h2>Various sizes, fixed max-width, auto height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test8">
|
||||
<h2>Various sizes, fixed min-width, auto height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test9">
|
||||
<h2>Dynamic changes</h2>
|
||||
<select size="2" id="subtest3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
|
||||
var opt = document.getElementById("subtest3").options[4];
|
||||
opt.style.fontSize = "40px";
|
||||
</script>
|
||||
|
||||
<select size="2" id="subtest4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
|
||||
document.getElementById("subtest4").size = 3;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div id="test10">
|
||||
<h2>Selected options</h2>
|
||||
<select size="2" id="subtest5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option selected="selected">three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2" id="subtest6">
|
||||
<option>one</option>
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
</script>
|
||||
<option>two two</option>
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
</script>
|
||||
<option selected="selected">three three three</option>
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
</script>
|
||||
<option>four four four four</option>
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
</script>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select style="width: 100%" size="3">
|
||||
<option selected>one</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,557 @@
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
|
||||
select { font-size: 20px }
|
||||
|
||||
div#test2 select {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#test3 select {
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
div#test4 select#subtest1 option + option + option {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
div#test4 select#subtest2 option {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
div#test4 select#subtest2 option + option {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
div#test5 select {
|
||||
max-height: 75px;
|
||||
}
|
||||
|
||||
div#test6 select {
|
||||
min-height: 75px;
|
||||
}
|
||||
|
||||
div#test7 select {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
div#test8 select {
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Listbox Tests</h1>
|
||||
<form>
|
||||
<div id="test1">
|
||||
<h2>Various sizes, auto width, auto height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test2">
|
||||
<h2>Various sizes, fixed width, auto height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test3">
|
||||
<h2>Various sizes, auto width, fixed height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test4">
|
||||
<h2>Options with different font sizes</h2>
|
||||
<select size="2" id="subtest1">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2" id="subtest2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="test5">
|
||||
<h2>Various sizes, auto width, fixed max-height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test6">
|
||||
<h2>Various sizes, auto width, fixed min-height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test7">
|
||||
<h2>Various sizes, fixed max-width, auto height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test8">
|
||||
<h2>Various sizes, fixed min-width, auto height:</h2>
|
||||
<select size="0" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="1" multiple="multiple">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="6">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="test9">
|
||||
<h2>Dynamic changes</h2>
|
||||
<select size="2" id="subtest3">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
|
||||
var opt = document.getElementById("subtest3").options[4];
|
||||
opt.style.fontSize = "40px";
|
||||
</script>
|
||||
|
||||
<select size="2" id="subtest4">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option>three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
|
||||
document.getElementById("subtest4").size = 3;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div id="test10">
|
||||
<h2>Selected options</h2>
|
||||
<select size="2" id="subtest5">
|
||||
<option>one</option>
|
||||
<option>two two</option>
|
||||
<option selected="selected">three three three</option>
|
||||
<option>four four four four</option>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select size="2" id="subtest6">
|
||||
<option>one</option>
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
</script>
|
||||
<option>two two</option>
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
</script>
|
||||
<option selected="selected">three three three</option>
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
</script>
|
||||
<option>four four four four</option>
|
||||
<script>
|
||||
// Flush layout
|
||||
var foo = document.body.offsetWidth;
|
||||
</script>
|
||||
<option>five five five five five</option>
|
||||
</select>
|
||||
|
||||
<select style="width: 100%" size="3">
|
||||
<option selected>one</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user