diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/forms/button | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | uxp-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/forms/button')
67 files changed, 1792 insertions, 0 deletions
diff --git a/layout/reftests/forms/button/disabled-1-ref.html b/layout/reftests/forms/button/disabled-1-ref.html new file mode 100644 index 0000000000..c408ec16fb --- /dev/null +++ b/layout/reftests/forms/button/disabled-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: test button "disabled" text style</title> +<style> + button { + color: GrayText; + border-width: 0; + background: transparent; + } +</style> +</head> +<body> + <button>Some text</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-1.html b/layout/reftests/forms/button/disabled-1.html new file mode 100644 index 0000000000..6bcba667bd --- /dev/null +++ b/layout/reftests/forms/button/disabled-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: test button "disabled" text style</title> +<style> + button { + border-width: 0; + background: transparent; + } +</style> +</head> +<body> + <button disabled>Some text</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-2-ref.html b/layout/reftests/forms/button/disabled-2-ref.html new file mode 100644 index 0000000000..53958f76b7 --- /dev/null +++ b/layout/reftests/forms/button/disabled-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: test all types of buttons look similar when disabled</title> +</head> +<body> + <button>Some text</button> + <button>Some text</button> + <button>Reset</button> + <button>Submit Query</button> + <br> + <button disabled>Some text</button> + <button disabled>Some text</button> + <button disabled>Reset</button> + <button disabled>Submit Query</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-2.html b/layout/reftests/forms/button/disabled-2.html new file mode 100644 index 0000000000..a77287dfee --- /dev/null +++ b/layout/reftests/forms/button/disabled-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: test all types of buttons look similar when disabled</title> +</head> +<body> + <button>Some text</button> + <input type="button" value="Some text"> + <input type="reset"> + <input type="submit"> + <br> + <button disabled>Some text</button> + <input disabled type="button" value="Some text"> + <input disabled type="reset"> + <input disabled type="submit"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-3-notref.html b/layout/reftests/forms/button/disabled-3-notref.html new file mode 100644 index 0000000000..bd8b457746 --- /dev/null +++ b/layout/reftests/forms/button/disabled-3-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <button disabled>Some text</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-3.html b/layout/reftests/forms/button/disabled-3.html new file mode 100644 index 0000000000..440d43b531 --- /dev/null +++ b/layout/reftests/forms/button/disabled-3.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <button>Some text</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-4-notref.html b/layout/reftests/forms/button/disabled-4-notref.html new file mode 100644 index 0000000000..41fe9e6107 --- /dev/null +++ b/layout/reftests/forms/button/disabled-4-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input disabled type="button" value="Some text"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-4.html b/layout/reftests/forms/button/disabled-4.html new file mode 100644 index 0000000000..38f71544a2 --- /dev/null +++ b/layout/reftests/forms/button/disabled-4.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input type="button" value="Some text"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-5-notref.html b/layout/reftests/forms/button/disabled-5-notref.html new file mode 100644 index 0000000000..d944d04216 --- /dev/null +++ b/layout/reftests/forms/button/disabled-5-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input disabled type="reset"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-5.html b/layout/reftests/forms/button/disabled-5.html new file mode 100644 index 0000000000..ded7c1905d --- /dev/null +++ b/layout/reftests/forms/button/disabled-5.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input type="reset"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-6-notref.html b/layout/reftests/forms/button/disabled-6-notref.html new file mode 100644 index 0000000000..c6f0abce66 --- /dev/null +++ b/layout/reftests/forms/button/disabled-6-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input disabled type="submit"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-6.html b/layout/reftests/forms/button/disabled-6.html new file mode 100644 index 0000000000..2a1d9cfa7f --- /dev/null +++ b/layout/reftests/forms/button/disabled-6.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input type="submit"> +</body> +</html> diff --git a/layout/reftests/forms/button/display-grid-flex-columnset-ref.html b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html new file mode 100644 index 0000000000..a176dd3e8c --- /dev/null +++ b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 984869</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +.grid, .igrid { + display: grid; + grid: 20px / 20px 20px; +} +.igrid { display:inline-grid; } + +.flex, .iflex { + display: flex; +} +.iflex { display:inline-flex; } + +.columnset, .block-columnset { + -moz-columns: 2; + -ms-columns: 2; + -webkit-columns: 2; + columns: 2; +} + +.block-columnset, .b { display: block; } + +a { + position: absolute; + right:0; bottom:0; + width:5px; height:5px; + background: lime; +} +.rel { position:relative; } + +button { vertical-align: bottom; } + </style> +</head> +<body> + +<button><wrap class="grid">x<span>y</span>z</wrap></button> +<button><wrap class="iflex">x<span>y</span>z</wrap></button> +<button><wrap class="b columnset">x<br><span>y</span>z</wrap></button> + +<button class="rel"><wrap class="grid">x<span>y</span>z<a></a></wrap></button> +<button class="rel"><wrap class="iflex">x<span>y</span>z<a></a></wrap></button> +<button class="rel"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button> + +<button class="b"><wrap class="grid">x<span>y</span>z</wrap></button> +<button class="b"><wrap class="flex">x<span>y</span>z</wrap></button> +<button class="b"><wrap class="b columnset">x<br><span>y</span>z</wrap></button> + +<button class="rel b"><wrap class="grid">x<span>y</span>z<a></a></wrap></button> +<button class="rel b"><wrap class="flex">x<span>y</span>z<a></a></wrap></button> +<button class="rel b"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button> + +</body> +</html> diff --git a/layout/reftests/forms/button/display-grid-flex-columnset.html b/layout/reftests/forms/button/display-grid-flex-columnset.html new file mode 100644 index 0000000000..86c8f587aa --- /dev/null +++ b/layout/reftests/forms/button/display-grid-flex-columnset.html @@ -0,0 +1,61 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 984869</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +.grid, .igrid { + display: grid; + grid: 20px / 20px 20px; +} +.igrid { display:inline-grid; } + +.flex, .iflex { + display: flex; +} +.iflex { display:inline-flex; } + +.columnset { + -moz-columns: 2; + -ms-columns: 2; + -webkit-columns: 2; + columns: 2; +} + +.b { display: block; } + +a { + position: absolute; + right:0; bottom:0; + width:5px; height:5px; + background: lime; +} +.rel { position:relative; } + +button { vertical-align: bottom; } + </style> +</head> +<body> + +<button class="igrid">x<span>y</span>z</button> +<button class="iflex">x<span>y</span>z</button> +<button class="columnset">x<br><span>y</span>z</button> + +<button class="rel igrid">x<span>y</span>z<a></a></button> +<button class="rel iflex">x<span>y</span>z<a></a></button> +<button class="rel columnset">x<br><span>y</span>z<a></a></button> + +<button class="grid">x<span>y</span>z</button> +<button class="flex">x<span>y</span>z</button> +<button class="b columnset">x<br><span>y</span>z</button> + +<button class="rel grid">x<span>y</span>z<a></a></button> +<button class="rel flex">x<span>y</span>z<a></a></button> +<button class="rel b columnset">x<br><span>y</span>z<a></a></button> + +</body> +</html> diff --git a/layout/reftests/forms/button/first-letter-1-noref.html b/layout/reftests/forms/button/first-letter-1-noref.html new file mode 100644 index 0000000000..d59db575fa --- /dev/null +++ b/layout/reftests/forms/button/first-letter-1-noref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<style> + body { line-height: 0; } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/first-letter-1-ref.html b/layout/reftests/forms/button/first-letter-1-ref.html new file mode 100644 index 0000000000..34ffa64f22 --- /dev/null +++ b/layout/reftests/forms/button/first-letter-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<style> + button { display: block; } + button::first-letter { color: green; } + body { line-height: 0; } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/first-letter-1.html b/layout/reftests/forms/button/first-letter-1.html new file mode 100644 index 0000000000..3dbf1667fa --- /dev/null +++ b/layout/reftests/forms/button/first-letter-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<style> + button::first-letter { color: green; } + body { line-height: 0; } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/focus-area-percent-units-1-ref.html b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html new file mode 100644 index 0000000000..6c66d5f178 --- /dev/null +++ b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <title>Reference case for bug 1272983</title> + <style> + /* Set explicit font size so that em units are predictable: */ + body, button { font: 10px sans-serif; } + + /* Set margin to 0 for all cases. In the first 6, that's how we expect + the testcase to render; and in the 7th and 8th, our reference margin + will be applied via a child div instead of via the pseudo-element. */ + button.mfi1::-moz-focus-inner, + button.mfi2::-moz-focus-inner, + button.mfi3::-moz-focus-inner, + button.mfi4::-moz-focus-inner, + button.mfi5::-moz-focus-inner, + button.mfi6::-moz-focus-inner, + button.mfi7::-moz-focus-inner, + button.mfi8::-moz-focus-inner { margin: 0; } + + /* Use an explicit div instead of pseudo-element, for reference case's + version of margin values that we actually expect to take effect: */ + button.mfi7 > div { margin: 10px; } + button.mfi8 > div { margin: 20px; /* = 2em * 20px/em */ } + </style> +</head> +<body> + <button class="mfi1">mfi1</button> + <button class="mfi2">mfi2</button> + <button class="mfi3">mfi3</button> + <button class="mfi4">mfi4</button> + <br> + <button class="mfi5">mfi5</button> + <button class="mfi6">mfi6</button> + <button class="mfi7"><div>mfi7</div></button> + <button class="mfi8"><div>mfi8</div></button> + <br> + + <button class="mfo1">mfo1</button> + <button class="mfo2">mfo2</button> + <button class="mfo3">mfo3</button> + <button class="mfo4">mfo4</button> + <br> + <button class="mfo5">mfo5</button> + <button class="mfo6">mfo6</button> + <button class="mfo7">mfo7</button> + <button class="mfo8">mfo8</button> + <br> +</body> +</html> diff --git a/layout/reftests/forms/button/focus-area-percent-units-1.html b/layout/reftests/forms/button/focus-area-percent-units-1.html new file mode 100644 index 0000000000..17d65b3b02 --- /dev/null +++ b/layout/reftests/forms/button/focus-area-percent-units-1.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only + support CSS "margin" values that contain absolute lengths. Any percent or + "auto" margin values will simply make the margin collapse to zero. + This test verifies that this is indeed what happens (not anything worse). +--> +<head> + <title>Testcase for bug 1272983</title> + <style> + /* Set explicit font size so that em units are predictable: */ + body, button { font: 10px sans-serif; } + + /* Testing percent and auto margin values on "-moz-focus-inner": */ + button.mfi1::-moz-focus-inner { margin: 50%; } + button.mfi2::-moz-focus-inner { margin: 50% 10px; } + button.mfi3::-moz-focus-inner { margin: 10px 50%; } + button.mfi4::-moz-focus-inner { margin: auto; } + button.mfi5::-moz-focus-inner { margin: auto 10px; } + button.mfi6::-moz-focus-inner { margin: 10px auto; } + button.mfi7::-moz-focus-inner { margin: 10px; } + button.mfi8::-moz-focus-inner { margin: 2em; } + + /* Testing percent and auto margin values on "-moz-focus-outer": + (just for completeness -- really, 'margin' has no effect on + the behavior of -moz-focus-outer) */ + button.mfo1::-moz-focus-outer { margin: 50%; } + button.mfo2::-moz-focus-outer { margin: 50% 10px; } + button.mfo3::-moz-focus-outer { margin: 10px 50%; } + button.mfo4::-moz-focus-outer { margin: auto; } + button.mfo5::-moz-focus-outer { margin: auto 10px; } + button.mfo6::-moz-focus-outer { margin: 10px auto; } + button.mfo7::-moz-focus-outer { margin: 10px; } + button.mfo8::-moz-focus-outer { margin: 2em; } + </style> +</head> +<body> + <button class="mfi1">mfi1</button> + <button class="mfi2">mfi2</button> + <button class="mfi3">mfi3</button> + <button class="mfi4">mfi4</button> + <br> + <button class="mfi5">mfi5</button> + <button class="mfi6">mfi6</button> + <button class="mfi7">mfi7</button> + <button class="mfi8">mfi8</button> + <br> + + <button class="mfo1">mfo1</button> + <button class="mfo2">mfo2</button> + <button class="mfo3">mfo3</button> + <button class="mfo4">mfo4</button> + <br> + <button class="mfo5">mfo5</button> + <button class="mfo6">mfo6</button> + <button class="mfo7">mfo7</button> + <button class="mfo8">mfo8</button> + <br> +</body> +</html> diff --git a/layout/reftests/forms/button/focus-area-percent-units-2-ref.html b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html new file mode 100644 index 0000000000..6b6a6056d4 --- /dev/null +++ b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <title>Reference case for bug 1272983</title> + <style> + /* Set explicit font size so that em units are predictable: */ + body, button { font: 10px sans-serif; } + + /* Add outline to help visualize the padding outside of buttons: */ + button { outline: 1px solid black; } + + /* Set padding to 0 for all cases. In the first 3, that's how we expect + the testcase to render; and in the 4th and 5th, our reference padding + will be applied via a child div instead of via the pseudo-element. */ + button.mfi1::-moz-focus-inner, + button.mfi2::-moz-focus-inner, + button.mfi3::-moz-focus-inner, + button.mfi4::-moz-focus-inner, + button.mfi5::-moz-focus-inner { padding: 0; } + + /* Use an explicit div instead of pseudo-element, for reference case's + version of padding values that we actually expect to take effect: */ + button.mfi4 > div { padding: 10px; } + button.mfi5 > div { padding: 2em; } + + /* As above, set padding to 0 for all cases: */ + button.mfo1::-moz-focus-outer, + button.mfo2::-moz-focus-outer, + button.mfo3::-moz-focus-outer, + button.mfo4::-moz-focus-outer, + button.mfo5::-moz-focus-outer { padding: 0; } + + /* To make reference for -moz-focus-outer padding that we expect to + take effect, we'll put the padding on a wrapper-div (and bump the + button's outline to that div). */ + div.mfo4-wrapper { padding: 10px; } + div.mfo5-wrapper { padding: 20px; /* = 2em * 10px/em */ } + + button.mfo4, + button.mfo5 { outline: none; } + div.mfo4-wrapper, + div.mfo5-wrapper { display: inline-block; outline: 1px solid black; } + </style> +</head> +<body> + <button class="mfi1">mfi1</button> + <button class="mfi2">mfi2</button> + <button class="mfi3">mfi3</button> + <br> + <button class="mfi4"><div>mfi4</div></button> + <button class="mfi5"><div>mfi5</div></button> + <br> + + <button class="mfo1">mfo1</button> + <button class="mfo2">mfo2</button> + <button class="mfo3">mfo3</button> + <br> + <div class="mfo4-wrapper"> + <button class="mfo4">mfo4</button> + </div> + <div class="mfo5-wrapper"> + <button class="mfo5">mfo5</button> + </div> + <br> +</body> +</html> diff --git a/layout/reftests/forms/button/focus-area-percent-units-2.html b/layout/reftests/forms/button/focus-area-percent-units-2.html new file mode 100644 index 0000000000..3c0cb8612f --- /dev/null +++ b/layout/reftests/forms/button/focus-area-percent-units-2.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only + support CSS "padding" values that contain absolute lengths. Any percent + padding values will simply make the padding collapse to zero. + This test verifies that this is indeed what happens (not anything worse). +--> +<head> + <title>Testcase for bug 1272983</title> + <style> + /* Set explicit font size so that em units are predictable: */ + body, button { font: 10px sans-serif; } + + /* Add outline to help visualize the padding outside of buttons: */ + button { outline: 1px solid black; } + + /* Testing percent and auto padding values on "-moz-focus-inner": */ + button.mfi1::-moz-focus-inner { padding: 50%; } + button.mfi2::-moz-focus-inner { padding: 50% 10px; } + button.mfi3::-moz-focus-inner { padding: 10px 50%; } + button.mfi4::-moz-focus-inner { padding: 10px; } + button.mfi5::-moz-focus-inner { padding: 2em; } + + /* Testing percent and auto padding values on "-moz-focus-outer": */ + button.mfo1::-moz-focus-outer { padding: 50%; } + button.mfo2::-moz-focus-outer { padding: 50% 10px; } + button.mfo3::-moz-focus-outer { padding: 10px 50%; } + button.mfo4::-moz-focus-outer { padding: 10px; } + button.mfo5::-moz-focus-outer { padding: 2em; } + </style> +</head> +<body> + <button class="mfi1">mfi1</button> + <button class="mfi2">mfi2</button> + <button class="mfi3">mfi3</button> + <br> + <button class="mfi4">mfi4</button> + <button class="mfi5">mfi5</button> + <br> + + <button class="mfo1">mfo1</button> + <button class="mfo2">mfo2</button> + <button class="mfo3">mfo3</button> + <br> + <button class="mfo4">mfo4</button> + <button class="mfo5">mfo5</button> + <br> +</body> +</html> diff --git a/layout/reftests/forms/button/line-height-button-0.5.html b/layout/reftests/forms/button/line-height-button-0.5.html new file mode 100644 index 0000000000..e3343d9e42 --- /dev/null +++ b/layout/reftests/forms/button/line-height-button-0.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +button { line-height: 0.5 } + +</style> +<button>button input</button> diff --git a/layout/reftests/forms/button/line-height-button-1.0.html b/layout/reftests/forms/button/line-height-button-1.0.html new file mode 100644 index 0000000000..2685624dc0 --- /dev/null +++ b/layout/reftests/forms/button/line-height-button-1.0.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +button { line-height: 1.0 } + +</style> +<button>button input</button> diff --git a/layout/reftests/forms/button/line-height-button-1.5.html b/layout/reftests/forms/button/line-height-button-1.5.html new file mode 100644 index 0000000000..f86839fc3c --- /dev/null +++ b/layout/reftests/forms/button/line-height-button-1.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +button { line-height: 1.5 } + +</style> +<button>button input</button> diff --git a/layout/reftests/forms/button/line-height-input-0.5.html b/layout/reftests/forms/button/line-height-input-0.5.html new file mode 100644 index 0000000000..e3b6dd9200 --- /dev/null +++ b/layout/reftests/forms/button/line-height-input-0.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 0.5 } + +</style> +<input type="button" value="button input" size="20"> diff --git a/layout/reftests/forms/button/line-height-input-1.0.html b/layout/reftests/forms/button/line-height-input-1.0.html new file mode 100644 index 0000000000..18f8b4646c --- /dev/null +++ b/layout/reftests/forms/button/line-height-input-1.0.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 1.0 } + +</style> +<input type="button" value="button input" size="20"> diff --git a/layout/reftests/forms/button/line-height-input-1.5.html b/layout/reftests/forms/button/line-height-input-1.5.html new file mode 100644 index 0000000000..ea486d14ea --- /dev/null +++ b/layout/reftests/forms/button/line-height-input-1.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 1.5 } + +</style> +<input type="button" value="button input" size="20"> diff --git a/layout/reftests/forms/button/max-height-ref.html b/layout/reftests/forms/button/max-height-ref.html new file mode 100644 index 0000000000..ea12a86681 --- /dev/null +++ b/layout/reftests/forms/button/max-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + button { + height: 50px; + padding: 23px; + border: 1px solid black; + box-sizing: border-box; + overflow: hidden; + } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/max-height.html b/layout/reftests/forms/button/max-height.html new file mode 100644 index 0000000000..87ac8a979c --- /dev/null +++ b/layout/reftests/forms/button/max-height.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + button { + max-height: 50px; + padding: 23px; + border: 1px solid black; + box-sizing: border-box; + overflow: hidden; + } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/min-height-ref.html b/layout/reftests/forms/button/min-height-ref.html new file mode 100644 index 0000000000..5f0f2d654e --- /dev/null +++ b/layout/reftests/forms/button/min-height-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=utf-8"> +<style> +.btn1, .btn2 { + border: 5px solid green; + background-color: blue; + height: 50px; +} +</style> +</head> +<body> +<input type='submit' class='btn1' value='' /> +<input type='submit' class='btn2' value='' /> +</body> +</html> diff --git a/layout/reftests/forms/button/min-height.html b/layout/reftests/forms/button/min-height.html new file mode 100644 index 0000000000..cadffa78d5 --- /dev/null +++ b/layout/reftests/forms/button/min-height.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=utf-8"> +<style> +.btn1, .btn2 { + border: 5px solid green; + background-color: blue; +} +.btn1 { + min-height: 50px; +} +.btn2 { + height: 50px; +} +</style> +</head> +<body> +<input type='submit' class='btn1' value='' /> +<input type='submit' class='btn2' value='' /> +</body> +</html> diff --git a/layout/reftests/forms/button/overflow-areas-1-ref.html b/layout/reftests/forms/button/overflow-areas-1-ref.html new file mode 100644 index 0000000000..a1eb505753 --- /dev/null +++ b/layout/reftests/forms/button/overflow-areas-1-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <title>Reference case</title> + <style> + input, button { + border: 0; /* Combined, these mean the gray area is the */ + background: lightgray; /* border-box size. */ + + outline: 2px solid black; /* The outlined area is the overflow area. */ + width: 1px; /* (To attempt to trigger overflow) */ + + display: block; /* Put each button on its own line, w/ some margin, */ + margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */ + + font: 8px serif; /* (This just lets the testcase fit better on mobile.) */ + } + + .oh { overflow: hidden } + </style> +</head> +<body> + <!-- For the reference case, we just put "overflow:hidden" on everything. --> + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <!-- ...with one exception: button with (default) overflow:visible. + Such buttons *do* actually allow their contents to overflow. --> + <button>ActualButton</button> + + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <button class="oh">ActualButton</button> + + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <button class="oh">ActualButton</button> + + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <button class="oh">ActualButton</button> +</body> +</html> diff --git a/layout/reftests/forms/button/overflow-areas-1.html b/layout/reftests/forms/button/overflow-areas-1.html new file mode 100644 index 0000000000..b1a34dfe40 --- /dev/null +++ b/layout/reftests/forms/button/overflow-areas-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<!-- For buttons whose painting gets clipped to their border-box area, + we should *also* clip their overflow area (as exposed via 'outline'). + This test exposes these areas so they can be visualized, and checks that + they match when we expect them to. --> +<head> + <title>Testcase for bug 1261284</title> + <style> + input, button { + border: 0; /* Combined, these mean the gray area is the */ + background: lightgray; /* border-box size. */ + + outline: 2px solid black; /* The outlined area is the overflow area. */ + width: 1px; /* (To attempt to trigger overflow) */ + + display: block; /* Put each button on its own line, w/ some margin, */ + margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */ + + font: 8px serif; /* (This just lets the testcase fit better on mobile.) */ + } + + .oh { overflow: hidden } + .oa { overflow: auto } + .os { overflow: scroll } + </style> +</head> +<body> + <input type="reset"> + <input type="submit"> + <input type="button" value="InputTypeButton"> + <button>ActualButton</button> + + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <button class="oh">ActualButton</button> + + <input class="oa" type="reset"> + <input class="oa" type="submit"> + <input class="oa" type="button" value="InputTypeButton"> + <button class="oa">ActualButton</button> + + <input class="os" type="reset"> + <input class="os" type="submit"> + <input class="os" type="button" value="InputTypeButton"> + <button class="os">ActualButton</button> +</body> +</html> diff --git a/layout/reftests/forms/button/percent-height-child-1-ref.html b/layout/reftests/forms/button/percent-height-child-1-ref.html new file mode 100644 index 0000000000..b2b8109587 --- /dev/null +++ b/layout/reftests/forms/button/percent-height-child-1-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<style> +div.button { + display: inline-block; + width: 80px; + border: 0; + padding: 0; + + font: 10px sans-serif; + text-align: center; + vertical-align: top; + + color: black; + background: gray; +} + +div.p80 { + background: pink; +} + +div.p100 { + background: yellow; +} +</style> +</head> +<body> +<!--Button has explicit height for us to resolve against: --> +<div class="button" style="height: 100px"> + <div class="p80" style="margin-top: 10px; height: 80px">abc</div> +</div> + +<div class="button" style="height: 100px"> + <div class="p100" style="height: 100px">abc</div> +</div> + +<!--Button is using intrinsic height: --> +<div class="button"> + <div class="p80">abc</div> +</div> + +<div class="button"> + <div class="p100">abc</div> +</div> + +</body> +</html> diff --git a/layout/reftests/forms/button/percent-height-child-1.html b/layout/reftests/forms/button/percent-height-child-1.html new file mode 100644 index 0000000000..c676715c23 --- /dev/null +++ b/layout/reftests/forms/button/percent-height-child-1.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This test verifies that we honor percent heights on content inside of + a <button> element (resolving the percent against the <button>). + (In this testcase, the button has no focus-border/padding.) --> +<html> +<head> +<style> +button { + width: 80px; + border: 0; + padding: 0; + + font: 10px sans-serif; + vertical-align: top; + + color: black; + background: gray; + -moz-appearance: none; +} +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +div.p80 { + height: 80%; + background: pink; +} + +div.p100 { + height: 100%; + background: yellow; +} +</style> +</head> +<body> +<!--Button has explicit height for us to resolve against: --> +<button style="height: 100px"> + <div class="p80">abc</div> +</button> + +<button style="height: 100px"> + <div class="p100">abc</div> +</button> + +<!--Button is using intrinsic height: --> +<button> + <div class="p80">abc</div> +</button> + +<button> + <div class="p100">abc</div> +</button> + +</body> +</html> diff --git a/layout/reftests/forms/button/percent-height-child-2-ref.html b/layout/reftests/forms/button/percent-height-child-2-ref.html new file mode 100644 index 0000000000..7491ed71e4 --- /dev/null +++ b/layout/reftests/forms/button/percent-height-child-2-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<style> +div.button { + display: inline-block; + width: 78px; + border: 0; + + /* Padding to match the -moz-focus-inner border/padding in testcase: */ + padding: 7px 1px 3px; + + font: 10px sans-serif; + text-align: center; + vertical-align: top; + + color: black; + background: gray; +} + +div.p80 { + background: pink; +} + +div.p100 { + background: yellow; +} +</style> +</head> +<body> +<!--Button has explicit height for us to resolve against: --> +<div class="button" style="height: 100px"> + <div class="p80" style="margin-top: 10px; height: 80px">abc</div> +</div> + +<div class="button" style="height: 100px"> + <div class="p100" style="height: 100px">abc</div> +</div> + +<!--Button is using intrinsic height: --> +<div class="button"> + <div class="p80">abc</div> +</div> + +<div class="button"> + <div class="p100">abc</div> +</div> + +</body> +</html> diff --git a/layout/reftests/forms/button/percent-height-child-2.html b/layout/reftests/forms/button/percent-height-child-2.html new file mode 100644 index 0000000000..7eecea1ad4 --- /dev/null +++ b/layout/reftests/forms/button/percent-height-child-2.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This test verifies that we honor percent heights on content inside of + a <button> element (resolving the percent against the <button>). + (In this testcase, the button has some focus-border/padding, which + occupies part of the button's content-box and which we'll have to + subtract out from the button's size before using it to resolve + percentages sizes.) --> +<html> +<head> +<style> +button { + width: 80px; + border: 0; + padding: 0; + + font: 10px sans-serif; + vertical-align: top; + + color: black; + background: gray; + -moz-appearance: none; +} +button::-moz-focus-inner { + padding: 6px 0 2px; + border: 1px dotted transparent; +} + +div.p80 { + height: 80%; + background: pink; +} + +div.p100 { + height: 100%; + background: yellow; +} +</style> +</head> +<body> +<!--Button has explicit height for us to resolve against: --> +<button style="height: 110px"> + <div class="p80">abc</div> +</button> + +<button style="height: 110px"> + <div class="p100">abc</div> +</button> + +<!--Button is using intrinsic height: --> +<button> + <div class="p80">abc</div> +</button> + +<button> + <div class="p100">abc</div> +</button> + +</body> +</html> diff --git a/layout/reftests/forms/button/percent-width-child-1-ref.html b/layout/reftests/forms/button/percent-width-child-1-ref.html new file mode 100644 index 0000000000..dcc2289944 --- /dev/null +++ b/layout/reftests/forms/button/percent-width-child-1-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<style> +div.button { + display: inline-block; + border: 0; + padding: 0; + + font: 10px sans-serif; + text-align: center; + vertical-align: top; + + color: black; + background: gray; +} + +div.p80 { + width: 80%; + background: pink; +} + +div.p100 { + width: 100%; + background: yellow; +} +</style> +</head> +<body> +<!--Button has explicit width for us to resolve against: --> +<div class="button" style="width: 100px"> + <div class="p80">abc</div> +</div> + +<div class="button" style="width: 100px"> + <div class="p100">abc</div> +</div> + +<!--Button is using intrinsic width: --> +<div class="button"> + <div class="p80">abc</div> +</div> + +<div class="button"> + <div class="p100">abc</div> +</div> + +</body> +</html> diff --git a/layout/reftests/forms/button/percent-width-child-1.html b/layout/reftests/forms/button/percent-width-child-1.html new file mode 100644 index 0000000000..fdd2b49236 --- /dev/null +++ b/layout/reftests/forms/button/percent-width-child-1.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This test verifies that we honor percent widths on content inside of + a <button> element (resolving the percent against the <button>). + (In this testcase, the button has no focus-border/padding.) --> +<html> +<head> +<style> +button { + border: 0; + padding: 0; + + font: 10px sans-serif; + vertical-align: top; + + color: black; + background: gray; + -moz-appearance: none; +} +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +div.p80 { + width: 80%; + background: pink; +} + +div.p100 { + width: 100%; + background: yellow; +} +</style> +</head> +<body> +<!--Button has explicit width for us to resolve against: --> +<button style="width: 100px"> + <div class="p80">abc</div> +</button> + +<button style="width: 100px"> + <div class="p100">abc</div> +</button> + +<!--Button is using intrinsic width: --> +<button> + <div class="p80">abc</div> +</button> + +<button> + <div class="p100">abc</div> +</button> + +</body> +</html> diff --git a/layout/reftests/forms/button/percent-width-child-2-ref.html b/layout/reftests/forms/button/percent-width-child-2-ref.html new file mode 100644 index 0000000000..19a24a7375 --- /dev/null +++ b/layout/reftests/forms/button/percent-width-child-2-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> +<style> +div.button { + display: inline-block; + border: 0; + + /* Padding to match the -moz-focus-inner border/padding in testcase: */ + padding: 1px 7px 1px 3px; + + font: 10px sans-serif; + text-align: center; + vertical-align: top; + + color: black; + background: gray; +} + +div.p80 { + width: 80%; + background: pink; +} + +div.p100 { + width: 100%; + background: yellow; +} +</style> +</head> +<body> +<!--Button has explicit width for us to resolve against: --> +<div class="button" style="width: 100px"> + <div class="p80">abc</div> +</div> + +<div class="button" style="width: 100px"> + <div class="p100">abc</div> +</div> + +<!--Button is using intrinsic width: --> +<div class="button"> + <div class="p80">abc</div> +</div> + +<div class="button"> + <div class="p100">abc</div> +</div> + +</body> +</html> diff --git a/layout/reftests/forms/button/percent-width-child-2.html b/layout/reftests/forms/button/percent-width-child-2.html new file mode 100644 index 0000000000..d46ff62af5 --- /dev/null +++ b/layout/reftests/forms/button/percent-width-child-2.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- This test verifies that we honor percent widths on content inside of + a <button> element (resolving the percent against the <button>). + (In this testcase, the button has some focus-border/padding, which + occupies part of the button's content-box and which we'll have to + subtract out from the button's size before using it to resolve + percentages sizes.) --> +<html> +<head> +<style> +button { + border: 0; + padding: 0; + + font: 10px sans-serif; + vertical-align: top; + + color: black; + background: gray; + -moz-appearance: none; +} +button::-moz-focus-inner { + padding: 0 6px 0 2px; + border: 1px dotted transparent; +} + +div.p80 { + width: 80%; + background: pink; +} + +div.p100 { + width: 100%; + background: yellow; +} +</style> +</head> +<body> +<!--Button has explicit width for us to resolve against: --> +<button style="width: 110px"> + <div class="p80">abc</div> +</button> + +<button style="width: 110px"> + <div class="p100">abc</div> +</button> + +<!--Button is using intrinsic width: --> +<button> + <div class="p80">abc</div> +</button> + +<button> + <div class="p100">abc</div> +</button> + +</body> +</html> diff --git a/layout/reftests/forms/button/reftest-stylo.list b/layout/reftests/forms/button/reftest-stylo.list new file mode 100644 index 0000000000..c76d15c913 --- /dev/null +++ b/layout/reftests/forms/button/reftest-stylo.list @@ -0,0 +1,61 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== first-letter-1.html first-letter-1.html +== first-letter-1.html first-letter-1.html + +== focus-area-percent-units-1.html focus-area-percent-units-1.html +== focus-area-percent-units-2.html focus-area-percent-units-2.html + +== max-height.html max-height.html +== min-height.html min-height.html +== overflow-areas-1.html overflow-areas-1.html + +# The buttons in these tests have some fancy shading applied to their corners +# on B2G, despite their "-moz-appearance: none; background: gray", so they +# don't quite match the reference case's normal <div>. That's why they're fuzzy. +fuzzy-if(B2G||Mulet||Android,125,20) == percent-height-child-1.html percent-height-child-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +pref(browser.display.focus_ring_width,1) fuzzy-if(B2G||Mulet||Android,125,80) == percent-height-child-2.html percent-height-child-2.html +# Initial mulet triage: parity with B2G/B2G Desktop +fuzzy-if(B2G||Mulet||Android,125,20) == percent-width-child-1.html percent-width-child-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +pref(browser.display.focus_ring_width,1) fuzzy-if(B2G||Mulet||Android,125,80) == percent-width-child-2.html percent-width-child-2.html +# Initial mulet triage: parity with B2G/B2G Desktop + +== vertical-centering.html vertical-centering.html + +== line-height-button-0.5.html line-height-button-0.5.html +== line-height-button-1.5.html line-height-button-1.5.html +== line-height-input-0.5.html line-height-input-0.5.html +== line-height-input-1.5.html line-height-input-1.5.html + +# Looks like Android and B2G change the text color, but to something slightly +# different from ColorGray +fails-if(Android||B2G||Mulet) == disabled-1.html disabled-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +== disabled-2.html disabled-2.html + +== disabled-3.html disabled-3.html +== disabled-4.html disabled-4.html +== disabled-5.html disabled-5.html +== disabled-6.html disabled-6.html + +fails-if(B2G||Mulet) == width-auto-size-em-ltr.html width-auto-size-em-ltr.html +# Bug 1145672 +# Bug 1150486 +fails-if(B2G||Mulet) == width-auto-size-ltr.html width-auto-size-ltr.html +# Bug 1145672 +# Bug 1150486 +== width-exact-fit-ltr.html width-exact-fit-ltr.html +== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr.html +== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr.html +== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr.html +fails-if(B2G||Mulet) == width-auto-size-em-rtl.html width-auto-size-em-rtl.html +# Bug 1145672 +# Bug 1150486 +fails-if(B2G||Mulet) == width-auto-size-rtl.html width-auto-size-rtl.html +# Bug 1145672 +# Bug 1150486 +== width-exact-fit-rtl.html width-exact-fit-rtl.html +== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl.html +== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl.html +== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl.html diff --git a/layout/reftests/forms/button/reftest.list b/layout/reftests/forms/button/reftest.list new file mode 100644 index 0000000000..cefec2e85d --- /dev/null +++ b/layout/reftests/forms/button/reftest.list @@ -0,0 +1,48 @@ +== first-letter-1.html first-letter-1-ref.html +!= first-letter-1.html first-letter-1-noref.html + +== focus-area-percent-units-1.html focus-area-percent-units-1-ref.html +== focus-area-percent-units-2.html focus-area-percent-units-2-ref.html + +== max-height.html max-height-ref.html +== min-height.html min-height-ref.html +== overflow-areas-1.html overflow-areas-1-ref.html + +# The buttons in these tests have some fancy shading applied to their corners +# on Android, despite their "-moz-appearance: none; background: gray", so they +# don't quite match the reference case's normal <div>. That's why they're fuzzy. +fuzzy-if(Android,125,20) == percent-height-child-1.html percent-height-child-1-ref.html +pref(browser.display.focus_ring_width,1) fuzzy-if(Android,125,80) == percent-height-child-2.html percent-height-child-2-ref.html +fuzzy-if(Android,125,20) == percent-width-child-1.html percent-width-child-1-ref.html +pref(browser.display.focus_ring_width,1) fuzzy-if(Android,125,80) == percent-width-child-2.html percent-width-child-2-ref.html + +== vertical-centering.html vertical-centering-ref.html + +!= line-height-button-0.5.html line-height-button-1.0.html +!= line-height-button-1.5.html line-height-button-1.0.html +!= line-height-input-0.5.html line-height-input-1.0.html +!= line-height-input-1.5.html line-height-input-1.0.html + +# Looks like Android changes the text color, but to something slightly +# different from ColorGray +fails-if(Android) == disabled-1.html disabled-1-ref.html +== disabled-2.html disabled-2-ref.html + +!= disabled-3.html disabled-3-notref.html +!= disabled-4.html disabled-4-notref.html +!= disabled-5.html disabled-5-notref.html +!= disabled-6.html disabled-6-notref.html + +== width-auto-size-em-ltr.html width-auto-size-em-ltr-ref.html +== width-auto-size-ltr.html width-auto-size-ltr-ref.html +== width-exact-fit-ltr.html width-auto-size-ltr-ref.html +== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr-ref.html +== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr-ref.html +== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr-ref.html +== width-auto-size-em-rtl.html width-auto-size-em-rtl-ref.html +== width-auto-size-rtl.html width-auto-size-rtl-ref.html +== width-exact-fit-rtl.html width-auto-size-rtl-ref.html +== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl-ref.html +== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl-ref.html +== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl-ref.html +== display-grid-flex-columnset.html display-grid-flex-columnset-ref.html diff --git a/layout/reftests/forms/button/vertical-centering-ref.html b/layout/reftests/forms/button/vertical-centering-ref.html new file mode 100644 index 0000000000..aa6d763676 --- /dev/null +++ b/layout/reftests/forms/button/vertical-centering-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + height: 100px; + display: inline-block; + border: 0; + padding: 0; + + font: 2em/100px sans-serif; + text-align: center; + + background: transparent; + color: black; +} +</style> +</head> +<body> +<div>button</div> +<div>button</div> +</body> +</html> diff --git a/layout/reftests/forms/button/vertical-centering.html b/layout/reftests/forms/button/vertical-centering.html new file mode 100644 index 0000000000..08ca385191 --- /dev/null +++ b/layout/reftests/forms/button/vertical-centering.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<style> +input, div { + height: 100px; + display: inline-block; + border: 0; + padding: 0; + + font: 2em sans-serif; + + background: transparent; + color: black; +} +input { + -moz-appearance: none; +} +input::-moz-focus-inner { + padding: 0; + border: 0; +} +div { + line-height: 100px; + text-align: center; +} +</style> +</head> +<body> +<input type='button' value='button' /> +<div>button</div> +</body> +</html> diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html new file mode 100644 index 0000000000..1e7ab40bba --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; + margin: 1px 3px; /* for implicit focuspadding */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr.html b/layout/reftests/forms/button/width-auto-size-em-ltr.html new file mode 100644 index 0000000000..3285c3e955 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-em-ltr.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 1em; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html new file mode 100644 index 0000000000..1214714744 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; + margin: 1px 3px; /* for implicit focuspadding */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl.html b/layout/reftests/forms/button/width-auto-size-em-rtl.html new file mode 100644 index 0000000000..fb72ef97e9 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-em-rtl.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 1em; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-auto-size-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-ltr-ref.html new file mode 100644 index 0000000000..c1ba89860e --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px 3px; /* for implicit focuspadding */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-auto-size-ltr.html b/layout/reftests/forms/button/width-auto-size-ltr.html new file mode 100644 index 0000000000..c8f3f7d110 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-ltr.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-auto-size-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-rtl-ref.html new file mode 100644 index 0000000000..3e09016dc3 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-rtl-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px 3px; /* for implicit focuspadding */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-auto-size-rtl.html b/layout/reftests/forms/button/width-auto-size-rtl.html new file mode 100644 index 0000000000..7ae3092f94 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-rtl.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html new file mode 100644 index 0000000000..c85da00e3c --- /dev/null +++ b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px 0px; /* for implicit focuspadding, fully eroded */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html new file mode 100644 index 0000000000..4978a57e4e --- /dev/null +++ b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 62px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html new file mode 100644 index 0000000000..762e443f81 --- /dev/null +++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px 0px; /* for implicit focuspadding, fully eroded */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html new file mode 100644 index 0000000000..d4b028b48e --- /dev/null +++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 62px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html new file mode 100644 index 0000000000..6f7047cce3 --- /dev/null +++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px -2px 1px 0; /* for implicit focuspadding, fully eroded and overflowed */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html new file mode 100644 index 0000000000..daecef56e4 --- /dev/null +++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 60px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html new file mode 100644 index 0000000000..1b36154cfc --- /dev/null +++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px 0 1px -2px; /* for implicit focuspadding, fully eroded and overflowed */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html new file mode 100644 index 0000000000..b76a3957a5 --- /dev/null +++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 60px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html new file mode 100644 index 0000000000..59cbd02086 --- /dev/null +++ b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px 2px; /* for implicit focuspadding, partly eroded */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html new file mode 100644 index 0000000000..c0d64b2797 --- /dev/null +++ b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 66px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html new file mode 100644 index 0000000000..0765a673df --- /dev/null +++ b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px 2px; /* for implicit focuspadding, partly eroded */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html new file mode 100644 index 0000000000..9b88269385 --- /dev/null +++ b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 66px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html new file mode 100644 index 0000000000..58db0aa70c --- /dev/null +++ b/layout/reftests/forms/button/width-exact-fit-ltr.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 68px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html new file mode 100644 index 0000000000..996a69d831 --- /dev/null +++ b/layout/reftests/forms/button/width-exact-fit-rtl.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 68px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> |