diff options
Diffstat (limited to 'layout/reftests/forms/input/range')
61 files changed, 1055 insertions, 0 deletions
diff --git a/layout/reftests/forms/input/range/100pct-common-ref.html b/layout/reftests/forms/input/range/100pct-common-ref.html new file mode 100644 index 0000000000..ef65c9297f --- /dev/null +++ b/layout/reftests/forms/input/range/100pct-common-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type=range value=100 max=100> + </body> +</html> diff --git a/layout/reftests/forms/input/range/75pct-common-ref.html b/layout/reftests/forms/input/range/75pct-common-ref.html new file mode 100644 index 0000000000..929887d65a --- /dev/null +++ b/layout/reftests/forms/input/range/75pct-common-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type=range value=75> + </body> +</html> diff --git a/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html new file mode 100644 index 0000000000..a4b73e23ad --- /dev/null +++ b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type=range value=75 style="-moz-appearance:none"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/auto-size-ref.html b/layout/reftests/forms/input/range/auto-size-ref.html new file mode 100644 index 0000000000..b1a4854b78 --- /dev/null +++ b/layout/reftests/forms/input/range/auto-size-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 --> +<html><head> + <meta charset="utf-8"> + <title>Reference: Testcase #1 for bug 1330962</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: grid; + grid: 40px / auto; + float: left; + place-items: center start; + border: 1px solid; +} +grid.c { + grid: auto / 40px; + place-items: start center; +} + +.v { writing-mode: vertical-lr; } + +/* fixed cross-size for the INPUT */ +input { + height: 30px; +} +.c input { + height: auto; + width: 30px; +} + + </style> +</head> +<body> + +<grid class=c><input type=range class=v></grid> +<grid class=c><input type=range class=v></grid> +<grid class=c><input type=range class=v></grid> + +<grid class=c><input type=range orient=vertical></grid> +<grid class=c><input type=range orient=vertical></grid> +<grid class=c><input type=range orient=vertical></grid> + +<grid><input type=range></grid> +<grid><input type=range></grid> +<grid><input type=range></grid> + +<grid><input type=range orient=horizontal class=v></grid> +<grid><input type=range orient=horizontal class=v></grid> +<grid><input type=range orient=horizontal class=v></grid> + +</body> +</html> diff --git a/layout/reftests/forms/input/range/auto-size.html b/layout/reftests/forms/input/range/auto-size.html new file mode 100644 index 0000000000..a5945a8188 --- /dev/null +++ b/layout/reftests/forms/input/range/auto-size.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 --> +<html><head> + <meta charset="utf-8"> + <title>Testcase #1 for bug 1330962</title> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} + +grid { + display: grid; + grid: 40px / auto; + float: left; + place-items: center start; + border: 1px solid; +} +grid.c { + grid: auto / 40px; + place-items: start center; +} + +.v { writing-mode: vertical-lr; } + + </style> +</head> +<body> + +<grid class=c><input type=range class=v></grid> +<grid class=c><input type=range class=v style="width:max-content"></grid> +<grid class=c><input type=range class=v style="width:min-content"></grid> + +<grid class=c><input type=range orient=vertical></grid> +<grid class=c><input type=range orient=vertical style="width:max-content"></grid> +<grid class=c><input type=range orient=vertical style="width:min-content"></grid> + +<grid><input type=range></grid> +<grid><input type=range style="height:max-content"></grid> +<grid><input type=range style="height:min-content"></grid> + +<grid><input type=range orient=horizontal class=v></grid> +<grid><input type=range orient=horizontal class=v style="width:max-content"></grid> +<grid><input type=range orient=horizontal class=v style="width:min-content"></grid> + +</body> +</html> diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html new file mode 100644 index 0000000000..3103fc7219 --- /dev/null +++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="range" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html new file mode 100644 index 0000000000..d9514542f5 --- /dev/null +++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: that range with value=70 is different to the default value=50. --> + <body> + <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120> + </body> +</html> diff --git a/layout/reftests/forms/input/range/direction-unthemed-1-ref.html b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html new file mode 100644 index 0000000000..f2758db17c --- /dev/null +++ b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type='range' value=30 style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/direction-unthemed-1.html b/layout/reftests/forms/input/range/direction-unthemed-1.html new file mode 100644 index 0000000000..162d555043 --- /dev/null +++ b/layout/reftests/forms/input/range/direction-unthemed-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: that direction:rtl behaves correctly --> + <body> + <input type='range' value=70 style="-moz-appearance:none; direction:rtl;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html new file mode 100644 index 0000000000..ffb5ffa58d --- /dev/null +++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="checkbox" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html new file mode 100644 index 0000000000..0e1fffaf14 --- /dev/null +++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when switching to another type, the input element should look + like that type (not like an input range element) --> + <script type="text/javascript"> + function setToCheckbox() + { + document.getElementById('i').type='checkbox'; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setToCheckbox); + </script> + <body> + <input type='range' id='i' style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/max-prop.html b/layout/reftests/forms/input/range/max-prop.html new file mode 100644 index 0000000000..18a018330e --- /dev/null +++ b/layout/reftests/forms/input/range/max-prop.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'max' IDL property, the thumb of the range + should be moved to the appropriate position. This test also + sets the max to less than the current value which checks that the + rendering code handles repositioning correctly in the case that + sanitization of the value is needed for a non-value change. --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').max = "10"; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + setTimeout(setValue, 2000); // useful when not running under reftest suite + </script> + <body> + <input type=range id='i' max=100> + </body> +</html> diff --git a/layout/reftests/forms/input/range/moz-range-progress-1-ref.html b/layout/reftests/forms/input/range/moz-range-progress-1-ref.html new file mode 100644 index 0000000000..73af6dcb09 --- /dev/null +++ b/layout/reftests/forms/input/range/moz-range-progress-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test ::-moz-range-progress</title> + <style> + +div { + margin: 0; + padding: 0; +} + +.range { + display: inline-block; + position: relative; + width: 200px; + height: 20px; + background-color: blue; +} + +.range-progress { + display: inline-block; + position: absolute; + top: 5px; + width: 50px; + height: 10px; + background-color: lime; +} + + </style> + </head> + <body> + <div class="range"> + <div class="range-progress"></div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/input/range/moz-range-progress-1.html b/layout/reftests/forms/input/range/moz-range-progress-1.html new file mode 100644 index 0000000000..8adc101128 --- /dev/null +++ b/layout/reftests/forms/input/range/moz-range-progress-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test ::-moz-range-progress</title> + <style> + +input[type=range] { + width: 200px; + height: 20px; + margin: 0; + padding: 0; + background-color: blue; +} + +input[type=range]::-moz-range-progress { + height: 10px; + background-color: lime; +} + +input[type=range]::-moz-range-track, +input[type=range]::-moz-range-thumb { + visibility: hidden; +} + + </style> + </head> + <body> + <input type=range value=25> + </body> +</html> diff --git a/layout/reftests/forms/input/range/moz-range-progress-2-ref.html b/layout/reftests/forms/input/range/moz-range-progress-2-ref.html new file mode 100644 index 0000000000..fd914edfd5 --- /dev/null +++ b/layout/reftests/forms/input/range/moz-range-progress-2-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test ::-moz-range-progress</title> + <style> + +input[type=range] { + width: 200px; + height: 20px; + margin: 0; + padding: 0; + background-color: blue; +} + +input[type=range]::-moz-range-track { + border: 0; + height: 10px; + background-color: lime; +} + +input[type=range]::-moz-range-thumb { + width: 10px; + height: 10px; + border: 0; + border-radius: 0; + background-image: none; + background-color: yellow; +} + + </style> + </head> + <body> + <input type=range value=0> + </body> +</html> diff --git a/layout/reftests/forms/input/range/moz-range-progress-2.html b/layout/reftests/forms/input/range/moz-range-progress-2.html new file mode 100644 index 0000000000..ffe43266ce --- /dev/null +++ b/layout/reftests/forms/input/range/moz-range-progress-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test ::-moz-range-progress</title> + <style> + +input[type=range] { + width: 200px; + height: 20px; + margin: 0; + padding: 0; + background-color: blue; +} + +input[type=range]::-moz-range-track { + border: 0; + height: 10px; + background-color: lime; +} + +input[type=range]::-moz-range-progress { + height: 10px; + background-color: red; +} + +input[type=range]::-moz-range-thumb { + width: 10px; + height: 10px; + border: 0; + border-radius: 0; + background-image: none; + background-color: yellow; +} + + </style> + </head> + <body> + <input type=range value=0> + </body> +</html> diff --git a/layout/reftests/forms/input/range/moz-range-progress-3-ref.html b/layout/reftests/forms/input/range/moz-range-progress-3-ref.html new file mode 100644 index 0000000000..623f608101 --- /dev/null +++ b/layout/reftests/forms/input/range/moz-range-progress-3-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test ::-moz-range-progress</title> + <style> + +input[type=range] { + width: 200px; + height: 20px; + margin: 0; + padding: 0; + background-color: blue; +} + +input[type=range]::-moz-range-track { + border: 0; + height: 10px; + background-color: lime; +} + +input[type=range]::-moz-range-thumb { + width: 10px; + height: 10px; + border: 0; + border-radius: 0; + background-image: none; + background-color: yellow; +} + + </style> + </head> + <body> + <input type=range value=100> + </body> +</html> diff --git a/layout/reftests/forms/input/range/moz-range-progress-3.html b/layout/reftests/forms/input/range/moz-range-progress-3.html new file mode 100644 index 0000000000..365c62c99b --- /dev/null +++ b/layout/reftests/forms/input/range/moz-range-progress-3.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test ::-moz-range-progress</title> + <style> + +input[type=range] { + width: 200px; + height: 20px; + margin: 0; + padding: 0; + background-color: blue; +} + +input[type=range]::-moz-range-track { + border: 0; + height: 10px; + background-color: red; +} + +input[type=range]::-moz-range-progress { + height: 10px; + background-color: lime; +} + +input[type=range]::-moz-range-thumb { + width: 10px; + height: 10px; + border: 0; + border-radius: 0; + background-image: none; + background-color: yellow; +} + + </style> + </head> + <body> + <input type=range value=100> + </body> +</html> diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html new file mode 100644 index 0000000000..3103fc7219 --- /dev/null +++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="range" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html new file mode 100644 index 0000000000..24dccffeae --- /dev/null +++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html new file mode 100644 index 0000000000..8bf48f7e98 --- /dev/null +++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text" value="50" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html new file mode 100644 index 0000000000..ffb5ffa58d --- /dev/null +++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="checkbox" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/range-border-background-ref.html b/layout/reftests/forms/input/range/range-border-background-ref.html new file mode 100644 index 0000000000..4f1f44c7a7 --- /dev/null +++ b/layout/reftests/forms/input/range/range-border-background-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +input { height: 2em; } +</style> +<div style="float:left"> +<input type=range><br> +<span style="display:inline-block; background-color:rgba(0,255,0,0.3);"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top; background: none"></span><br> +</div> + +<div style="float:left"> +<span><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br> +</div> + +<div style="float:left"> +<input type=range><br> +<span style="display:inline-block; background-color: -moz-Field; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==)"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top; background: none"></span><br> +</div> + +<div style="float:left"> +<input type=range><br> +<span style="display:inline-block; border:1px solid green"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br> +</div> diff --git a/layout/reftests/forms/input/range/range-border-background.html b/layout/reftests/forms/input/range/range-border-background.html new file mode 100644 index 0000000000..bd4ea3419e --- /dev/null +++ b/layout/reftests/forms/input/range/range-border-background.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +input { height: 2em; } +</style> +<div style="float:left"> +<input type=range style="background-color:rgba(0,255,0,0.3)"><br> +<input type=range style="-webkit-appearance:none; background-color:rgba(0,255,0,0.3); margin:0"><br> +</div> + +<div style="float:left"> +<span style="background:red"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br> +</div> + +<div style="float:left"> +<input type=range style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==)"><br> +<input type=range style="-webkit-appearance:none; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==); margin:0"><br> +</div> + +<div style="float:left"> +<input type=range style="border:1px solid red"><br> +<input type=range style="-webkit-appearance:none; border:1px solid green; margin:0"><br> +</div> diff --git a/layout/reftests/forms/input/range/range-orient-block.html b/layout/reftests/forms/input/range/range-orient-block.html new file mode 100644 index 0000000000..df4a3e250f --- /dev/null +++ b/layout/reftests/forms/input/range/range-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range orient=block max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html b/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html new file mode 100644 index 0000000000..01fe1f75ca --- /dev/null +++ b/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range orient=horizontal max=100 value=70 dir=rtl> diff --git a/layout/reftests/forms/input/range/range-orient-horizontal.html b/layout/reftests/forms/input/range/range-orient-horizontal.html new file mode 100644 index 0000000000..be7bb4b0bb --- /dev/null +++ b/layout/reftests/forms/input/range/range-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range orient=horizontal max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-orient-inline.html b/layout/reftests/forms/input/range/range-orient-inline.html new file mode 100644 index 0000000000..ef1012bd4a --- /dev/null +++ b/layout/reftests/forms/input/range/range-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range orient=inline max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-orient-vertical-rtl.html b/layout/reftests/forms/input/range/range-orient-vertical-rtl.html new file mode 100644 index 0000000000..205e7de023 --- /dev/null +++ b/layout/reftests/forms/input/range/range-orient-vertical-rtl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range orient=vertical max=100 value=70 dir=rtl> diff --git a/layout/reftests/forms/input/range/range-orient-vertical.html b/layout/reftests/forms/input/range/range-orient-vertical.html new file mode 100644 index 0000000000..321822f2b8 --- /dev/null +++ b/layout/reftests/forms/input/range/range-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range orient=vertical max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html new file mode 100644 index 0000000000..9951b8f57d --- /dev/null +++ b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html @@ -0,0 +1,92 @@ +<!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: INPUT type=range percent intrinsic block-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { margin: 2px; } + +input.b { + min-height: 0; + background: lime; +} + +input.mb { + min-height: 0; + max-height: 100%; + background: lime; +} + +.n { + -webkit-appearance: none; +} + +div { + display: inline-block; + border:1px solid; +} + +.grid { + display: inline-grid; + grid: auto / min-content; + place-items: start; +} +input[orient="vertical"] { + -webkit-appearance: slider-vertical; + -webkit-appearance: range; + appearance: auto; +} + +</style></head><body> + +<div style="height:30px"><div> + <input type="range" class="b n" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<br> +<br> + +<div style="height:30px"><div> + <input type="range" class="mb n" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> + <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +<div class="grid" style="grid: 30px / auto"> + <input type="range" class="b" orient="vertical" style="height:15px"> +</div> + +</body></html> diff --git a/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html new file mode 100644 index 0000000000..d87d9e2e55 --- /dev/null +++ b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html @@ -0,0 +1,99 @@ +<!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: INPUT type=range percent intrinsic block-size</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing"> + <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero"> + <link rel="match" href="range-percent-intrinsic-size-2b-ref.html"> + <style> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +input { margin: 2px; } + +input.b { + height: 50%; + min-height: -moz-min-content; + min-height: min-content; + background: lime; +} + +input.mb { + max-height: 50%; + min-height: -moz-min-content; + min-height: min-content; + background: lime; +} + +input.b.min-auto, input.mb.min-auto, { + min-height: auto; +} + +.n { + -webkit-appearance: none; +} + +div { + display: inline-block; + border:1px solid; +} + +.grid { + display: inline-grid; + grid: auto / min-content; + place-items: start; +} +input[orient="vertical"] { + -webkit-appearance: slider-vertical; + -webkit-appearance: range; + appearance: auto; +} + +</style></head><body> + +<div style="height:30px"><div> + <input type="range" class="b n" orient="vertical"> +</div></div> + +<div class="grid" style="grid: min-content / auto"> + <input type="range" class="b n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="b n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="b n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="b n min-auto" orient="vertical"> +</div> + +<br> +<br> + +<div style="height:30px"><div> + <input type="range" class="mb n" orient="vertical"> +</div></div> + +<div class="grid" style="grid: minmax(min-content,30px) / auto"> + <input type="range" class="mb n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="mb n" orient="vertical"> +</div> + +<div class="grid" style="grid: minmax(auto,30px) / auto"> + <input type="range" class="mb n min-auto" orient="vertical"> +</div> + +</body></html> diff --git a/layout/reftests/forms/input/range/range-track-bg-ref.html b/layout/reftests/forms/input/range/range-track-bg-ref.html new file mode 100644 index 0000000000..e99d3d0bfd --- /dev/null +++ b/layout/reftests/forms/input/range/range-track-bg-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<style> +input[orient="horizontal"]::-moz-range-track { + background-color: green; + block-size: 0.2em; + inline-size: 100%; +} +input[orient="vertical"]::-moz-range-track { + background-color: green; + inline-size: 0.2em; + block-size: 100%; +} +</style> +<input type="range" orient="horizontal"> +<input type="range" orient="vertical"> diff --git a/layout/reftests/forms/input/range/range-track-bg.html b/layout/reftests/forms/input/range/range-track-bg.html new file mode 100644 index 0000000000..b0a08e2b74 --- /dev/null +++ b/layout/reftests/forms/input/range/range-track-bg.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<style> +input::-moz-range-track { + background-color: green; +} +</style> +<input type="range"> +<input type="range" orient="vertical"> diff --git a/layout/reftests/forms/input/range/range-vlr-orient-block.html b/layout/reftests/forms/input/range/range-vlr-orient-block.html new file mode 100644 index 0000000000..b2d009bd82 --- /dev/null +++ b/layout/reftests/forms/input/range/range-vlr-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-lr" orient=block max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html b/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html new file mode 100644 index 0000000000..406eb646ec --- /dev/null +++ b/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-lr" orient=horizontal max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vlr-orient-inline.html b/layout/reftests/forms/input/range/range-vlr-orient-inline.html new file mode 100644 index 0000000000..0c26b41225 --- /dev/null +++ b/layout/reftests/forms/input/range/range-vlr-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-lr;direction:rtl" orient=inline max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vlr-orient-vertical.html b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html new file mode 100644 index 0000000000..f7bf70ff3a --- /dev/null +++ b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-lr;direction:rtl" orient=vertical max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vlr.html b/layout/reftests/forms/input/range/range-vlr.html new file mode 100644 index 0000000000..e3cc4b90fb --- /dev/null +++ b/layout/reftests/forms/input/range/range-vlr.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-lr;direction:rtl" max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vrl-orient-block.html b/layout/reftests/forms/input/range/range-vrl-orient-block.html new file mode 100644 index 0000000000..07edd12586 --- /dev/null +++ b/layout/reftests/forms/input/range/range-vrl-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-rl" orient=block max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html b/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html new file mode 100644 index 0000000000..66637c6526 --- /dev/null +++ b/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-rl" orient=horizontal max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vrl-orient-inline.html b/layout/reftests/forms/input/range/range-vrl-orient-inline.html new file mode 100644 index 0000000000..96ea874327 --- /dev/null +++ b/layout/reftests/forms/input/range/range-vrl-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-rl;direction:rtl" orient=inline max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vrl-orient-vertical.html b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html new file mode 100644 index 0000000000..a5ede81c33 --- /dev/null +++ b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-rl;direction:rtl" orient=vertical max=100 value=70> diff --git a/layout/reftests/forms/input/range/range-vrl.html b/layout/reftests/forms/input/range/range-vrl.html new file mode 100644 index 0000000000..679170685e --- /dev/null +++ b/layout/reftests/forms/input/range/range-vrl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<input type=range style="writing-mode:vertical-rl;direction:rtl" max=100 value=70> diff --git a/layout/reftests/forms/input/range/reftest.list b/layout/reftests/forms/input/range/reftest.list new file mode 100644 index 0000000000..181097dc15 --- /dev/null +++ b/layout/reftests/forms/input/range/reftest.list @@ -0,0 +1,61 @@ + +# sanity checks: +!= not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html +!= not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html +!= not-other-type-unthemed-1.html not-other-type-unthemed-1c-notref.html + +# dynamic type changes: +fuzzy(0-1,0-40) == to-range-from-other-type-unthemed-1.html to-range-from-other-type-unthemed-1-ref.html +== from-range-to-other-type-unthemed-1.html from-range-to-other-type-unthemed-1-ref.html + +# for different values: +!= different-fraction-of-range-unthemed-1.html different-fraction-of-range-unthemed-1-notref.html +== same-fraction-of-range-unthemed-1.html same-fraction-of-range-unthemed-1-ref.html + +# dynamic value changes: +fuzzy(0-1,0-40) == value-prop-unthemed.html 75pct-unthemed-common-ref.html +== value-prop.html 75pct-common-ref.html +fuzzy(0-1,0-40) == valueAsNumber-prop-unthemed.html 75pct-unthemed-common-ref.html +== valueAsNumber-prop.html 75pct-common-ref.html +fuzzy(0-1,0-40) == stepDown-unthemed.html 75pct-unthemed-common-ref.html +== stepDown.html 75pct-common-ref.html +fuzzy(0-1,0-40) == stepUp-unthemed.html 75pct-unthemed-common-ref.html +== stepUp.html 75pct-common-ref.html +random-if(Android) == max-prop.html 100pct-common-ref.html # Snapping in different ways in debug and opt builds, bug 1621141 +fuzzy(0-1,0-4) == reset-value.html reset-value-ref.html + +# 'direction' property: +== direction-unthemed-1.html direction-unthemed-1-ref.html + +# ::-moz-range-progress pseudo-element: +== moz-range-progress-1.html moz-range-progress-1-ref.html +== moz-range-progress-2.html moz-range-progress-2-ref.html +== moz-range-progress-3.html moz-range-progress-3-ref.html + +# Tests for block and inline orientation in combination with writing-mode +!= range-orient-horizontal.html range-orient-vertical.html +!= range-orient-horizontal.html range-orient-horizontal-rtl.html +== range-orient-block.html range-orient-vertical.html +== range-orient-inline.html range-orient-horizontal.html +== range-vlr.html range-orient-vertical.html +== range-vlr-orient-block.html range-orient-horizontal.html +== range-vlr-orient-inline.html range-orient-vertical.html +== range-vlr-orient-horizontal.html range-orient-horizontal.html +== range-vlr-orient-vertical.html range-orient-vertical.html +== range-vrl.html range-orient-vertical-rtl.html +== range-vrl-orient-block.html range-orient-horizontal-rtl.html +== range-vrl-orient-inline.html range-orient-vertical-rtl.html +== range-vrl-orient-horizontal.html range-orient-horizontal-rtl.html +== range-vrl-orient-vertical.html range-orient-vertical-rtl.html + +skip-if(Android) == range-border-background.html range-border-background-ref.html # Android doesn't have a native theme for -webkit-appearance:range + +# Other range-percent-intrinsic-size-*.html tests lives in +# testing/web-platform/tests/css/css-sizing/. Vertical layout with +# -webkit-appearance:none isn't supported in other UAs so this test +# is an internal reftest for now. +== range-percent-intrinsic-size-2b.html range-percent-intrinsic-size-2b-ref.html + +fails-if(Android) fuzzy(0-2,0-80) == auto-size.html auto-size-ref.html # Snapping, bug 1621141 +== range-track-bg.html range-track-bg-ref.html +!= track-default-rendering.html track-default-rendering-ref.html diff --git a/layout/reftests/forms/input/range/reset-value-ref.html b/layout/reftests/forms/input/range/reset-value-ref.html new file mode 100644 index 0000000000..74675c2d7a --- /dev/null +++ b/layout/reftests/forms/input/range/reset-value-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head> + <title>1080352</title> + </head> + <body> + <form id="form"> + <input id='inputRange' type='range' step='10' min='0' max='50' value='20'><br> + <input id='inputNumber' type='number' step='10' min='0' max='500' value='30'><br> + + <input type='reset'><br> + </form> + </body> +</html> diff --git a/layout/reftests/forms/input/range/reset-value.html b/layout/reftests/forms/input/range/reset-value.html new file mode 100644 index 0000000000..2ccb367657 --- /dev/null +++ b/layout/reftests/forms/input/range/reset-value.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head> + <title>1080352</title> + </head> + <body onload="inputRange.value=40;inputNumber.value=40; form.reset()"> + <form id="form"> + <input id='inputRange' type='range' step='10' min='0' max='50' value='20'><br> + <input id='inputNumber' type='number' step='10' min='0' max='500' value='30'><br> + + <input type='reset'><br> + </form> + </body> +</html> diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html new file mode 100644 index 0000000000..6aefd17bca --- /dev/null +++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="range" value=70 style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html new file mode 100644 index 0000000000..3c9f0e7ce3 --- /dev/null +++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <!-- Test: that range with value=90,min=90,max=120 looks the same as range + with value=70 (also tests that it doesn't look like type=text, since the + text displayed would be different in the type=text case). --> + <body> + <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120> + </body> +</html> diff --git a/layout/reftests/forms/input/range/stepDown-unthemed.html b/layout/reftests/forms/input/range/stepDown-unthemed.html new file mode 100644 index 0000000000..6d4d6708a5 --- /dev/null +++ b/layout/reftests/forms/input/range/stepDown-unthemed.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'value' IDL property, the thumb of the range + should be moved to the appropriate position --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').stepDown(); + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + </script> + <body> + <input type=range id='i' value=100 step=25 style='-moz-appearance:none'> + </body> +</html> diff --git a/layout/reftests/forms/input/range/stepDown.html b/layout/reftests/forms/input/range/stepDown.html new file mode 100644 index 0000000000..e482af4905 --- /dev/null +++ b/layout/reftests/forms/input/range/stepDown.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'value' IDL property, the thumb of the range + should be moved to the appropriate position --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').stepDown(); + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + </script> + <body> + <input type=range id='i' value=100 step=25> + </body> +</html> diff --git a/layout/reftests/forms/input/range/stepUp-unthemed.html b/layout/reftests/forms/input/range/stepUp-unthemed.html new file mode 100644 index 0000000000..1e4198cc66 --- /dev/null +++ b/layout/reftests/forms/input/range/stepUp-unthemed.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'value' IDL property, the thumb of the range + should be moved to the appropriate position --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').stepUp(); + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + </script> + <body> + <input type=range id='i' value=50 step=25 style='-moz-appearance:none'> + </body> +</html> diff --git a/layout/reftests/forms/input/range/stepUp.html b/layout/reftests/forms/input/range/stepUp.html new file mode 100644 index 0000000000..139e6c797c --- /dev/null +++ b/layout/reftests/forms/input/range/stepUp.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'value' IDL property, the thumb of the range + should be moved to the appropriate position --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').stepUp(); + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + </script> + <body> + <input type=range id='i' value=50 step=25> + </body> +</html> diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html new file mode 100644 index 0000000000..3103fc7219 --- /dev/null +++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="range" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html new file mode 100644 index 0000000000..86ff0c5214 --- /dev/null +++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: input element changed to range state doesn't look like checkbox state --> + <script type="text/javascript"> + function setToRange() + { + document.getElementById('i').type='range'; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setToRange); + </script> + <body> + <input type='checkbox' id='i' style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/range/track-default-rendering-ref.html b/layout/reftests/forms/input/range/track-default-rendering-ref.html new file mode 100644 index 0000000000..d702d021c5 --- /dev/null +++ b/layout/reftests/forms/input/range/track-default-rendering-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 --> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1583660</title> + <style> + input::-moz-range-thumb { + visibility:hidden; + } + input::-moz-range-track { + background: transparent; + } + </style> +</head> +<body> + +<input type=range> +<input type=range orient=vertical> + +</body> +</html> diff --git a/layout/reftests/forms/input/range/track-default-rendering.html b/layout/reftests/forms/input/range/track-default-rendering.html new file mode 100644 index 0000000000..997b83d202 --- /dev/null +++ b/layout/reftests/forms/input/range/track-default-rendering.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 --> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1583660</title> + <style> + input::-moz-range-thumb { + visibility:hidden; + } + </style> +</head> +<body> + +<input type=range> +<input type=range orient=vertical> + +</body> +</html> diff --git a/layout/reftests/forms/input/range/value-prop-unthemed.html b/layout/reftests/forms/input/range/value-prop-unthemed.html new file mode 100644 index 0000000000..46387af2ea --- /dev/null +++ b/layout/reftests/forms/input/range/value-prop-unthemed.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'value' IDL property, the thumb of the range + should be moved to the appropriate position --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').value = "75"; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + setTimeout(setValue, 2000); // useful when not running under reftest suite + </script> + <body> + <input type=range id='i' value=50 step=25 style='-moz-appearance:none'> + </body> +</html> diff --git a/layout/reftests/forms/input/range/value-prop.html b/layout/reftests/forms/input/range/value-prop.html new file mode 100644 index 0000000000..66be837045 --- /dev/null +++ b/layout/reftests/forms/input/range/value-prop.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'value' IDL property, the thumb of the range + should be moved to the appropriate position --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').value = "75"; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + setTimeout(setValue, 2000); // useful when not running under reftest suite + </script> + <body> + <input type=range id='i' value=50 step=25> + </body> +</html> diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html new file mode 100644 index 0000000000..a2a6eb6cce --- /dev/null +++ b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'value' IDL property, the thumb of the range + should be moved to the appropriate position --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').valueAsNumber = 75; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + setTimeout(setValue, 2000); // useful when not running under reftest suite + </script> + <body> + <input type=range id='i' value=50 step=25 style='-moz-appearance:none'> + </body> +</html> diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop.html b/layout/reftests/forms/input/range/valueAsNumber-prop.html new file mode 100644 index 0000000000..c00fe8bf4c --- /dev/null +++ b/layout/reftests/forms/input/range/valueAsNumber-prop.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when changing the 'value' IDL property, the thumb of the range + should be moved to the appropriate position --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('i').valueAsNumber = 75; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setValue); + setTimeout(setValue, 2000); // useful when not running under reftest suite + </script> + <body> + <input type=range id='i' value=50 step=25> + </body> +</html> |