diff options
Diffstat (limited to 'layout/reftests/forms/select')
23 files changed, 666 insertions, 0 deletions
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 000000000..349abe0b7 --- /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 000000000..46be45418 --- /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/boguskids-ref.html b/layout/reftests/forms/select/boguskids-ref.html new file mode 100644 index 000000000..905b64649 --- /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 000000000..102f820c8 --- /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 000000000..2a6b7c261 --- /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/focusring-1-ref.html b/layout/reftests/forms/select/focusring-1-ref.html new file mode 100644 index 000000000..9118d265e --- /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, false); + +</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 000000000..fa3bb204f --- /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, false); + +</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 000000000..c7c16a5e5 --- /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 000000000..413ca3a83 --- /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, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/forms/select/focusring-3-ref.html b/layout/reftests/forms/select/focusring-3-ref.html new file mode 100644 index 000000000..0238f8bdb --- /dev/null +++ b/layout/reftests/forms/select/focusring-3-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #3 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> + +<script> + +function runTests(){ + var s = document.querySelector("select"); + s.focus(); + document.body.offsetHeight; + setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100); +} + +window.focus(); +window.addEventListener("MozReftestInvalidate", runTests, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/forms/select/focusring-3.html b/layout/reftests/forms/select/focusring-3.html new file mode 100644 index 000000000..4a51476db --- /dev/null +++ b/layout/reftests/forms/select/focusring-3.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #3 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()"><option>1<option>2</select> + +<script> + +function continueTest1(){ + var s = document.querySelector("select"); + setTimeout(function(){ s.style.display = 'none'; }, 2); + setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4); + setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100); +} +function runTests(){ + var s = document.querySelector("select"); + s.focus(); +} + +window.focus(); +window.addEventListener("MozReftestInvalidate", runTests, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/forms/select/multiple-ref.html b/layout/reftests/forms/select/multiple-ref.html new file mode 100644 index 000000000..70bdac6bc --- /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 000000000..6b95eebc5 --- /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/option-children-ref.html b/layout/reftests/forms/select/option-children-ref.html new file mode 100644 index 000000000..09f6d19f0 --- /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 000000000..357247b56 --- /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 000000000..413024176 --- /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 000000000..4ae9ed06b --- /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 000000000..342b404c6 --- /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 000000000..370715032 --- /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-stylo.list b/layout/reftests/forms/select/reftest-stylo.list new file mode 100644 index 000000000..998f27237 --- /dev/null +++ b/layout/reftests/forms/select/reftest-stylo.list @@ -0,0 +1,15 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +fuzzy-if(Android,2,2) skip-if(B2G||Mulet) == out-of-bounds-selectedindex.html out-of-bounds-selectedindex.html +# test for bug 471741 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == multiple.html multiple.html +# Initial mulet triage: parity with B2G/B2G Desktop +== boguskids.html boguskids.html +== dynamic-boguskids.html dynamic-boguskids.html +== option-children.html option-children.html +fuzzy(1,4) == padding-button-placement.html padding-button-placement.html +HTTP(../..) == vertical-centering.html vertical-centering.html +== 997709-2.html 997709-2.html +needs-focus == focusring-1.html focusring-1.html +needs-focus == focusring-2.html focusring-2.html +needs-focus == focusring-3.html focusring-3.html diff --git a/layout/reftests/forms/select/reftest.list b/layout/reftests/forms/select/reftest.list new file mode 100644 index 000000000..1261dad9f --- /dev/null +++ b/layout/reftests/forms/select/reftest.list @@ -0,0 +1,11 @@ +fuzzy-if(Android,4,11) == 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(1,4) == padding-button-placement.html padding-button-placement-ref.html +HTTP(../..) == vertical-centering.html vertical-centering-ref.html +== 997709-2.html 997709-2-ref.html +needs-focus == focusring-1.html focusring-1-ref.html +needs-focus == focusring-2.html focusring-2-ref.html +needs-focus == focusring-3.html focusring-3-ref.html 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 000000000..f5d855456 --- /dev/null +++ b/layout/reftests/forms/select/vertical-centering-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> + @font-face { + font-family: "Ahem"; + src: url(../../fonts/Ahem.ttf); + } + select { + -moz-appearance: none; + border: none; + font-family: Ahem; + font-size: 20px; + box-sizing: content-box; + /* + * Why are these top/bottom paddings 7px rather than 10px? 1px each is + * eaten up by padding on the combobox display area, but I have no idea + * where the extra 4px somewhere else are coming from... + */ + padding: 7px 0 7px 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 000000000..6a2daa9e7 --- /dev/null +++ b/layout/reftests/forms/select/vertical-centering.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style> + @font-face { + font-family: "Ahem"; + src: url(../../fonts/Ahem.ttf); + } + select { + -moz-appearance: none; + border: none; + font-family: Ahem; + font-size: 20px; + padding: 0; + box-sizing: content-box; + height: 40px; + } +</style> +<select> + <option>X</option> +</select> |