зеркало из https://github.com/mozilla/gecko-dev.git
558 строки
12 KiB
HTML
558 строки
12 KiB
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>
|