summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/select
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/forms/select')
-rw-r--r--layout/reftests/forms/select/1769580-ref.html12
-rw-r--r--layout/reftests/forms/select/1769580.html13
-rw-r--r--layout/reftests/forms/select/997709-2-ref.html4
-rw-r--r--layout/reftests/forms/select/997709-2.html4
-rw-r--r--layout/reftests/forms/select/arrow-color-notref.html4
-rw-r--r--layout/reftests/forms/select/arrow-color.html4
-rw-r--r--layout/reftests/forms/select/boguskids-ref.html13
-rw-r--r--layout/reftests/forms/select/boguskids.html18
-rw-r--r--layout/reftests/forms/select/dynamic-boguskids.html31
-rw-r--r--layout/reftests/forms/select/dynamic-text-indent-1-ref.html4
-rw-r--r--layout/reftests/forms/select/dynamic-text-indent-1.html14
-rw-r--r--layout/reftests/forms/select/dynamic-text-overflow-1-ref.html4
-rw-r--r--layout/reftests/forms/select/dynamic-text-overflow-1.html14
-rw-r--r--layout/reftests/forms/select/focusring-1-ref.html37
-rw-r--r--layout/reftests/forms/select/focusring-1.html41
-rw-r--r--layout/reftests/forms/select/focusring-2-ref.html22
-rw-r--r--layout/reftests/forms/select/focusring-2.html46
-rw-r--r--layout/reftests/forms/select/intrinsic-size-scrollbar.html2
-rw-r--r--layout/reftests/forms/select/listbox-checked-style-notref.html11
-rw-r--r--layout/reftests/forms/select/listbox-checked-style-ref.html11
-rw-r--r--layout/reftests/forms/select/listbox-checked-style.html11
-rw-r--r--layout/reftests/forms/select/listbox-focus-notref.html13
-rw-r--r--layout/reftests/forms/select/listbox-focus.html13
-rw-r--r--layout/reftests/forms/select/listbox-zero-row-initial-ref.html23
-rw-r--r--layout/reftests/forms/select/listbox-zero-row-initial.html14
-rw-r--r--layout/reftests/forms/select/multiple-ref.html12
-rw-r--r--layout/reftests/forms/select/multiple.html12
-rw-r--r--layout/reftests/forms/select/no-padding-ref.html2
-rw-r--r--layout/reftests/forms/select/no-padding.html2
-rw-r--r--layout/reftests/forms/select/option-children-ref.html5
-rw-r--r--layout/reftests/forms/select/option-children.html11
-rw-r--r--layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html112
-rw-r--r--layout/reftests/forms/select/out-of-bounds-selectedindex.html129
-rw-r--r--layout/reftests/forms/select/padding-button-placement-ref.html10
-rw-r--r--layout/reftests/forms/select/padding-button-placement.html15
-rw-r--r--layout/reftests/forms/select/reftest.list31
-rw-r--r--layout/reftests/forms/select/select-option-display-none-inline-size-ref.html18
-rw-r--r--layout/reftests/forms/select/select-option-display-none-inline-size.html23
-rw-r--r--layout/reftests/forms/select/select-scrollbar-width-ref.html2
-rw-r--r--layout/reftests/forms/select/select-scrollbar-width.html2
-rw-r--r--layout/reftests/forms/select/themed-select-padding-no-clip-ref.html37
-rw-r--r--layout/reftests/forms/select/themed-select-padding-no-clip.html26
-rw-r--r--layout/reftests/forms/select/vertical-centering-ref.html20
-rw-r--r--layout/reftests/forms/select/vertical-centering.html18
44 files changed, 870 insertions, 0 deletions
diff --git a/layout/reftests/forms/select/1769580-ref.html b/layout/reftests/forms/select/1769580-ref.html
new file mode 100644
index 0000000000..e6a4cb6577
--- /dev/null
+++ b/layout/reftests/forms/select/1769580-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+select {
+ appearance: none;
+ background: lightgray;
+ border: none;
+ text-indent: 0.01px;
+}
+</style>
+<select>
+ <option>16</option>
+</select>
diff --git a/layout/reftests/forms/select/1769580.html b/layout/reftests/forms/select/1769580.html
new file mode 100644
index 0000000000..00831f6997
--- /dev/null
+++ b/layout/reftests/forms/select/1769580.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+select {
+ appearance: none;
+ background: lightgray;
+ border: none;
+ text-indent: 0.01px;
+ text-overflow: "";
+}
+</style>
+<select>
+ <option>16</option>
+</select>
diff --git a/layout/reftests/forms/select/997709-2-ref.html b/layout/reftests/forms/select/997709-2-ref.html
new file mode 100644
index 0000000000..349abe0b77
--- /dev/null
+++ b/layout/reftests/forms/select/997709-2-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<html><body>
+<select style="display:block"><option>A</select>
+</body></html>
diff --git a/layout/reftests/forms/select/997709-2.html b/layout/reftests/forms/select/997709-2.html
new file mode 100644
index 0000000000..46be454185
--- /dev/null
+++ b/layout/reftests/forms/select/997709-2.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<html><body>
+<select style="display:flex"><option>A</select>
+</body></html>
diff --git a/layout/reftests/forms/select/arrow-color-notref.html b/layout/reftests/forms/select/arrow-color-notref.html
new file mode 100644
index 0000000000..b4869de4dd
--- /dev/null
+++ b/layout/reftests/forms/select/arrow-color-notref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<select style="color: black">
+ <option>&nbsp;</option>
+</select>
diff --git a/layout/reftests/forms/select/arrow-color.html b/layout/reftests/forms/select/arrow-color.html
new file mode 100644
index 0000000000..fab72e5e2a
--- /dev/null
+++ b/layout/reftests/forms/select/arrow-color.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<select style="color: white">
+ <option>&nbsp;</option>
+</select>
diff --git a/layout/reftests/forms/select/boguskids-ref.html b/layout/reftests/forms/select/boguskids-ref.html
new file mode 100644
index 0000000000..905b646493
--- /dev/null
+++ b/layout/reftests/forms/select/boguskids-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select size="10">
+ <option>one</option>
+ <option>two</option>
+ <optgroup>
+ <option>three</option>
+ <option>four</option>
+ </optgroup>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/boguskids.html b/layout/reftests/forms/select/boguskids.html
new file mode 100644
index 0000000000..102f820c84
--- /dev/null
+++ b/layout/reftests/forms/select/boguskids.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select size="10">
+ Shouldn't see me
+ <option>one</option>
+ Or me
+ <option>two</option>
+ <optgroup>
+ I should hide too
+ <option>three</option>
+ And me too
+ <option>four</option>
+ </optgroup>
+ And I
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/dynamic-boguskids.html b/layout/reftests/forms/select/dynamic-boguskids.html
new file mode 100644
index 0000000000..2a6b7c2614
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-boguskids.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script>
+ function doIt() {
+ var insertions = [
+ [ "opt1", "Shouldn't see me" ],
+ [ "opt2", "Or me" ],
+ [ "opt3", "I should hide too" ],
+ [ "opt4", "And me too" ]
+ ];
+ for (var i = 0; i < insertions.length; ++i) {
+ var next = document.getElementById(insertions[i][0]);
+ next.parentNode.insertBefore(document.createTextNode(insertions[i][1]),
+ next);
+ }
+ document.getElementById("sel").appendChild(document.createTextNode("And I"));
+ }
+ </script>
+ </head>
+ <body onload="doIt()">
+ <select size="10" id="sel">
+ <option id="opt1">one</option>
+ <option id="opt2">two</option>
+ <optgroup>
+ <option id="opt3">three</option>
+ <option id="opt4">four</option>
+ </optgroup>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/dynamic-text-indent-1-ref.html b/layout/reftests/forms/select/dynamic-text-indent-1-ref.html
new file mode 100644
index 0000000000..806fc525a0
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-text-indent-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<select style="text-indent: 15px">
+ <option selected>Text<option>
+</select>
diff --git a/layout/reftests/forms/select/dynamic-text-indent-1.html b/layout/reftests/forms/select/dynamic-text-indent-1.html
new file mode 100644
index 0000000000..6f2b5f3448
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-text-indent-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <select>
+ <option selected>Text<option>
+ </select>
+ <script>
+ onload = function() {
+ var s = document.querySelector("select");
+ window.w = s.offsetWidth;
+ s.style.textIndent = "15px";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/forms/select/dynamic-text-overflow-1-ref.html b/layout/reftests/forms/select/dynamic-text-overflow-1-ref.html
new file mode 100644
index 0000000000..8de69cf5cc
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-text-overflow-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<select style="width: 100px; overflow: hidden; text-overflow: ellipsis;">
+ <option selected>Text that is long enough that it totally overflows<option>
+</select>
diff --git a/layout/reftests/forms/select/dynamic-text-overflow-1.html b/layout/reftests/forms/select/dynamic-text-overflow-1.html
new file mode 100644
index 0000000000..4d954f6981
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-text-overflow-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <select style="width: 100px; overflow: hidden;">
+ <option selected>Text that is long enough that it totally overflows<option>
+ </select>
+ <script>
+ onload = function() {
+ var s = document.querySelector("select");
+ window.w = s.offsetWidth;
+ s.style.textOverflow = "ellipsis";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/forms/select/focusring-1-ref.html b/layout/reftests/forms/select/focusring-1-ref.html
new file mode 100644
index 0000000000..9f01908fd5
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>Testcase #1 for bug 1253977</title>
+ <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+ border:2px solid black;
+}
+:-moz-focusring {
+ outline: 2px dashed black;
+}
+
+ </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+<input>
+
+<script>
+
+function runTests() {
+ var b = document.querySelector("input");
+ b.focus();
+ document.body.offsetHeight;
+ setTimeout(function(){ document.body.offsetHeight; document.documentElement.removeAttribute("class"); }, 100);
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-1.html b/layout/reftests/forms/select/focusring-1.html
new file mode 100644
index 0000000000..e384bd4097
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>Testcase #1 for bug 1253977</title>
+ <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+ border:2px solid black;
+}
+:-moz-focusring {
+ outline: 2px dashed black;
+}
+
+ </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+<input>
+
+<script>
+
+function runTests() {
+ var s = document.querySelector("select");
+ var b = document.querySelector("input");
+ s.focus();
+ document.body.offsetHeight;
+ setTimeout(function(){ s.style.display = 'none'; document.body.offsetHeight; }, 2);
+ setTimeout(function(){ b.focus(); document.body.offsetHeight; }, 3);
+ setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4);
+ setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100);
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-2-ref.html b/layout/reftests/forms/select/focusring-2-ref.html
new file mode 100644
index 0000000000..c7c16a5e5e
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 1253977</title>
+ <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+ border:2px solid black;
+}
+:-moz-focusring {
+ outline: 2px dashed black;
+}
+
+ </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-2.html b/layout/reftests/forms/select/focusring-2.html
new file mode 100644
index 0000000000..e2656b2485
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-2.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 1253977</title>
+ <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+ border:2px solid black;
+}
+:-moz-focusring {
+ outline: 2px dashed black;
+}
+
+ </style>
+</head>
+<body>
+
+<select onfocus="continueTest1()" onblur="continueTest2()"><option>1<option>2</select>
+
+<script>
+
+function continueTest2(){
+ var s = document.querySelector("select");
+ setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4);
+ setTimeout(function(){ document.body.offsetHeight; document.documentElement.removeAttribute("class"); }, 100);
+}
+
+function continueTest1(){
+ var s = document.querySelector("select");
+ setTimeout(function(){ s.style.display = 'none'; }, 2);
+ setTimeout(function(){ s.blur(); document.body.offsetHeight; }, 3);
+}
+
+function runTests(){
+ var s = document.querySelector("select");
+ s.focus();
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/intrinsic-size-scrollbar.html b/layout/reftests/forms/select/intrinsic-size-scrollbar.html
new file mode 100644
index 0000000000..091bd989c5
--- /dev/null
+++ b/layout/reftests/forms/select/intrinsic-size-scrollbar.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<select><option>ABC</option></select>
diff --git a/layout/reftests/forms/select/listbox-checked-style-notref.html b/layout/reftests/forms/select/listbox-checked-style-notref.html
new file mode 100644
index 0000000000..3b78fbac50
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-checked-style-notref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+ option {
+ background-color: purple;
+ color: white;
+ }
+</style>
+<select autofocus size="2">
+ <option selected>A</option>
+ <option>B</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-checked-style-ref.html b/layout/reftests/forms/select/listbox-checked-style-ref.html
new file mode 100644
index 0000000000..c48bc81225
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-checked-style-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+ option {
+ background-color: purple;
+ color: white;
+ }
+</style>
+<select size="2">
+ <option>A</option>
+ <option>B</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-checked-style.html b/layout/reftests/forms/select/listbox-checked-style.html
new file mode 100644
index 0000000000..1eb33817f6
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-checked-style.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+ option {
+ background-color: purple;
+ color: white;
+ }
+</style>
+<select size="2">
+ <option selected>A</option>
+ <option>B</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-focus-notref.html b/layout/reftests/forms/select/listbox-focus-notref.html
new file mode 100644
index 0000000000..d76865abbf
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-focus-notref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+ select {
+ appearance: none;
+ outline: none;
+ border: none;
+ }
+</style>
+<select multiple>
+ <option>First</option>
+ <option>Second</option>
+ <option>Third</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-focus.html b/layout/reftests/forms/select/listbox-focus.html
new file mode 100644
index 0000000000..0689ed43b8
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-focus.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+ select {
+ appearance: none;
+ outline: none;
+ border: none;
+ }
+</style>
+<select multiple autofocus>
+ <option>First</option>
+ <option>Second</option>
+ <option>Third</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-zero-row-initial-ref.html b/layout/reftests/forms/select/listbox-zero-row-initial-ref.html
new file mode 100644
index 0000000000..e7b2ec673a
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-zero-row-initial-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>Reference for initial reflow of zero height options</title>
+<style>
+
+ html { overflow: hidden }
+ option { height: 0; min-height: 0 }
+
+</style>
+
+<select size="3">
+ <option>One</option>
+ <option>Two</option>
+ <option>Three</option>
+</select>
+
+<script>
+
+ document.body.offsetHeight; // flush layout
+ document.body.style.fontSize = "60px";
+ document.body.offsetHeight; // flush layout
+ document.body.style.fontSize = "";
+
+</script>
diff --git a/layout/reftests/forms/select/listbox-zero-row-initial.html b/layout/reftests/forms/select/listbox-zero-row-initial.html
new file mode 100644
index 0000000000..1ff6549da2
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-zero-row-initial.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<title>Testcase for initial reflow of zero height options</title>
+<style>
+
+ html { overflow: hidden }
+ option { height: 0; min-height: 0 }
+
+</style>
+
+<select size="3">
+ <option>One</option>
+ <option>Two</option>
+ <option>Three</option>
+</select>
diff --git a/layout/reftests/forms/select/multiple-ref.html b/layout/reftests/forms/select/multiple-ref.html
new file mode 100644
index 0000000000..70bdac6bc3
--- /dev/null
+++ b/layout/reftests/forms/select/multiple-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select size='4'>
+ <option>Tulip</option>
+ <option>Lily</option>
+ <option>Gagea</option>
+ <option>Snowflake</option>
+ <option>Ismene</option>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/multiple.html b/layout/reftests/forms/select/multiple.html
new file mode 100644
index 0000000000..6b95eebc56
--- /dev/null
+++ b/layout/reftests/forms/select/multiple.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select multiple>
+ <option>Tulip</option>
+ <option>Lily</option>
+ <option>Gagea</option>
+ <option>Snowflake</option>
+ <option>Ismene</option>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/no-padding-ref.html b/layout/reftests/forms/select/no-padding-ref.html
new file mode 100644
index 0000000000..6ba141c627
--- /dev/null
+++ b/layout/reftests/forms/select/no-padding-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<button style="color: black; border: 1px solid; appearance: none; padding: 0">ABC</button>
diff --git a/layout/reftests/forms/select/no-padding.html b/layout/reftests/forms/select/no-padding.html
new file mode 100644
index 0000000000..8784b7b750
--- /dev/null
+++ b/layout/reftests/forms/select/no-padding.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<select style="color: black; border: 1px solid; appearance: none; padding: 0;"><option>ABC</option></select>
diff --git a/layout/reftests/forms/select/option-children-ref.html b/layout/reftests/forms/select/option-children-ref.html
new file mode 100644
index 0000000000..09f6d19f09
--- /dev/null
+++ b/layout/reftests/forms/select/option-children-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Option elements with children</title>
+<body>
+<select><option>font</option></select>
diff --git a/layout/reftests/forms/select/option-children.html b/layout/reftests/forms/select/option-children.html
new file mode 100644
index 0000000000..357247b567
--- /dev/null
+++ b/layout/reftests/forms/select/option-children.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Option elements with children</title>
+<body>
+<script>
+document.body
+ .appendChild(document.createElement("select"))
+ .appendChild(document.createElement("option"))
+ .appendChild(document.createElement("font"))
+ .appendChild(document.createTextNode("font"))
+</script>
diff --git a/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html b/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html
new file mode 100644
index 0000000000..4130241765
--- /dev/null
+++ b/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html
@@ -0,0 +1,112 @@
+<html class="reftest-wait">
+<head><title>Testcase for bug 471741</title>
+<script>
+function sel(id,index) {
+ var el = document.getElementById(id)
+ el.selectedIndex = index;
+}
+
+</script>
+</head>
+<body>
+<select size="4" id="m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="m3" multiple="multiple"></select>
+<select size="1" id="s3"></select>
+<br>
+
+<select size="4" id="r2m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="r2s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r2m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="r2s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r2m3" multiple="multiple"></select>
+<select size="1" id="r2s3"></select>
+<br>
+
+<select size="4" id="r3m1" multiple="multiple">
+ <option selected="selected" value="Item0">Item0</option>
+ <option value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="r3s1">
+ <option selected="selected" value="Item0">Item0</option>
+ <option value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r3m2" multiple="multiple">
+ <option selected="selected" value="Item0">Item0</option>
+</select>
+<select size="1" id="r3s2">
+ <option selected="selected" value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r3m3" multiple="multiple"></select>
+<select size="1" id="r3s3"></select>
+<br>
+
+<div id="result">Result: -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 0 0 0 0 -1 -1 </div>
+
+<script>
+sel('m1', -1)
+sel('s1', -1)
+sel('m2', -1)
+sel('s2', -1)
+sel('m3', -1)
+sel('s3', -1)
+
+sel('r2m1', -1)
+sel('r2s1', -1)
+sel('r2m2', -1)
+sel('r2s2', -1)
+sel('r2m3', -1)
+sel('r2s3', -1)
+
+var flush = document.documentElement.offsetHeight;
+document.documentElement.className='';
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/select/out-of-bounds-selectedindex.html b/layout/reftests/forms/select/out-of-bounds-selectedindex.html
new file mode 100644
index 0000000000..4ae9ed06b6
--- /dev/null
+++ b/layout/reftests/forms/select/out-of-bounds-selectedindex.html
@@ -0,0 +1,129 @@
+<html class="reftest-wait">
+<head><title>Testcase for bug 471741</title>
+<script>
+var result = "Result: "
+function sel(id,index) {
+ var el = document.getElementById(id)
+ el.selectedIndex = index;
+ result += el.selectedIndex + ' ';
+}
+
+</script>
+</head>
+<body id="body">
+<select size="4" id="m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="m3" multiple="multiple"></select>
+<select size="1" id="s3"></select>
+<br>
+
+<select size="4" id="r2m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="r2s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r2m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="r2s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r2m3" multiple="multiple"></select>
+<select size="1" id="r2s3"></select>
+<br>
+
+<select size="4" id="r3m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="r3s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r3m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="r3s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r3m3" multiple="multiple"></select>
+<select size="1" id="r3s3"></select>
+<br>
+
+<div id="result"></div>
+
+<script>
+sel('m1', 10)
+sel('s1', 10)
+sel('m2', 99999)
+sel('s2', 99999)
+sel('m3', 10)
+sel('s3', 10)
+
+sel('r2m1', -2)
+sel('r2s1', -2)
+sel('r2m2', -12)
+sel('r2s2', -12)
+sel('r2m3', -2)
+sel('r2s3', -2)
+
+sel('r3m1', -2)
+sel('r3s1', -2)
+sel('r3m2', -12)
+sel('r3s2', -12)
+sel('r3m3', -2)
+sel('r3s3', -2)
+sel('r3m1', 0)
+sel('r3s1', 0)
+sel('r3m2', 0)
+sel('r3s2', 0)
+sel('r3m3', 0)
+sel('r3s3', 0)
+
+document.getElementById('result').innerHTML = result;
+
+var flush = document.documentElement.offsetHeight;
+document.documentElement.className='';
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/select/padding-button-placement-ref.html b/layout/reftests/forms/select/padding-button-placement-ref.html
new file mode 100644
index 0000000000..342b404c6d
--- /dev/null
+++ b/layout/reftests/forms/select/padding-button-placement-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ </head>
+ <body>
+ <div style="box-sizing:border-box; width:402px; height:202px; border:1px solid black; border-right:50px solid black;"></div>
+ <div style="box-sizing:border-box; width:402px; height:202px; border:1px solid black; border-left:50px solid black;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/padding-button-placement.html b/layout/reftests/forms/select/padding-button-placement.html
new file mode 100644
index 0000000000..3707150321
--- /dev/null
+++ b/layout/reftests/forms/select/padding-button-placement.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ </head>
+ <body>
+ <!-- The div's border should hide the select's button -->
+ <!-- z-index:1 works around an unrelated bug in B2G -->
+ <div style="position:absolute; z-index:1; box-sizing:border-box; width:402px; height:202px; border-right:50px solid black;"></div>
+ <div><select style="background:transparent; border-radius:0; box-sizing:content-box; padding:50px; width:300px; height:100px; border:1px solid black; direction:ltr"></select></div>
+
+ <div style="position:absolute; z-index:1; box-sizing:border-box; width:402px; height:202px; border-left:50px solid black;"></div>
+ <div><select style="background:transparent; border-radius:0; box-sizing:content-box; padding:50px; width:300px; height:100px; border:1px solid black; direction:rtl"></select></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/reftest.list b/layout/reftests/forms/select/reftest.list
new file mode 100644
index 0000000000..d2d1c1be6d
--- /dev/null
+++ b/layout/reftests/forms/select/reftest.list
@@ -0,0 +1,31 @@
+fuzzy-if(Android,0-4,0-12) == out-of-bounds-selectedindex.html out-of-bounds-selectedindex-ref.html # test for bug 471741
+== multiple.html multiple-ref.html
+== boguskids.html boguskids-ref.html
+== dynamic-boguskids.html boguskids-ref.html
+== option-children.html option-children-ref.html
+fuzzy(0-1,0-4) == padding-button-placement.html padding-button-placement-ref.html
+== vertical-centering.html vertical-centering-ref.html
+== 997709-2.html 997709-2-ref.html
+fuzzy(0-4,0-1) needs-focus == focusring-1.html focusring-1-ref.html
+needs-focus == focusring-2.html focusring-2-ref.html
+== dynamic-text-indent-1.html dynamic-text-indent-1-ref.html
+== dynamic-text-overflow-1.html dynamic-text-overflow-1-ref.html
+== listbox-zero-row-initial.html listbox-zero-row-initial-ref.html
+skip-if(Android) == select-option-display-none-inline-size.html select-option-display-none-inline-size-ref.html
+
+# Android and Windows actually use the anonymous select > button (rather than
+# drawing the arrow as a background like Linux and Mac), so most of this test
+# doesn't apply since when over-constrained it gets zero-sized.
+skip-if(Android||winWidget) == themed-select-padding-no-clip.html themed-select-padding-no-clip-ref.html
+
+== select-scrollbar-width.html select-scrollbar-width-ref.html
+test-pref(ui.useOverlayScrollbars,0) ref-pref(ui.useOverlayScrollbars,1) == intrinsic-size-scrollbar.html intrinsic-size-scrollbar.html
+
+== listbox-checked-style.html listbox-checked-style-ref.html
+needs-focus != listbox-checked-style.html listbox-checked-style-notref.html
+needs-focus != listbox-focus.html listbox-focus-notref.html
+
+== 1769580.html 1769580-ref.html
+
+== no-padding.html no-padding-ref.html
+!= arrow-color.html arrow-color-notref.html
diff --git a/layout/reftests/forms/select/select-option-display-none-inline-size-ref.html b/layout/reftests/forms/select/select-option-display-none-inline-size-ref.html
new file mode 100644
index 0000000000..c10490b0e8
--- /dev/null
+++ b/layout/reftests/forms/select/select-option-display-none-inline-size-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: SELECT size with display:none OPTION</title>
+</head>
+<body>
+
+<select><option>option</select>
+<select style="-webkit-appearance: none"><option>option</select>
+<select style="-webkit-appearance: none; border: 1px solid black"><option>option</select>
+<select style="border: 1px solid black"><option>option</select>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/select-option-display-none-inline-size.html b/layout/reftests/forms/select/select-option-display-none-inline-size.html
new file mode 100644
index 0000000000..ece010df4c
--- /dev/null
+++ b/layout/reftests/forms/select/select-option-display-none-inline-size.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Test: SELECT size with display:none OPTION</title>
+ <style>
+
+.none { display: none; }
+
+ </style>
+</head>
+<body>
+
+<select><option class="none">option</select>
+<select style="-webkit-appearance: none"><option class="none">option</select>
+<select style="-webkit-appearance: none; border: 1px solid black"><option class="none">option</select>
+<select style="border: 1px solid black"><option class="none">option</select>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/select-scrollbar-width-ref.html b/layout/reftests/forms/select/select-scrollbar-width-ref.html
new file mode 100644
index 0000000000..1a411340f8
--- /dev/null
+++ b/layout/reftests/forms/select/select-scrollbar-width-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<select style="border: 1px solid"><option>ABCDE</option></select>
diff --git a/layout/reftests/forms/select/select-scrollbar-width.html b/layout/reftests/forms/select/select-scrollbar-width.html
new file mode 100644
index 0000000000..fb2b627a83
--- /dev/null
+++ b/layout/reftests/forms/select/select-scrollbar-width.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<select style="scrollbar-width: thin; border: 1px solid"><option>ABCDE</option></select>
diff --git a/layout/reftests/forms/select/themed-select-padding-no-clip-ref.html b/layout/reftests/forms/select/themed-select-padding-no-clip-ref.html
new file mode 100644
index 0000000000..d8f5fd7b43
--- /dev/null
+++ b/layout/reftests/forms/select/themed-select-padding-no-clip-ref.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>Bug 1561794 - padding-inline-end does not clip display text for themed comboboxes.</title>
+<style>
+ select, .unthemed {
+ font: 16px / 1 monospace;
+ width: 20ch;
+ display: block;
+ }
+ .unthemed {
+ box-sizing: border-box;
+ border: 1px solid grey;
+ }
+</style>
+<!--- Ensure the text isn't chopped -->
+<select><option>XXXXXXXXXXXX</option></select>
+<select><option>X XXXXXXXXXX</option></select>
+
+<!--- Test that the display text doesn't overflow the select. -->
+<select style="overflow: hidden"><option>XXXXXXXXXXXXXXXXXX</option></select>
+
+<!-- Test that this only affects themed comboboxes -->
+<div class="unthemed" style="padding-right: 15ch"><div style="padding: 1px 4px; overflow: hidden;">XXXXXXXXXX</div></div>
+
+<select id="src" style="padding-left: 10ch; padding-right: 10ch"><option>XXXXXXXXXX</option></select>
+<select id="ref" style="padding-left: 10ch;"><option>XXXXXXXXXX</option></select>
+<script>
+ // This one is a bit special, because we want `ref` to have the same size as
+ // `src`, which for some reason, with or without the patch for this bug,
+ // grows outside the specified width. Given this width depends on scrollbar,
+ // width, which is platform dependent, we just calculate it from `src`, and
+ // then hide it.
+ //
+ // We just really want to test that the padding right doesn't clip the text
+ // anyhow.
+ ref.style.width = getComputedStyle(src).width;
+ src.style.display = "none";
+</script>
diff --git a/layout/reftests/forms/select/themed-select-padding-no-clip.html b/layout/reftests/forms/select/themed-select-padding-no-clip.html
new file mode 100644
index 0000000000..d353ecc871
--- /dev/null
+++ b/layout/reftests/forms/select/themed-select-padding-no-clip.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>Bug 1561794 - padding-inline-end does not clip display text for themed comboboxes.</title>
+<style>
+ select {
+ font: 16px / 1 monospace;
+ width: 20ch;
+ display: block;
+ }
+ .unthemed {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ border: 1px solid grey;
+ background: transparent;
+ }
+</style>
+<!--- Ensure the text isn't chopped -->
+<select style="padding-right: 15ch"><option>XXXXXXXXXXXX</option></select>
+<select style="padding-right: 15ch"><option>X XXXXXXXXXX</option></select>
+
+<!--- Test that the display text doesn't overflow the select. It'd be nice to test it doesn't overlap the button (which is true), but that seems hard to test via a reftest -->
+<select style="padding-right: 15ch"><option>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</option></select>
+
+<!-- Test that this only affects themed comboboxes; 4px is the padding-inline-start of the comboboxcontrol-frame anon box, so as to clip exactly at a character boundary. -->
+<select class="unthemed" style="color: initial; padding-right: 15ch"><option>XXXXXXXXXX</option></select>
+
+<select style="padding-left: 10ch; padding-right: 10ch"><option>XXXXXXXXXX</option></select>
diff --git a/layout/reftests/forms/select/vertical-centering-ref.html b/layout/reftests/forms/select/vertical-centering-ref.html
new file mode 100644
index 0000000000..82bbb7d3d0
--- /dev/null
+++ b/layout/reftests/forms/select/vertical-centering-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+ @font-face {
+ font-family: "Ahem";
+ src: url(../../fonts/Ahem.ttf);
+ }
+ select {
+ -moz-appearance: none;
+ border: none;
+ font: 20px/1 Ahem;
+ box-sizing: content-box;
+ /* The testcase has 20px-tall text, which should be centered in a 40px-tall
+ content-box (with 10px of extra space above and below). We emulate that
+ by having explicit 10px of padding on top and bottom. */
+ padding: 10px 0 10px 0;
+ }
+</style>
+<select>
+ <option>X</option>
+</select>
diff --git a/layout/reftests/forms/select/vertical-centering.html b/layout/reftests/forms/select/vertical-centering.html
new file mode 100644
index 0000000000..fb464395d5
--- /dev/null
+++ b/layout/reftests/forms/select/vertical-centering.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+ @font-face {
+ font-family: "Ahem";
+ src: url(../../fonts/Ahem.ttf);
+ }
+ select {
+ -moz-appearance: none;
+ border: none;
+ font: 20px/1 Ahem;
+ box-sizing: content-box;
+ height: 40px;
+ padding: 0;
+ }
+</style>
+<select>
+ <option>X</option>
+</select>