diff options
Diffstat (limited to 'layout/reftests/forms/input/color')
18 files changed, 451 insertions, 0 deletions
diff --git a/layout/reftests/forms/input/color/auto-height-1-ref.html b/layout/reftests/forms/input/color/auto-height-1-ref.html new file mode 100644 index 0000000000..32fb2e3b35 --- /dev/null +++ b/layout/reftests/forms/input/color/auto-height-1-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<link rel="stylesheet" href="reference-style.css"> +<button class="input-color" style="height: auto"> + <div class="input-color-swatch" style="height: 0"></div> +</button> diff --git a/layout/reftests/forms/input/color/auto-height-1.html b/layout/reftests/forms/input/color/auto-height-1.html new file mode 100644 index 0000000000..71ad8c3126 --- /dev/null +++ b/layout/reftests/forms/input/color/auto-height-1.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>min widget size is respected even with auto-height</title> +<input type="color" style="height: auto"> diff --git a/layout/reftests/forms/input/color/block-invalidate-1-ref.html b/layout/reftests/forms/input/color/block-invalidate-1-ref.html new file mode 100644 index 0000000000..027c1e2b57 --- /dev/null +++ b/layout/reftests/forms/input/color/block-invalidate-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="color" value="#00ff00" /> + </body> +</html> diff --git a/layout/reftests/forms/input/color/block-invalidate-1.html b/layout/reftests/forms/input/color/block-invalidate-1.html new file mode 100644 index 0000000000..85cfda4a31 --- /dev/null +++ b/layout/reftests/forms/input/color/block-invalidate-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <script> + function runTest() { + var p = document.getElementsByTagName('input')[0]; + p.value = '#00ff00'; + document.documentElement.className = ''; + } + window.addEventListener("MozReftestInvalidate", runTest); + </script> + <body> + <input type="color" /> + </body> +</html> diff --git a/layout/reftests/forms/input/color/block-invalidate-2-ref.html b/layout/reftests/forms/input/color/block-invalidate-2-ref.html new file mode 100644 index 0000000000..9def78fad1 --- /dev/null +++ b/layout/reftests/forms/input/color/block-invalidate-2-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <p>Test for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977038">977038</a></p> + <form> + <input type="color" value="#00ff00" /> + </form> + </body> +</html> diff --git a/layout/reftests/forms/input/color/block-invalidate-2.html b/layout/reftests/forms/input/color/block-invalidate-2.html new file mode 100644 index 0000000000..754e81cafc --- /dev/null +++ b/layout/reftests/forms/input/color/block-invalidate-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <script> + function runTest() { + var p = document.getElementsByTagName('input')[0]; + p.value = '#0000ff' + p.defaultValue = '#00ff00'; + p.form.reset(); + document.documentElement.className = ''; + } + window.addEventListener("MozReftestInvalidate", runTest); + </script> + <body> + <p>Test for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977038">977038</a></p> + <form> + <input type="color" /> + </form> + </body> +</html> diff --git a/layout/reftests/forms/input/color/custom-style-1-ref.html b/layout/reftests/forms/input/color/custom-style-1-ref.html new file mode 100644 index 0000000000..f9d66c187c --- /dev/null +++ b/layout/reftests/forms/input/color/custom-style-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='reference-style.css'> + <style> + div.input-color-swatch { + margin-top: 3px; + margin-bottom: 3px; + } + </style> + <body> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + + </body> diff --git a/layout/reftests/forms/input/color/custom-style-1.html b/layout/reftests/forms/input/color/custom-style-1.html new file mode 100644 index 0000000000..47905cf3b6 --- /dev/null +++ b/layout/reftests/forms/input/color/custom-style-1.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <style> + input[type="color"]::-moz-color-swatch { + margin-top: 3px; + margin-bottom: 3px; + } + </style> + <body> + <input type="color" /> + </body> diff --git a/layout/reftests/forms/input/color/custom-style-2-ref.html b/layout/reftests/forms/input/color/custom-style-2-ref.html new file mode 100644 index 0000000000..802af966e8 --- /dev/null +++ b/layout/reftests/forms/input/color/custom-style-2-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test for bug 943966</title>
+ <link rel='stylesheet' type='text/css' href='reference-style.css'>
+ <style>
+ button.input-color {
+ height: 15px;
+ width: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=943966">Mozilla Bug 943966</a>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/custom-style-2.html b/layout/reftests/forms/input/color/custom-style-2.html new file mode 100644 index 0000000000..209594b32e --- /dev/null +++ b/layout/reftests/forms/input/color/custom-style-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test for bug 943966</title>
+ <style>
+ input[type="color"].tiny {
+ height: 15px;
+ width: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=943966">Mozilla Bug 943966</a>
+ <input class="tiny" type="color" />
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/input-color-1-ref.html b/layout/reftests/forms/input/color/input-color-1-ref.html new file mode 100644 index 0000000000..87887b0161 --- /dev/null +++ b/layout/reftests/forms/input/color/input-color-1-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <link rel='stylesheet' href='reference-style.css'> + <style> + body > button:nth-child(1) > .input-color-swatch { background-color: #000000; } + body > button:nth-child(2) > .input-color-swatch { background-color: #000000; } + body > button:nth-child(3) > .input-color-swatch { background-color: #00ff00; } + body > button:nth-child(4) > .input-color-swatch { background-color: #123456; } + </style> + </head> + <body> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + </body> +</html> diff --git a/layout/reftests/forms/input/color/input-color-1.html b/layout/reftests/forms/input/color/input-color-1.html new file mode 100644 index 0000000000..a351df18fc --- /dev/null +++ b/layout/reftests/forms/input/color/input-color-1.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <input type="color" /> + <input type="color" value="#000000" /> + <input type="color" value="#00ff00" /> + <input type="color" value="#123456" /> + </body> +</html> diff --git a/layout/reftests/forms/input/color/margin-padding-1-ref.html b/layout/reftests/forms/input/color/margin-padding-1-ref.html new file mode 100644 index 0000000000..9a500d4ced --- /dev/null +++ b/layout/reftests/forms/input/color/margin-padding-1-ref.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' href='reference-style.css'> + <style> + body > button:nth-child(1) { margin: 10px; padding: 0px; } + body > button:nth-child(2) { margin: 0px; padding: 10px; } + body > button:nth-child(3) { margin: 10px; padding: 10px; } + body > button:nth-child(4) { margin: 5px; padding: 5px; } + body > button:nth-child(5) { margin: 50px; padding: 50px; } + body > button:nth-child(6) { margin: 100px; padding: 100px; } + body > button:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > button:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > button:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > button:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > button:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > button:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > button:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > button:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > button:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > button:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + + /* The non-native theme has different widget-supplied padding values + * for <input type="color"> and <button>, and so we must calculate + * the color swatch height explicitly. These are computed as the + * widget-supplied min-height (32px) minus padding+border (padding + * as set above, and the 2px of widget-supplied border), clamped to be + * non-negative. + */ + body > button:nth-child(1) .input-color-swatch { height: 28px; } + body > button:nth-child(2) .input-color-swatch { height: 8px; } + body > button:nth-child(3) .input-color-swatch { height: 8px; } + body > button:nth-child(4) .input-color-swatch { height: 18px; } + body > button:nth-child(5) .input-color-swatch { height: 0px; } + body > button:nth-child(6) .input-color-swatch { height: 0px; } + body > button:nth-child(7) .input-color-swatch { height: 28px; } + body > button:nth-child(8) .input-color-swatch { height: 28px; } + body > button:nth-child(9) .input-color-swatch { height: 28px; } + body > button:nth-child(10) .input-color-swatch { height: 28px; } + body > button:nth-child(11) .input-color-swatch { height: 18px; } + body > button:nth-child(12) .input-color-swatch { height: 28px; } + body > button:nth-child(13) .input-color-swatch { height: 18px; } + body > button:nth-child(14) .input-color-swatch { height: 28px; } + body > button:nth-child(15) .input-color-swatch { height: 20px; } + body > button:nth-child(16) .input-color-swatch { height: 28px; } + </style> + <body> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + </body> +</html> diff --git a/layout/reftests/forms/input/color/margin-padding-1.html b/layout/reftests/forms/input/color/margin-padding-1.html new file mode 100644 index 0000000000..e394d5d29b --- /dev/null +++ b/layout/reftests/forms/input/color/margin-padding-1.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <style> + input[type=color]:nth-child(1) { margin: 10px; padding: 0px; } + input[type=color]:nth-child(2) { margin: 0px; padding: 10px; } + input[type=color]:nth-child(3) { margin: 10px; padding: 10px; } + input[type=color]:nth-child(4) { margin: 5px; padding: 5px; } + input[type=color]:nth-child(5) { margin: 50px; padding: 50px; } + input[type=color]:nth-child(6) { margin: 100px; padding: 100px; } + input[type=color]:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + input[type=color]:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + input[type=color]:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + input[type=color]:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + input[type=color]:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + input[type=color]:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + input[type=color]:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + input[type=color]:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + input[type=color]:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + input[type=color]:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + </body> +</html> diff --git a/layout/reftests/forms/input/color/reference-style.css b/layout/reftests/forms/input/color/reference-style.css new file mode 100644 index 0000000000..347b1216df --- /dev/null +++ b/layout/reftests/forms/input/color/reference-style.css @@ -0,0 +1,17 @@ +div.input-color-swatch { + /* This should match the styling for ::-moz-color-swatch in forms.css. */ + width: 100%; + height: 100%; + min-width: 3px; + min-height: 3px; + box-sizing: border-box; + border: 1px solid grey; + display: block; + background-color: #000000; /* default color for input type color */ +} + +button.input-color { + width: 64px; + height: 32px; + padding: 4px; /* widget-supplied padding */ +} diff --git a/layout/reftests/forms/input/color/reftest.list b/layout/reftests/forms/input/color/reftest.list new file mode 100644 index 0000000000..4eaa1a7eee --- /dev/null +++ b/layout/reftests/forms/input/color/reftest.list @@ -0,0 +1,9 @@ +== input-color-1.html input-color-1-ref.html + +fuzzy(0-1,0-2) == margin-padding-1.html margin-padding-1-ref.html +== block-invalidate-1.html block-invalidate-1-ref.html +== block-invalidate-2.html block-invalidate-2-ref.html +fuzzy(0-8,0-80) fuzzy-if(gtkWidget,0-8,0-113) == transformations-1.html transformations-1-ref.html # Bug 1600790 for gtkWidget +== custom-style-1.html custom-style-1-ref.html +== custom-style-2.html custom-style-2-ref.html +== auto-height-1.html auto-height-1-ref.html diff --git a/layout/reftests/forms/input/color/transformations-1-ref.html b/layout/reftests/forms/input/color/transformations-1-ref.html new file mode 100644 index 0000000000..b275d0dd4b --- /dev/null +++ b/layout/reftests/forms/input/color/transformations-1-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' href='reference-style.css'> + <style> + body > button:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); } + body > button:nth-child(2) { transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); } + body > button:nth-child(3) { transform: rotate(30deg); } + body > button:nth-child(4) { transform: scale(2, 4); } + body > button:nth-child(5) { transform: scale(0.1, 0.4); } + body > button:nth-child(6) { transform: scale(1, 0.4); } + body > button:nth-child(7) { transform: scale(0.1, 1); } + body > button:nth-child(8) { transform: skew(30deg, -10deg); } + body > button:nth-child(9) { transform: skew(-30deg, 10deg); } + body > button:nth-child(10) { transform: translate(10px, 30px); } + body > button:nth-child(11) { transform: translate(30px, 10px); } + body > button:nth-child(12) { transform: translate(-10px, 30px); } + body > button:nth-child(13) { transform: translate(30px, -10px); } + body > button:nth-child(14) { transform: scale(0, 0); } + </style> + <body> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + <button class="input-color"> + <div class="input-color-swatch"> + </div> + </button> + </body> +</html> diff --git a/layout/reftests/forms/input/color/transformations-1.html b/layout/reftests/forms/input/color/transformations-1.html new file mode 100644 index 0000000000..67bb4b3c9f --- /dev/null +++ b/layout/reftests/forms/input/color/transformations-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <style> + input[type=color]:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); } + input[type=color]:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); } + input[type=color]:nth-child(3) { -moz-transform: rotate(30deg); } + input[type=color]:nth-child(4) { -moz-transform: scale(2, 4); } + input[type=color]:nth-child(5) { -moz-transform: scale(0.1, 0.4); } + input[type=color]:nth-child(6) { -moz-transform: scale(1, 0.4); } + input[type=color]:nth-child(7) { -moz-transform: scale(0.1, 1); } + input[type=color]:nth-child(8) { -moz-transform: skew(30deg, -10deg); } + input[type=color]:nth-child(9) { -moz-transform: skew(-30deg, 10deg); } + input[type=color]:nth-child(10) { -moz-transform: translate(10px, 30px); } + input[type=color]:nth-child(11) { -moz-transform: translate(30px, 10px); } + input[type=color]:nth-child(12) { -moz-transform: translate(-10px, 30px); } + input[type=color]:nth-child(13) { -moz-transform: translate(30px, -10px); } + input[type=color]:nth-child(14) { -moz-transform: scale(0, 0); } + </style> + <body> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + <input type=color /> + </body> +</html> |