diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/forms/select | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/forms/select')
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> </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> </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> |