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 | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/forms')
563 files changed, 13417 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 000000000..c408ec16f --- /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 000000000..6bcba667b --- /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 000000000..53958f76b --- /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 000000000..a77287dfe --- /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 000000000..bd8b45774 --- /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 000000000..440d43b53 --- /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 000000000..41fe9e610 --- /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 000000000..38f71544a --- /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 000000000..d944d0421 --- /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 000000000..ded7c1905 --- /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 000000000..c6f0abce6 --- /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 000000000..2a1d9cfa7 --- /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 000000000..a176dd3e8 --- /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 000000000..86c8f587a --- /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 000000000..d59db575f --- /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 000000000..34ffa64f2 --- /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 000000000..3dbf1667f --- /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 000000000..6c66d5f17 --- /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 000000000..17d65b3b0 --- /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 000000000..6b6a6056d --- /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 000000000..3c0cb8612 --- /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 000000000..e3343d9e4 --- /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 000000000..2685624dc --- /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 000000000..f86839fc3 --- /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 000000000..e3b6dd920 --- /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 000000000..18f8b4646 --- /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 000000000..ea486d14e --- /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 000000000..ea12a8668 --- /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 000000000..87ac8a979 --- /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 000000000..5f0f2d654 --- /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 000000000..cadffa78d --- /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 000000000..a1eb50575 --- /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 000000000..b1a34dfe4 --- /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 000000000..b2b810958 --- /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 000000000..c676715c2 --- /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 000000000..7491ed71e --- /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 000000000..7eecea1ad --- /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 000000000..dcc228994 --- /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 000000000..fdd2b4923 --- /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 000000000..19a24a737 --- /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 000000000..d46ff62af --- /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 000000000..c76d15c91 --- /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 000000000..cefec2e85 --- /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 000000000..aa6d76367 --- /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 000000000..08ca38519 --- /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 000000000..1e7ab40bb --- /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 000000000..3285c3e95 --- /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 000000000..121471474 --- /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 000000000..fb72ef97e --- /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 000000000..c1ba89860 --- /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 000000000..c8f3f7d11 --- /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 000000000..3e09016dc --- /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 000000000..7ae3092f9 --- /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 000000000..c85da00e3 --- /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 000000000..4978a57e4 --- /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 000000000..762e443f8 --- /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 000000000..d4b028b48 --- /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 000000000..6f7047cce --- /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 000000000..daecef56e --- /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 000000000..1b36154cf --- /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 000000000..b76a3957a --- /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 000000000..59cbd0208 --- /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 000000000..c0d64b279 --- /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 000000000..0765a673d --- /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 000000000..9b8826938 --- /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 000000000..58db0aa70 --- /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 000000000..996a69d83 --- /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> diff --git a/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html b/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html new file mode 100644 index 000000000..405cfaf0a --- /dev/null +++ b/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html @@ -0,0 +1,79 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 971653</title> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +div { + position: absolute; + background: rgba(0,255,0,0.5); + top:0; bottom:0; + left:0; right:0; + z-index: 0; +} +c { + display: block; + background: blue; + height:100%; +} + +legend { height: 24px; } + +fieldset { + position: absolute; + border: 2px green solid; + width: 100px; + height: 100px; + margin-bottom:40px; +} + +#t1,#t3 { padding: 3px 5px 7px 11px; } +#t2,#t4 { padding: 0; } + +#t1 div, #t3 div { + /* same numbers as padding above */ + left: -11px; right: -5px; + top: -3px; bottom:-7px; +} + +#t2 { top: 120px; } +#t3 { top: 240px; } +#t4 { top: 360px; } + +x { + position: absolute; + width:100px; + height:100px; +} +#t1 x, #t2 x { + height:78px; /* compensate for legend */ +} + </style> +</head> +<body> + + +<fieldset id="t1"> + <legend>legend</legend> + <x><div></div><c></c></x> +</fieldset> + +<fieldset id="t2"> + <legend>legend</legend> + <x><div></div></x> +</fieldset> + +<fieldset id="t3"> + <x><div></div><c></c></x> +</fieldset> + +<fieldset id="t4"> + <x><div></div></x> +</fieldset> + + +</body> +</html> diff --git a/layout/reftests/forms/fieldset/abs-pos-child-sizing.html b/layout/reftests/forms/fieldset/abs-pos-child-sizing.html new file mode 100644 index 000000000..72d47deac --- /dev/null +++ b/layout/reftests/forms/fieldset/abs-pos-child-sizing.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 971653</title> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +div { + position: absolute; + background: rgba(0,255,0,0.5); + top:0; bottom:0; + left:0; right:0; + z-index: 0; +} +c { + display: block; + background: blue; + height:100%; +} + +legend { height: 24px; } + +fieldset { + position: absolute; + border: 2px green solid; + width: 100px; + height: 100px; + margin-bottom:40px; +} + +#t1,#t3 { padding: 3px 5px 7px 11px; } +#t2,#t4 { padding: 0; } + +#t2 { top: 120px; } +#t3 { top: 240px; } +#t4 { top: 360px; } + </style> +</head> +<body> + + +<fieldset id="t1"> + <legend>legend</legend> + <div></div><c></c> +</fieldset> + +<fieldset id="t2"> + <legend>legend</legend> + <div></div> +</fieldset> + +<fieldset id="t3"> + <div></div><c></c> +</fieldset> + +<fieldset id="t4"> + <div></div> +</fieldset> + + +</body> +</html> diff --git a/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html new file mode 100644 index 000000000..4f2e7ba47 --- /dev/null +++ b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +fieldset { + background:pink; + overflow:hidden; + height:100px; +} +legend::after { content:"legend"; } +p { + background:lime; + height:20px; +} +</style> +</head> +<body> +<fieldset id="f1"><legend></legend><p></p></fieldset> +<br> +<fieldset id="f2"><legend></legend><p></p></fieldset> +<br> +<fieldset id="f3"><legend></legend></fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html new file mode 100644 index 000000000..0870f06a0 --- /dev/null +++ b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> +<style> +fieldset { + background:pink; + overflow:hidden; + height:100px; +} +legend::after { content:"legend"; } +p { + background:lime; + height:20px; +} +</style> +</head> +<body> +<fieldset id="f1"><p></p></fieldset> +<br> +<fieldset id="f2"><p></p></fieldset> +<br> +<fieldset id="f3"></fieldset> +<script> +function doTest() { + f1.appendChild(document.createElement('legend')); + f2.insertBefore(document.createElement('legend'), f2.firstChild); + f3.appendChild(document.createElement('legend')); + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html b/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html new file mode 100644 index 000000000..80b64f8f8 --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<html> +<body> +<style> +p { flex-grow: 1; } +</style> +<fieldset style="overflow:hidden; width:200px; height:200px;"> + <legend>Legend</legend> +<div style="display:flex;"> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +</div> +</fieldset> +<fieldset> + <legend>Legend</legend> +<div style="display:flex;"> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +</div> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-flexbox-001.html b/layout/reftests/forms/fieldset/fieldset-flexbox-001.html new file mode 100644 index 000000000..b78d28cf5 --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-flexbox-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<html> +<body> +<style> +p { flex-grow: 1; } +</style> +<fieldset style="display:flex; overflow:hidden; width:200px; height:200px;"> + <legend>Legend</legend> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +</fieldset> +<fieldset style="display:flex;"> + <legend>Legend</legend> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html b/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html new file mode 100644 index 000000000..f99de2252 --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="overflow:hidden; width:200px; height:200px;"> + <legend>Legend</legend> +<div style="display:grid; grid-template-columns: repeat(4,50px); grid-auto-rows: 20px;"> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +</div> +</fieldset> +<fieldset> + <legend>Legend</legend> +<div style="display:grid; grid-auto-columns: 50px; grid-auto-rows: 20px;"> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +</div> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-grid-001.html b/layout/reftests/forms/fieldset/fieldset-grid-001.html new file mode 100644 index 000000000..37bfaa6be --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-grid-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="display:grid; overflow:hidden; grid-template-columns: repeat(4,50px); grid-auto-rows: 20px; width:200px; height:200px;"> + <legend>Legend</legend> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +</fieldset> +<fieldset style="display:grid; grid-auto-columns: 50px; grid-auto-rows: 20px;"> + <legend>Legend</legend> + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X + <p>X +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html b/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html new file mode 100644 index 000000000..da53b994d --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="width:200px; height:200px; padding:0"> + <legend>Legend</legend> + <div style="overflow:hidden; height:100%;"> + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + </div> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-hidden-1.html b/layout/reftests/forms/fieldset/fieldset-hidden-1.html new file mode 100644 index 000000000..b1046ed72 --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-hidden-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="overflow:hidden; width:200px; height:200px; padding:0"> + <legend>Legend</legend> + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html new file mode 100644 index 000000000..ec0c49ffe --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="width:0; padding:0;"> + <div style="width:400px; height:200px;"></div> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html new file mode 100644 index 000000000..3326dff9b --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="padding:50px; float:left;"> + <div style="width:300px; height:100px;"></div> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html new file mode 100644 index 000000000..9732c7fea --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 261037</title> + <style type="text/css"> +fieldset, div { + background:pink; + overflow:auto; + height:100px; + margin:0; padding:0; border:0; +} +p { + background:blue; + height:100px; + margin:0; padding:0; +} +.overflow { + height:110px; +} +.abs { + position:absolute; + width:100px; + top:250px; +} +p.abs { + top:0;left:0; +} +.b { border:10px solid black; } +.p { padding: 7px 0; } +.p p { height:114px; } + </style> +</head> +<body> + +<div><p></p></div> +<br> +<div><p class="overflow"></p></div> +<br> +<div class="abs"><p class="abs"></p></div> +<br> +<div class="abs" style="left:120px"><p class="abs overflow"></p></div> +<br> +<div class="abs b" style="left:240px"><p class="abs"></p></div> +<br> +<div class="abs b" style="left:370px"><p class="abs overflow"></p></div> +<br> +<div class="abs b p" style="left:510px"><p class="abs"></p></div> +<br> +<div class="abs b p" style="left:640px"><p class="abs overflow"></p></div> + +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html new file mode 100644 index 000000000..d9cf97cf6 --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 261037</title> + <style type="text/css"> +fieldset, div { + background:pink; + overflow:auto; + height:100px; + margin:0; padding:0; border:0; +} +p { + background:blue; + height:100px; + margin:0; padding:0; +} +.overflow { + height:110px; +} +.abs { + position:absolute; + width:100px; + top:250px; +} +p.abs { + top:0;left:0; +} +.b { border:10px solid black; } +.p { padding: 7px 0; } +.p p { height:114px; } + </style> +</head> +<body> + +<fieldset><p></p></fieldset> +<br> +<fieldset><p class="overflow"></p></fieldset> +<br> +<fieldset class="abs"><p class="abs"></p></fieldset> +<br> +<fieldset class="abs" style="left:120px"><p class="abs overflow"></p></fieldset> +<br> +<fieldset class="abs b" style="left:240px"><p class="abs"></p></fieldset> +<br> +<fieldset class="abs b" style="left:370px"><p class="abs overflow"></p></fieldset> +<br> +<fieldset class="abs b p" style="left:510px"><p class="abs"></p></fieldset> +<br> +<fieldset class="abs b p" style="left:640px"><p class="abs overflow"></p></fieldset> + +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html new file mode 100644 index 000000000..bc926d00c --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="width:700px; border:2px solid green; overflow:hidden"> + <fieldset style="padding:140px; width:400px;"> + <legend>Legend</legend> + TextTextTextTextTextText + </fieldset> + <fieldset style="padding:140px; display:inline;"> + <legend>Legend</legend> + TextTextTextTextTextText + </fieldset> + <fieldset style="padding:140px; float:left;"> + <legend>Legend</legend> + TextTextTextTextTextText + </fieldset> +</div> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html new file mode 100644 index 000000000..ab9a66ab1 --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="width:700px; border:2px solid green; overflow:hidden"> + <fieldset style="padding:20%; width:400px;"> + <legend>Legend</legend> + TextTextTextTextTextText + </fieldset> + <fieldset style="padding:20%; display:inline;"> + <legend>Legend</legend> + TextTextTextTextTextText + </fieldset> + <fieldset style="padding:20%; float:left;"> + <legend>Legend</legend> + TextTextTextTextTextText + </fieldset> +</div> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html b/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html new file mode 100644 index 000000000..e8a696bd1 --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="width:200px; height:200px; padding:0"> + <legend>Legend</legend> + <div style="overflow:scroll; height:100%"> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-scroll-1.html b/layout/reftests/forms/fieldset/fieldset-scroll-1.html new file mode 100644 index 000000000..3f4d75daf --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-scroll-1.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="overflow:scroll; width:200px; height:200px; padding:0"> + <legend>Legend</legend> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html b/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html new file mode 100644 index 000000000..dc9bcaf9e --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="width:200px; height:200px; padding:0"> + <legend style="overflow:hidden">Legend</legend> + <div id="d" style="overflow:hidden; height:100%;"> + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + </div> +</fieldset> +<script> +d.scrollTop = 20; +</script> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/fieldset-scrolled-1.html b/layout/reftests/forms/fieldset/fieldset-scrolled-1.html new file mode 100644 index 000000000..12aac6bdd --- /dev/null +++ b/layout/reftests/forms/fieldset/fieldset-scrolled-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body> +<fieldset id="f" style="overflow:hidden; width:200px; height:200px; padding:0"> + <legend style="overflow:hidden">Legend</legend> + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty + <p>Hello Kitty +</fieldset> +<script> +f.scrollTop = 0; +function doTest() { + f.scrollTop = 20; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/legend-rtl-ref.html b/layout/reftests/forms/fieldset/legend-rtl-ref.html new file mode 100644 index 000000000..10fb1d1b2 --- /dev/null +++ b/layout/reftests/forms/fieldset/legend-rtl-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html> +<fieldset><legend style="position:relative;left:20px;">Legend</legend></fieldset> +<fieldset dir="rtl"><legend style="position:relative;right:20px;">Legend</legend></fieldset> +</html> diff --git a/layout/reftests/forms/fieldset/legend-rtl.html b/layout/reftests/forms/fieldset/legend-rtl.html new file mode 100644 index 000000000..7a4f114a0 --- /dev/null +++ b/layout/reftests/forms/fieldset/legend-rtl.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html> +<fieldset><legend dir="rtl" style="position:relative;left:20px;">Legend</legend></fieldset> +<fieldset dir="rtl"><legend dir="ltr" style="position:relative;right:20px;">Legend</legend></fieldset> +</html> diff --git a/layout/reftests/forms/fieldset/overflow-hidden-ref.html b/layout/reftests/forms/fieldset/overflow-hidden-ref.html new file mode 100644 index 000000000..0c00977f5 --- /dev/null +++ b/layout/reftests/forms/fieldset/overflow-hidden-ref.html @@ -0,0 +1,175 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 971933</title> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; + } +#f0 div::before { content: "f0"; } +#f1 div::before { content: "f1"; } +#f2 div::before { content: "f2"; } +#f3 div::before { content: "f3"; } +#f4 div::before { content: "f4"; } +#f5 div::before { content: "f5"; } +#f6 div::before { content: "f6"; } +#f7 div::before { content: "f7"; } +#f8 div::before { content: "f8"; } +#f9 div::before { content: "f9"; } + +legend { background:pink; height:30px; } +div { background:yellow; height:100px; overflow:hidden; } +fieldset { + border-width:0; + padding:0; + margin:0; + margin-top:6px; + outline:1px dotted black; + height:auto; + background:grey; + + padding-bottom:0px; + padding-top:5px; + border:1px solid blue; + border-top-width:7px; +} + +#f1 { } +#f2 { border-top-width:0; } +#f3 { border-width:0; } +#f4 { border-bottom-width:0; } +#f5 { border-width:0; padding:0; } +#f6 { border-width:0; padding-bottom:0; } +#f7 { border-width:0; padding-top:0; } +#f8 { padding-top:0; } +#f9 { padding-bottom:0; } +#f0 { padding:0; } + +#c2 fieldset { height:29px; } + +#c3 fieldset { height:39px; } + +#c4 fieldset { height:29px; } +#c4 legend { height: 20px; } + +#c5 legend { height:21px; } +#c5 fieldset { border-top-width:31px; } + +.col { float:left; width:10ch; margin-left:6px; } + +#c1 div { height:3px; } #c1 #f6 div, #c1 #f9 div, #c1 #f0 div { height:0; } +#c1 #f5 div { height:0px; } + +#c2 div { height:9px; } + #c2 #f1 { padding-bottom:3px; } #c2 #f1 div { height:9px;} + #c2 #f2 { padding-bottom:3px; } #c2 #f2 div { height:3px; } + #c2 #f3 { padding-bottom:3px; } #c2 #f3 div { height:3px; } + #c2 #f4 { padding-bottom:3px; } + #c2 #f5 div { height:0; } + #c2 #f6 div { height:0; } + #c2 #f7 { padding-bottom:3px; } #c2 #f7 div { height:3px; } + #c2 #f8 { padding-bottom:3px; } #c2 #f8 div { height:9px; } + #c2 #f9 div { height:6px; } + #c2 #f0 div { height:6px; } + +#c3 fieldset { padding-bottom:3px; } + #c3 #f1 div { height:19px; } + #c3 #f2 div { height:12px; } + #c3 #f3 div { height:12px; } + #c3 #f4 div { height:19px; } + #c3 #f5 { padding-bottom:0; } #c3 #f5 div { height:9px; } + #c3 #f6 { padding-bottom:0; } #c3 #f6 div { height:9px; } + #c3 #f7 div { height:12px; } + #c3 #f8 div { height:19px; } + #c3 #f9 { padding-bottom:0; } #c3 #f9 div { height:16px; } + #c3 #f0 { padding-bottom:0; } #c3 #f0 div { height:16px; } + +#c4 fieldset { padding-bottom:3px; } + #c4 #f1 div { height:19px; } + #c4 #f2 div { height:12px; } + #c4 #f3 div { height:12px; } + #c4 #f4 div { height:19px; } + #c4 #f5 { padding-bottom:0; } #c4 #f5 div { height:9px; } + #c4 #f6 { padding-bottom:0; } #c4 #f6 div { height:9px; } + #c4 #f7 div { height:12px; } + #c4 #f8 div { height:19px; } + #c4 #f9 { padding-bottom:0; } #c4 #f9 div { height:16px; } + #c4 #f0 { padding-bottom:0; } #c4 #f0 div { height:16px; } + + #c5 #f1 div { height:18px; } + #c5 #f2 div { height:18px; } + #c5 #f3 div { height:18px; } + #c5 #f4 div { height:18px; } + #c5 #f5 div { height:15px; } + #c5 #f6 div { height:15px; } + #c5 #f7 div { height:18px; } + #c5 #f8 div { height:18px; } + #c5 #f9 div { height:15px; } + #c5 #f0 div { height:15px; } + +</style> +</head> +<body> +<span id=c1 class=col>C1 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> +<span id=c2 class=col>C2 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> +<span id=c3 class=col>C3 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> +<span id=c4 class=col>C4 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> +<span id=c5 class=col>C5 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> + +</body> +</html> diff --git a/layout/reftests/forms/fieldset/overflow-hidden.html b/layout/reftests/forms/fieldset/overflow-hidden.html new file mode 100644 index 000000000..480134803 --- /dev/null +++ b/layout/reftests/forms/fieldset/overflow-hidden.html @@ -0,0 +1,125 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 971933</title> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; + } +#f0 div::before { content: "f0"; } +#f1 div::before { content: "f1"; } +#f2 div::before { content: "f2"; } +#f3 div::before { content: "f3"; } +#f4 div::before { content: "f4"; } +#f5 div::before { content: "f5"; } +#f6 div::before { content: "f6"; } +#f7 div::before { content: "f7"; } +#f8 div::before { content: "f8"; } +#f9 div::before { content: "f9"; } + +legend { background:pink; height:30px; } +div { background:yellow; height:100px; } +fieldset { + border-width:0; + padding:0; + margin:0; + margin-top:6px; + outline:1px dotted black; + height:15px; + overflow:hidden; + background:grey; + + padding-bottom:3px; + padding-top:5px; + border:1px solid blue; + border-top-width:7px; +} + +#f1 {} +#f2 { border-top-width:0; } +#f3 { border-width:0; } +#f4 { border-bottom-width:0; } +#f5 { border-width:0; padding:0; } +#f6 { border-width:0; padding-bottom:0; } +#f7 { border-width:0; padding-top:0; } +#f8 { padding-top:0; } +#f9 { padding-bottom:0; } +#f0 { padding:0; } + +#c2 fieldset { height:29px; } + +#c3 fieldset { height:39px; } + +#c4 fieldset { height:29px; } +#c4 legend { height: 20px; } + +#c5 legend { height:21px; } +#c5 fieldset { border-top-width:31px; } + +.col { float:left; width:10ch; margin-left:6px; } +</style> +</head> +<body> +<span id=c1 class=col>C1 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> +<span id=c2 class=col>C2 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> +<span id=c3 class=col>C3 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> +<span id=c4 class=col>C4 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> +<span id=c5 class=col>C5 + <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset> + <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset> +</span> + +</body> +</html> diff --git a/layout/reftests/forms/fieldset/positioned-container-1-ref.html b/layout/reftests/forms/fieldset/positioned-container-1-ref.html new file mode 100644 index 000000000..b7988f379 --- /dev/null +++ b/layout/reftests/forms/fieldset/positioned-container-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="position:relative; overflow:hidden; width:500px; height:500px;"> + <legend>Legend</legend> + <div style="height:1000px;"> + <div style="position:absolute; padding:2px; left:20px; top:20px; background:yellow;">Abs-pos</div> + </div> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/positioned-container-1.html b/layout/reftests/forms/fieldset/positioned-container-1.html new file mode 100644 index 000000000..04e81ca6b --- /dev/null +++ b/layout/reftests/forms/fieldset/positioned-container-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset id="f" style="position:relative; overflow:hidden; width:500px; height:500px;"> + <legend>Legend</legend> + <div style="height:1000px;"> + <div style="position:absolute; padding:2px; left:20px; top:50px; background:yellow;">Abs-pos</div> + </div> +</fieldset> +<script> +f.scrollTop = 30; +</script> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/reftest-stylo.list b/layout/reftests/forms/fieldset/reftest-stylo.list new file mode 100644 index 000000000..d1dd22756 --- /dev/null +++ b/layout/reftests/forms/fieldset/reftest-stylo.list @@ -0,0 +1,19 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +fuzzy-if(skiaContent,2,13) == dynamic-legend-scroll-1.html dynamic-legend-scroll-1.html +== fieldset-hidden-1.html fieldset-hidden-1.html +== fieldset-intrinsic-width-1.html fieldset-intrinsic-width-1.html +== fieldset-percentage-padding-1.html fieldset-percentage-padding-1.html +== fieldset-scroll-1.html fieldset-scroll-1.html +== fieldset-scrolled-1.html fieldset-scrolled-1.html +random-if(B2G||Mulet) == fieldset-overflow-auto-1.html fieldset-overflow-auto-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +fuzzy-if(winWidget&&!layersGPUAccelerated,121,221) == positioned-container-1.html positioned-container-1.html +== relpos-legend-1.html relpos-legend-1.html +== relpos-legend-2.html relpos-legend-2.html +skip-if((B2G&&browserIsRemote)||Mulet) == sticky-legend-1.html sticky-legend-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +fails fuzzy-if(skiaContent,1,40768) == abs-pos-child-sizing.html abs-pos-child-sizing.html +== overflow-hidden.html overflow-hidden.html +== legend-rtl.html legend-rtl.html +== fieldset-grid-001.html fieldset-grid-001.html +== fieldset-flexbox-001.html fieldset-flexbox-001.html diff --git a/layout/reftests/forms/fieldset/reftest.list b/layout/reftests/forms/fieldset/reftest.list new file mode 100644 index 000000000..fdf783053 --- /dev/null +++ b/layout/reftests/forms/fieldset/reftest.list @@ -0,0 +1,16 @@ +fuzzy-if(skiaContent,2,13) == dynamic-legend-scroll-1.html dynamic-legend-scroll-1-ref.html +== fieldset-hidden-1.html fieldset-hidden-1-ref.html +== fieldset-intrinsic-width-1.html fieldset-intrinsic-width-1-ref.html +== fieldset-percentage-padding-1.html fieldset-percentage-padding-1-ref.html +== fieldset-scroll-1.html fieldset-scroll-1-ref.html +== fieldset-scrolled-1.html fieldset-scrolled-1-ref.html +== fieldset-overflow-auto-1.html fieldset-overflow-auto-1-ref.html +fuzzy-if(winWidget&&!layersGPUAccelerated,140,276) == positioned-container-1.html positioned-container-1-ref.html +== relpos-legend-1.html relpos-legend-1-ref.html +== relpos-legend-2.html relpos-legend-2-ref.html +== sticky-legend-1.html sticky-legend-1-ref.html +fuzzy-if(skiaContent,1,40768) == abs-pos-child-sizing.html abs-pos-child-sizing-ref.html +== overflow-hidden.html overflow-hidden-ref.html +== legend-rtl.html legend-rtl-ref.html +== fieldset-grid-001.html fieldset-grid-001-ref.html +== fieldset-flexbox-001.html fieldset-flexbox-001-ref.html diff --git a/layout/reftests/forms/fieldset/relpos-legend-1-ref.html b/layout/reftests/forms/fieldset/relpos-legend-1-ref.html new file mode 100644 index 000000000..c916817dd --- /dev/null +++ b/layout/reftests/forms/fieldset/relpos-legend-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset> + <legend><div style="position:relative; top:20px">Legend</div></legend> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/relpos-legend-1.html b/layout/reftests/forms/fieldset/relpos-legend-1.html new file mode 100644 index 000000000..441dd9219 --- /dev/null +++ b/layout/reftests/forms/fieldset/relpos-legend-1.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset> + <legend style="position:relative; top:20px">Legend</legend> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/relpos-legend-2-ref.html b/layout/reftests/forms/fieldset/relpos-legend-2-ref.html new file mode 100644 index 000000000..4124b074b --- /dev/null +++ b/layout/reftests/forms/fieldset/relpos-legend-2-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset> + <legend><span style="position:relative; top:20px">Legend</span></legend> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/relpos-legend-2.html b/layout/reftests/forms/fieldset/relpos-legend-2.html new file mode 100644 index 000000000..f1be56e26 --- /dev/null +++ b/layout/reftests/forms/fieldset/relpos-legend-2.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset> + <legend style="display:inline; position:relative; top:20px">Legend</legend> +</fieldset> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/sticky-legend-1-ref.html b/layout/reftests/forms/fieldset/sticky-legend-1-ref.html new file mode 100644 index 000000000..892fa4c29 --- /dev/null +++ b/layout/reftests/forms/fieldset/sticky-legend-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="overflow:hidden; height:300px;"> + <legend style="position:fixed; top:0"><div style="width:200px; height:50px; background:yellow;"></div></legend> +</fieldset> +<div style="height:5000px;"></div> +<script> +window.scrollTo(0,100); +</script> +</body> +</html> diff --git a/layout/reftests/forms/fieldset/sticky-legend-1.html b/layout/reftests/forms/fieldset/sticky-legend-1.html new file mode 100644 index 000000000..588ea521f --- /dev/null +++ b/layout/reftests/forms/fieldset/sticky-legend-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> +<fieldset style="overflow:hidden; height:300px;"> + <legend style="position:sticky; top:0;"><div style="width:200px; height:50px; background:yellow;"></div></legend> +</fieldset> +<div style="height:5000px;"></div> +<script> +window.scrollTo(0,100); +</script> +</body> +</html> diff --git a/layout/reftests/forms/input/checkbox/checked-native-notref.html b/layout/reftests/forms/input/checkbox/checked-native-notref.html new file mode 100644 index 000000000..921482afc --- /dev/null +++ b/layout/reftests/forms/input/checkbox/checked-native-notref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="checkbox"> diff --git a/layout/reftests/forms/input/checkbox/checked-native.html b/layout/reftests/forms/input/checkbox/checked-native.html new file mode 100644 index 000000000..50faa46d2 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/checked-native.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="checkbox" checked> diff --git a/layout/reftests/forms/input/checkbox/checked-notref.html b/layout/reftests/forms/input/checkbox/checked-notref.html new file mode 100644 index 000000000..8e5b55cfb --- /dev/null +++ b/layout/reftests/forms/input/checkbox/checked-notref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="checkbox" style="-moz-appearance:none"> diff --git a/layout/reftests/forms/input/checkbox/checked.html b/layout/reftests/forms/input/checkbox/checked.html new file mode 100644 index 000000000..b7d651135 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/checked.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="checkbox" style="-moz-appearance:none" checked> diff --git a/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html b/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html new file mode 100644 index 000000000..380f52286 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 932506</title> + <style> + +input { outline:1px solid black; } + +</style> +</head> +<body> + +<div style="overflow:hidden; width:160px;"> + <div style="float:left; width:799px; border:1px solid blue;"> + <input type="checkbox" checked style="width:400px; visibility:hidden;"> + <input type="checkbox" checked style="width:400px; height:100px; visibility:hidden;"> + </div> +</div> + + +<input type="checkbox" checked style="width:400px;"><br> +<input type="checkbox" checked style="height:100px;"><br> +<input type="checkbox" checked style=""><br> + +<input type="checkbox" checked style="width:400px;"><br> +<input type="checkbox" checked style="height:100px;"><br> +<input type="checkbox" checked style=""><br> + +</body> +</html> diff --git a/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html b/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html new file mode 100644 index 000000000..456864e95 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 932506</title> + <style> + +input { outline:1px solid black; } + +</style> +</head> +<body> + +<div style="overflow:hidden; width:160px;"> + <div style="float:left; width:799px; border:1px solid blue;"> + <input type="checkbox" checked style="width:400px; outline:none;"> + <input type="checkbox" checked style="width:400px; height:100px; outline:none;"> + </div> +</div> + +<input type="checkbox" checked style="width:400px; height:1px;"><br> +<input type="checkbox" checked style="width:1px; height:100px;"><br> +<input type="checkbox" checked style="width:1px; height:1px;"><br> + +<input type="checkbox" checked style="width:400px; height:0;"><br> +<input type="checkbox" checked style="width:0; height:100px;"><br> +<input type="checkbox" checked style="width:0; height:0;"><br> + +</body> +</html> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html new file mode 100644 index 000000000..37ea17655 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html @@ -0,0 +1 @@ +<input type="checkbox" checked style="-moz-appearance: none;"> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-checked.html b/layout/reftests/forms/input/checkbox/indeterminate-checked.html new file mode 100644 index 000000000..7cecf09a0 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-checked.html @@ -0,0 +1 @@ +<input type="checkbox" id="s" checked style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html new file mode 100644 index 000000000..cf16667cb --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html @@ -0,0 +1 @@ +<input type="checkbox" checked> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html b/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html new file mode 100644 index 000000000..91097098c --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html @@ -0,0 +1 @@ +<input type="checkbox" id="s" checked><script>document.getElementById("s").indeterminate = true;</script> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html new file mode 100644 index 000000000..74c06d253 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html @@ -0,0 +1 @@ +<input type="checkbox"> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html new file mode 100644 index 000000000..11832f477 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html @@ -0,0 +1 @@ +<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html b/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html new file mode 100644 index 000000000..02266912a --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html @@ -0,0 +1,7 @@ +<style> +#s { + margin: 50px; +} +</style> + +<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-selector.html b/layout/reftests/forms/input/checkbox/indeterminate-selector.html new file mode 100644 index 000000000..eb23819f9 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-selector.html @@ -0,0 +1,7 @@ +<style> +#s:indeterminate { + margin: 50px; +} +</style> + +<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html new file mode 100644 index 000000000..1055cbef1 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html @@ -0,0 +1 @@ +<input type="checkbox" style="-moz-appearance: none;"> diff --git a/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html new file mode 100644 index 000000000..56a8d0955 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html @@ -0,0 +1 @@ +<input type="checkbox" id="s" style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script> diff --git a/layout/reftests/forms/input/checkbox/label-dynamic-ref.html b/layout/reftests/forms/input/checkbox/label-dynamic-ref.html new file mode 100644 index 000000000..3dbdc48d4 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/label-dynamic-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> + +#c3, #c4 { + display: none; +} + +label[for="c1"], +label[for="c3"] { + background-color: yellow; +} + +</style> + +</head> + +<body> + +<div><input type="checkbox" name="test" id="c1" checked><label for="c1">check #c1</label></div> +<div><input type="checkbox" name="test" id="c2"><label for="c2">check #c2</label></div> +<div><input type="checkbox" name="test" id="c3" checked><label for="c3">check #c3</label></div> +<div><input type="checkbox" name="test" id="c4"><label for="c4">check #c4</label></div> + +</body> +</html> diff --git a/layout/reftests/forms/input/checkbox/label-dynamic.html b/layout/reftests/forms/input/checkbox/label-dynamic.html new file mode 100644 index 000000000..cbbce6817 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/label-dynamic.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> + +#c3, #c4 { + display: none; +} + +input:checked + label { + background-color: yellow; +} + +</style> + +<script type="text/javascript"> + +function toggleAllCheckboxes() +{ + for (var i = 1; i <= 4; ++i) { + var cb = document.getElementById('c'+i); + cb.checked = !cb.checked; + } +} + +</script> +</head> + +<body onload="toggleAllCheckboxes();"> + +<div><input type="checkbox" name="test" id="c1"><label for="c1">check #c1</label></div> +<div><input type="checkbox" name="test" id="c2" checked><label for="c2">check #c2</label></div> +<div><input type="checkbox" name="test" id="c3"><label for="c3">check #c3</label></div> +<div><input type="checkbox" name="test" id="c4" checked><label for="c4">check #c4</label></div> + +</body> +</html> diff --git a/layout/reftests/forms/input/checkbox/radio-stretched-ref.html b/layout/reftests/forms/input/checkbox/radio-stretched-ref.html new file mode 100644 index 000000000..2f2532c0b --- /dev/null +++ b/layout/reftests/forms/input/checkbox/radio-stretched-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<body> + +<form> + <input type="checkbox"/> + <input type="radio"/> +</form> + +</body> +</html> diff --git a/layout/reftests/forms/input/checkbox/radio-stretched.html b/layout/reftests/forms/input/checkbox/radio-stretched.html new file mode 100644 index 000000000..159a2cc92 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/radio-stretched.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<body> + +<form> + <input type="checkbox" style="width: auto;"> + <input type="radio" style="width: auto;"> +</form> + +</body> +</html> diff --git a/layout/reftests/forms/input/checkbox/reftest-stylo.list b/layout/reftests/forms/input/checkbox/reftest-stylo.list new file mode 100644 index 000000000..11fe7d778 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/reftest-stylo.list @@ -0,0 +1,18 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== label-dynamic.html label-dynamic.html +skip-if(B2G||Mulet) fails-if(Android) == radio-stretched.html radio-stretched.html +# test for bug 464589 +# Initial mulet triage: parity with B2G/B2G Desktop +== checked.html checked.html +== checked-native.html checked-native.html +== checked.html checked.html +== checked-notref.html checked-notref.html +== checked-native.html checked-native.html +== checked-native-notref.html checked-native-notref.html +== indeterminate-checked.html indeterminate-checked.html +== indeterminate-unchecked.html indeterminate-unchecked.html +== indeterminate-native-checked.html indeterminate-native-checked.html +== indeterminate-native-unchecked.html indeterminate-native-unchecked.html +== indeterminate-selector.html indeterminate-selector.html +skip-if(!gtkWidget||Mulet) == gtk-theme-width-height.html gtk-theme-width-height.html +# bug 1141511: Disable some gtkWidget-dependant reftests on Mulet diff --git a/layout/reftests/forms/input/checkbox/reftest.list b/layout/reftests/forms/input/checkbox/reftest.list new file mode 100644 index 000000000..cc485e969 --- /dev/null +++ b/layout/reftests/forms/input/checkbox/reftest.list @@ -0,0 +1,14 @@ +== label-dynamic.html label-dynamic-ref.html +fails-if(Android) == radio-stretched.html radio-stretched-ref.html # test for bug 464589 +!= checked.html checked-notref.html +!= checked-native.html checked-native-notref.html +!= checked.html about:blank +!= checked-notref.html about:blank +!= checked-native.html about:blank +!= checked-native-notref.html about:blank +!= indeterminate-checked.html indeterminate-checked-notref.html +!= indeterminate-unchecked.html indeterminate-unchecked-notref.html +!= indeterminate-native-checked.html indeterminate-native-checked-notref.html +!= indeterminate-native-unchecked.html indeterminate-native-unchecked-notref.html +== indeterminate-selector.html indeterminate-selector-ref.html +skip-if(!gtkWidget) == gtk-theme-width-height.html gtk-theme-width-height-ref.html 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 000000000..027c1e2b5 --- /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 000000000..fb79067ad --- /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, false); + </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 000000000..9def78fad --- /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 000000000..efc2acb84 --- /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, false); + </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 000000000..fa550d83b --- /dev/null +++ b/layout/reftests/forms/input/color/custom-style-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='reference-style.css'> + <style> + button.input-color { + -moz-appearance: button; + } + 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 000000000..4aea98b14 --- /dev/null +++ b/layout/reftests/forms/input/color/custom-style-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <style> + input[type="color"] { + -moz-appearance: button; + } + 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 000000000..802af966e --- /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 000000000..209594b32 --- /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 000000000..99087c53c --- /dev/null +++ b/layout/reftests/forms/input/color/input-color-1-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <link rel='stylesheet' type='text/css' 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 000000000..a351df18f --- /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 000000000..e32ee72ca --- /dev/null +++ b/layout/reftests/forms/input/color/margin-padding-1-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' 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; } + </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 000000000..e394d5d29 --- /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 000000000..188b12c31 --- /dev/null +++ b/layout/reftests/forms/input/color/reference-style.css @@ -0,0 +1,16 @@ +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: 23px; +} diff --git a/layout/reftests/forms/input/color/reftest-stylo.list b/layout/reftests/forms/input/color/reftest-stylo.list new file mode 100644 index 000000000..a1e01b480 --- /dev/null +++ b/layout/reftests/forms/input/color/reftest-stylo.list @@ -0,0 +1,20 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Simple test. Should fail on platforms where input type color isn't activated +# yet. Missing platforms are B2G (bug 875751), Android (bug 875750). +fails-if(B2G||Mulet||Android) == input-color-1.html input-color-1.html +# Initial mulet triage: parity with B2G/B2G Desktop + +default-preferences pref(dom.forms.color,true) + +# Despite the "default-preferences" line above, B2G and Android are still +# excluded from some style in forms.css, which makes the following tests fail. +fails-if(B2G||Mulet||Android) == margin-padding-1.html margin-padding-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +== block-invalidate-1.html block-invalidate-1.html +== block-invalidate-2.html block-invalidate-2.html +fuzzy-if(gtkWidget,8,33) fuzzy-if(skiaContent,8,35) fails-if(B2G||Mulet||Android) == transformations-1.html transformations-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(B2G||Mulet||Android) == custom-style-1.html custom-style-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(B2G||Mulet||Android) == custom-style-2.html custom-style-2.html +# Initial mulet triage: parity with B2G/B2G Desktop diff --git a/layout/reftests/forms/input/color/reftest.list b/layout/reftests/forms/input/color/reftest.list new file mode 100644 index 000000000..148cb4bad --- /dev/null +++ b/layout/reftests/forms/input/color/reftest.list @@ -0,0 +1,14 @@ +# Simple test. Should fail on platforms where input type color isn't activated +# yet. The missing platform is Android (bug 875750). +fails-if(Android) == input-color-1.html input-color-1-ref.html + +default-preferences pref(dom.forms.color,true) + +# Despite the "default-preferences" line above, Android is still +# excluded from some style in forms.css, which makes the following tests fail. +fails-if(Android) == 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-if(gtkWidget,8,33) fuzzy-if(skiaContent,8,35) fails-if(Android) == transformations-1.html transformations-1-ref.html +fails-if(Android) == custom-style-1.html custom-style-1-ref.html +fails-if(Android) == custom-style-2.html custom-style-2-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 000000000..fba5093f7 --- /dev/null +++ b/layout/reftests/forms/input/color/transformations-1-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='reference-style.css'> + <style> + body > button:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); } + body > button:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); } + body > button:nth-child(3) { -moz-transform: rotate(30deg); } + body > button:nth-child(4) { -moz-transform: scale(2, 4); } + body > button:nth-child(5) { -moz-transform: scale(0.1, 0.4); } + body > button:nth-child(6) { -moz-transform: scale(1, 0.4); } + body > button:nth-child(7) { -moz-transform: scale(0.1, 1); } + body > button:nth-child(8) { -moz-transform: skew(30deg, -10deg); } + body > button:nth-child(9) { -moz-transform: skew(-30deg, 10deg); } + body > button:nth-child(10) { -moz-transform: translate(10px, 30px); } + body > button:nth-child(11) { -moz-transform: translate(30px, 10px); } + body > button:nth-child(12) { -moz-transform: translate(-10px, 30px); } + body > button:nth-child(13) { -moz-transform: translate(30px, -10px); } + body > button:nth-child(14) { -moz-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 000000000..67bb4b3c9 --- /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> diff --git a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html new file mode 100644 index 000000000..ffb5ffa58 --- /dev/null +++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-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/datetime/from-time-to-other-type-unthemed.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html new file mode 100644 index 000000000..31b804602 --- /dev/null +++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.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 time element) --> + <script type="text/javascript"> + function setToCheckbox() + { + document.getElementById("i").type = "checkbox"; + document.documentElement.className = ""; + } + document.addEventListener("MozReftestInvalidate", setToCheckbox); + </script> + <body> + <input type="time" id="i" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/datetime/reftest.list b/layout/reftests/forms/input/datetime/reftest.list new file mode 100644 index 000000000..0ce2002bd --- /dev/null +++ b/layout/reftests/forms/input/datetime/reftest.list @@ -0,0 +1,13 @@ +default-preferences pref(dom.forms.datetime,true) + +# not valid on Android/B2G where type=time looks like type=text +skip-if(Android||B2G||Mulet) != time-simple-unthemed.html time-simple-unthemed-ref.html +skip-if(Android||B2G||Mulet) != time-large-font.html time-basic.html +skip-if(Android||B2G||Mulet) != time-width-height.html time-basic.html +skip-if(Android||B2G||Mulet) != time-border.html time-basic.html +# only valid on Android/B2G where type=number looks the same as type=text +skip-if(!Android&&!B2G&&!Mulet) == time-simple-unthemed.html time-simple-unthemed-ref.html + +# type change +skip-if(Android||B2G||Mulet) == to-time-from-other-type-unthemed.html time-simple-unthemed.html +skip-if(Android||B2G||Mulet) == from-time-to-other-type-unthemed.html from-time-to-other-type-unthemed-ref.html diff --git a/layout/reftests/forms/input/datetime/time-basic.html b/layout/reftests/forms/input/datetime/time-basic.html new file mode 100644 index 000000000..c161b17c2 --- /dev/null +++ b/layout/reftests/forms/input/datetime/time-basic.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="time" value="12:30"> + </body> +</html> diff --git a/layout/reftests/forms/input/datetime/time-border.html b/layout/reftests/forms/input/datetime/time-border.html new file mode 100644 index 000000000..09ffd01d2 --- /dev/null +++ b/layout/reftests/forms/input/datetime/time-border.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="time" value="12:30" style="border:10px solid blue"> + </body> +</html> diff --git a/layout/reftests/forms/input/datetime/time-large-font.html b/layout/reftests/forms/input/datetime/time-large-font.html new file mode 100644 index 000000000..c2f5e956d --- /dev/null +++ b/layout/reftests/forms/input/datetime/time-large-font.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="time" value="12:30" style="font-size: 32px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html b/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html new file mode 100644 index 000000000..24dccffea --- /dev/null +++ b/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.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/datetime/time-simple-unthemed.html b/layout/reftests/forms/input/datetime/time-simple-unthemed.html new file mode 100644 index 000000000..023456723 --- /dev/null +++ b/layout/reftests/forms/input/datetime/time-simple-unthemed.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="time" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/datetime/time-width-height.html b/layout/reftests/forms/input/datetime/time-width-height.html new file mode 100644 index 000000000..a6de5cdb4 --- /dev/null +++ b/layout/reftests/forms/input/datetime/time-width-height.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="time" style="width:200px; height:50px"> + </body> +</html> diff --git a/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html b/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html new file mode 100644 index 000000000..1ae398f4c --- /dev/null +++ b/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: input element changed to time state doesn't look like checkbox state --> + <script type="text/javascript"> + function setToTime() + { + document.getElementById("i").type = "time"; + document.documentElement.className = ""; + } + document.addEventListener("MozReftestInvalidate", setToTime); + </script> + <body> + <input type="checkbox" id="i" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/email/1.html b/layout/reftests/forms/input/email/1.html new file mode 100644 index 000000000..c2591d068 --- /dev/null +++ b/layout/reftests/forms/input/email/1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: input element in email state looks like in text state --> + <body> + <input type="email"> + </body> +</html> diff --git a/layout/reftests/forms/input/email/2.html b/layout/reftests/forms/input/email/2.html new file mode 100644 index 000000000..ab1bf2e6b --- /dev/null +++ b/layout/reftests/forms/input/email/2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: input element in email state looks like in text state --> + <script type="text/javascript"> + function setToEmail() + { + document.getElementById('i').type = 'email'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setToEmail(); disableReftestWait();"> + <input type='checkbox' id='i'> + </body> +</html> diff --git a/layout/reftests/forms/input/email/3.html b/layout/reftests/forms/input/email/3.html new file mode 100644 index 000000000..a9fe4400d --- /dev/null +++ b/layout/reftests/forms/input/email/3.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when switching to another type, the input element should not look + like an input email element --> + <script type="text/javascript"> + function setToCheckbox() + { + document.getElementById('i').type='checkbox'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setToCheckbox(); disableReftestWait();"> + <input type='email' id='i'> + </body> +</html> diff --git a/layout/reftests/forms/input/email/ref.html b/layout/reftests/forms/input/email/ref.html new file mode 100644 index 000000000..07e5eee7e --- /dev/null +++ b/layout/reftests/forms/input/email/ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text"> + </body> +</html> diff --git a/layout/reftests/forms/input/email/reftest-stylo.list b/layout/reftests/forms/input/email/reftest-stylo.list new file mode 100644 index 000000000..021c5f861 --- /dev/null +++ b/layout/reftests/forms/input/email/reftest-stylo.list @@ -0,0 +1,4 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== 1.html 1.html +== 2.html 2.html +== 3.html 3.html diff --git a/layout/reftests/forms/input/email/reftest.list b/layout/reftests/forms/input/email/reftest.list new file mode 100644 index 000000000..dcca7a3cd --- /dev/null +++ b/layout/reftests/forms/input/email/reftest.list @@ -0,0 +1,3 @@ +== 1.html ref.html +== 2.html ref.html +!= 3.html ref.html diff --git a/layout/reftests/forms/input/file/background-ref.xul b/layout/reftests/forms/input/file/background-ref.xul new file mode 100644 index 000000000..cf5b0c5e4 --- /dev/null +++ b/layout/reftests/forms/input/file/background-ref.xul @@ -0,0 +1,16 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="style.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style> + window { + background-color: blue; + } + </html:style> + + <vbox> + <html:div class='file'> + <html:button>Browse…</html:button><label value="No file selected."/> + </html:div> + </vbox> +</window> diff --git a/layout/reftests/forms/input/file/background.html b/layout/reftests/forms/input/file/background.html new file mode 100644 index 000000000..02af1d143 --- /dev/null +++ b/layout/reftests/forms/input/file/background.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <style> + body { + background-color: blue; + } + </style> + <body> + <input type='file'> + </body> +</html> diff --git a/layout/reftests/forms/input/file/color-inherit-ref.html b/layout/reftests/forms/input/file/color-inherit-ref.html new file mode 100644 index 000000000..39cd471a5 --- /dev/null +++ b/layout/reftests/forms/input/file/color-inherit-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type='file' style='color: chartreuse;'> + </body> +</html> diff --git a/layout/reftests/forms/input/file/color-inherit.html b/layout/reftests/forms/input/file/color-inherit.html new file mode 100644 index 000000000..843532953 --- /dev/null +++ b/layout/reftests/forms/input/file/color-inherit.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body style='color: chartreuse;'> + <input type='file'> + </body> +</html> diff --git a/layout/reftests/forms/input/file/reftest-stylo.list b/layout/reftests/forms/input/file/reftest-stylo.list new file mode 100644 index 000000000..44d8ce504 --- /dev/null +++ b/layout/reftests/forms/input/file/reftest-stylo.list @@ -0,0 +1,20 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# B2G failures: bug 855352. +fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,152) skip-if((B2G&&browserIsRemote)||Mulet) == simple.html simple.html +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,76) skip-if((B2G&&browserIsRemote)||Mulet) == rtl.html rtl.html +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,152) skip-if((B2G&&browserIsRemote)||Mulet) == size.html size.html +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,76) skip-if((B2G&&browserIsRemote)||Mulet) == background.html background.html +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +fails-if(B2G||Mulet||Android) skip-if((B2G&&browserIsRemote)||Mulet) == style.html style.html +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +== width-clip.html width-clip.html +fails-if(B2G||Mulet||Android) == color-inherit.html color-inherit.html +# Initial mulet triage: parity with B2G/B2G Desktop diff --git a/layout/reftests/forms/input/file/reftest.list b/layout/reftests/forms/input/file/reftest.list new file mode 100644 index 000000000..ecb509226 --- /dev/null +++ b/layout/reftests/forms/input/file/reftest.list @@ -0,0 +1,7 @@ +fails-if(Android) fuzzy-if(OSX==1006,8,152) == simple.html simple-ref.xul +fails-if(Android) fuzzy-if(OSX==1006,8,76) == rtl.html rtl-ref.xul +fails-if(Android) fuzzy-if(OSX==1006,8,152) == size.html simple-ref.xul +fails-if(Android) fuzzy-if(OSX==1006,8,76) == background.html background-ref.xul +fails-if(Android) == style.html style-ref.xul +!= width-clip.html width-clip-ref.html +fails-if(Android) == color-inherit.html color-inherit-ref.html diff --git a/layout/reftests/forms/input/file/rtl-ref.xul b/layout/reftests/forms/input/file/rtl-ref.xul new file mode 100644 index 000000000..eb61d45c7 --- /dev/null +++ b/layout/reftests/forms/input/file/rtl-ref.xul @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="style.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <vbox> + <html:style> + vbox { + margin-right: 8px; + } + </html:style> + <html:div dir='rtl'> + <html:div class='file' dir='rtl'> + <html:button>Browse…</html:button><label value="No file selected."/> + </html:div> + </html:div> + </vbox> +</window> diff --git a/layout/reftests/forms/input/file/rtl.html b/layout/reftests/forms/input/file/rtl.html new file mode 100644 index 000000000..81e841a12 --- /dev/null +++ b/layout/reftests/forms/input/file/rtl.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <div dir='rtl'> + <input type='file'> + </div> + </body> +</html> diff --git a/layout/reftests/forms/input/file/simple-ref.xul b/layout/reftests/forms/input/file/simple-ref.xul new file mode 100644 index 000000000..a9bc3cbd9 --- /dev/null +++ b/layout/reftests/forms/input/file/simple-ref.xul @@ -0,0 +1,14 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="style.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <vbox> + <html:div class='file'> + <html:button>Browse…</html:button><label value="No file selected."/> + </html:div> + <html:br/> + <html:div class='file'> + <html:button>Browse…</html:button><label value="No files selected."/> + </html:div> + </vbox> +</window> diff --git a/layout/reftests/forms/input/file/simple.html b/layout/reftests/forms/input/file/simple.html new file mode 100644 index 000000000..03a2a7bde --- /dev/null +++ b/layout/reftests/forms/input/file/simple.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <input type='file'> + <br> + <input type='file' multiple> + </body> +</html> diff --git a/layout/reftests/forms/input/file/size.html b/layout/reftests/forms/input/file/size.html new file mode 100644 index 000000000..33606f935 --- /dev/null +++ b/layout/reftests/forms/input/file/size.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<!-- size should have no impact on <input type='file'>. --> +<html> + <body> + <input type='file' size='5'> + <br> + <input type='file' multiple size='30'> + </body> +</html> diff --git a/layout/reftests/forms/input/file/style-ref.xul b/layout/reftests/forms/input/file/style-ref.xul new file mode 100644 index 000000000..20af35b48 --- /dev/null +++ b/layout/reftests/forms/input/file/style-ref.xul @@ -0,0 +1,25 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="style.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <hbox> + <html:style> + .file { + background-color: blue; + border: 1px red solid; + width: 400px; + padding: 2px; + margin: 5px; + display: inline-block; + } + + .file > label { + /* color only applies to the label */ + color: white; + } + </html:style> + <html:div class='file'> + <html:button>Browse…</html:button><label value="No file selected."/> + </html:div> + </hbox> +</window> diff --git a/layout/reftests/forms/input/file/style.css b/layout/reftests/forms/input/file/style.css new file mode 100644 index 000000000..18be345bb --- /dev/null +++ b/layout/reftests/forms/input/file/style.css @@ -0,0 +1,61 @@ +vbox, hbox { + margin-top: 8px; + margin-left: 8px; + display: block; +} + +.file { + /* Copy of input properties that apply of forms.css below this */ + color: inherit; + font: -moz-field; + text-rendering: optimizeLegibility; + line-height: normal !important; + text-align: start; + text-transform: none; + word-spacing: normal; + letter-spacing: normal; + text-indent: 0; + -moz-user-select: text; + text-shadow: none; + + /* Copy of the type=file part of forms.css below this */ + display: inline; /* this one isn't really a copy... */ + white-space: nowrap; + overflow:hidden; + + -moz-appearance: none; + -moz-binding: none; + cursor: default; + border: none; + background-color: transparent; + padding: 0; +} + +.file > label { + display: inline-block; + + /* Copy from forms.css below this */ + min-width: 12em; + padding-inline-start: 5px; + + color: inherit; + font-size: inherit; + letter-spacing: inherit; + + direction: ltr !important; +} + +.file[dir='rtl'] > label { + /* Copy from forms.css below this */ + padding-inline-start: 0px; + padding-right: 5px; + text-align: right; +} + +.file > button { + /* Copy from forms.css below this */ + height: inherit; + font-size: inherit; + letter-spacing: inherit; + cursor: inherit; +} diff --git a/layout/reftests/forms/input/file/style.html b/layout/reftests/forms/input/file/style.html new file mode 100644 index 000000000..76fa4d971 --- /dev/null +++ b/layout/reftests/forms/input/file/style.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <style> + input { + background-color: blue; + border: 1px red solid; + width: 400px; + color: white; + padding: 2px; + margin: 5px; + } + </style> + <body> + <input type='file'> + </body> +</html> diff --git a/layout/reftests/forms/input/file/width-clip-ref.html b/layout/reftests/forms/input/file/width-clip-ref.html new file mode 100644 index 000000000..a6c746ac8 --- /dev/null +++ b/layout/reftests/forms/input/file/width-clip-ref.html @@ -0,0 +1,3 @@ +<div style="width: 5px;"><input type="file"></div> +<div style="width: 500px;"><input type="file"></div> + diff --git a/layout/reftests/forms/input/file/width-clip.html b/layout/reftests/forms/input/file/width-clip.html new file mode 100644 index 000000000..d4acd7e27 --- /dev/null +++ b/layout/reftests/forms/input/file/width-clip.html @@ -0,0 +1,3 @@ +<div><input type="file" style="width: 5px"></div> +<div><input type="file" style="width: 500px"></div> + diff --git a/layout/reftests/forms/input/hidden/border.html b/layout/reftests/forms/input/hidden/border.html new file mode 100644 index 000000000..ce7dcb2ca --- /dev/null +++ b/layout/reftests/forms/input/hidden/border.html @@ -0,0 +1,14 @@ +<!doctype html> +<html> +<head> +<style type="text/css"> +input { + display: block; + border: 1px solid #000; +} +</style> +</head> +<body> +<input type="hidden"> +</body> +</html> diff --git a/layout/reftests/forms/input/hidden/reftest-stylo.list b/layout/reftests/forms/input/hidden/reftest-stylo.list new file mode 100644 index 000000000..db274e45f --- /dev/null +++ b/layout/reftests/forms/input/hidden/reftest-stylo.list @@ -0,0 +1,2 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== border.html border.html diff --git a/layout/reftests/forms/input/hidden/reftest.list b/layout/reftests/forms/input/hidden/reftest.list new file mode 100644 index 000000000..64fa2bda5 --- /dev/null +++ b/layout/reftests/forms/input/hidden/reftest.list @@ -0,0 +1 @@ +== border.html about:blank diff --git a/layout/reftests/forms/input/number/focus-handling-ref.html b/layout/reftests/forms/input/number/focus-handling-ref.html new file mode 100644 index 000000000..e07f83f99 --- /dev/null +++ b/layout/reftests/forms/input/number/focus-handling-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- In this case we're using reftest-wait to make sure the test doesn't + get snapshotted before it's been focused. We're not testing + invalidation so we don't need to listen for MozReftestInvalidate. + --> + <head> + <meta charset="utf-8"> + <script> + +function end() { + setTimeout(function() { + document.documentElement.className = ""; + }, 0); +} + + </script> + </head> + <body> + <input style="-moz-appearance:none;"><br> + <input autofocus onfocus="end();" + style="-moz-appearance:none;"> + <!-- div to cover spin box area for type=number to type=text comparison --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/focus-handling.html b/layout/reftests/forms/input/number/focus-handling.html new file mode 100644 index 000000000..b54f83a56 --- /dev/null +++ b/layout/reftests/forms/input/number/focus-handling.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- In this case we're using reftest-wait to make sure the test doesn't + get snapshotted before it's been focused. We're not testing + invalidation so we don't need to listen for MozReftestInvalidate. + --> + <head> + <meta charset="utf-8"> + <script> + +function begin() { + document.getElementsByTagName('input')[1].focus(); +} + +function end() { + setTimeout(function() { + document.documentElement.className = ""; + }, 0); +} + + </script> + </head> + <body> + <input type='number' autofocus onfocus="begin();" + style="-moz-appearance:none;"><br> + <input type='number' onfocus="end();" + style="-moz-appearance:none;"> + <!-- div to cover spin box area for type=number to type=text comparison --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;"> + </body> +</html> + diff --git a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html new file mode 100644 index 000000000..ffb5ffa58 --- /dev/null +++ b/layout/reftests/forms/input/number/from-number-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/number/from-number-to-other-type-unthemed-1.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html new file mode 100644 index 000000000..561b39bec --- /dev/null +++ b/layout/reftests/forms/input/number/from-number-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 number element) --> + <script type="text/javascript"> + function setToCheckbox() + { + document.getElementById('i').type='checkbox'; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setToCheckbox); + </script> + <body> + <input type='number' id='i' style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html new file mode 100644 index 000000000..7f0d427b4 --- /dev/null +++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="number" value="1" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html new file mode 100644 index 000000000..7c5a4dcac --- /dev/null +++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text" value="1" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html new file mode 100644 index 000000000..ffb5ffa58 --- /dev/null +++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-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/number/number-auto-width-1-ref.html b/layout/reftests/forms/input/number/number-auto-width-1-ref.html new file mode 100644 index 000000000..50b7b7e04 --- /dev/null +++ b/layout/reftests/forms/input/number/number-auto-width-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text" style="-moz-appearance:none; width:auto;"> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-auto-width-1.html b/layout/reftests/forms/input/number/number-auto-width-1.html new file mode 100644 index 000000000..5c9cc0abe --- /dev/null +++ b/layout/reftests/forms/input/number/number-auto-width-1.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <input type="number" style="-moz-appearance:none; width:auto;"> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-disabled-ref.html b/layout/reftests/forms/input/number/number-disabled-ref.html new file mode 100644 index 000000000..f3c9d4d56 --- /dev/null +++ b/layout/reftests/forms/input/number/number-disabled-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text" disabled + style="-moz-appearance: none"><!-- Workaround for bug 1223198 --> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-disabled.html b/layout/reftests/forms/input/number/number-disabled.html new file mode 100644 index 000000000..b4acb20a7 --- /dev/null +++ b/layout/reftests/forms/input/number/number-disabled.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <input type="number" disabled + style="-moz-appearance: none"><!-- Workaround for bug 1223198 --> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-max-height-1-ref.html b/layout/reftests/forms/input/number/number-max-height-1-ref.html new file mode 100644 index 000000000..5f17a6242 --- /dev/null +++ b/layout/reftests/forms/input/number/number-max-height-1-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +div { + border: 3px solid black; + width: 308px; + height: 108px; +} + + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-max-height-1.html b/layout/reftests/forms/input/number/number-max-height-1.html new file mode 100644 index 000000000..bf671a0f9 --- /dev/null +++ b/layout/reftests/forms/input/number/number-max-height-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +input { + border: 3px solid black; + padding: 4px; + width: 300px; + height: 300px; + max-height: 100px; + box-sizing: content-box; + /* hide the spin buttons: */ + -moz-appearance: textfield; +} + +* > input[type=number] { + /* get rid of background gradient for Firefox OS */ + background-color: transparent ! important; +} + + </style> + </head> + <body> + <input type="number"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-max-height-2-ref.html b/layout/reftests/forms/input/number/number-max-height-2-ref.html new file mode 100644 index 000000000..8b654e7f9 --- /dev/null +++ b/layout/reftests/forms/input/number/number-max-height-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +div { + border: 3px solid black; + width: 294px; + height: 94px; +} + + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-max-height-2.html b/layout/reftests/forms/input/number/number-max-height-2.html new file mode 100644 index 000000000..ff118ea23 --- /dev/null +++ b/layout/reftests/forms/input/number/number-max-height-2.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +input { + border: 3px solid black; + padding: 4px; + width: 300px; + height: 300px; + max-height: 100px; + box-sizing: border-box; + /* hide the spin buttons: */ + -moz-appearance: textfield; +} + +* > input[type=number] { + /* get rid of background gradient for Firefox OS */ + background-color: transparent ! important; +} + + </style> + </head> + <body> + <input type="number"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-min-height-1-ref.html b/layout/reftests/forms/input/number/number-min-height-1-ref.html new file mode 100644 index 000000000..5f17a6242 --- /dev/null +++ b/layout/reftests/forms/input/number/number-min-height-1-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +div { + border: 3px solid black; + width: 308px; + height: 108px; +} + + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-min-height-1.html b/layout/reftests/forms/input/number/number-min-height-1.html new file mode 100644 index 000000000..75923b98b --- /dev/null +++ b/layout/reftests/forms/input/number/number-min-height-1.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +input { + border: 3px solid black; + padding: 4px; + width: 300px; + min-height: 100px; + box-sizing: content-box; + /* hide the spin buttons: */ + -moz-appearance: textfield; +} + +* > input[type=number] { + /* get rid of background gradient for Firefox OS */ + background-color: transparent ! important; +} + + </style> + </head> + <body> + <input type="number"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-min-height-2-ref.html b/layout/reftests/forms/input/number/number-min-height-2-ref.html new file mode 100644 index 000000000..8b654e7f9 --- /dev/null +++ b/layout/reftests/forms/input/number/number-min-height-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +div { + border: 3px solid black; + width: 294px; + height: 94px; +} + + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-min-height-2.html b/layout/reftests/forms/input/number/number-min-height-2.html new file mode 100644 index 000000000..9f69e1eae --- /dev/null +++ b/layout/reftests/forms/input/number/number-min-height-2.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +input { + border: 3px solid black; + padding: 4px; + width: 300px; + min-height: 100px; + box-sizing: border-box; + /* hide the spin buttons: */ + -moz-appearance: textfield; +} + +* > input[type=number] { + /* get rid of background gradient for Firefox OS */ + background-color: transparent ! important; +} + + </style> + </head> + <body> + <input type="number"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-placeholder-ref.html b/layout/reftests/forms/input/number/number-placeholder-ref.html new file mode 100644 index 000000000..607627243 --- /dev/null +++ b/layout/reftests/forms/input/number/number-placeholder-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +input { + width: 15em; + color: blue; + font-style: italic; +} + + </style> + </head> + <body> + <input type="number" value="123"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-placeholder.html b/layout/reftests/forms/input/number/number-placeholder.html new file mode 100644 index 000000000..5018255ca --- /dev/null +++ b/layout/reftests/forms/input/number/number-placeholder.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +input { + width: 15em; +} + +input[type=number]::placeholder { + color: blue; + opacity: 1.0; +} + +input[type=number]::-moz-placeholder { + font-style: italic; + opacity: 1.0; +} + </style> + </head> + <body> + <input type="number" placeholder="123"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-pseudo-elements-ref.html b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html new file mode 100644 index 000000000..263aeff1f --- /dev/null +++ b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="number" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-pseudo-elements.html b/layout/reftests/forms/input/number/number-pseudo-elements.html new file mode 100644 index 000000000..33cf40fcf --- /dev/null +++ b/layout/reftests/forms/input/number/number-pseudo-elements.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +/* None of these selectors should match from content */ +input[type=number]::-moz-number-wrapper, +input[type=number]::-moz-number-text, +input[type=number]::-moz-number-spin-box, +input[type=number]::-moz-number-spin-up, +input[type=number]::-moz-number-spin-down { + background-color: red; +} + + </style> + </head> + <body> + <input type="number" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html b/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html new file mode 100644 index 000000000..aa58e491e --- /dev/null +++ b/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +input { + font-size: 30pt; + background-color: lightblue; +} + + </style> + </head> + <body> + <input type="number"> + </body> +</html> + diff --git a/layout/reftests/forms/input/number/number-reframe-anon-text-field.html b/layout/reftests/forms/input/number/number-reframe-anon-text-field.html new file mode 100644 index 000000000..8120b67d6 --- /dev/null +++ b/layout/reftests/forms/input/number/number-reframe-anon-text-field.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <style> + +input { + font-size: 30pt; + background-color: lightblue; +} + + </style> + <script> + +document.addEventListener("DOMContentLoaded", function() { + document.body.style.backgroundImage = "none"; +}, false); + +function PostRebuildAllStyleDataEvent() { + // trigger http://mxr.mozilla.org/mozilla-central/source/layout/base/RestyleManager.cpp?rev=a8b06549f680#1490 + var m = document.createElementNS("http://www.w3.org/1998/Math/MathML", "math"); + document.head.appendChild(m); + document.head.removeChild(m); +} + +function reframe() { + PostRebuildAllStyleDataEvent(); + document.documentElement.className = ""; +} + +document.addEventListener("MozReftestInvalidate", function() { + // Calling reframe now would be too early to reproduce the bug that we're + // testing for. Note that in the event that we start faling this test this + // timeout may make the failure seem intermittent when in fact we would + // always fail if it was longer. + setTimeout(reframe, 500); +}, false); + + </script> + </head> + <body> + <input type="number"> + </body> +</html> + diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html new file mode 100644 index 000000000..ceaa14d85 --- /dev/null +++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text" style="-moz-appearance:none; width:200px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html new file mode 100644 index 000000000..fddcc33eb --- /dev/null +++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="number" style="-moz-appearance:none; width:200px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-selected-ref.html b/layout/reftests/forms/input/number/number-selected-ref.html new file mode 100644 index 000000000..10fea8f47 --- /dev/null +++ b/layout/reftests/forms/input/number/number-selected-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <script> + +document.addEventListener("MozReftestInvalidate", function() { + document.getElementById("i").select(); + document.documentElement.className = ""; +}, false); + + </script> + </head> + <body> + <input id="i" type="text" value="123"> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-selected.html b/layout/reftests/forms/input/number/number-selected.html new file mode 100644 index 000000000..614b12718 --- /dev/null +++ b/layout/reftests/forms/input/number/number-selected.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <script> + +document.addEventListener("MozReftestInvalidate", function() { + document.getElementById("i").select(); + document.documentElement.className = ""; +}, false); + + </script> + </head> + <body> + <input id="i" type="number" value="123"> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html b/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html new file mode 100644 index 000000000..d57683025 --- /dev/null +++ b/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="number" value="1.00100000000001" style="width:100%;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-significant-fractional-digits.html b/layout/reftests/forms/input/number/number-significant-fractional-digits.html new file mode 100644 index 000000000..bb1654428 --- /dev/null +++ b/layout/reftests/forms/input/number/number-significant-fractional-digits.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <script> + +document.addEventListener("MozReftestInvalidate", function() { + document.getElementById("i").stepUp(); + document.documentElement.className = ""; +}, false); + + </script> + </head> + <body> + <input id="i" type="number" value="1.001" step="0.00000000000001" + style="width:100%;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html new file mode 100644 index 000000000..abb0b240d --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text" style="-moz-appearance:none; width:200px;"> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html new file mode 100644 index 000000000..79644edc8 --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body style="direction: rtl"> + <input type="text" style="-moz-appearance:none; width:200px;" value="1"> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html new file mode 100644 index 000000000..36ffc0629 --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body style="direction: rtl"> + <input type="number" style="-moz-appearance:none; width:200px;" value="1"> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html new file mode 100644 index 000000000..6deed4891 --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html style="writing-mode:vertical-lr;"> + <body> + <input type="text" style="-moz-appearance:none; height:200px;" value="123"> + <!-- div to cover spin box area --> + <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html new file mode 100644 index 000000000..7a7883062 --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html style="writing-mode:vertical-lr;"> + <body> + <input type="number" style="-moz-appearance:none; height:200px;" value="123"> + <!-- div to cover spin box area --> + <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html new file mode 100644 index 000000000..73a537387 --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html style="writing-mode:vertical-rl;"> + <body> + <input type="text" style="-moz-appearance:none; height:200px;" value="123"> + <!-- div to cover spin box area --> + <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html new file mode 100644 index 000000000..3bc3a388a --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html style="writing-mode:vertical-rl;"> + <body> + <input type="number" style="-moz-appearance:none; height:200px;" value="123"> + <!-- div to cover spin box area --> + <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html new file mode 100644 index 000000000..f8c2ce65d --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <input type="number" style="-moz-appearance:none; width:200px;"> + <!-- div to cover spin box area --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/pseudo-classes.html b/layout/reftests/forms/input/number/pseudo-classes.html new file mode 100644 index 000000000..a0c62f721 --- /dev/null +++ b/layout/reftests/forms/input/number/pseudo-classes.html @@ -0,0 +1,37 @@ +<!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 pseudo-classes on number controls</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1250315"> + <link rel="help" href="https://drafts.csswg.org/selectors-4/#rw-pseudos"> + <link rel="match" href="about:blank"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +#t1:-moz-read-only { display:none; } +#t1:-moz-read-write { display:block; } + +#t2:-moz-read-write { display:none; } +#t2:-moz-read-only { display:block; } + +#t3:disabled { display:none; } +#t3:enabled { display:block; } + +#t4:enabled { display:none; } +#t4:disabled { display:block; } + + </style> +</head> +<body> + +<input id=t1 type=number readonly> +<input id=t2 type=number> +<input id=t3 type=number disabled> +<input id=t4 type=number> + +</body> +</html> diff --git a/layout/reftests/forms/input/number/reftest-stylo.list b/layout/reftests/forms/input/number/reftest-stylo.list new file mode 100644 index 000000000..8a10476d7 --- /dev/null +++ b/layout/reftests/forms/input/number/reftest-stylo.list @@ -0,0 +1,65 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +default-preferences pref(dom.forms.number,true) + +# sanity checks: +# not valid on Android/B2G where type=number looks like type=text +skip skip-if(Android||B2G||Mulet) == not-other-type-unthemed-1.html not-other-type-unthemed-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip skip-if(Android||B2G||Mulet) == not-other-type-unthemed-1.html not-other-type-unthemed-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +# only valid on Android/B2G where type=number looks the same as type=text +skip-if(!Android&&!B2G&&!Mulet) == number-same-as-text-unthemed.html number-same-as-text-unthemed.html +# Initial mulet triage: parity with B2G/B2G Desktop + +# should look the same as type=text, except for the spin box +skip == number-similar-to-text-unthemed.html number-similar-to-text-unthemed.html +skip == number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl.html +skip == number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr.html +skip == number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl.html + +# dynamic type changes: +fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),64,4) fuzzy-if(cocoaWidget,63,4) fuzzy-if(skiaContent,2,5) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1.html +# skip fuzzy-if(skiaContent,2,5) == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1.html + +# dynamic value changes: +# skip fuzzy-if(skiaContent,2,13) == show-value.html show-value.html + +# disabled +skip == number-disabled.html number-disabled.html + +# auto width: +skip == number-auto-width-1.html number-auto-width-1.html + +# min-height/max-height tests: +skip skip-if(B2G||Mulet||Android) == number-min-height-1.html number-min-height-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip skip-if(B2G||Mulet||Android) == number-min-height-2.html number-min-height-2.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip skip-if(B2G||Mulet||Android) == number-max-height-1.html number-max-height-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip skip-if(B2G||Mulet||Android) == number-max-height-2.html number-max-height-2.html +# Initial mulet triage: parity with B2G/B2G Desktop + +# number of significant fractional digits: +skip == number-significant-fractional-digits.html number-significant-fractional-digits.html + +# focus +# autofocus is disabled on B2G +# https://bugzilla.mozilla.org/show_bug.cgi?id=965763 +# skip skip-if(B2G||Mulet) fuzzy-if(skiaContent,2,5) needs-focus == focus-handling.html focus-handling.html +# Initial mulet triage: parity with B2G/B2G Desktop + +# select +skip == number-selected.html number-selected.html + +# pseudo-elements not usable from content: +skip == number-pseudo-elements.html number-pseudo-elements.html + +skip == number-placeholder.html number-placeholder.html + +# check that if the anonymous text control is reframed, we reframe the whole +# number control (the fuzzy is for the top-right and bottom-left of the border +# bevel which gets slightly different antialiasing after invalidation): +skip == number-reframe-anon-text-field.html number-reframe-anon-text-field.html + +skip == pseudo-classes.html pseudo-classes.html diff --git a/layout/reftests/forms/input/number/reftest.list b/layout/reftests/forms/input/number/reftest.list new file mode 100644 index 000000000..ecf05ce15 --- /dev/null +++ b/layout/reftests/forms/input/number/reftest.list @@ -0,0 +1,54 @@ +default-preferences pref(dom.forms.number,true) + +# sanity checks: +# not valid on Android where type=number looks like type=text +skip-if(Android) != not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html +skip-if(Android) != not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html +# only valid on Android where type=number looks the same as type=text +skip-if(!Android) == number-same-as-text-unthemed.html number-same-as-text-unthemed-ref.html + +# should look the same as type=text, except for the spin box +== number-similar-to-text-unthemed.html number-similar-to-text-unthemed-ref.html +== number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl-ref.html +== number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr-ref.html +== number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl-ref.html + +# dynamic type changes: +fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),64,4) fuzzy-if(cocoaWidget,63,4) fuzzy-if(skiaContent,2,5) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1-ref.html +fuzzy-if(skiaContent,2,5) == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1-ref.html + +# dynamic value changes: +fuzzy-if(skiaContent,2,13) == show-value.html show-value-ref.html + +# disabled +== number-disabled.html number-disabled-ref.html + +# auto width: +== number-auto-width-1.html number-auto-width-1-ref.html + +# min-height/max-height tests: +skip-if(Android) == number-min-height-1.html number-min-height-1-ref.html +skip-if(Android) == number-min-height-2.html number-min-height-2-ref.html +skip-if(Android) == number-max-height-1.html number-max-height-1-ref.html +skip-if(Android) == number-max-height-2.html number-max-height-2-ref.html + +# number of significant fractional digits: +== number-significant-fractional-digits.html number-significant-fractional-digits-ref.html + +# focus +fuzzy-if(skiaContent,2,5) needs-focus == focus-handling.html focus-handling-ref.html + +# select +== number-selected.html number-selected-ref.html + +# pseudo-elements not usable from content: +== number-pseudo-elements.html number-pseudo-elements-ref.html + +== number-placeholder.html number-placeholder-ref.html + +# check that if the anonymous text control is reframed, we reframe the whole +# number control (the fuzzy is for the top-right and bottom-left of the border +# bevel which gets slightly different antialiasing after invalidation): +fuzzy(128,4) == number-reframe-anon-text-field.html number-reframe-anon-text-field-ref.html + +== pseudo-classes.html about:blank diff --git a/layout/reftests/forms/input/number/show-value-ref.html b/layout/reftests/forms/input/number/show-value-ref.html new file mode 100644 index 000000000..c3d2c5564 --- /dev/null +++ b/layout/reftests/forms/input/number/show-value-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <style> + +input { + -moz-appearance: none; +} + + </style> + </head> + <body> + <input value='142'><br> + <input value='142'><br> + <input value='142'><br> + <input value='142'><br> + <input value='142'><br> + <form> + <input value='142'> + </form> + <!-- div to cover spin box area for type=number to type=text comparison --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:400px; top:0px; left:100px;"> + </body> +</html> + diff --git a/layout/reftests/forms/input/number/show-value.html b/layout/reftests/forms/input/number/show-value.html new file mode 100644 index 000000000..5aae9922e --- /dev/null +++ b/layout/reftests/forms/input/number/show-value.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <head> + <meta charset="utf-8"> + <style> + +input { + -moz-appearance: none; +} + + </style> + <script> +// Using "142" as the magic number as "1" in a monospace font should not have +// stray leading or trailing antialised pixels that get clipped unexpectedly. + +function run() { + var numbers = document.getElementsByTagName('input'); + numbers[2].style.display = 'inline-block'; // none -> inline-block + numbers[3].setAttribute('value', '142'); + numbers[4].value = '142'; + numbers[5].varue = '1337'; // deliberately misspelt - should not set value + document.forms[0].reset(); // numbers[5] value should be 42 again. + document.documentElement.className = ''; +} + +document.addEventListener("MozReftestInvalidate", run); + + </script> + </head> + <body onload="run();"> + <input type='number' value='142'><br> + <input value='142' type='number'><br> + <input type='number' value='142' style="display: none;"><br> + <input type='number' value='1337'><br> + <input type='number' value='1337'><br> + <form> + <input type='number' value='142'> + </form> + <!-- div to cover spin box area for type=number to type=text comparison --> + <div style="display:block; position:absolute; background-color:black; width:200px; height:400px; top:0px; left:100px;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html new file mode 100644 index 000000000..263aeff1f --- /dev/null +++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="number" style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html new file mode 100644 index 000000000..b0beffa56 --- /dev/null +++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: input element changed to number state doesn't look like checkbox state --> + <script type="text/javascript"> + function setToNumber() + { + document.getElementById('i').type='number'; + document.documentElement.className = ''; + } + document.addEventListener("MozReftestInvalidate", setToNumber); + </script> + <body> + <input type='checkbox' id='i' style="-moz-appearance:none;"> + </body> +</html> diff --git a/layout/reftests/forms/input/percentage/padding-ref.html b/layout/reftests/forms/input/percentage/padding-ref.html new file mode 100644 index 000000000..31dac1b36 --- /dev/null +++ b/layout/reftests/forms/input/percentage/padding-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<html> + <head> + <style> + .container { + width: 400px; + background: #ddd; + } + .text-input { + width: 200px; /* 50% */ + padding: 40px; /* 10% */ + background: #fff; + } + </style> + </head> + <body> + <div class="container"> + <input type="text" class="text-input" /> + </div> + </body> +</html> diff --git a/layout/reftests/forms/input/percentage/padding.html b/layout/reftests/forms/input/percentage/padding.html new file mode 100644 index 000000000..7b792595b --- /dev/null +++ b/layout/reftests/forms/input/percentage/padding.html @@ -0,0 +1,21 @@ +<!doctype html> +<html> + <head> + <style> + .container { + width: 400px; + background: #ddd; + } + .text-input { + width: 50%; /* 200px */ + padding: 10%; /* 40px */ + background: #fff; + } + </style> + </head> + <body> + <div class="container"> + <input type="text" class="text-input" /> + </div> + </body> +</html> diff --git a/layout/reftests/forms/input/percentage/reftest-stylo.list b/layout/reftests/forms/input/percentage/reftest-stylo.list new file mode 100644 index 000000000..6f9069ce2 --- /dev/null +++ b/layout/reftests/forms/input/percentage/reftest-stylo.list @@ -0,0 +1,2 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== padding.html padding.html diff --git a/layout/reftests/forms/input/percentage/reftest.list b/layout/reftests/forms/input/percentage/reftest.list new file mode 100644 index 000000000..5d9f72902 --- /dev/null +++ b/layout/reftests/forms/input/percentage/reftest.list @@ -0,0 +1 @@ +== padding.html padding-ref.html diff --git a/layout/reftests/forms/input/radio/checked-native-notref.html b/layout/reftests/forms/input/radio/checked-native-notref.html new file mode 100644 index 000000000..c9483ac05 --- /dev/null +++ b/layout/reftests/forms/input/radio/checked-native-notref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="radio"> diff --git a/layout/reftests/forms/input/radio/checked-native.html b/layout/reftests/forms/input/radio/checked-native.html new file mode 100644 index 000000000..7e7673afd --- /dev/null +++ b/layout/reftests/forms/input/radio/checked-native.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="radio" checked> diff --git a/layout/reftests/forms/input/radio/checked-notref.html b/layout/reftests/forms/input/radio/checked-notref.html new file mode 100644 index 000000000..e30a1ef39 --- /dev/null +++ b/layout/reftests/forms/input/radio/checked-notref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="radio" style="-moz-appearance:none"> diff --git a/layout/reftests/forms/input/radio/checked.html b/layout/reftests/forms/input/radio/checked.html new file mode 100644 index 000000000..37aed5826 --- /dev/null +++ b/layout/reftests/forms/input/radio/checked.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="radio" style="-moz-appearance:none" checked> diff --git a/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html b/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html new file mode 100644 index 000000000..65b31236c --- /dev/null +++ b/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 932506</title> + <style> + +input { outline:1px solid black; } + +</style> +</head> +<body> + +<div style="overflow:hidden; width:160px;"> + <div style="float:left; width:799px; border:1px solid blue;"> + <input type="radio" checked style="width:400px; visibility:hidden;"> + <input type="radio" checked style="width:400px; height:100px; visibility:hidden;"> + </div> +</div> + + +<input type="radio" checked style="width:400px;"><br> +<input type="radio" checked style="height:100px;"><br> +<input type="radio" checked style=""><br> + +<input type="radio" checked style="width:400px;"><br> +<input type="radio" checked style="height:100px;"><br> +<input type="radio" checked style=""><br> + +</body> +</html> diff --git a/layout/reftests/forms/input/radio/gtk-theme-width-height.html b/layout/reftests/forms/input/radio/gtk-theme-width-height.html new file mode 100644 index 000000000..3c336f2c8 --- /dev/null +++ b/layout/reftests/forms/input/radio/gtk-theme-width-height.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Testcase for bug 932506</title> + <style> + +input { outline:1px solid black; } + +</style> +</head> +<body> + +<div style="overflow:hidden; width:160px;"> + <div style="float:left; width:799px; border:1px solid blue;"> + <input type="radio" checked style="width:400px; outline:none;"> + <input type="radio" checked style="width:400px; height:100px; outline:none;"> + </div> +</div> + +<input type="radio" checked style="width:400px; height:1px;"><br> +<input type="radio" checked style="width:1px; height:100px;"><br> +<input type="radio" checked style="width:1px; height:1px;"><br> + +<input type="radio" checked style="width:400px; height:0;"><br> +<input type="radio" checked style="width:0; height:100px;"><br> +<input type="radio" checked style="width:0; height:0;"><br> + +</body> +</html> diff --git a/layout/reftests/forms/input/radio/label-dynamic-ref.html b/layout/reftests/forms/input/radio/label-dynamic-ref.html new file mode 100644 index 000000000..5b0501bb8 --- /dev/null +++ b/layout/reftests/forms/input/radio/label-dynamic-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> + +.hideradios input { + display: none; +} + +label[for="a2"], +label[for="b2"] { + background-color: yellow; +} + +</style> + +</head> + +<body> + +<div> +<div><input type="radio" name="a" id="a1"><label for="a1">radio #a1</label></div> +<div><input type="radio" name="a" id="a2" checked><label for="a2">radio #a2</label></div> +<div><input type="radio" name="a" id="a3"><label for="a3">radio #a3</label></div> +<div><input type="radio" name="a" id="a4"><label for="a4">radio #a4</label></div> +<div><input type="radio" name="a" id="a5"><label for="a5">radio #a5</label></div> +</div> + +<div class="hideradios"> +<div><input type="radio" name="b" id="b1"><label for="b1">radio #b1</label></div> +<div><input type="radio" name="b" id="b2" checked><label for="b2">radio #b2</label></div> +<div><input type="radio" name="b" id="b3"><label for="b3">radio #b3</label></div> +<div><input type="radio" name="b" id="b4"><label for="b4">radio #b4</label></div> +<div><input type="radio" name="b" id="b5"><label for="b5">radio #b5</label></div> +</div> + +</body> +</html> diff --git a/layout/reftests/forms/input/radio/label-dynamic.html b/layout/reftests/forms/input/radio/label-dynamic.html new file mode 100644 index 000000000..143a0fb6d --- /dev/null +++ b/layout/reftests/forms/input/radio/label-dynamic.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> + +.hideradios input { + display: none; +} + +input:checked + label { + background-color: yellow; +} + +</style> + +<script type="text/javascript"> + +function chooseSecondItems() +{ + document.getElementById("a2").checked = true; + document.getElementById("b2").checked = true; +} + +</script> +</head> + +<body onload="chooseSecondItems();"> + +<div> +<div><input type="radio" name="a" id="a1"><label for="a1">radio #a1</label></div> +<div><input type="radio" name="a" id="a2"><label for="a2">radio #a2</label></div> +<div><input type="radio" name="a" id="a3"><label for="a3">radio #a3</label></div> +<div><input type="radio" name="a" id="a4" checked><label for="a4">radio #a4</label></div> +<div><input type="radio" name="a" id="a5"><label for="a5">radio #a5</label></div> +</div> + +<div class="hideradios"> +<div><input type="radio" name="b" id="b1"><label for="b1">radio #b1</label></div> +<div><input type="radio" name="b" id="b2"><label for="b2">radio #b2</label></div> +<div><input type="radio" name="b" id="b3"><label for="b3">radio #b3</label></div> +<div><input type="radio" name="b" id="b4" checked><label for="b4">radio #b4</label></div> +<div><input type="radio" name="b" id="b5"><label for="b5">radio #b5</label></div> +</div> + +</body> +</html> diff --git a/layout/reftests/forms/input/radio/reftest-stylo.list b/layout/reftests/forms/input/radio/reftest-stylo.list new file mode 100644 index 000000000..7f7adc33b --- /dev/null +++ b/layout/reftests/forms/input/radio/reftest-stylo.list @@ -0,0 +1,10 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== label-dynamic.html label-dynamic.html +== checked.html checked.html +== checked-native.html checked-native.html +== checked.html checked.html +== checked-notref.html checked-notref.html +== checked-native.html checked-native.html +== checked-native-notref.html checked-native-notref.html +skip-if(!gtkWidget||Mulet) == gtk-theme-width-height.html gtk-theme-width-height.html +# bug 1141511: Disable some gtkWidget-dependant reftests on Mulet diff --git a/layout/reftests/forms/input/radio/reftest.list b/layout/reftests/forms/input/radio/reftest.list new file mode 100644 index 000000000..1aaec422d --- /dev/null +++ b/layout/reftests/forms/input/radio/reftest.list @@ -0,0 +1,8 @@ +== label-dynamic.html label-dynamic-ref.html +!= checked.html checked-notref.html +!= checked-native.html checked-native-notref.html +!= checked.html about:blank +!= checked-notref.html about:blank +!= checked-native.html about:blank +!= checked-native-notref.html about:blank +skip-if(!gtkWidget) == gtk-theme-width-height.html gtk-theme-width-height-ref.html 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 000000000..ef65c9297 --- /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 000000000..929887d65 --- /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 000000000..a4b73e23a --- /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/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 000000000..3103fc721 --- /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 000000000..d9514542f --- /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 000000000..f2758db17 --- /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 000000000..162d55504 --- /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 000000000..ffb5ffa58 --- /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 000000000..0e1fffaf1 --- /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 000000000..18a018330 --- /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 000000000..73af6dcb0 --- /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 000000000..8adc10112 --- /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 000000000..fd914edfd --- /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 000000000..ffe43266c --- /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 000000000..623f60810 --- /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 000000000..365c62c99 --- /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 000000000..3103fc721 --- /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 000000000..24dccffea --- /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 000000000..8bf48f7e9 --- /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 000000000..ffb5ffa58 --- /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-orient-block.html b/layout/reftests/forms/input/range/range-orient-block.html new file mode 100644 index 000000000..df4a3e250 --- /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 000000000..01fe1f75c --- /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 000000000..be7bb4b0b --- /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 000000000..ef1012bd4 --- /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 000000000..205e7de02 --- /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 000000000..321822f2b --- /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-vlr-orient-block.html b/layout/reftests/forms/input/range/range-vlr-orient-block.html new file mode 100644 index 000000000..b2d009bd8 --- /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 000000000..406eb646e --- /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 000000000..c505ad8af --- /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" 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 000000000..c6ad0c16b --- /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" 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 000000000..38fde6556 --- /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" 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 000000000..07edd1258 --- /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 000000000..66637c652 --- /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 000000000..035c56b07 --- /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" 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 000000000..1f5a73201 --- /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" 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 000000000..e1ac59cc6 --- /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" max=100 value=70> diff --git a/layout/reftests/forms/input/range/reftest-stylo.list b/layout/reftests/forms/input/range/reftest-stylo.list new file mode 100644 index 000000000..776a29fb2 --- /dev/null +++ b/layout/reftests/forms/input/range/reftest-stylo.list @@ -0,0 +1,54 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing + +# sanity checks: +skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html +skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html +skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html + +# dynamic type changes: +fuzzy-if(skiaContent,1,40) == to-range-from-other-type-unthemed-1.html to-range-from-other-type-unthemed-1.html +== from-range-to-other-type-unthemed-1.html from-range-to-other-type-unthemed-1.html + +# for different values: +== different-fraction-of-range-unthemed-1.html different-fraction-of-range-unthemed-1.html +== same-fraction-of-range-unthemed-1.html same-fraction-of-range-unthemed-1.html + +# dynamic value changes: +fails fuzzy-if(skiaContent,1,40) == value-prop-unthemed.html value-prop-unthemed.html +== value-prop.html value-prop.html +fails fuzzy-if(skiaContent,1,40) == valueAsNumber-prop-unthemed.html valueAsNumber-prop-unthemed.html +== valueAsNumber-prop.html valueAsNumber-prop.html +fails fuzzy-if(B2G,2,1) fuzzy-if(skiaContent,1,40) == stepDown-unthemed.html stepDown-unthemed.html +fuzzy-if(B2G,2,1) == stepDown.html stepDown.html +fails fuzzy-if(skiaContent,1,40) == stepUp-unthemed.html stepUp-unthemed.html +== stepUp.html stepUp.html +fuzzy-if(B2G,2,1) == max-prop.html max-prop.html +skip == reset-value.html reset-value.html + +# 'direction' property: +== direction-unthemed-1.html direction-unthemed-1.html + +# ::-moz-range-progress pseudo-element: +fails-if(B2G||Mulet||Android) == moz-range-progress-1.html moz-range-progress-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +== moz-range-progress-2.html moz-range-progress-2.html +== moz-range-progress-3.html moz-range-progress-3.html + +# Tests for block and inline orientation in combination with writing-mode +# XXX Remove default-preferences setting here after bug 1138384 makes +# it the default for all channels + +== range-orient-horizontal.html range-orient-horizontal.html +== range-orient-horizontal.html range-orient-horizontal.html +== range-orient-block.html range-orient-block.html +== range-orient-inline.html range-orient-inline.html +== range-vlr.html range-vlr.html +== range-vlr-orient-block.html range-vlr-orient-block.html +== range-vlr-orient-inline.html range-vlr-orient-inline.html +== range-vlr-orient-horizontal.html range-vlr-orient-horizontal.html +== range-vlr-orient-vertical.html range-vlr-orient-vertical.html +== range-vrl.html range-vrl.html +== range-vrl-orient-block.html range-vrl-orient-block.html +== range-vrl-orient-inline.html range-vrl-orient-inline.html +== range-vrl-orient-horizontal.html range-vrl-orient-horizontal.html +== range-vrl-orient-vertical.html range-vrl-orient-vertical.html diff --git a/layout/reftests/forms/input/range/reftest.list b/layout/reftests/forms/input/range/reftest.list new file mode 100644 index 000000000..8c2c231a3 --- /dev/null +++ b/layout/reftests/forms/input/range/reftest.list @@ -0,0 +1,49 @@ + +# 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-if(skiaContent,1,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-if(skiaContent,1,40) == value-prop-unthemed.html 75pct-unthemed-common-ref.html +== value-prop.html 75pct-common-ref.html +fuzzy-if(skiaContent,1,40) == valueAsNumber-prop-unthemed.html 75pct-unthemed-common-ref.html +== valueAsNumber-prop.html 75pct-common-ref.html +fuzzy-if(skiaContent,1,40) == stepDown-unthemed.html 75pct-unthemed-common-ref.html +== stepDown.html 75pct-common-ref.html +fuzzy-if(skiaContent,1,40) == stepUp-unthemed.html 75pct-unthemed-common-ref.html +== stepUp.html 75pct-common-ref.html +== max-prop.html 100pct-common-ref.html +== reset-value.html reset-value-ref.html + +# 'direction' property: +== direction-unthemed-1.html direction-unthemed-1-ref.html + +# ::-moz-range-progress pseudo-element: +fails-if(Android) == 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 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 000000000..74675c2d7 --- /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 000000000..2ccb36765 --- /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 000000000..6aefd17bc --- /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 000000000..3c9f0e7ce --- /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 000000000..6d4d6708a --- /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 000000000..e482af490 --- /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 000000000..1e4198cc6 --- /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 000000000..139e6c797 --- /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 000000000..3103fc721 --- /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 000000000..86ff0c521 --- /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/value-prop-unthemed.html b/layout/reftests/forms/input/range/value-prop-unthemed.html new file mode 100644 index 000000000..46387af2e --- /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 000000000..66be83704 --- /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 000000000..a2a6eb6cc --- /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 000000000..c00fe8bf4 --- /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> diff --git a/layout/reftests/forms/input/reftest-stylo.list b/layout/reftests/forms/input/reftest-stylo.list new file mode 100644 index 000000000..c3ab90d2c --- /dev/null +++ b/layout/reftests/forms/input/reftest-stylo.list @@ -0,0 +1,14 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +include checkbox/reftest-stylo.list +include email/reftest-stylo.list +include tel/reftest-stylo.list +include search/reftest-stylo.list +include url/reftest-stylo.list +include number/reftest-stylo.list +include file/reftest-stylo.list +include radio/reftest-stylo.list +include range/reftest-stylo.list +include text/reftest-stylo.list +include percentage/reftest-stylo.list +include hidden/reftest-stylo.list +include color/reftest-stylo.list diff --git a/layout/reftests/forms/input/reftest.list b/layout/reftests/forms/input/reftest.list new file mode 100644 index 000000000..7de1175ef --- /dev/null +++ b/layout/reftests/forms/input/reftest.list @@ -0,0 +1,14 @@ +include checkbox/reftest.list +include email/reftest.list +include tel/reftest.list +include search/reftest.list +include url/reftest.list +include number/reftest.list +include file/reftest.list +include radio/reftest.list +include range/reftest.list +include text/reftest.list +include percentage/reftest.list +include hidden/reftest.list +include color/reftest.list +include datetime/reftest.list diff --git a/layout/reftests/forms/input/search/1.html b/layout/reftests/forms/input/search/1.html new file mode 100644 index 000000000..93bdd26b0 --- /dev/null +++ b/layout/reftests/forms/input/search/1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: input element in search state looks like in text state --> + <body> + <input type="search"> + </body> +</html> diff --git a/layout/reftests/forms/input/search/2.html b/layout/reftests/forms/input/search/2.html new file mode 100644 index 000000000..9c1f4151a --- /dev/null +++ b/layout/reftests/forms/input/search/2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: input element in search state looks like in text state --> + <script type="text/javascript"> + function setToSearch() + { + document.getElementById('i').type = 'search'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setToSearch(); disableReftestWait();"> + <input type='checkbox' id='i'> + </body> +</html> diff --git a/layout/reftests/forms/input/search/3.html b/layout/reftests/forms/input/search/3.html new file mode 100644 index 000000000..2e4ce9c8b --- /dev/null +++ b/layout/reftests/forms/input/search/3.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when switching to another type, the input element should not look + like an input search element --> + <script type="text/javascript"> + function setToCheckbox() + { + document.getElementById('i').type = 'checkbox'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setToCheckbox(); disableReftestWait();"> + <input type='search' id='i'> + </body> +</html> diff --git a/layout/reftests/forms/input/search/ref.html b/layout/reftests/forms/input/search/ref.html new file mode 100644 index 000000000..07e5eee7e --- /dev/null +++ b/layout/reftests/forms/input/search/ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text"> + </body> +</html> diff --git a/layout/reftests/forms/input/search/reftest-stylo.list b/layout/reftests/forms/input/search/reftest-stylo.list new file mode 100644 index 000000000..021c5f861 --- /dev/null +++ b/layout/reftests/forms/input/search/reftest-stylo.list @@ -0,0 +1,4 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== 1.html 1.html +== 2.html 2.html +== 3.html 3.html diff --git a/layout/reftests/forms/input/search/reftest.list b/layout/reftests/forms/input/search/reftest.list new file mode 100644 index 000000000..dcca7a3cd --- /dev/null +++ b/layout/reftests/forms/input/search/reftest.list @@ -0,0 +1,3 @@ +== 1.html ref.html +== 2.html ref.html +!= 3.html ref.html diff --git a/layout/reftests/forms/input/tel/1.html b/layout/reftests/forms/input/tel/1.html new file mode 100644 index 000000000..4a034de07 --- /dev/null +++ b/layout/reftests/forms/input/tel/1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: input element in telephone state looks like in text state --> + <body> + <input type="tel"> + </body> +</html> diff --git a/layout/reftests/forms/input/tel/2.html b/layout/reftests/forms/input/tel/2.html new file mode 100644 index 000000000..47b530bfe --- /dev/null +++ b/layout/reftests/forms/input/tel/2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: input element in telephone state looks like in text state --> + <script type="text/javascript"> + function setToTel() + { + document.getElementById('i').type='tel'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setToTel(); disableReftestWait();"> + <input type='checkbox' id='i'> + </body> +</html> diff --git a/layout/reftests/forms/input/tel/3.html b/layout/reftests/forms/input/tel/3.html new file mode 100644 index 000000000..c1348e6f7 --- /dev/null +++ b/layout/reftests/forms/input/tel/3.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when switching to another type, the input element should not look + like an input tel element --> + <script type="text/javascript"> + function setToCheckbox() + { + document.getElementById('i').type='checkbox'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setToCheckbox(); disableReftestWait();"> + <input type='tel' id='i'> + </body> +</html> diff --git a/layout/reftests/forms/input/tel/ref.html b/layout/reftests/forms/input/tel/ref.html new file mode 100644 index 000000000..07e5eee7e --- /dev/null +++ b/layout/reftests/forms/input/tel/ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text"> + </body> +</html> diff --git a/layout/reftests/forms/input/tel/reftest-stylo.list b/layout/reftests/forms/input/tel/reftest-stylo.list new file mode 100644 index 000000000..021c5f861 --- /dev/null +++ b/layout/reftests/forms/input/tel/reftest-stylo.list @@ -0,0 +1,4 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== 1.html 1.html +== 2.html 2.html +== 3.html 3.html diff --git a/layout/reftests/forms/input/tel/reftest.list b/layout/reftests/forms/input/tel/reftest.list new file mode 100644 index 000000000..dcca7a3cd --- /dev/null +++ b/layout/reftests/forms/input/tel/reftest.list @@ -0,0 +1,3 @@ +== 1.html ref.html +== 2.html ref.html +!= 3.html ref.html diff --git a/layout/reftests/forms/input/text/baseline-1-ref.html b/layout/reftests/forms/input/text/baseline-1-ref.html new file mode 100644 index 000000000..427911eb0 --- /dev/null +++ b/layout/reftests/forms/input/text/baseline-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Text baseline positioning reference</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <style type="text/css"> + @font-face { + font-family: "MarkA"; + src: url(../fonts/markA.ttf); + } + input { + font-family: "MarkA", sans-serif; + font-size: 32px; + } + </style> +</head> +<body> + <input size="2" value="AAAAAAAA"> +</body> +</html> diff --git a/layout/reftests/forms/input/text/baseline-1.html b/layout/reftests/forms/input/text/baseline-1.html new file mode 100644 index 000000000..59e92018b --- /dev/null +++ b/layout/reftests/forms/input/text/baseline-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Text baseline positioning test</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <!-- + The primary font MarkA has a small line height. The fallback font + (used for the character '1') will probably have a maximum ascent + greater than the ascent plus half leading of MarkA, but this + should not adversly affect the positioning of characters from the + primary font. Currently the maximum ascent of the fallback font + has no effect on the position, but if a future implementation + considers the fallback font in the position, this test may need to + be modified to accommodate. + --> + <style type="text/css"> + @font-face { + font-family: "MarkA"; + src: url(../fonts/markA.ttf); + } + input { + font-family: "MarkA", sans-serif; + font-size: 32px; + } + </style> +</head> +<body> + <input size="2" value="AAAAAAAA1"> +</body> +</html> diff --git a/layout/reftests/forms/input/text/bounds-1-ref.html b/layout/reftests/forms/input/text/bounds-1-ref.html new file mode 100644 index 000000000..14d39ba72 --- /dev/null +++ b/layout/reftests/forms/input/text/bounds-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference for bug 806583 test</title> + <style> + body { background: blue } + </style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/forms/input/text/bounds-1.html b/layout/reftests/forms/input/text/bounds-1.html new file mode 100644 index 000000000..4af490dce --- /dev/null +++ b/layout/reftests/forms/input/text/bounds-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>Test for bug 806583</title> + <style> + body, div { background: blue } + div { position: fixed; } + </style> +</head> +<body> + <input id="input"> + <div id="cover"/> + <script> +var rect = document.getElementById("input").getBoundingClientRect(); +var cover = document.getElementById("cover"); +cover.style.left = rect.left + "px"; +cover.style.top = rect.top + "px"; +cover.style.width = rect.width + "px"; +cover.style.height = rect.height + "px"; + </script> +</body> +</html> diff --git a/layout/reftests/forms/input/text/centering-1-ref.xul b/layout/reftests/forms/input/text/centering-1-ref.xul new file mode 100644 index 000000000..f1bf3e49c --- /dev/null +++ b/layout/reftests/forms/input/text/centering-1-ref.xul @@ -0,0 +1,28 @@ +<?xml version="1.0"?> +<window title="Text input text centering reference" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <html:style type="text/css"> + @font-face { + font-family: "Ahem"; + src: url(../fonts/Ahem.ttf); + } + hbox { + height: 128px; + background-color: white; + } + input { + height: 64px; + background-color: white; + border: none; + margin: 0px; + padding: 0px; + font-family: "Ahem", sans-serif; + font-size: 32px; + } + </html:style> + + <hbox align="center"> + <html:input value="Ahem"/> + </hbox> +</window> diff --git a/layout/reftests/forms/input/text/centering-1.xul b/layout/reftests/forms/input/text/centering-1.xul new file mode 100644 index 000000000..dc72bda55 --- /dev/null +++ b/layout/reftests/forms/input/text/centering-1.xul @@ -0,0 +1,39 @@ +<?xml version="1.0"?> +<window title="Text input text centering test" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <!-- + + There is no spec that says where text within an html text input element + should be placed, but some sort of centering reduces the likelihood or + extent of clipping. + + This test uses a font where every character used has an ascent and + descent equal to typographical ascent of the font. This makes it + unlikely that using a different concept of centering will change the + results of this test. + + --> + <html:style type="text/css"> + @font-face { + font-family: "Ahem"; + src: url(../fonts/Ahem.ttf); + } + hbox { + height: 128px; + background-color: white; + } + input { + background-color: white; + border: none; + margin: 0px; + padding: 0px; + font-family: "Ahem", sans-serif; + font-size: 32px; + } + </html:style> + + <hbox align="stretch"> + <html:input value="Ahem"/> + </hbox> +</window> diff --git a/layout/reftests/forms/input/text/dynamic-height-1-ref.xul b/layout/reftests/forms/input/text/dynamic-height-1-ref.xul new file mode 100644 index 000000000..7b82803e0 --- /dev/null +++ b/layout/reftests/forms/input/text/dynamic-height-1-ref.xul @@ -0,0 +1,9 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <hbox align="stretch"> + <box style="height: 5em"/> + <html:input value="YO"/> + </hbox> +</window> diff --git a/layout/reftests/forms/input/text/dynamic-height-1.xul b/layout/reftests/forms/input/text/dynamic-height-1.xul new file mode 100644 index 000000000..f95469f19 --- /dev/null +++ b/layout/reftests/forms/input/text/dynamic-height-1.xul @@ -0,0 +1,23 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + onload="onLoad();"> + <script type="application/javascript"> +<![CDATA[ + function onLoad() + { + var adjust = document.getElementById("adjust"); + flush(); + adjust.style.height = "5em"; + } + + function flush() { document.documentElement.getBoundingClientRect(); } + +]]> + </script> + <hbox align="stretch"> + <box id="adjust"/> + <html:input id="input" value="YO"/> + </hbox> +</window> diff --git a/layout/reftests/forms/input/text/intrinsic-size-ref.html b/layout/reftests/forms/input/text/intrinsic-size-ref.html new file mode 100644 index 000000000..2735336e3 --- /dev/null +++ b/layout/reftests/forms/input/text/intrinsic-size-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>Intrinsic Size Test Reference</title> + <style>input, textarea { border-radius:0; background:none; border:none; }</style> + </head> + <body> + <div> + <span style="border:2px solid black; padding-left:200px"><input style="background-color:transparent; border:none; font-family:monospace"/></span> + </div> + </body> +</html> diff --git a/layout/reftests/forms/input/text/intrinsic-size.html b/layout/reftests/forms/input/text/intrinsic-size.html new file mode 100644 index 000000000..ef5c3da83 --- /dev/null +++ b/layout/reftests/forms/input/text/intrinsic-size.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>Intrinsic Size Test</title> + <style>input, textarea { border-radius:0; background:none; border:none; }</style> + </head> + <body> + <div> + <span style="border:2px solid black"><input style="background-color:transparent; border:none; font-family:monospace; padding-left:201px"/></span> + </div> + </body> +</html> diff --git a/layout/reftests/forms/input/text/line-height-0.5.html b/layout/reftests/forms/input/text/line-height-0.5.html new file mode 100644 index 000000000..e60a5f3a8 --- /dev/null +++ b/layout/reftests/forms/input/text/line-height-0.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 0.5 } + +</style> +<input type="text" value="text input" size="20"> diff --git a/layout/reftests/forms/input/text/line-height-1.0.html b/layout/reftests/forms/input/text/line-height-1.0.html new file mode 100644 index 000000000..52a0fde6c --- /dev/null +++ b/layout/reftests/forms/input/text/line-height-1.0.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 1.0 } + +</style> +<input type="text" value="text input" size="20"> diff --git a/layout/reftests/forms/input/text/line-height-1.5.html b/layout/reftests/forms/input/text/line-height-1.5.html new file mode 100644 index 000000000..4363b09a2 --- /dev/null +++ b/layout/reftests/forms/input/text/line-height-1.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 1.5 } + +</style> +<input type="text" value="text input" size="20"> diff --git a/layout/reftests/forms/input/text/reftest-stylo.list b/layout/reftests/forms/input/text/reftest-stylo.list new file mode 100644 index 000000000..86f890acd --- /dev/null +++ b/layout/reftests/forms/input/text/reftest-stylo.list @@ -0,0 +1,16 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== bounds-1.html bounds-1.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,121,84) == size-1.html size-1.html +skip-if(B2G||Mulet) == size-2.html size-2.html +# Initial mulet triage: parity with B2G/B2G Desktop +HTTP(..) == baseline-1.html baseline-1.html +skip-if((B2G&&browserIsRemote)||Mulet) HTTP(..) == centering-1.xul centering-1.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if((B2G&&browserIsRemote)||Mulet) == dynamic-height-1.xul dynamic-height-1.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +fuzzy-if(skiaContent,1,500) needs-focus == select.html select.html +== intrinsic-size.html intrinsic-size.html +== line-height-0.5.html line-height-0.5.html +== line-height-1.5.html line-height-1.5.html diff --git a/layout/reftests/forms/input/text/reftest.list b/layout/reftests/forms/input/text/reftest.list new file mode 100644 index 000000000..7f75af36a --- /dev/null +++ b/layout/reftests/forms/input/text/reftest.list @@ -0,0 +1,10 @@ +== bounds-1.html bounds-1-ref.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,140,111) == size-1.html size-1-ref.html +== size-2.html size-2-ref.html +HTTP(..) == baseline-1.html baseline-1-ref.html +HTTP(..) == centering-1.xul centering-1-ref.xul +== dynamic-height-1.xul dynamic-height-1-ref.xul +fuzzy-if(skiaContent,1,500) needs-focus == select.html select-ref.html +== intrinsic-size.html intrinsic-size-ref.html +== line-height-0.5.html line-height-1.0.html +!= line-height-1.5.html line-height-1.0.html diff --git a/layout/reftests/forms/input/text/select-ref.html b/layout/reftests/forms/input/text/select-ref.html new file mode 100644 index 000000000..added237c --- /dev/null +++ b/layout/reftests/forms/input/text/select-ref.html @@ -0,0 +1,18 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function finishTest() { + document.documentElement.removeAttribute("class"); + } + function runTest() { + var field = document.getElementById('field'); + field.focus(); + field.select(); + setTimeout(finishTest, 0); + } + </script> + </head> + <body onload="runTest()"> + <input id="field" type="text" value="1234"> + </body> +</html> diff --git a/layout/reftests/forms/input/text/select.html b/layout/reftests/forms/input/text/select.html new file mode 100644 index 000000000..eba0c3824 --- /dev/null +++ b/layout/reftests/forms/input/text/select.html @@ -0,0 +1,21 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function finishTest() { + document.documentElement.removeAttribute("class"); + } + function runTest() { + var field = document.getElementById('field'); + field.focus(); + field.disabled = true; + field.setSelectionRange(0, 4); + field.disabled = false; + field.select(); + setTimeout(finishTest, 0); + } + </script> + </head> + <body onload="runTest()"> + <input id="field" type="text" value="1234"> + </body> +</html> diff --git a/layout/reftests/forms/input/text/size-1-ref.html b/layout/reftests/forms/input/text/size-1-ref.html new file mode 100644 index 000000000..c9a480358 --- /dev/null +++ b/layout/reftests/forms/input/text/size-1-ref.html @@ -0,0 +1,3 @@ +<html lang="en"> + <input size="4" value="1234" style="font-family: monospace"> +</html> diff --git a/layout/reftests/forms/input/text/size-1.html b/layout/reftests/forms/input/text/size-1.html new file mode 100644 index 000000000..e0390261d --- /dev/null +++ b/layout/reftests/forms/input/text/size-1.html @@ -0,0 +1,3 @@ +<html lang="en"> + <input size="4" value="1234|6" style="font-family: monospace"> +</html> diff --git a/layout/reftests/forms/input/text/size-2-ref.html b/layout/reftests/forms/input/text/size-2-ref.html new file mode 100644 index 000000000..94512260b --- /dev/null +++ b/layout/reftests/forms/input/text/size-2-ref.html @@ -0,0 +1,5 @@ +<html lang="en"> +<body style="background-color:white;"> + <input size="40" value="1234" style="background-color:white; color:black; font-family: monospace; border: none"> +</body> +</html> diff --git a/layout/reftests/forms/input/text/size-2.html b/layout/reftests/forms/input/text/size-2.html new file mode 100644 index 000000000..7353238f7 --- /dev/null +++ b/layout/reftests/forms/input/text/size-2.html @@ -0,0 +1,5 @@ +<html lang="en"> +<body style="background-color:white;"> + <input size="4" value="1234" style="background-color:white; color:black; font-family: monospace; border: none"> +</body> +</html> diff --git a/layout/reftests/forms/input/url/1.html b/layout/reftests/forms/input/url/1.html new file mode 100644 index 000000000..a2ce658b4 --- /dev/null +++ b/layout/reftests/forms/input/url/1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: input element in url state looks like in text state --> + <body> + <input type="url"> + </body> +</html> diff --git a/layout/reftests/forms/input/url/2.html b/layout/reftests/forms/input/url/2.html new file mode 100644 index 000000000..58302d278 --- /dev/null +++ b/layout/reftests/forms/input/url/2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: input element in url state looks like in text state --> + <script type="text/javascript"> + function setToURL() + { + document.getElementById('i').type = 'url'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setToURL(); disableReftestWait();"> + <input type='checkbox' id='i'> + </body> +</html> diff --git a/layout/reftests/forms/input/url/3.html b/layout/reftests/forms/input/url/3.html new file mode 100644 index 000000000..b9f13924a --- /dev/null +++ b/layout/reftests/forms/input/url/3.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when switching to another type, the input element should not look + like an input url element --> + <script type="text/javascript"> + function setToCheckbox() + { + document.getElementById('i').type='checkbox'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setToCheckbox(); disableReftestWait();"> + <input type='url' id='i'> + </body> +</html> diff --git a/layout/reftests/forms/input/url/ref.html b/layout/reftests/forms/input/url/ref.html new file mode 100644 index 000000000..07e5eee7e --- /dev/null +++ b/layout/reftests/forms/input/url/ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text"> + </body> +</html> diff --git a/layout/reftests/forms/input/url/reftest-stylo.list b/layout/reftests/forms/input/url/reftest-stylo.list new file mode 100644 index 000000000..021c5f861 --- /dev/null +++ b/layout/reftests/forms/input/url/reftest-stylo.list @@ -0,0 +1,4 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== 1.html 1.html +== 2.html 2.html +== 3.html 3.html diff --git a/layout/reftests/forms/input/url/reftest.list b/layout/reftests/forms/input/url/reftest.list new file mode 100644 index 000000000..dcca7a3cd --- /dev/null +++ b/layout/reftests/forms/input/url/reftest.list @@ -0,0 +1,3 @@ +== 1.html ref.html +== 2.html ref.html +!= 3.html ref.html diff --git a/layout/reftests/forms/legend/1273433-ref.html b/layout/reftests/forms/legend/1273433-ref.html new file mode 100644 index 000000000..6c28a9f0c --- /dev/null +++ b/layout/reftests/forms/legend/1273433-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1273433</title> + <style type="text/css"> + +html,body { + color:black; background-color:white; font-size:12px; padding:0; margin:0; +} + +fieldset { border: 1px solid black; } +.v { writing-mode: vertical-lr; height:300px; float:left; } +legend { width: 100px; border:1px solid blue; } +.v legend, .rl legend { width: auto; height: 100px; } +.rtl { direction:rtl; } +.ltr { direction:ltr; } + + </style> +</head> +<body> + +<fieldset align="left"><legend>(unset)</legend></fieldset> +<fieldset><legend align="left">left</legend></fieldset> +<fieldset class="rtl"><legend style="text-align:left">right</legend></fieldset> + +<fieldset><legend align="right" style="text-align:right">(unset)</legend><div class=rtl>RTL</div></fieldset> +<fieldset><legend align="left" style="text-align:right">left</legend><div class=rtl>RTL</div></fieldset> +<fieldset><legend align="right" style="text-align:right">right</legend><div class=rtl>RTL</div></fieldset> + +<fieldset><legend>left</legend><div class=rtl>RTL</div></fieldset> +<fieldset><legend align="right" style="text-align:left">right</legend><div class=rtl>RTL</div></fieldset> + +<fieldset><legend align="left">bottom</legend></fieldset> +<fieldset><legend align="left">top</legend></fieldset> + +<fieldset class="v"><legend align="left">(unset)</legend></fieldset> +<fieldset class="v"><legend align="left">left</legend></fieldset> +<fieldset class="v rtl"><legend style="text-align:left">right</legend></fieldset> + +<fieldset class="v"><legend align="right" style="text-align:right">(unset)</legend><div class=rtl>RTL</div></fieldset> +<fieldset class="v"><legend align="left" style="text-align:right">left</legend><div class=rtl>RTL</div></fieldset> +<fieldset class="v"><legend align="right" style="text-align:right">right</legend><div class=rtl>RTL</div></fieldset> + +<fieldset class="v"><legend>left</legend><div class=rtl>RTL</div></fieldset> +<fieldset class="v"><legend align="right" style="text-align:left">right</legend><div class=rtl>RTL</div></fieldset> + +<fieldset class="v"><legend align="left">bottom</legend></fieldset> +<fieldset class="v"><legend align="left">top</legend></fieldset> + +</body> +</html> diff --git a/layout/reftests/forms/legend/1273433.html b/layout/reftests/forms/legend/1273433.html new file mode 100644 index 000000000..beb1b0907 --- /dev/null +++ b/layout/reftests/forms/legend/1273433.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase for bug 1273433</title> + <style type="text/css"> + +html,body { + color:black; background-color:white; font-size:12px; padding:0; margin:0; +} + +fieldset { border: 1px solid black; } +.v { writing-mode: vertical-lr; height:300px; float:left; } +legend { width: 100px; border:1px solid blue; } +.v legend, .rl legend { width: auto; height: 100px; } +.rtl { direction:rtl; } +.ltr { direction:ltr; } + + </style> +</head> +<body> + +<fieldset><legend>(unset)</legend></fieldset> +<fieldset><legend align="left">left</legend></fieldset> +<fieldset><legend align="right">right</legend></fieldset> + +<fieldset class="rtl"><legend>(unset)</legend>RTL</fieldset> +<fieldset class="rtl"><legend align="left">left</legend>RTL</fieldset> +<fieldset class="rtl"><legend align="right">right</legend>RTL</fieldset> + +<fieldset class="rtl"><legend class="ltr" align="left">left</legend>RTL</fieldset> +<fieldset class="rtl"><legend class="ltr" align="right">right</legend>RTL</fieldset> + +<fieldset><legend align="bottom">bottom</legend></fieldset> +<fieldset><legend align="top">top</legend></fieldset> + +<fieldset class="v"><legend>(unset)</legend></fieldset> +<fieldset class="v"><legend align="left">left</legend></fieldset> +<fieldset class="v"><legend align="right">right</legend></fieldset> + +<fieldset class="v rtl"><legend>(unset)</legend>RTL</fieldset> +<fieldset class="v rtl"><legend align="left">left</legend>RTL</fieldset> +<fieldset class="v rtl"><legend align="right">right</legend>RTL</fieldset> + +<fieldset class="v rtl"><legend class="ltr" align="left">left</legend>RTL</fieldset> +<fieldset class="v rtl"><legend class="ltr" align="right">right</legend>RTL</fieldset> + +<fieldset class="v"><legend align="bottom">bottom</legend></fieldset> +<fieldset class="v"><legend align="top">top</legend></fieldset> + +</body> +</html> diff --git a/layout/reftests/forms/legend/legend-ref.html b/layout/reftests/forms/legend/legend-ref.html new file mode 100644 index 000000000..8238e239f --- /dev/null +++ b/layout/reftests/forms/legend/legend-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE HTML> +<html><head> + <title>Testcase for bug 740743</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +fieldset { padding: 2px; } +legend { padding: 0; } +span { background: lime; display: block;} +legend > span { + padding-left: 2px; + padding-right: 2px; +} + +.s10 { width:10px; height:10px; } +.h10 { height:10px; } +.w50 { width:50px; } +.hidden { overflow:hidden; } +.scroll { overflow:scroll; } +.auto { overflow:auto; } + +.o { text-overflow: ellipsis; } + +#inline span { display:inline; } +#inline-block span { display:inline-block; } + + </style> +</head> +<body> + +<fieldset><legend><span class="hidden s10"><b>Legend Test</b></span></legend></fieldset> +<fieldset><legend><span class="scroll s10">Legend Test</span></legend></fieldset> +<fieldset><legend><span class="auto s10">Legend Test</span></legend></fieldset> +<fieldset><legend><span class="hidden w50"><b>Legend Test</b></span></legend></fieldset> +<fieldset><legend><span class="scroll w50">Legend Test</span></legend></fieldset> +<fieldset><legend><span class="auto w50"><b>Legend Test</b></span></legend></fieldset> +<fieldset><legend><span class="hidden">Legend Test</span></legend></fieldset> +<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset> +<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset> +<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset> + +<fieldset><legend><span class="hidden w50 o"><b>Legend Test</b></span></legend></fieldset> +<fieldset><legend><span class="hidden w50 o">Test Legend</span></legend></fieldset> +<fieldset><legend><span class="hidden o">Test Legend</span></legend></fieldset> +<fieldset><legend><span class="auto w50 o"><b>Legend Test</b></span></legend></fieldset> +<fieldset><legend align="right"><span class="hidden w50 o">Test Legend</span></legend></fieldset> +<fieldset><legend align="center"><span class="hidden w50 o">Test Legend</span></legend></fieldset> + +<div id="inline"> +<span class="hidden s10"><b>Legend Test</b></span> +<span class="scroll s10">Legend Test</span> +<span class="auto s10">Legend Test</span> +<span class="hidden w50"><b>Legend Test</b></span> +<span class="scroll w50">Legend Test</span> +<span class="auto w50"><b>Legend Test</b></span> +<span class="hidden">Legend Test</span> +<span class="auto"><b>Legend Test</b></span> + +<span class="hidden w50 o"><b>Legend Test</b></span> +<span class="hidden w50 o">Test Legend</span> +<span class="hidden o">Test Legend</span> +<span class="auto w50 o"><b>Legend Test</b></span> +<span class="hidden w50 o">Test Legend</span> +<span class="hidden w50 o">Test Legend</span> +</div> + +<div id="inline-block"> +<span class="hidden s10"><b>Legend Test</b></span> +<span class="scroll s10">Legend Test</span> +<span class="auto s10">Legend Test</span> +<span class="hidden w50"><b>Legend Test</b></span> +<span class="scroll w50">Legend Test</span> +<span class="auto w50"><b>Legend Test</b></span> +<span class="hidden">Legend Test</span> +<span class="auto"><b>Legend Test</b></span> +<span class="auto"><b>Legend Test</b></span> + +<span class="hidden w50 o"><b>Legend Test</b></span> +<span class="hidden w50 o">Test Legend</span> +<span class="hidden o">Test Legend</span> +<span class="auto w50 o"><b>Legend Test</b></span> +<span class="hidden w50 o">Test Legend</span> +<span class="hidden w50 o">Test Legend</span> +</div> + +<span class="auto w50"><b>Legend Test</b></span> +<span><b>Legend Test</b></span> +<span><b>Legend Test</b></span> + +</body> +</html> diff --git a/layout/reftests/forms/legend/legend.html b/layout/reftests/forms/legend/legend.html new file mode 100644 index 000000000..9d05fbe6a --- /dev/null +++ b/layout/reftests/forms/legend/legend.html @@ -0,0 +1,87 @@ +<!DOCTYPE HTML> +<html><head> + <title>Testcase for bug 740743</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + +fieldset { padding: 2px; } +legend { background: lime; } +.s10 { width:10px; height:10px; } +.h10 { height:10px; } +.w50 { width:50px; } +.hidden { overflow:hidden; } +.scroll { overflow:scroll; } +.auto { overflow:auto; } + +.o { text-overflow: ellipsis; } + +#inline legend { display:inline; } +#inline-block legend { display:inline-block; } + </style> +</head> +<body> + +<fieldset><legend class="hidden s10"><b>Legend Test</b></legend></fieldset> +<fieldset><legend class="scroll s10">Legend Test</legend></fieldset> +<fieldset><legend class="auto s10">Legend Test</legend></fieldset> +<fieldset><legend class="hidden w50"><b>Legend Test</b></legend></fieldset> +<fieldset><legend class="scroll w50">Legend Test</legend></fieldset> +<fieldset><legend class="auto w50"><b>Legend Test</b></legend></fieldset> +<fieldset><legend class="hidden">Legend Test</legend></fieldset> +<fieldset><legend class="auto"><b>Legend Test</b></legend></fieldset> +<fieldset><legend class="auto" style="width:auto"><b>Legend Test</b></legend></fieldset> +<fieldset><legend style="width:auto"><b>Legend Test</b></legend></fieldset> + +<fieldset><legend class="hidden w50 o"><b>Legend Test</b></legend></fieldset> +<fieldset><legend class="hidden w50 o">Test Legend</legend></fieldset> +<fieldset><legend class="hidden o">Test Legend</legend></fieldset> +<fieldset><legend class="auto w50 o"><b>Legend Test</b></legend></fieldset> +<fieldset><legend class="hidden w50 o" align="right">Test Legend</legend></fieldset> +<fieldset><legend class="hidden w50 o" align="center">Test Legend</legend></fieldset> + +<div id="inline"> +<legend class="hidden s10"><b>Legend Test</b></legend> +<legend class="scroll s10">Legend Test</legend> +<legend class="auto s10">Legend Test</legend> +<legend class="hidden w50"><b>Legend Test</b></legend> +<legend class="scroll w50">Legend Test</legend> +<legend class="auto w50"><b>Legend Test</b></legend> +<legend class="hidden">Legend Test</legend> +<legend class="auto"><b>Legend Test</b></legend> + +<legend class="hidden w50 o"><b>Legend Test</b></legend> +<legend class="hidden w50 o">Test Legend</legend> +<legend class="hidden o">Test Legend</legend> +<legend class="auto w50 o"><b>Legend Test</b></legend> +<legend class="hidden w50 o" align="right">Test Legend</legend> +<legend class="hidden w50 o" align="center">Test Legend</legend> +</div> + +<div id="inline-block"> +<legend class="hidden s10"><b>Legend Test</b></legend> +<legend class="scroll s10">Legend Test</legend> +<legend class="auto s10">Legend Test</legend> +<legend class="hidden w50"><b>Legend Test</b></legend> +<legend class="scroll w50">Legend Test</legend> +<legend class="auto w50"><b>Legend Test</b></legend> +<legend class="hidden">Legend Test</legend> +<legend class="auto"><b>Legend Test</b></legend> +<legend class="auto" style="width:auto"><b>Legend Test</b></legend> + +<legend class="hidden w50 o"><b>Legend Test</b></legend> +<legend class="hidden w50 o">Test Legend</legend> +<legend class="hidden o">Test Legend</legend> +<legend class="auto w50 o"><b>Legend Test</b></legend> +<legend class="hidden w50 o" align="right">Test Legend</legend> +<legend class="hidden w50 o" align="center">Test Legend</legend> +</div> + +<legend class="auto w50"><b>Legend Test</b></legend> +<legend class="auto" zstyle="width:auto"><b>Legend Test</b></legend> +<legend style="width:auto"><b>Legend Test</b></legend> + +</body> +</html> diff --git a/layout/reftests/forms/legend/reftest-stylo.list b/layout/reftests/forms/legend/reftest-stylo.list new file mode 100644 index 000000000..e622ffda4 --- /dev/null +++ b/layout/reftests/forms/legend/reftest-stylo.list @@ -0,0 +1,5 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +skip-if(B2G||Mulet) == legend.html legend.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip == shadow-dom.html shadow-dom.html +== 1273433.html 1273433.html diff --git a/layout/reftests/forms/legend/reftest.list b/layout/reftests/forms/legend/reftest.list new file mode 100644 index 000000000..879835a59 --- /dev/null +++ b/layout/reftests/forms/legend/reftest.list @@ -0,0 +1,3 @@ +== legend.html legend-ref.html +fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.enabled,true) == shadow-dom.html shadow-dom-ref.html +== 1273433.html 1273433-ref.html diff --git a/layout/reftests/forms/legend/shadow-dom-ref.html b/layout/reftests/forms/legend/shadow-dom-ref.html new file mode 100644 index 000000000..472d33acf --- /dev/null +++ b/layout/reftests/forms/legend/shadow-dom-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html lang="en-US"> + <head> + <title>Test LEGEND placed into FIELDSET shadow DOM</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140579"> +<style> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +.inline { display:inline; } +z,.b { color:blue; } +</style> + </head> + <body> + <fieldset id="host1"><legend>1</legend>a c</fieldset> + <fieldset id="host2"><legend>2</legend>a c</fieldset> + <fieldset id="host3"><legend>3</legend>a c</fieldset> + <fieldset id="host4"><legend>4</legend>a c</fieldset> + <fieldset id="host5"><legend>5</legend>a c</fieldset> + <fieldset id="host6"><legend class="b">6</legend>a c</fieldset> + <fieldset id="host7"><legend>7</legend>a <legend class="inline">L</legend> B</fieldset> + <fieldset id="host8"><legend>a 8</legend>A <legend class="inline">L c</legend> B</fieldset> + <fieldset id="host9"><legend>a 9</legend>A <legend class="inline p0">a L2 c</legend><z>a<legend>L3</legend>c</z> B</fieldset> + </body> +</html> diff --git a/layout/reftests/forms/legend/shadow-dom.html b/layout/reftests/forms/legend/shadow-dom.html new file mode 100644 index 000000000..ad7babcf7 --- /dev/null +++ b/layout/reftests/forms/legend/shadow-dom.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait" lang="en-US"> + <head> + <title>Test LEGEND placed into FIELDSET shadow DOM</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140579"> + <link rel="match" href="shadow-dom-ref.html"> +<style> +html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; +} +.before::before {content: "a ";} +.after::after {content: " c";} +div.before::before {content: "X ";} +div.after::after {content: " Y";} +.b,.c { display:contents; } +</style> + </head> + <body> + <fieldset id="host1" class="before"></fieldset> + <fieldset id="host2"></fieldset> + <fieldset id="host3" class="after"></fieldset> + <fieldset id="host4" class="before after"></fieldset> + <fieldset id="host5" class="after"></fieldset> + <fieldset id="host6" class="before"></fieldset> + <fieldset id="host7"></fieldset> + <fieldset id="host8"></fieldset> + <fieldset id="host9"></fieldset> + + <script> + function shadow(id) { + return document.getElementById(id).createShadowRoot(); + } + function legend(s) { + var e = document.createElement("legend"); + var t = document.createTextNode(s); + e.appendChild(t); + return e; + } + function contents(n) { + var e = document.createElement("z"); + e.style.display = "contents"; + e.style.color = "blue"; + if (n) e.appendChild(n); + return e; + } + + document.body.offsetHeight; + + shadow("host1").innerHTML = '<content></content> c'; + shadow("host2").innerHTML = 'a <content></content> c'; + shadow("host3").innerHTML = 'a <content></content>'; + shadow("host4").innerHTML = '<content></content>'; + shadow("host5").innerHTML = 'a <content></content>'; + shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c'; + shadow("host7").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B'; + shadow("host8").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B'; + shadow("host9").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>'; + + function tweak() { + document.body.offsetHeight; + + host1.appendChild(legend("1")); + host2.appendChild(legend("2")); + host3.appendChild(legend("3")); + host4.appendChild(legend("4")); + + var e = legend("5"); + e.style.display = "contents"; + host5.appendChild(e); + + host6.appendChild(legend("6")); + + var e = legend("L"); + e.className = "b"; + host7.appendChild(e); + var e = legend("7"); + e.className = "c"; + host7.appendChild(e); + + var e = legend("L"); + e.className = "b after"; + host8.appendChild(e); + var e = legend("8"); + e.className = "c before"; + host8.appendChild(e); + + var e = legend("L2"); + e.className = "b before after"; + host9.appendChild(e); + var e = contents(legend(" L3")); + e.className = "b before after"; + host9.appendChild(e); + var e = legend("9"); + e.className = "c before"; + host9.appendChild(e); + + document.body.offsetHeight; + setTimeout(function() { + document.body.offsetHeight; + document.documentElement.removeAttribute("class"); + },0); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </body> +</html> diff --git a/layout/reftests/forms/meter/bar-pseudo-element-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-ref.html new file mode 100644 index 000000000..c9576fc40 --- /dev/null +++ b/layout/reftests/forms/meter/bar-pseudo-element-ref.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) > .meter-bar { margin: 10px; padding: 0px; } + body > div:nth-child(2) > .meter-bar { margin: 0px; padding: 10px; } + body > div:nth-child(3) > .meter-bar { margin: 10px; padding: 10px; } + body > div:nth-child(4) > .meter-bar { margin: 5px; padding: 5px; } + body > div:nth-child(5) > .meter-bar { margin: 50px; padding: 50px; } + body > div:nth-child(6) > .meter-bar { margin: 100px; padding: 100px; } + body > div:nth-child(7) > .meter-bar { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) > .meter-bar { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) > .meter-bar { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) > .meter-bar { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) > .meter-bar { margin: 200px; padding: 0px; } + body > div:nth-child(16) > .meter-bar { margin: 0px; padding: 200px; } + /* 15 - 18 should have 100% width, no need to specify. */ + </style> + <body> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html new file mode 100644 index 000000000..ba9b6c8f3 --- /dev/null +++ b/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(2) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(3) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(4) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; } + /* 15 - 18 should have 100% width, no need to specify. */ + </style> + <body dir='rtl'> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/bar-pseudo-element-rtl.html b/layout/reftests/forms/meter/bar-pseudo-element-rtl.html new file mode 100644 index 000000000..22f5462df --- /dev/null +++ b/layout/reftests/forms/meter/bar-pseudo-element-rtl.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > meter:nth-child(1)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > meter:nth-child(2)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > meter:nth-child(3)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > meter:nth-child(4)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > meter:nth-child(5)::-moz-meter-bar { width: 1000px; } + body > meter:nth-child(6)::-moz-meter-bar { width: 10px; } + body > meter:nth-child(7)::-moz-meter-bar { width: 10%; } + body > meter:nth-child(8)::-moz-meter-bar { width: 200%; } + </style> + <body dir='rtl'> + <!-- Those will be used to change padding/margin on ::-moz-meter-bar --> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <!-- Those will be used to change width. --> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html new file mode 100644 index 000000000..90e269ef1 --- /dev/null +++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + .meter-element { margin: 10px; } + body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px; + height: -moz-calc(100% - 8px); } + body > div:nth-child(2) > .meter-bar { width: -moz-calc(100% + 8px); } + body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 4px; + height: -moz-calc(100% - 8px); + width: -moz-calc(100% + 8px); } + body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); } + body > div:nth-child(5) > .meter-bar { } + body > div:nth-child(6) > .meter-bar { height: -moz-calc(100% - 10px); } + body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; } + body > div:nth-child(8) > .meter-bar { } + body > div:nth-child(9) > .meter-bar { width: -moz-calc(100% + 10px); } + body > div:nth-child(10) > .meter-bar { } + body > div:nth-child(11) > .meter-bar { width: -moz-calc(100% + 10px); } + /* 12 - 15 should have 100% width, no need to specify. */ + body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 64px; + height: -moz-calc(100% + 32px + 16px); + width: -moz-calc(100% + 128px + 16px - 1em); } + </style> + <body> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html new file mode 100644 index 000000000..e98c140f8 --- /dev/null +++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + .meter-element { margin: 10px; } + body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px; + height: -moz-calc(100% - 8px); } + body > div:nth-child(2) > .meter-bar { position: relative; left: 8px; + width: -moz-calc(100% + 8px); } + body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 12px; + height: -moz-calc(100% - 8px); + width: -moz-calc(100% + 8px); } + body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); } + body > div:nth-child(5) > .meter-bar { } + body > div:nth-child(6) > .meter-bar { height: -moz-calc(100% - 10px); } + body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; } + body > div:nth-child(8) > .meter-bar { } + body > div:nth-child(9) > .meter-bar { position: relative; left: 10px; + width: -moz-calc(100% + 10px); } + body > div:nth-child(10) > .meter-bar { } + body > div:nth-child(11) > .meter-bar { position: relative; left: 10px; + width: -moz-calc(100% + 10px); } + /* 12 - 15 should have 100% width, no need to specify. */ + body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 192px; + height: -moz-calc(100% + 64px - 1em); + width: -moz-calc(100% + 128px); } + </style> + <body dir='rtl'> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html new file mode 100644 index 000000000..b865133a8 --- /dev/null +++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { + margin: 10px; + -moz-orient: vertical; + } + body > meter:nth-child(1)::-moz-meter-bar { margin: 4px; padding: 0px; } + body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 4px; } + body > meter:nth-child(3)::-moz-meter-bar { margin: 4px; padding: 4px; } + body > meter:nth-child(4)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; } + body > meter:nth-child(5)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > meter:nth-child(6)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; } + body > meter:nth-child(7)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > meter:nth-child(8)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; } + body > meter:nth-child(9)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > meter:nth-child(10)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; } + body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > meter:nth-child(12)::-moz-meter-bar { height: 1000px; } + body > meter:nth-child(13)::-moz-meter-bar { height: 10px; } + body > meter:nth-child(14)::-moz-meter-bar { height: 10%; } + body > meter:nth-child(15)::-moz-meter-bar { height: 200%; } + body > meter:nth-child(16)::-moz-meter-bar { margin: 64px; padding: 64px; } + </style> + <body dir='rtl'> + <!-- Those will be used to change padding/margin on ::-moz-meter-bar --> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <!-- Those will be used to change width. --> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical.html new file mode 100644 index 000000000..a2ab3222e --- /dev/null +++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { + margin: 10px; + -moz-orient: vertical; + } + body > meter:nth-child(1)::-moz-meter-bar { margin: 4px; padding: 0px; } + body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 4px; } + body > meter:nth-child(3)::-moz-meter-bar { margin: 4px; padding: 4px; } + body > meter:nth-child(4)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; } + body > meter:nth-child(5)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > meter:nth-child(6)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; } + body > meter:nth-child(7)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > meter:nth-child(8)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; } + body > meter:nth-child(9)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > meter:nth-child(10)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; } + body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > meter:nth-child(12)::-moz-meter-bar { height: 1000px; } + body > meter:nth-child(13)::-moz-meter-bar { height: 10px; } + body > meter:nth-child(14)::-moz-meter-bar { height: 10%; } + body > meter:nth-child(15)::-moz-meter-bar { height: 200%; } + body > meter:nth-child(16)::-moz-meter-bar { margin: 64px; padding: 64px; } + </style> + <body> + <!-- Those will be used to change padding/margin on ::-moz-meter-bar --> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <!-- Those will be used to change width. --> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/bar-pseudo-element.html b/layout/reftests/forms/meter/bar-pseudo-element.html new file mode 100644 index 000000000..821a44961 --- /dev/null +++ b/layout/reftests/forms/meter/bar-pseudo-element.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > meter:nth-child(1)::-moz-meter-bar { margin: 10px; padding: 0px; } + body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 10px; } + body > meter:nth-child(3)::-moz-meter-bar { margin: 10px; padding: 10px; } + body > meter:nth-child(4)::-moz-meter-bar { margin: 5px; padding: 5px; } + body > meter:nth-child(5)::-moz-meter-bar { margin: 50px; padding: 50px; } + body > meter:nth-child(6)::-moz-meter-bar { margin: 100px; padding: 100px; } + body > meter:nth-child(7)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; } + body > meter:nth-child(8)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > meter:nth-child(9)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; } + body > meter:nth-child(10)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; } + body > meter:nth-child(12)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > meter:nth-child(13)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; } + body > meter:nth-child(14)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > meter:nth-child(15)::-moz-meter-bar { margin: 200px; padding: 0px; } + body > meter:nth-child(16)::-moz-meter-bar { margin: 0px; padding: 200px; } + body > meter:nth-child(17)::-moz-meter-bar { width: 1000px; } + body > meter:nth-child(18)::-moz-meter-bar { width: 10px; } + body > meter:nth-child(19)::-moz-meter-bar { width: 10%; } + body > meter:nth-child(20)::-moz-meter-bar { width: 200%; } + </style> + <body> + <!-- Those will be used to change padding/margin on ::-moz-meter-bar --> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <!-- Those will be used to change width. --> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/block-invalidate-ref.html b/layout/reftests/forms/meter/block-invalidate-ref.html new file mode 100644 index 000000000..3208c43ef --- /dev/null +++ b/layout/reftests/forms/meter/block-invalidate-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { display: block; } + </style> + <body> + <meter value='0.5'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/block-invalidate.html b/layout/reftests/forms/meter/block-invalidate.html new file mode 100644 index 000000000..abc98f7f7 --- /dev/null +++ b/layout/reftests/forms/meter/block-invalidate.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { display: block; } + </style> + <script> + function loadHandler() { + setTimeout(function() { + var p = document.getElementsByTagName('meter')[0]; + p.value = '0.5'; + document.documentElement.className = ''; + }, 0); + } + </script> + <body onload="loadHandler();"> + <meter value='0'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html b/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html new file mode 100644 index 000000000..03a1937fa --- /dev/null +++ b/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .meter-sub-optimum { width: 10%; } + div:nth-child(2) > .meter-sub-sub-optimum { width: 10%; } + div:nth-child(3) > .meter-sub-optimum { width: 40%; } + div:nth-child(4) > .meter-optimum { width: 10%; } + div:nth-child(5) > .meter-optimum { width: 0%; } + div:nth-child(6) > .meter-sub-optimum { width: 20%; } + </style> + <body> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/default-style/default-style-dyn.html b/layout/reftests/forms/meter/default-style/default-style-dyn.html new file mode 100644 index 000000000..bed08d651 --- /dev/null +++ b/layout/reftests/forms/meter/default-style/default-style-dyn.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <meter id='m1' value="0.1" low="0" optimum="0.5" high="1" min="0" max="1"></meter> + <meter id='m2' value="0.1" low="0.3" optimum="0.7" high="1" min="0" max="1"></meter> + <meter id='m3' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter> + <meter id='m4' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter> + <meter id='m5' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter> + <meter id='m6' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter> + + <script> + + var m = document.getElementById('m1'); + m.setAttribute("low",0.3); + + m = document.getElementById('m2'); + m.setAttribute("high",0.5); + + m = document.getElementById('m3'); + m.setAttribute("value",0.4); + + m = document.getElementById('m4'); + m.setAttribute("optimum",0.1); + + m = document.getElementById('m5'); + m.setAttribute("min",0.9); + + m = document.getElementById('m6'); + m.setAttribute("max",0.5); + + </script> + </body> +</html> diff --git a/layout/reftests/forms/meter/default-style/default-style-ref.html b/layout/reftests/forms/meter/default-style/default-style-ref.html new file mode 100644 index 000000000..7cba9ab96 --- /dev/null +++ b/layout/reftests/forms/meter/default-style/default-style-ref.html @@ -0,0 +1,279 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + /* optimum = 0.0 */ + div:nth-child(1) > .meter-optimum { width: 0%; } + div:nth-child(2) > .meter-optimum { width: 10%; } + div:nth-child(3) > .meter-sub-optimum { width: 30%; } + div:nth-child(4) > .meter-sub-optimum { width: 50%; } + div:nth-child(5) > .meter-sub-optimum { width: 70%; } + div:nth-child(6) > .meter-sub-sub-optimum { width: 80%; } + div:nth-child(7) > .meter-sub-sub-optimum { width: 100%; } + + /* optimum = 0.1 */ + div:nth-child(8) > .meter-optimum { width: 0%; } + div:nth-child(9) > .meter-optimum { width: 10%; } + div:nth-child(10) > .meter-sub-optimum { width: 30%; } + div:nth-child(11) > .meter-sub-optimum { width: 50%; } + div:nth-child(12) > .meter-sub-optimum { width: 70%; } + div:nth-child(13) > .meter-sub-sub-optimum { width: 80%; } + div:nth-child(14) > .meter-sub-sub-optimum { width: 100%; } + + /* optimum = 0.3 */ + div:nth-child(15) > .meter-sub-optimum { width: 0%; } + div:nth-child(16) > .meter-sub-optimum { width: 10%; } + div:nth-child(17) > .meter-optimum { width: 30%; } + div:nth-child(18) > .meter-optimum { width: 50%; } + div:nth-child(19) > .meter-optimum { width: 70%; } + div:nth-child(20) > .meter-sub-optimum { width: 80%; } + div:nth-child(21) > .meter-sub-optimum { width: 100%; } + + /* optimum = 0.5 */ + div:nth-child(22) > .meter-sub-optimum { width: 0%; } + div:nth-child(23) > .meter-sub-optimum { width: 10%; } + div:nth-child(24) > .meter-optimum { width: 30%; } + div:nth-child(25) > .meter-optimum { width: 50%; } + div:nth-child(26) > .meter-optimum { width: 70%; } + div:nth-child(27) > .meter-sub-optimum { width: 80%; } + div:nth-child(28) > .meter-sub-optimum { width: 100%; } + + /* optimum = 0.7 */ + div:nth-child(29) > .meter-sub-optimum { width: 0%; } + div:nth-child(30) > .meter-sub-optimum { width: 10%; } + div:nth-child(31) > .meter-optimum { width: 30%; } + div:nth-child(32) > .meter-optimum { width: 50%; } + div:nth-child(33) > .meter-optimum { width: 70%; } + div:nth-child(34) > .meter-sub-optimum { width: 80%; } + div:nth-child(35) > .meter-sub-optimum { width: 100%; } + + /* optimum = 0.8 */ + div:nth-child(36) > .meter-sub-sub-optimum { width: 0%; } + div:nth-child(37) > .meter-sub-sub-optimum { width: 10%; } + div:nth-child(38) > .meter-sub-optimum { width: 30%; } + div:nth-child(39) > .meter-sub-optimum { width: 50%; } + div:nth-child(40) > .meter-sub-optimum { width: 70%; } + div:nth-child(41) > .meter-optimum { width: 80%; } + div:nth-child(42) > .meter-optimum { width: 100%; } + + /* optimum = 1.0 */ + div:nth-child(43) > .meter-sub-sub-optimum { width: 0%; } + div:nth-child(44) > .meter-sub-sub-optimum { width: 10%; } + div:nth-child(45) > .meter-sub-optimum { width: 30%; } + div:nth-child(46) > .meter-sub-optimum { width: 50%; } + div:nth-child(47) > .meter-sub-optimum { width: 70%; } + div:nth-child(48) > .meter-optimum { width: 80%; } + div:nth-child(49) > .meter-optimum { width: 100%; } + </style> + <body> + <!-- optimum = 0.0 --> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + + <!-- optimum = 0.1 --> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + + <!-- optimum = 0.3 --> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + + <!-- optimum = 0.5 --> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + + <!-- optimum = 0.7 --> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + + <!-- optimum = 0.8 --> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + + <!-- optimum = 1.0 --> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-sub-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + <div class="meter-element"> + <div class="meter-optimum"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/default-style/default-style.html b/layout/reftests/forms/meter/default-style/default-style.html new file mode 100644 index 000000000..6c648c335 --- /dev/null +++ b/layout/reftests/forms/meter/default-style/default-style.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <meter value="0.0" low="0.3" optimum="0.0" high="0.7"></meter> + <meter value="0.1" low="0.3" optimum="0.0" high="0.7"></meter> + <meter value="0.3" low="0.3" optimum="0.0" high="0.7"></meter> + <meter value="0.5" low="0.3" optimum="0.0" high="0.7"></meter> + <meter value="0.7" low="0.3" optimum="0.0" high="0.7"></meter> + <meter value="0.8" low="0.3" optimum="0.0" high="0.7"></meter> + <meter value="1.0" low="0.3" optimum="0.0" high="0.7"></meter> + + <meter value="0.0" low="0.3" optimum="0.1" high="0.7"></meter> + <meter value="0.1" low="0.3" optimum="0.1" high="0.7"></meter> + <meter value="0.3" low="0.3" optimum="0.1" high="0.7"></meter> + <meter value="0.5" low="0.3" optimum="0.1" high="0.7"></meter> + <meter value="0.7" low="0.3" optimum="0.1" high="0.7"></meter> + <meter value="0.8" low="0.3" optimum="0.1" high="0.7"></meter> + <meter value="1.0" low="0.3" optimum="0.1" high="0.7"></meter> + + <meter value="0.0" low="0.3" optimum="0.3" high="0.7"></meter> + <meter value="0.1" low="0.3" optimum="0.3" high="0.7"></meter> + <meter value="0.3" low="0.3" optimum="0.3" high="0.7"></meter> + <meter value="0.5" low="0.3" optimum="0.3" high="0.7"></meter> + <meter value="0.7" low="0.3" optimum="0.3" high="0.7"></meter> + <meter value="0.8" low="0.3" optimum="0.3" high="0.7"></meter> + <meter value="1.0" low="0.3" optimum="0.3" high="0.7"></meter> + + <meter value="0.0" low="0.3" optimum="0.5" high="0.7"></meter> + <meter value="0.1" low="0.3" optimum="0.5" high="0.7"></meter> + <meter value="0.3" low="0.3" optimum="0.5" high="0.7"></meter> + <meter value="0.5" low="0.3" optimum="0.5" high="0.7"></meter> + <meter value="0.7" low="0.3" optimum="0.5" high="0.7"></meter> + <meter value="0.8" low="0.3" optimum="0.5" high="0.7"></meter> + <meter value="1.0" low="0.3" optimum="0.5" high="0.7"></meter> + + <meter value="0.0" low="0.3" optimum="0.7" high="0.7"></meter> + <meter value="0.1" low="0.3" optimum="0.7" high="0.7"></meter> + <meter value="0.3" low="0.3" optimum="0.7" high="0.7"></meter> + <meter value="0.5" low="0.3" optimum="0.7" high="0.7"></meter> + <meter value="0.7" low="0.3" optimum="0.7" high="0.7"></meter> + <meter value="0.8" low="0.3" optimum="0.7" high="0.7"></meter> + <meter value="1.0" low="0.3" optimum="0.7" high="0.7"></meter> + + <meter value="0.0" low="0.3" optimum="0.8" high="0.7"></meter> + <meter value="0.1" low="0.3" optimum="0.8" high="0.7"></meter> + <meter value="0.3" low="0.3" optimum="0.8" high="0.7"></meter> + <meter value="0.5" low="0.3" optimum="0.8" high="0.7"></meter> + <meter value="0.7" low="0.3" optimum="0.8" high="0.7"></meter> + <meter value="0.8" low="0.3" optimum="0.8" high="0.7"></meter> + <meter value="1.0" low="0.3" optimum="0.8" high="0.7"></meter> + + <meter value="0.0" low="0.3" optimum="1.0" high="0.7"></meter> + <meter value="0.1" low="0.3" optimum="1.0" high="0.7"></meter> + <meter value="0.3" low="0.3" optimum="1.0" high="0.7"></meter> + <meter value="0.5" low="0.3" optimum="1.0" high="0.7"></meter> + <meter value="0.7" low="0.3" optimum="1.0" high="0.7"></meter> + <meter value="0.8" low="0.3" optimum="1.0" high="0.7"></meter> + <meter value="1.0" low="0.3" optimum="1.0" high="0.7"></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/default-style/reftest-stylo.list b/layout/reftests/forms/meter/default-style/reftest-stylo.list new file mode 100644 index 000000000..55cd0b3e3 --- /dev/null +++ b/layout/reftests/forms/meter/default-style/reftest-stylo.list @@ -0,0 +1,3 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== default-style.html default-style.html +== default-style-dyn.html default-style-dyn.html diff --git a/layout/reftests/forms/meter/default-style/reftest.list b/layout/reftests/forms/meter/default-style/reftest.list new file mode 100644 index 000000000..a67d6712b --- /dev/null +++ b/layout/reftests/forms/meter/default-style/reftest.list @@ -0,0 +1,2 @@ +== default-style.html default-style-ref.html +== default-style-dyn.html default-style-dyn-ref.html diff --git a/layout/reftests/forms/meter/default-style/style.css b/layout/reftests/forms/meter/default-style/style.css new file mode 100644 index 000000000..9e0697bb3 --- /dev/null +++ b/layout/reftests/forms/meter/default-style/style.css @@ -0,0 +1,54 @@ +div.meter-element { + display: inline-block; + height: 1em; + width: 5em; + vertical-align: -0.2em; + + background: -moz-linear-gradient(top, #e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%); +} + +div.meter-optimum { + float: none ! important; + + height: 100%; + /* + * We can't apply the following style to the reference because it will have + * underisable effectes: + * width: 100%; + */ + + /* green. */ + background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%); +} + +div.meter-sub-optimum { + float: none ! important; + + height: 100%; + /* + * We can't apply the following style to the reference because it will have + * underisable effectes: + * width: 100%; + */ + + /* orange. */ + background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%); +} + +div.meter-sub-sub-optimum { + float: none ! important; + + height: 100%; + /* + * We can't apply the following style to the reference because it will have + * underisable effectes: + * width: 100%; + */ + + /* red. */ + background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%); +} + +meter, meter::-moz-meter-bar, div.meter-element, div.meter-optimum, div.meter-sub-optimum, div.meter-sub-sub-optimum { + -moz-appearance: none; +} diff --git a/layout/reftests/forms/meter/in-cells-ref.html b/layout/reftests/forms/meter/in-cells-ref.html new file mode 100644 index 000000000..aa81938a3 --- /dev/null +++ b/layout/reftests/forms/meter/in-cells-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { width: 5em; height: 1em; } + meter.vertical { -moz-orient: vertical; width: 1em; height: 5em; } + </style> + <body> + <table> + <tr> + <td>foo</td> + <td><meter value='0.5'></meter></td> + <td>bar</td> + </tr> + <tr> + <td>foo</td> + <td><meter class='vertical' value='0.5'></meter></td> + <td>bar</td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/forms/meter/in-cells.html b/layout/reftests/forms/meter/in-cells.html new file mode 100644 index 000000000..c62510433 --- /dev/null +++ b/layout/reftests/forms/meter/in-cells.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter.vertical { -moz-orient: vertical; } + </style> + <body> + <table> + <tr> + <td>foo</td> + <td><meter value='0.5'></meter></td> + <td>bar</td> + </tr> + <tr> + <td>foo</td> + <td><meter class='vertical' value='0.5'></meter></td> + <td>bar</td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/forms/meter/margin-padding-ref.html b/layout/reftests/forms/meter/margin-padding-ref.html new file mode 100644 index 000000000..84fb9b385 --- /dev/null +++ b/layout/reftests/forms/meter/margin-padding-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { margin: 10px; padding: 0px; } + body > div:nth-child(2) { margin: 0px; padding: 10px; } + body > div:nth-child(3) { margin: 10px; padding: 10px; } + body > div:nth-child(4) { margin: 5px; padding: 5px; } + body > div:nth-child(5) { margin: 50px; padding: 50px; } + body > div:nth-child(6) { margin: 100px; padding: 100px; } + body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/margin-padding-rtl-ref.html b/layout/reftests/forms/meter/margin-padding-rtl-ref.html new file mode 100644 index 000000000..579794cc9 --- /dev/null +++ b/layout/reftests/forms/meter/margin-padding-rtl-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { margin: 10px; padding: 0px; } + body > div:nth-child(2) { margin: 0px; padding: 10px; } + body > div:nth-child(3) { margin: 10px; padding: 10px; } + body > div:nth-child(4) { margin: 5px; padding: 5px; } + body > div:nth-child(5) { margin: 50px; padding: 50px; } + body > div:nth-child(6) { margin: 100px; padding: 100px; } + body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body dir='rtl'> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/margin-padding-rtl.html b/layout/reftests/forms/meter/margin-padding-rtl.html new file mode 100644 index 000000000..d84058264 --- /dev/null +++ b/layout/reftests/forms/meter/margin-padding-rtl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter:nth-child(1) { margin: 10px; padding: 0px; } + meter:nth-child(2) { margin: 0px; padding: 10px; } + meter:nth-child(3) { margin: 10px; padding: 10px; } + meter:nth-child(4) { margin: 5px; padding: 5px; } + meter:nth-child(5) { margin: 50px; padding: 50px; } + meter:nth-child(6) { margin: 100px; padding: 100px; } + meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body dir='rtl'> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/margin-padding-vertical-ref.html b/layout/reftests/forms/meter/margin-padding-vertical-ref.html new file mode 100644 index 000000000..e6de9fef1 --- /dev/null +++ b/layout/reftests/forms/meter/margin-padding-vertical-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { margin: 10px; padding: 0px; } + body > div:nth-child(2) { margin: 0px; padding: 10px; } + body > div:nth-child(3) { margin: 10px; padding: 10px; } + body > div:nth-child(4) { margin: 5px; padding: 5px; } + body > div:nth-child(5) { margin: 50px; padding: 50px; } + body > div:nth-child(6) { margin: 100px; padding: 100px; } + body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html new file mode 100644 index 000000000..6ecb2fcaf --- /dev/null +++ b/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { margin: 10px; padding: 0px; } + body > div:nth-child(2) { margin: 0px; padding: 10px; } + body > div:nth-child(3) { margin: 10px; padding: 10px; } + body > div:nth-child(4) { margin: 5px; padding: 5px; } + body > div:nth-child(5) { margin: 50px; padding: 50px; } + body > div:nth-child(6) { margin: 100px; padding: 100px; } + body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body dir='rtl'> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/margin-padding-vertical-rtl.html b/layout/reftests/forms/meter/margin-padding-vertical-rtl.html new file mode 100644 index 000000000..55e922b07 --- /dev/null +++ b/layout/reftests/forms/meter/margin-padding-vertical-rtl.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { + -moz-orient: vertical; + } + meter:nth-child(1) { margin: 10px; padding: 0px; } + meter:nth-child(2) { margin: 0px; padding: 10px; } + meter:nth-child(3) { margin: 10px; padding: 10px; } + meter:nth-child(4) { margin: 5px; padding: 5px; } + meter:nth-child(5) { margin: 50px; padding: 50px; } + meter:nth-child(6) { margin: 100px; padding: 100px; } + meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body dir='rtl'> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/margin-padding-vertical.html b/layout/reftests/forms/meter/margin-padding-vertical.html new file mode 100644 index 000000000..d25d45e28 --- /dev/null +++ b/layout/reftests/forms/meter/margin-padding-vertical.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { + -moz-orient: vertical; + } + meter:nth-child(1) { margin: 10px; padding: 0px; } + meter:nth-child(2) { margin: 0px; padding: 10px; } + meter:nth-child(3) { margin: 10px; padding: 10px; } + meter:nth-child(4) { margin: 5px; padding: 5px; } + meter:nth-child(5) { margin: 50px; padding: 50px; } + meter:nth-child(6) { margin: 100px; padding: 100px; } + meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/margin-padding.html b/layout/reftests/forms/meter/margin-padding.html new file mode 100644 index 000000000..349813e1f --- /dev/null +++ b/layout/reftests/forms/meter/margin-padding.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter:nth-child(1) { margin: 10px; padding: 0px; } + meter:nth-child(2) { margin: 0px; padding: 10px; } + meter:nth-child(3) { margin: 10px; padding: 10px; } + meter:nth-child(4) { margin: 5px; padding: 5px; } + meter:nth-child(5) { margin: 50px; padding: 50px; } + meter:nth-child(6) { margin: 100px; padding: 100px; } + meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/max-height-ref.html b/layout/reftests/forms/meter/max-height-ref.html new file mode 100644 index 000000000..be61638a7 --- /dev/null +++ b/layout/reftests/forms/meter/max-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + meter { + height: 50px; + padding: 23px; + border: 1px solid black; + box-sizing: border-box; + overflow: hidden; + } +</style> +<meter>Some text</meter> diff --git a/layout/reftests/forms/meter/max-height.html b/layout/reftests/forms/meter/max-height.html new file mode 100644 index 000000000..ae6115f85 --- /dev/null +++ b/layout/reftests/forms/meter/max-height.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + meter { + max-height: 50px; + padding: 23px; + border: 1px solid black; + box-sizing: border-box; + overflow: hidden; + } +</style> +<meter>Some text</meter> diff --git a/layout/reftests/forms/meter/meter-orient-block.html b/layout/reftests/forms/meter/meter-orient-block.html new file mode 100644 index 000000000..8096473e7 --- /dev/null +++ b/layout/reftests/forms/meter/meter-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="-moz-orient:block" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html b/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html new file mode 100644 index 000000000..29050d021 --- /dev/null +++ b/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="-moz-orient:horizontal" max=100 value=70 dir=rtl> diff --git a/layout/reftests/forms/meter/meter-orient-horizontal.html b/layout/reftests/forms/meter/meter-orient-horizontal.html new file mode 100644 index 000000000..762329c7f --- /dev/null +++ b/layout/reftests/forms/meter/meter-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="-moz-orient:horizontal" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-orient-inline.html b/layout/reftests/forms/meter/meter-orient-inline.html new file mode 100644 index 000000000..a5ac5b52b --- /dev/null +++ b/layout/reftests/forms/meter/meter-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="-moz-orient:inline" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-orient-vertical-rtl.html b/layout/reftests/forms/meter/meter-orient-vertical-rtl.html new file mode 100644 index 000000000..af83d4530 --- /dev/null +++ b/layout/reftests/forms/meter/meter-orient-vertical-rtl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="-moz-orient:vertical" max=100 value=70 dir=rtl> diff --git a/layout/reftests/forms/meter/meter-orient-vertical.html b/layout/reftests/forms/meter/meter-orient-vertical.html new file mode 100644 index 000000000..0bcc36349 --- /dev/null +++ b/layout/reftests/forms/meter/meter-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="-moz-orient:vertical" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vlr-orient-block.html b/layout/reftests/forms/meter/meter-vlr-orient-block.html new file mode 100644 index 000000000..500f1599d --- /dev/null +++ b/layout/reftests/forms/meter/meter-vlr-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html b/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html new file mode 100644 index 000000000..194f942d1 --- /dev/null +++ b/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vlr-orient-inline.html b/layout/reftests/forms/meter/meter-vlr-orient-inline.html new file mode 100644 index 000000000..d3ee42792 --- /dev/null +++ b/layout/reftests/forms/meter/meter-vlr-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vlr-orient-vertical.html b/layout/reftests/forms/meter/meter-vlr-orient-vertical.html new file mode 100644 index 000000000..40e9c8234 --- /dev/null +++ b/layout/reftests/forms/meter/meter-vlr-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vlr.html b/layout/reftests/forms/meter/meter-vlr.html new file mode 100644 index 000000000..7edf4a604 --- /dev/null +++ b/layout/reftests/forms/meter/meter-vlr.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-lr" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vrl-orient-block.html b/layout/reftests/forms/meter/meter-vrl-orient-block.html new file mode 100644 index 000000000..6b136624c --- /dev/null +++ b/layout/reftests/forms/meter/meter-vrl-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html b/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html new file mode 100644 index 000000000..87f8c938d --- /dev/null +++ b/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vrl-orient-inline.html b/layout/reftests/forms/meter/meter-vrl-orient-inline.html new file mode 100644 index 000000000..294f823e1 --- /dev/null +++ b/layout/reftests/forms/meter/meter-vrl-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vrl-orient-vertical.html b/layout/reftests/forms/meter/meter-vrl-orient-vertical.html new file mode 100644 index 000000000..369465660 --- /dev/null +++ b/layout/reftests/forms/meter/meter-vrl-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=70> diff --git a/layout/reftests/forms/meter/meter-vrl.html b/layout/reftests/forms/meter/meter-vrl.html new file mode 100644 index 000000000..7c481b31e --- /dev/null +++ b/layout/reftests/forms/meter/meter-vrl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<meter style="writing-mode:vertical-rl" max=100 value=70> diff --git a/layout/reftests/forms/meter/reftest-stylo.list b/layout/reftests/forms/meter/reftest-stylo.list new file mode 100644 index 000000000..ef10df30d --- /dev/null +++ b/layout/reftests/forms/meter/reftest-stylo.list @@ -0,0 +1,49 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +fuzzy-if(Android,128,16) == values.html values.html +== values-rtl.html values-rtl.html +== margin-padding.html margin-padding.html +== margin-padding-rtl.html margin-padding-rtl.html +skip-if(B2G||Mulet) == bar-pseudo-element.html bar-pseudo-element.html +# Initial mulet triage: parity with B2G/B2G Desktop +== bar-pseudo-element-rtl.html bar-pseudo-element-rtl.html + +# vertical tests +== values-vertical.html values-vertical.html +== values-vertical-rtl.html values-vertical-rtl.html +== margin-padding-vertical.html margin-padding-vertical.html +== margin-padding-vertical-rtl.html margin-padding-vertical-rtl.html +skip-if(B2G||Mulet) == bar-pseudo-element-vertical.html bar-pseudo-element-vertical.html +# Initial mulet triage: parity with B2G/B2G Desktop +== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl.html + +# The following test is disabled but kept in the repository because the +# transformations will not behave exactly the same for <meter> and two divs. +# However, it would be possible to manually check those. +# == transformations.html transformations.html + +# default style +include default-style/reftest-stylo.list + +# Tests for bugs: +== block-invalidate.html block-invalidate.html +== in-cells.html in-cells.html +== max-height.html max-height.html + +# Tests for block and inline orientation in combination with writing-mode +# XXX Remove default-preferences setting here after bug 1138384 makes +# it the default for all channels + +== meter-orient-vertical.html meter-orient-vertical.html +== meter-orient-horizontal.html meter-orient-horizontal.html +== meter-orient-block.html meter-orient-block.html +== meter-orient-inline.html meter-orient-inline.html +== meter-vlr.html meter-vlr.html +== meter-vlr-orient-block.html meter-vlr-orient-block.html +== meter-vlr-orient-inline.html meter-vlr-orient-inline.html +== meter-vlr-orient-horizontal.html meter-vlr-orient-horizontal.html +skip == meter-vlr-orient-vertical.html meter-vlr-orient-vertical.html +== meter-vrl.html meter-vrl.html +== meter-vrl-orient-block.html meter-vrl-orient-block.html +== meter-vrl-orient-inline.html meter-vrl-orient-inline.html +== meter-vrl-orient-horizontal.html meter-vrl-orient-horizontal.html +== meter-vrl-orient-vertical.html meter-vrl-orient-vertical.html diff --git a/layout/reftests/forms/meter/reftest.list b/layout/reftests/forms/meter/reftest.list new file mode 100644 index 000000000..0a92a6004 --- /dev/null +++ b/layout/reftests/forms/meter/reftest.list @@ -0,0 +1,43 @@ +fuzzy-if(Android,128,16) == values.html values-ref.html +== values-rtl.html values-rtl-ref.html +== margin-padding.html margin-padding-ref.html +== margin-padding-rtl.html margin-padding-rtl-ref.html +== bar-pseudo-element.html bar-pseudo-element-ref.html +== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html + +# vertical tests +== values-vertical.html values-vertical-ref.html +== values-vertical-rtl.html values-vertical-rtl-ref.html +== margin-padding-vertical.html margin-padding-vertical-ref.html +== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html +== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html +== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html + +# The following test is disabled but kept in the repository because the +# transformations will not behave exactly the same for <meter> and two divs. +# However, it would be possible to manually check those. +# == transformations.html transformations-ref.html + +# default style +include default-style/reftest.list + +# Tests for bugs: +== block-invalidate.html block-invalidate-ref.html +== in-cells.html in-cells-ref.html +== max-height.html max-height-ref.html + +# Tests for block and inline orientation in combination with writing-mode +!= meter-orient-vertical.html meter-orient-horizontal.html +!= meter-orient-horizontal.html meter-orient-horizontal-rtl.html +== meter-orient-block.html meter-orient-vertical.html +== meter-orient-inline.html meter-orient-horizontal.html +== meter-vlr.html meter-orient-vertical.html +== meter-vlr-orient-block.html meter-orient-horizontal.html +== meter-vlr-orient-inline.html meter-orient-vertical.html +== meter-vlr-orient-horizontal.html meter-orient-horizontal.html +== meter-vlr-orient-vertical.html meter-orient-vertical.html +== meter-vrl.html meter-orient-vertical-rtl.html +== meter-vrl-orient-block.html meter-orient-horizontal-rtl.html +== meter-vrl-orient-inline.html meter-orient-vertical-rtl.html +== meter-vrl-orient-horizontal.html meter-orient-horizontal-rtl.html +== meter-vrl-orient-vertical.html meter-orient-vertical-rtl.html diff --git a/layout/reftests/forms/meter/style.css b/layout/reftests/forms/meter/style.css new file mode 100644 index 000000000..8370c5c33 --- /dev/null +++ b/layout/reftests/forms/meter/style.css @@ -0,0 +1,38 @@ +div.meter-element { + display: inline-block; + height: 1em; + width: 5em; + vertical-align: -0.2em; + + background-color: grey; +} + +div.meter-element.vertical { + height: 5em; + width: 1em; +} + +div.meter-bar { + float: none ! important; + + height: 100%; + /* + * We can't apply the following style to the reference because it will have + * underisable effectes: + * width: 100%; + */ + + background-color: green; +} + +meter, meter::-moz-meter-bar, div.meter-element, div.meter-bar { + -moz-appearance: none; +} + +meter { + background: grey; +} + +meter::-moz-meter-bar { + background: green; +} diff --git a/layout/reftests/forms/meter/transformations-ref.html b/layout/reftests/forms/meter/transformations-ref.html new file mode 100644 index 000000000..17d0daa1a --- /dev/null +++ b/layout/reftests/forms/meter/transformations-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); } + body > div:nth-child(2) { -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); } + body > div:nth-child(3) { -moz-transform: rotate(30deg); } + body > div:nth-child(4) { -moz-transform: scale(2, 4); } + body > div:nth-child(5) { -moz-transform: scale(0.1, 0.4); } + body > div:nth-child(6) { -moz-transform: scale(1, 0.4); } + body > div:nth-child(7) { -moz-transform: scale(0.1, 1); } + body > div:nth-child(8) { -moz-transform: skew(30deg, -10deg); } + body > div:nth-child(9) { -moz-transform: skew(-30deg, 10deg); } + body > div:nth-child(10) { -moz-transform: translate(10px, 30px); } + body > div:nth-child(11) { -moz-transform: translate(30px, 10px); } + body > div:nth-child(12) { -moz-transform: translate(-10px, 30px); } + body > div:nth-child(13) { -moz-transform: translate(30px, -10px); } + body > div:nth-child(14) { -moz-transform: scale(0, 0); } + </style> + <body> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/transformations.html b/layout/reftests/forms/meter/transformations.html new file mode 100644 index 000000000..f4d8a3e20 --- /dev/null +++ b/layout/reftests/forms/meter/transformations.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); } + meter:nth-child(2) { -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); } + meter:nth-child(3) { -moz-transform: rotate(30deg); } + meter:nth-child(4) { -moz-transform: scale(2, 4); } + meter:nth-child(5) { -moz-transform: scale(0.1, 0.4); } + meter:nth-child(6) { -moz-transform: scale(1, 0.4); } + meter:nth-child(7) { -moz-transform: scale(0.1, 1); } + meter:nth-child(8) { -moz-transform: skew(30deg, -10deg); } + meter:nth-child(9) { -moz-transform: skew(-30deg, 10deg); } + meter:nth-child(10) { -moz-transform: translate(10px, 30px); } + meter:nth-child(11) { -moz-transform: translate(30px, 10px); } + meter:nth-child(12) { -moz-transform: translate(-10px, 30px); } + meter:nth-child(13) { -moz-transform: translate(30px, -10px); } + meter:nth-child(14) { -moz-transform: scale(0, 0); } + </style> + <body> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + <meter value='1'></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/values-ref.html b/layout/reftests/forms/meter/values-ref.html new file mode 100644 index 000000000..346e1b910 --- /dev/null +++ b/layout/reftests/forms/meter/values-ref.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .meter-bar { width: 100%; } + div:nth-child(2) > .meter-bar { width: 0%; } + div:nth-child(3) > .meter-bar { width: 10%; } + div:nth-child(4) > .meter-bar { width: 50%; } + div:nth-child(5) > .meter-bar { width: 0%; } + div:nth-child(6) > .meter-bar { width: 100%; } + div:nth-child(7) > .meter-bar { width: 42%; } + div:nth-child(8) > .meter-bar { width: 100%; } + div:nth-child(9) > .meter-bar { width: 100%; } + div:nth-child(10) > .meter-bar { width: 10%; } + div:nth-child(11) > .meter-bar { width: 37.5%; } + div:nth-child(12) > .meter-bar { width: 100%; } + div:nth-child(13) > .meter-bar { width: 100%; } + div:nth-child(14) > .meter-bar { width: 0%; } + div:nth-child(15) > .meter-bar { width: 55%; } + div:nth-child(16) > .meter-bar { width: 50%; } + div:nth-child(17) > .meter-bar { width: 20%; } + div:nth-child(18) > .meter-bar { width: 10%; } + div:nth-child(19) > .meter-bar { width: 10%; } + div:nth-child(20) > .meter-bar { width: 20%; } + div:nth-child(21) > .meter-bar { width: 37.5%; } + div:nth-child(22) > .meter-bar { width: 10%; } + div:nth-child(23) > .meter-bar { width: 10%; } + div:nth-child(24) > .meter-bar { width: 10%; } + div:nth-child(25) > .meter-bar { width: 50%; } + div:nth-child(26) > .meter-bar { width: 20%; } + div:nth-child(27) > .meter-bar { width: 90%; } + div:nth-child(28) > .meter-bar { width: 10%; } + div:nth-child(29) > .meter-bar { width: 10%; } + div:nth-child(30) > .meter-bar { width: 10%; } + div:nth-child(31) > .meter-bar { width: 10%; } + </style> + <body> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/values-rtl-ref.html b/layout/reftests/forms/meter/values-rtl-ref.html new file mode 100644 index 000000000..c65e1d1d2 --- /dev/null +++ b/layout/reftests/forms/meter/values-rtl-ref.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .meter-bar { width: 100%; } + div:nth-child(2) > .meter-bar { width: 0%; } + div:nth-child(3) > .meter-bar { width: 10%; } + div:nth-child(4) > .meter-bar { width: 50%; } + div:nth-child(5) > .meter-bar { width: 0%; } + div:nth-child(6) > .meter-bar { width: 100%; } + div:nth-child(7) > .meter-bar { width: 42%; } + div:nth-child(8) > .meter-bar { width: 100%; } + div:nth-child(9) > .meter-bar { width: 100%; } + div:nth-child(10) > .meter-bar { width: 10%; } + div:nth-child(11) > .meter-bar { width: 37.5%; } + div:nth-child(12) > .meter-bar { width: 100%; } + div:nth-child(13) > .meter-bar { width: 100%; } + div:nth-child(14) > .meter-bar { width: 0%; } + div:nth-child(15) > .meter-bar { width: 55%; } + div:nth-child(16) > .meter-bar { width: 50%; } + div:nth-child(17) > .meter-bar { width: 20%; } + div:nth-child(18) > .meter-bar { width: 10%; } + div:nth-child(19) > .meter-bar { width: 10%; } + div:nth-child(20) > .meter-bar { width: 20%; } + div:nth-child(21) > .meter-bar { width: 37.5%; } + div:nth-child(22) > .meter-bar { width: 10%; } + div:nth-child(23) > .meter-bar { width: 10%; } + div:nth-child(24) > .meter-bar { width: 10%; } + div:nth-child(25) > .meter-bar { width: 50%; } + div:nth-child(26) > .meter-bar { width: 20%; } + div:nth-child(27) > .meter-bar { width: 90%; } + div:nth-child(28) > .meter-bar { width: 10%; } + div:nth-child(29) > .meter-bar { width: 10%; } + div:nth-child(30) > .meter-bar { width: 10%; } + div:nth-child(31) > .meter-bar { width: 10%; } + </style> + <body dir='rtl'> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/values-rtl.html b/layout/reftests/forms/meter/values-rtl.html new file mode 100644 index 000000000..7fc25c74a --- /dev/null +++ b/layout/reftests/forms/meter/values-rtl.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body dir='rtl'> + <meter value="1.0"></meter> + <meter value="0.0"></meter> + <meter value="0.1"></meter> + <meter value="0.5"></meter> + <meter value="-1"></meter> + <meter value="50"></meter> + <!-- focus on max --> + <meter value="42" max="100"></meter> + <meter value="42" max="1"></meter> + <meter value="42" max="-1"></meter> + <meter value="0.1" max="1"></meter> + <!-- focus on min --> + <meter value="50" min="20" max="100"></meter> + <meter value="50" min="1" ></meter> + <meter value="0.1" min="2" ></meter> + <meter value="0.1" min="0.1"></meter> + <meter value="0.1" min="-1"></meter> + <!-- focus on low --> + <meter value="50" low="20" max="100"></meter> + <meter value="20" low="50" max="100"></meter> + <meter value="0.1" low="-1"></meter> + <meter value="0.1" low="0"></meter> + <!-- focus on high --> + <meter value="20" high="50" max="100"></meter> + <meter value="50" min="20" high="1" max="100"></meter> + <meter value="0.1" low="0.3" high="0.2"></meter> + <meter value="0.1" high="-1"></meter> + <meter value="0.1" high="2"></meter> + <!-- focus on optimum --> + <meter value="50" max="100" optimum="20"></meter> + <meter value="20" max="100" low="40" high="50" optimum="20"></meter> + <meter value="90" max="100" low="40" high="50" optimum="20"></meter> + <meter value="10" max="100" low="20" high="40" optimum="50"></meter> + <meter value="0.1" optimum="50"></meter> + <meter value="0.1" optimum="-1"></meter> + <meter value="0.1" optimum="1"></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/values-vertical-ref.html b/layout/reftests/forms/meter/values-vertical-ref.html new file mode 100644 index 000000000..b33027829 --- /dev/null +++ b/layout/reftests/forms/meter/values-vertical-ref.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; } + div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; } + div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; } + div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; } + div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; } + div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; } + div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; } + div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; } + div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; } + div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; } + div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; } + div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; } + </style> + <body> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/values-vertical-rtl-ref.html b/layout/reftests/forms/meter/values-vertical-rtl-ref.html new file mode 100644 index 000000000..71e166c6c --- /dev/null +++ b/layout/reftests/forms/meter/values-vertical-rtl-ref.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; } + div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; } + div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; } + div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; } + div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; } + div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; } + div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; } + div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; } + div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; } + div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; } + div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; } + div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; } + </style> + <body dir='rtl'> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + <div class="meter-element vertical"> + <div class="meter-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/meter/values-vertical-rtl.html b/layout/reftests/forms/meter/values-vertical-rtl.html new file mode 100644 index 000000000..e4653ac67 --- /dev/null +++ b/layout/reftests/forms/meter/values-vertical-rtl.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { + -moz-orient: vertical; + } + </style> + <body dir='rtl'> + <meter value="1.0"></meter> + <meter value="0.0"></meter> + <meter value="0.1"></meter> + <meter value="0.5"></meter> + <meter value="-1"></meter> + <meter value="50"></meter> + <!-- focus on max --> + <meter value="42" max="100"></meter> + <meter value="42" max="1"></meter> + <meter value="42" max="-1"></meter> + <meter value="0.1" max="1"></meter> + <!-- focus on min --> + <meter value="50" min="20" max="100"></meter> + <meter value="50" min="1" ></meter> + <meter value="0.1" min="2" ></meter> + <meter value="0.1" min="0.1"></meter> + <meter value="0.1" min="-1"></meter> + <!-- focus on low --> + <meter value="50" low="20" max="100"></meter> + <meter value="20" low="50" max="100"></meter> + <meter value="0.1" low="-1"></meter> + <meter value="0.1" low="0"></meter> + <!-- focus on high --> + <meter value="20" high="50" max="100"></meter> + <meter value="50" min="20" high="1" max="100"></meter> + <meter value="0.1" low="0.3" high="0.2"></meter> + <meter value="0.1" high="-1"></meter> + <meter value="0.1" high="2"></meter> + <!-- focus on optimum --> + <meter value="50" max="100" optimum="20"></meter> + <meter value="20" max="100" low="40" high="50" optimum="20"></meter> + <meter value="90" max="100" low="40" high="50" optimum="20"></meter> + <meter value="10" max="100" low="20" high="40" optimum="50"></meter> + <meter value="0.1" optimum="50"></meter> + <meter value="0.1" optimum="-1"></meter> + <meter value="0.1" optimum="1"></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/values-vertical.html b/layout/reftests/forms/meter/values-vertical.html new file mode 100644 index 000000000..a9c31bbdd --- /dev/null +++ b/layout/reftests/forms/meter/values-vertical.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + meter { + -moz-orient: vertical; + } + </style> + <body> + <meter value="1.0"></meter> + <meter value="0.0"></meter> + <meter value="0.1"></meter> + <meter value="0.5"></meter> + <meter value="-1"></meter> + <meter value="50"></meter> + <!-- focus on max --> + <meter value="42" max="100"></meter> + <meter value="42" max="1"></meter> + <meter value="42" max="-1"></meter> + <meter value="0.1" max="1"></meter> + <!-- focus on min --> + <meter value="50" min="20" max="100"></meter> + <meter value="50" min="1" ></meter> + <meter value="0.1" min="2" ></meter> + <meter value="0.1" min="0.1"></meter> + <meter value="0.1" min="-1"></meter> + <!-- focus on low --> + <meter value="50" low="20" max="100"></meter> + <meter value="20" low="50" max="100"></meter> + <meter value="0.1" low="-1"></meter> + <meter value="0.1" low="0"></meter> + <!-- focus on high --> + <meter value="20" high="50" max="100"></meter> + <meter value="50" min="20" high="1" max="100"></meter> + <meter value="0.1" low="0.3" high="0.2"></meter> + <meter value="0.1" high="-1"></meter> + <meter value="0.1" high="2"></meter> + <!-- focus on optimum --> + <meter value="50" max="100" optimum="20"></meter> + <meter value="20" max="100" low="40" high="50" optimum="20"></meter> + <meter value="90" max="100" low="40" high="50" optimum="20"></meter> + <meter value="10" max="100" low="20" high="40" optimum="50"></meter> + <meter value="0.1" optimum="50"></meter> + <meter value="0.1" optimum="-1"></meter> + <meter value="0.1" optimum="1"></meter> + </body> +</html> diff --git a/layout/reftests/forms/meter/values.html b/layout/reftests/forms/meter/values.html new file mode 100644 index 000000000..17ae90017 --- /dev/null +++ b/layout/reftests/forms/meter/values.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <meter value="1.0"></meter> + <meter value="0.0"></meter> + <meter value="0.1"></meter> + <meter value="0.5"></meter> + <meter value="-1"></meter> + <meter value="50"></meter> + <!-- focus on max --> + <meter value="42" max="100"></meter> + <meter value="42" max="1"></meter> + <meter value="42" max="-1"></meter> + <meter value="0.1" max="1"></meter> + <!-- focus on min --> + <meter value="50" min="20" max="100"></meter> + <meter value="50" min="1" ></meter> + <meter value="0.1" min="2" ></meter> + <meter value="0.1" min="0.1"></meter> + <meter value="0.1" min="-1"></meter> + <!-- focus on low --> + <meter value="50" low="20" max="100"></meter> + <meter value="20" low="50" max="100"></meter> + <meter value="0.1" low="-1"></meter> + <meter value="0.1" low="0"></meter> + <!-- focus on high --> + <meter value="20" high="50" max="100"></meter> + <meter value="50" min="20" high="1" max="100"></meter> + <meter value="0.1" low="0.3" high="0.2"></meter> + <meter value="0.1" high="-1"></meter> + <meter value="0.1" high="2"></meter> + <!-- focus on optimum --> + <meter value="50" max="100" optimum="20"></meter> + <meter value="20" max="100" low="40" high="50" optimum="20"></meter> + <meter value="90" max="100" low="40" high="50" optimum="20"></meter> + <meter value="10" max="100" low="20" high="40" optimum="50"></meter> + <meter value="0.1" optimum="50"></meter> + <meter value="0.1" optimum="-1"></meter> + <meter value="0.1" optimum="1"></meter> + </body> +</html> diff --git a/layout/reftests/forms/output/output-1.html b/layout/reftests/forms/output/output-1.html new file mode 100644 index 000000000..0fdb2ae8b --- /dev/null +++ b/layout/reftests/forms/output/output-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: the output shouldn't show anything when there is no content --> + <body> + <output></output> + </body> +</html> diff --git a/layout/reftests/forms/output/output-2.html b/layout/reftests/forms/output/output-2.html new file mode 100644 index 000000000..882e805ba --- /dev/null +++ b/layout/reftests/forms/output/output-2.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: the output should show the textContent --> + <body> + <output>foo</output> + </body> +</html> diff --git a/layout/reftests/forms/output/output-3.html b/layout/reftests/forms/output/output-3.html new file mode 100644 index 000000000..ecb17e915 --- /dev/null +++ b/layout/reftests/forms/output/output-3.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: the output should show its content --> + <body> + <output>foo<b>bar</b></output> + </body> +</html> diff --git a/layout/reftests/forms/output/output-4.html b/layout/reftests/forms/output/output-4.html new file mode 100644 index 000000000..b0ce800be --- /dev/null +++ b/layout/reftests/forms/output/output-4.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: the output should show its content --> + <body> + <output>foo<input></output> + </body> +</html> diff --git a/layout/reftests/forms/output/output-5.html b/layout/reftests/forms/output/output-5.html new file mode 100644 index 000000000..16bcf357a --- /dev/null +++ b/layout/reftests/forms/output/output-5.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: the output element should show its default value --> + <script type="text/javascript"> + function setDefaultValue() + { + document.getElementById('o').defaultValue = "foo"; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setDefaultValue(); disableReftestWait();"> + <output id="o"></output> + </body> +</html> diff --git a/layout/reftests/forms/output/output-6.html b/layout/reftests/forms/output/output-6.html new file mode 100644 index 000000000..b7e9ede75 --- /dev/null +++ b/layout/reftests/forms/output/output-6.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: the output element should show its value --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('o').value = "foo"; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setValue(); disableReftestWait();"> + <output id="o"></output> + </body> +</html> diff --git a/layout/reftests/forms/output/output-7.html b/layout/reftests/forms/output/output-7.html new file mode 100644 index 000000000..0ec10f3c3 --- /dev/null +++ b/layout/reftests/forms/output/output-7.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: the output element should show its value --> + <script type="text/javascript"> + function setDefaultValue() + { + document.getElementById('o').value = "bar"; + } + function setValue() + { + document.getElementById('o').value = "foo"; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setDefaultValue(); setValue(); disableReftestWait();"> + <output id="o"></output> + </body> +</html> diff --git a/layout/reftests/forms/output/output-ref-2.html b/layout/reftests/forms/output/output-ref-2.html new file mode 100644 index 000000000..ad78e10e5 --- /dev/null +++ b/layout/reftests/forms/output/output-ref-2.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + foo<b>bar</b> + </body> +</html> diff --git a/layout/reftests/forms/output/output-ref-3.html b/layout/reftests/forms/output/output-ref-3.html new file mode 100644 index 000000000..cae43bf45 --- /dev/null +++ b/layout/reftests/forms/output/output-ref-3.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + foo<input> + </body> +</html> diff --git a/layout/reftests/forms/output/output-ref.html b/layout/reftests/forms/output/output-ref.html new file mode 100644 index 000000000..01d12af23 --- /dev/null +++ b/layout/reftests/forms/output/output-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + foo + </body> +</html> diff --git a/layout/reftests/forms/output/reftest-stylo.list b/layout/reftests/forms/output/reftest-stylo.list new file mode 100644 index 000000000..b55dac96f --- /dev/null +++ b/layout/reftests/forms/output/reftest-stylo.list @@ -0,0 +1,8 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== output-1.html output-1.html +== output-2.html output-2.html +== output-3.html output-3.html +== output-4.html output-4.html +== output-5.html output-5.html +== output-6.html output-6.html +== output-7.html output-7.html diff --git a/layout/reftests/forms/output/reftest.list b/layout/reftests/forms/output/reftest.list new file mode 100644 index 000000000..1bd798272 --- /dev/null +++ b/layout/reftests/forms/output/reftest.list @@ -0,0 +1,7 @@ +== output-1.html about:blank +== output-2.html output-ref.html +== output-3.html output-ref-2.html +== output-4.html output-ref-3.html +== output-5.html output-ref.html +== output-6.html output-ref.html +== output-7.html output-ref.html diff --git a/layout/reftests/forms/placeholder/placeholder-1-password.html b/layout/reftests/forms/placeholder/placeholder-1-password.html new file mode 100644 index 000000000..1c3d582f1 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-1-password.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <!-- Test: placeholder should be used by input password elements --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <input type="password" value="" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-1-text.html b/layout/reftests/forms/placeholder/placeholder-1-text.html new file mode 100644 index 000000000..30df2f348 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-1-text.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <!-- Test: placeholder should be used by input text elements --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <input type="text" value="" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-1-textarea.html b/layout/reftests/forms/placeholder/placeholder-1-textarea.html new file mode 100644 index 000000000..89f990ce0 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-1-textarea.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <!-- Test: placeholder should be used by textarea elements --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <textarea placeholder="my placeholder"></textarea> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-10.html b/layout/reftests/forms/placeholder/placeholder-10.html new file mode 100644 index 000000000..40a35669e --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-10.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when unfocused, if value='', newest placeholder should be shown --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <script type="text/javascript"> + function focusPlaceholder() + { + document.getElementById('p1').focus(); + } + function setPlaceholder() + { + document.getElementById('p1').placeholder = 'my placeholder'; + } + function unFocusPlaceholder() + { + document.getElementById('p1').blur(); + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="focusPlaceholder();"> + <input type="text" id="p1" value="" placeholder="old placeholder" onfocus="setPlaceholder(); unFocusPlaceholder(); disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-11.html b/layout/reftests/forms/placeholder/placeholder-11.html new file mode 100644 index 000000000..62c77351c --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-11.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <!-- Test: placeholder shouldn't show new lines ( version) --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <input type="text" value="" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-12.html b/layout/reftests/forms/placeholder/placeholder-12.html new file mode 100644 index 000000000..7cfd00a0e --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-12.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <!-- Test: placeholder shouldn't show new lines ( version) --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <input type="text" value="" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-13.html b/layout/reftests/forms/placeholder/placeholder-13.html new file mode 100644 index 000000000..19fc17293 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-13.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: placeholder shouldn't show new lines (\r version) --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <script type="text/javascript"> + function setPlaceholder() + { + document.getElementById('p1').placeholder = 'my\r placeholder'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + <body onload="setPlaceholder(); disableReftestWait();"> + <input type="text" id="p1" value="" placeholder=""> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-14.html b/layout/reftests/forms/placeholder/placeholder-14.html new file mode 100644 index 000000000..ad99420eb --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-14.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: placeholder shouldn't show new lines (\n version) --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <script type="text/javascript"> + function setPlaceholder() + { + document.getElementById('p1').placeholder = 'my\n placeholder'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + <body onload="setPlaceholder(); disableReftestWait();"> + <input type="text" id="p1" value="" placeholder=""> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-18.html b/layout/reftests/forms/placeholder/placeholder-18.html new file mode 100644 index 000000000..159d5d7e2 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-18.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: placeholder should appear with dynamic DOM modifications --> + <script type="text/javascript"> + function setPlaceholder() + { + var i = document.getElementById('p1'); + i.focus(); + i.blur(); + i.value = "not empty"; + i.value = ""; + i.value = "my value"; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + <body onload="setPlaceholder(); disableReftestWait();"> + <input type="text" id="p1" value="" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-19.xul b/layout/reftests/forms/placeholder/placeholder-19.xul new file mode 100644 index 000000000..e176e0f9b --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-19.xul @@ -0,0 +1,23 @@ +<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + class="reftest-wait"> + <script type="text/javascript"><![CDATA[ + window.addEventListener("load", function() { + var x = document.getElementById("x"); + x.value = "val"; + x.focus();x.blur(); + setTimeout(function() { + x.value = ""; + x.hidden = true; + setTimeout(function() { + x.value = "value"; + x.hidden = false; + x.focus();x.blur(); + document.documentElement.removeAttribute("class"); + }, 0); + }, 0); + }, false); + ]]></script> + <textbox id="x" placeholder="placeholder"/> +</window> + diff --git a/layout/reftests/forms/placeholder/placeholder-2-textarea.html b/layout/reftests/forms/placeholder/placeholder-2-textarea.html new file mode 100644 index 000000000..06678a3db --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-2-textarea.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: placeholder has to be used if set via javascript --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <script type="text/javascript"> + function setPlaceholder() + { + document.getElementById('p1').placeholder = "my placeholder"; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setPlaceholder(); disableReftestWait();"> + <textarea id="p1" placeholder=""></textarea> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-2.html b/layout/reftests/forms/placeholder/placeholder-2.html new file mode 100644 index 000000000..36b883ab2 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-2.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: placeholder has to be used if set via javascript --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <script type="text/javascript"> + function setPlaceholder() + { + document.getElementById('p1').placeholder = "my placeholder"; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setPlaceholder(); disableReftestWait();"> + <input type="text" id="p1" value="" placeholder=""> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-20.html b/layout/reftests/forms/placeholder/placeholder-20.html new file mode 100644 index 000000000..323cea849 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-20.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <!-- Test: when focused, if value='', newest placeholder should be shown. --> + <script type="text/javascript"> + function focusPlaceholder() + { + document.getElementById('p1').focus(); + } + function setPlaceholder() + { + document.getElementById('p1').placeholder = 'my placeholder'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="focusPlaceholder();"> + <input type="text" id="p1" value="" onfocus="setPlaceholder(); disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-21.html b/layout/reftests/forms/placeholder/placeholder-21.html new file mode 100644 index 000000000..483b0d49d --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-21.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when focused, clearing placeholder attribute should work. --> + <script type="text/javascript"> + function focusPlaceholder() + { + document.getElementById('p1').focus(); + } + function setPlaceholder() + { + document.getElementById('p1').removeAttribute('placeholder'); + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="focusPlaceholder();"> + <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="setPlaceholder(); disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-22.html b/layout/reftests/forms/placeholder/placeholder-22.html new file mode 100644 index 000000000..7ae54e8e7 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-22.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: when focused, clearing placeholder attribute should work. --> + <script type="text/javascript"> + function focusPlaceholder() + { + document.getElementById('p1').focus(); + } + function setPlaceholder() + { + document.getElementById('p1').placeholder = ''; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="focusPlaceholder();"> + <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="setPlaceholder(); disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-3.html b/layout/reftests/forms/placeholder/placeholder-3.html new file mode 100644 index 000000000..b58f7ca72 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-3.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <!-- Test: value has to be shown when not null --> + <body> + <input type="text" value="my value" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-4.html b/layout/reftests/forms/placeholder/placeholder-4.html new file mode 100644 index 000000000..bfcce20b8 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-4.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: value has to be shown if set via javascript --> + <script type="text/javascript"> + function setValue() + { + document.getElementById('p1').value = "my value"; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setValue(); disableReftestWait();"> + <input type="text" id="p1" value="" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-5.html b/layout/reftests/forms/placeholder/placeholder-5.html new file mode 100644 index 000000000..0f766d160 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-5.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <!-- Test: placeholder has to be shown if value is reseted via javascript --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <script type="text/javascript"> + function setValue() + { + document.getElementById('p1').value = ""; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="setValue(); disableReftestWait();"> + <input type="text" id="p1" value="my value" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-6-textarea.html b/layout/reftests/forms/placeholder/placeholder-6-textarea.html new file mode 100644 index 000000000..b56cb0478 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-6-textarea.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <!-- Test placeholder behavior when textarea is too small --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <textarea cols="5" rows="3" placeholder="my placeholder"></textarea> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-6.html b/layout/reftests/forms/placeholder/placeholder-6.html new file mode 100644 index 000000000..774aa35d4 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-6.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <!-- Test placeholder behavior when input is too small --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <input type="text" size="5" value="" placeholder="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-7.html b/layout/reftests/forms/placeholder/placeholder-7.html new file mode 100644 index 000000000..19fc8eb74 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-7.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <!-- Test: when focused, element should show placeholder. --> + <script type="text/javascript"> + function focusPlaceholder() + { + document.getElementById('p1').focus(); + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="focusPlaceholder();"> + <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-8.html b/layout/reftests/forms/placeholder/placeholder-8.html new file mode 100644 index 000000000..9c1ac995a --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-8.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <!-- Test: when focused, if value='', newest placeholder should be shown. --> + <script type="text/javascript"> + function focusPlaceholder() + { + document.getElementById('p1').focus(); + } + function setPlaceholder() + { + document.getElementById('p1').placeholder = 'my placeholder'; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="focusPlaceholder();"> + <input type="text" id="p1" value="" placeholder="old placeholder" onfocus="setPlaceholder(); disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-9.html b/layout/reftests/forms/placeholder/placeholder-9.html new file mode 100644 index 000000000..35155c012 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-9.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <!-- Test: when focused, value reset should show placeholder. --> + <script type="text/javascript"> + function focusPlaceholder() + { + document.getElementById('p1').focus(); + } + function resetValue() + { + document.getElementById('p1').value = ''; + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="focusPlaceholder();"> + <input type="text" id="p1" value="my value" placeholder="my placeholder" onfocus="resetValue(); disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-blank-ref.html b/layout/reftests/forms/placeholder/placeholder-blank-ref.html new file mode 100644 index 000000000..115ffac79 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-blank-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <script type="text/javascript"> + function focusInput() + { + document.getElementById('t1').focus(); + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + <body onload="focusInput();"> + <input id='t1' type="text" onfocus="disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-focus-pref.html b/layout/reftests/forms/placeholder/placeholder-focus-pref.html new file mode 100644 index 000000000..cdfd92444 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-focus-pref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <!-- Test: when focused, element should not placeholder when + 'dom.placeholder.show_on_focus' pref is false. --> + <script type="text/javascript"> + function focusPlaceholder() + { + document.getElementById('p1').focus(); + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + + <body onload="focusPlaceholder();"> + <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="disableReftestWait();"> + </body> +</html>
\ No newline at end of file diff --git a/layout/reftests/forms/placeholder/placeholder-focus-ref.html b/layout/reftests/forms/placeholder/placeholder-focus-ref.html new file mode 100644 index 000000000..fa8f292a4 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-focus-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <script type="text/javascript"> + function focusInput() + { + document.getElementById('t1').focus(); + } + function disableReftestWait() + { + document.documentElement.className = ''; + } + </script> + <body onload="focusInput();"> + <input id='t1' type="text" class="placeholder" value="my placeholder" onfocus="disableReftestWait();"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-overflow-ref.html b/layout/reftests/forms/placeholder/placeholder-overflow-ref.html new file mode 100644 index 000000000..9bceacd62 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-overflow-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <!-- + This test 'emulate' the placeholder by setting a style + to the value of an input text. + This test may break if placeholder default style is changed. + --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + + <body> + <input type="text" class="placeholder" size="5" value="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html b/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html new file mode 100644 index 000000000..559945a50 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <!-- + This test 'emulate' the placeholder by setting a style + to the value of a textarea. + This test may break if placeholder default style is changed. + --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + + <body> + <textarea class="placeholder" cols="5" rows="3">my placeholder</textarea> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-overridden-ref.html b/layout/reftests/forms/placeholder/placeholder-overridden-ref.html new file mode 100644 index 000000000..11f756af6 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-overridden-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="text" value="my value"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-overridden-ref.xul b/layout/reftests/forms/placeholder/placeholder-overridden-ref.xul new file mode 100644 index 000000000..706f27fbb --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-overridden-ref.xul @@ -0,0 +1,5 @@ +<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <textbox placeholder="placeholder" value="value"/> +</window> + diff --git a/layout/reftests/forms/placeholder/placeholder-rtl-ref.html b/layout/reftests/forms/placeholder/placeholder-rtl-ref.html new file mode 100644 index 000000000..91812d0ce --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-rtl-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html dir='rtl'> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <input class='placeholder' value='foo'> + <textarea class='placeholder' >foo</textarea> + </body> +</html> + diff --git a/layout/reftests/forms/placeholder/placeholder-rtl.html b/layout/reftests/forms/placeholder/placeholder-rtl.html new file mode 100644 index 000000000..5898ed55c --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-rtl.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html dir='rtl'> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + <body> + <input placeholder='foo'> + <textarea placeholder='foo'></textarea> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-style.css b/layout/reftests/forms/placeholder/placeholder-style.css new file mode 100644 index 000000000..0c5bb6333 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-style.css @@ -0,0 +1,10 @@ +textarea.placeholder, +input.placeholder, +input::placeholder, +textarea::placeholder { + /* Unfortunately, we can't style the <input> or <textarea> text so we can't + set it to opacity: 0.54; which means we have to revert the style to + something that doesn't include an opacity. */ + color: GrayText; + opacity: 1.0; +} diff --git a/layout/reftests/forms/placeholder/placeholder-visible-ref.html b/layout/reftests/forms/placeholder/placeholder-visible-ref.html new file mode 100644 index 000000000..b05267457 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-visible-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <!-- + This test 'emulate' the placeholder by setting a style + to the value of an input text. + This test may break if placeholder default style is changed. + --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + + <body> + <input type="text" class="placeholder" value="my placeholder"> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html b/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html new file mode 100644 index 000000000..b7bda6f80 --- /dev/null +++ b/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <!-- + This test 'emulate' the placeholder by setting a style + to the value of a textarea. + This test may break if placeholder default style is changed. + --> + <link rel='stylesheet' type='text/css' href='placeholder-style.css'> + + <body> + <textarea class="placeholder">my placeholder</textarea> + </body> +</html> diff --git a/layout/reftests/forms/placeholder/reftest-stylo.list b/layout/reftests/forms/placeholder/reftest-stylo.list new file mode 100644 index 000000000..e6766e944 --- /dev/null +++ b/layout/reftests/forms/placeholder/reftest-stylo.list @@ -0,0 +1,39 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Tests using placeholder-focus-ref.html as a reference are disabled because +# we can't change the caret colour nor disable it and we can't change the +# text colour without changing the caret which means that the tested page has +# a black caret with a grey text and the reference has a grey caret with grey +# text. The only thing that is doable is to make the caret grey in the tested +# page but that would make the test moot because a failure wouldn't be seen. +# A real way to fix this would be to be able to style the caret or to implement +# ::value (bug 648643), depending of the ::value behaviour (it could change the +# caret colour and the text colour or just the text colour). + +== placeholder-1-text.html placeholder-1-text.html +== placeholder-1-password.html placeholder-1-password.html +== placeholder-1-textarea.html placeholder-1-textarea.html +== placeholder-2.html placeholder-2.html +== placeholder-2-textarea.html placeholder-2-textarea.html +== placeholder-3.html placeholder-3.html +== placeholder-4.html placeholder-4.html +== placeholder-5.html placeholder-5.html +fuzzy-if(winWidget,160,10) fuzzy-if(Android,1,1) fuzzy-if(asyncPan&&!layersGPUAccelerated,146,317) fuzzy-if(OSX==1010&&browserIsRemote,1,8) == placeholder-6.html placeholder-6.html +skip-if(B2G||Mulet||(Android&&asyncPan)) == placeholder-6-textarea.html placeholder-6-textarea.html +# Initial mulet triage: parity with B2G/B2G Desktop +# needs-focus == placeholder-7.html placeholder-7.html +# needs-focus == placeholder-8.html placeholder-8.html +# needs-focus == placeholder-9.html placeholder-9.html +needs-focus == placeholder-10.html placeholder-10.html +== placeholder-11.html placeholder-11.html +== placeholder-12.html placeholder-12.html +== placeholder-13.html placeholder-13.html +== placeholder-14.html placeholder-14.html +== placeholder-18.html placeholder-18.html +random-if(winWidget) skip-if((B2G&&browserIsRemote)||Mulet) == placeholder-19.xul placeholder-19.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +# needs-focus == placeholder-20.html placeholder-20.html +needs-focus == placeholder-21.html placeholder-21.html +needs-focus == placeholder-22.html placeholder-22.html +== placeholder-rtl.html placeholder-rtl.html +pref(dom.placeholder.show_on_focus,false) needs-focus == placeholder-focus-pref.html placeholder-focus-pref.html diff --git a/layout/reftests/forms/placeholder/reftest.list b/layout/reftests/forms/placeholder/reftest.list new file mode 100644 index 000000000..525b4ab74 --- /dev/null +++ b/layout/reftests/forms/placeholder/reftest.list @@ -0,0 +1,35 @@ +# Tests using placeholder-focus-ref.html as a reference are disabled because +# we can't change the caret colour nor disable it and we can't change the +# text colour without changing the caret which means that the tested page has +# a black caret with a grey text and the reference has a grey caret with grey +# text. The only thing that is doable is to make the caret grey in the tested +# page but that would make the test moot because a failure wouldn't be seen. +# A real way to fix this would be to be able to style the caret or to implement +# ::value (bug 648643), depending of the ::value behaviour (it could change the +# caret colour and the text colour or just the text colour). + +== placeholder-1-text.html placeholder-visible-ref.html +== placeholder-1-password.html placeholder-visible-ref.html +== placeholder-1-textarea.html placeholder-visible-textarea-ref.html +== placeholder-2.html placeholder-visible-ref.html +== placeholder-2-textarea.html placeholder-visible-textarea-ref.html +== placeholder-3.html placeholder-overridden-ref.html +== placeholder-4.html placeholder-overridden-ref.html +== placeholder-5.html placeholder-visible-ref.html +fuzzy-if(winWidget,160,10) fuzzy-if(Android,1,1) fuzzy-if(asyncPan&&!layersGPUAccelerated,146,317) fuzzy-if(OSX==1010&&browserIsRemote,1,8) == placeholder-6.html placeholder-overflow-ref.html +skip-if(Android&&asyncPan) == placeholder-6-textarea.html placeholder-overflow-textarea-ref.html +# needs-focus == placeholder-7.html placeholder-focus-ref.html +# needs-focus == placeholder-8.html placeholder-focus-ref.html +# needs-focus == placeholder-9.html placeholder-focus-ref.html +needs-focus == placeholder-10.html placeholder-visible-ref.html +== placeholder-11.html placeholder-visible-ref.html +== placeholder-12.html placeholder-visible-ref.html +== placeholder-13.html placeholder-visible-ref.html +== placeholder-14.html placeholder-visible-ref.html +== placeholder-18.html placeholder-overridden-ref.html +random-if(winWidget) == placeholder-19.xul placeholder-overridden-ref.xul +# needs-focus == placeholder-20.html placeholder-focus-ref.html +needs-focus == placeholder-21.html placeholder-blank-ref.html +needs-focus == placeholder-22.html placeholder-blank-ref.html +== placeholder-rtl.html placeholder-rtl-ref.html +pref(dom.placeholder.show_on_focus,false) needs-focus == placeholder-focus-pref.html placeholder-blank-ref.html diff --git a/layout/reftests/forms/progress/bar-pseudo-element-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-ref.html new file mode 100644 index 000000000..ae95d4e23 --- /dev/null +++ b/layout/reftests/forms/progress/bar-pseudo-element-ref.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) > .progress-bar { margin: 10px; padding: 0px; } + body > div:nth-child(2) > .progress-bar { margin: 0px; padding: 10px; } + body > div:nth-child(3) > .progress-bar { margin: 10px; padding: 10px; } + body > div:nth-child(4) > .progress-bar { margin: 5px; padding: 5px; } + body > div:nth-child(5) > .progress-bar { margin: 50px; padding: 50px; } + body > div:nth-child(6) > .progress-bar { margin: 100px; padding: 100px; } + body > div:nth-child(7) > .progress-bar { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) > .progress-bar { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) > .progress-bar { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) > .progress-bar { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) > .progress-bar { margin: 200px; padding: 0px; } + body > div:nth-child(16) > .progress-bar { margin: 0px; padding: 200px; } + /* 15 - 18 should have 100% width, no need to specify. */ + </style> + <body> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html new file mode 100644 index 000000000..102fb61f5 --- /dev/null +++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(2) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(3) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(4) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; } + /* 15 - 18 should have 100% width, no need to specify. */ + </style> + <body dir='rtl'> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html new file mode 100644 index 000000000..711dc26ba --- /dev/null +++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > progress:nth-child(1)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > progress:nth-child(2)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > progress:nth-child(3)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > progress:nth-child(4)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > progress:nth-child(5)::-moz-progress-bar { width: 1000px; } + body > progress:nth-child(6)::-moz-progress-bar { width: 10px; } + body > progress:nth-child(7)::-moz-progress-bar { width: 10%; } + body > progress:nth-child(8)::-moz-progress-bar { width: 200%; } + </style> + <body dir='rtl'> + <!-- Those will be used to change padding/margin on ::-moz-progress-bar --> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <!-- Those will be used to change width. --> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html new file mode 100644 index 000000000..972d2ca49 --- /dev/null +++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + .progress-element { margin: 10px; } + body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px; + height: -moz-calc(100% - 8px); } + body > div:nth-child(2) > .progress-bar { } + body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px; + height: -moz-calc(100% - 8px); } + body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); } + body > div:nth-child(5) > .progress-bar { } + body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); } + body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; } + body > div:nth-child(8) > .progress-bar { } + body > div:nth-child(9) > .progress-bar { } + body > div:nth-child(10) > .progress-bar { } + body > div:nth-child(11) > .progress-bar { } + /* 12 - 15 should have 100% width, no need to specify. */ + body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; left: 64px; + height: -moz-calc(100% - 32px); + width: -moz-calc(100% + 128px - 1em); } + </style> + <body> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <br><div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html new file mode 100644 index 000000000..ddf951f1a --- /dev/null +++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + .progress-element { margin: 10px; } + body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px; + height: -moz-calc(100% - 8px); } + body > div:nth-child(2) > .progress-bar { } + body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px; + height: -moz-calc(100% - 8px); } + body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); } + body > div:nth-child(5) > .progress-bar { } + body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); } + body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; } + body > div:nth-child(8) > .progress-bar { } + body > div:nth-child(9) > .progress-bar { } + body > div:nth-child(10) > .progress-bar { } + body > div:nth-child(11) > .progress-bar { } + /* 12 - 15 should have 100% width, no need to specify. */ + body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; + left: -moz-calc(100% + 128px + 32px ); + height: -moz-calc(100% - 32px); + width: -moz-calc(100% + 128px - 1em); } + </style> + <body dir='rtl'> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <br><div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html new file mode 100644 index 000000000..312d69f52 --- /dev/null +++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { + margin: 10px; + -moz-orient: vertical; + } + body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; } + body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; } + body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; } + body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; } + body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; } + body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; } + body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; } + body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; } + body > progress:nth-child(13)::-moz-progress-bar { height: 10px; } + body > progress:nth-child(14)::-moz-progress-bar { height: 10%; } + body > progress:nth-child(15)::-moz-progress-bar { height: 200%; } + body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; } + </style> + <body dir='rtl'> + <!-- Those will be used to change padding/margin on ::-moz-progress-bar --> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <!-- Those will be used to change width. --> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <br><progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html new file mode 100644 index 000000000..0ef17f167 --- /dev/null +++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { + margin: 10px; + -moz-orient: vertical; + } + body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; } + body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; } + body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; } + body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; } + body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; } + body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; } + body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; } + body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; } + body > progress:nth-child(13)::-moz-progress-bar { height: 10px; } + body > progress:nth-child(14)::-moz-progress-bar { height: 10%; } + body > progress:nth-child(15)::-moz-progress-bar { height: 200%; } + body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; } + </style> + <body> + <!-- Those will be used to change padding/margin on ::-moz-progress-bar --> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <!-- Those will be used to change width. --> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <br><progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/bar-pseudo-element.html b/layout/reftests/forms/progress/bar-pseudo-element.html new file mode 100644 index 000000000..15caf21ef --- /dev/null +++ b/layout/reftests/forms/progress/bar-pseudo-element.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > progress:nth-child(1)::-moz-progress-bar { margin: 10px; padding: 0px; } + body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 10px; } + body > progress:nth-child(3)::-moz-progress-bar { margin: 10px; padding: 10px; } + body > progress:nth-child(4)::-moz-progress-bar { margin: 5px; padding: 5px; } + body > progress:nth-child(5)::-moz-progress-bar { margin: 50px; padding: 50px; } + body > progress:nth-child(6)::-moz-progress-bar { margin: 100px; padding: 100px; } + body > progress:nth-child(7)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; } + body > progress:nth-child(8)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; } + body > progress:nth-child(9)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; } + body > progress:nth-child(10)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; } + body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; } + body > progress:nth-child(12)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; } + body > progress:nth-child(13)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; } + body > progress:nth-child(14)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; } + body > progress:nth-child(15)::-moz-progress-bar { margin: 200px; padding: 0px; } + body > progress:nth-child(16)::-moz-progress-bar { margin: 0px; padding: 200px; } + body > progress:nth-child(17)::-moz-progress-bar { width: 1000px; } + body > progress:nth-child(18)::-moz-progress-bar { width: 10px; } + body > progress:nth-child(19)::-moz-progress-bar { width: 10%; } + body > progress:nth-child(20)::-moz-progress-bar { width: 200%; } + </style> + <body> + <!-- Those will be used to change padding/margin on ::-moz-progress-bar --> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <!-- Those will be used to change width. --> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/block-invalidate-ref.html b/layout/reftests/forms/progress/block-invalidate-ref.html new file mode 100644 index 000000000..c06092f72 --- /dev/null +++ b/layout/reftests/forms/progress/block-invalidate-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { display: block; } + </style> + <body> + <progress value='0.5'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/block-invalidate.html b/layout/reftests/forms/progress/block-invalidate.html new file mode 100644 index 000000000..47ba03bda --- /dev/null +++ b/layout/reftests/forms/progress/block-invalidate.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { display: block; } + </style> + <script> + function loadHandler() { + setTimeout(function() { + var p = document.getElementsByTagName('progress')[0]; + p.value = '0.5'; + document.documentElement.className = ''; + }, 0); + } + </script> + <body onload="loadHandler();"> + <progress value='0'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/in-cells-ref.html b/layout/reftests/forms/progress/in-cells-ref.html new file mode 100644 index 000000000..700270621 --- /dev/null +++ b/layout/reftests/forms/progress/in-cells-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { width: 10em; height: 1em; } + progress.vertical { -moz-orient: vertical; width: 1em; height: 10em; } + </style> + <body> + <table> + <tr> + <td>foo</td> + <td><progress value='0.5'></progress></td> + <td>bar</td> + </tr> + <tr> + <td>foo</td> + <td><progress class='vertical' value='0.5'></progress></td> + <td>bar</td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/forms/progress/in-cells.html b/layout/reftests/forms/progress/in-cells.html new file mode 100644 index 000000000..fc3614347 --- /dev/null +++ b/layout/reftests/forms/progress/in-cells.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress.vertical { -moz-orient: vertical; } + </style> + <body> + <table> + <tr> + <td>foo</td> + <td><progress value='0.5'></progress></td> + <td>bar</td> + </tr> + <tr> + <td>foo</td> + <td><progress class='vertical' value='0.5'></progress></td> + <td>bar</td> + </tr> + </table> + </body> +</html> diff --git a/layout/reftests/forms/progress/indeterminate-style-height-ref.html b/layout/reftests/forms/progress/indeterminate-style-height-ref.html new file mode 100644 index 000000000..d53eb069c --- /dev/null +++ b/layout/reftests/forms/progress/indeterminate-style-height-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div.progress-element { + height: 12em; + width: 2em; + } + div.progress-bar { + height: 100%; + } + body > div:nth-child(1) > .progress-bar { position: relative; + top: -moz-calc(12em - 20px); height: 20px; } + body > div:nth-child(2) > .progress-bar { position: relative; + top: -moz-calc(12em - 0px); height: 0px; } + body > div:nth-child(3) > .progress-bar { position: relative; + top: -moz-calc(12em - 50%); height: 50%; } + body > div:nth-child(4) > .progress-bar { position: relative; + top: -moz-calc(12em - 1em); height: 1em; } + body > div:nth-child(5) > .progress-bar { position: relative; + top: -moz-calc(12em - 100%); height: 100%; } + </style> + <body> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> + diff --git a/layout/reftests/forms/progress/indeterminate-style-height.html b/layout/reftests/forms/progress/indeterminate-style-height.html new file mode 100644 index 000000000..ddefd0afa --- /dev/null +++ b/layout/reftests/forms/progress/indeterminate-style-height.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { + -moz-orient: vertical; + height: 12em; + width: 2em; + } + body > progress:nth-child(1)::-moz-progress-bar { height: 20px; } + body > progress:nth-child(2)::-moz-progress-bar { height: 0px; } + body > progress:nth-child(3)::-moz-progress-bar { height: 50%; } + body > progress:nth-child(4)::-moz-progress-bar { height: 1em; } + /* last one is for the default value: width=100%. */ + </style> + <body> + <!-- Those will be used to change padding/margin on ::-moz-progress-bar --> + <progress></progress> + <progress></progress> + <progress></progress> + <progress></progress> + <progress></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/indeterminate-style-width-ref.html b/layout/reftests/forms/progress/indeterminate-style-width-ref.html new file mode 100644 index 000000000..8a135b2ea --- /dev/null +++ b/layout/reftests/forms/progress/indeterminate-style-width-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div.progress-bar { + width:100%; + } + body > div:nth-child(1) > .progress-bar { width: 20px; } + body > div:nth-child(2) > .progress-bar { width: 0px; } + body > div:nth-child(3) > .progress-bar { width: 50%; } + body > div:nth-child(4) > .progress-bar { width: 1em; } + body > div:nth-child(5) > .progress-bar { width: 100%; } + </style> + <body> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> + diff --git a/layout/reftests/forms/progress/indeterminate-style-width.html b/layout/reftests/forms/progress/indeterminate-style-width.html new file mode 100644 index 000000000..f5db8ff66 --- /dev/null +++ b/layout/reftests/forms/progress/indeterminate-style-width.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > progress:nth-child(1)::-moz-progress-bar { width: 20px; } + body > progress:nth-child(2)::-moz-progress-bar { width: 0px; } + body > progress:nth-child(3)::-moz-progress-bar { width: 50%; } + body > progress:nth-child(4)::-moz-progress-bar { width: 1em; } + /* last one is for the default value: width=100%. */ + </style> + <body> + <!-- Those will be used to change padding/margin on ::-moz-progress-bar --> + <progress></progress> + <progress></progress> + <progress></progress> + <progress></progress> + <progress></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/margin-padding-ref.html b/layout/reftests/forms/progress/margin-padding-ref.html new file mode 100644 index 000000000..33f35c306 --- /dev/null +++ b/layout/reftests/forms/progress/margin-padding-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { margin: 10px; padding: 0px; } + body > div:nth-child(2) { margin: 0px; padding: 10px; } + body > div:nth-child(3) { margin: 10px; padding: 10px; } + body > div:nth-child(4) { margin: 5px; padding: 5px; } + body > div:nth-child(5) { margin: 50px; padding: 50px; } + body > div:nth-child(6) { margin: 100px; padding: 100px; } + body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/margin-padding-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-rtl-ref.html new file mode 100644 index 000000000..dcf76f0f3 --- /dev/null +++ b/layout/reftests/forms/progress/margin-padding-rtl-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { margin: 10px; padding: 0px; } + body > div:nth-child(2) { margin: 0px; padding: 10px; } + body > div:nth-child(3) { margin: 10px; padding: 10px; } + body > div:nth-child(4) { margin: 5px; padding: 5px; } + body > div:nth-child(5) { margin: 50px; padding: 50px; } + body > div:nth-child(6) { margin: 100px; padding: 100px; } + body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body dir='rtl'> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/margin-padding-rtl.html b/layout/reftests/forms/progress/margin-padding-rtl.html new file mode 100644 index 000000000..fc445c36c --- /dev/null +++ b/layout/reftests/forms/progress/margin-padding-rtl.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress:nth-child(1) { margin: 10px; padding: 0px; } + progress:nth-child(2) { margin: 0px; padding: 10px; } + progress:nth-child(3) { margin: 10px; padding: 10px; } + progress:nth-child(4) { margin: 5px; padding: 5px; } + progress:nth-child(5) { margin: 50px; padding: 50px; } + progress:nth-child(6) { margin: 100px; padding: 100px; } + progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body dir='rtl'> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/margin-padding-vertical-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-ref.html new file mode 100644 index 000000000..1d964bdfa --- /dev/null +++ b/layout/reftests/forms/progress/margin-padding-vertical-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { margin: 10px; padding: 0px; } + body > div:nth-child(2) { margin: 0px; padding: 10px; } + body > div:nth-child(3) { margin: 10px; padding: 10px; } + body > div:nth-child(4) { margin: 5px; padding: 5px; } + body > div:nth-child(5) { margin: 50px; padding: 50px; } + body > div:nth-child(6) { margin: 100px; padding: 100px; } + body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html new file mode 100644 index 000000000..986a7ca44 --- /dev/null +++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { margin: 10px; padding: 0px; } + body > div:nth-child(2) { margin: 0px; padding: 10px; } + body > div:nth-child(3) { margin: 10px; padding: 10px; } + body > div:nth-child(4) { margin: 5px; padding: 5px; } + body > div:nth-child(5) { margin: 50px; padding: 50px; } + body > div:nth-child(6) { margin: 100px; padding: 100px; } + body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body dir='rtl'> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html new file mode 100644 index 000000000..7be45b2c1 --- /dev/null +++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { + -moz-orient: vertical; + } + progress:nth-child(1) { margin: 10px; padding: 0px; } + progress:nth-child(2) { margin: 0px; padding: 10px; } + progress:nth-child(3) { margin: 10px; padding: 10px; } + progress:nth-child(4) { margin: 5px; padding: 5px; } + progress:nth-child(5) { margin: 50px; padding: 50px; } + progress:nth-child(6) { margin: 100px; padding: 100px; } + progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body dir='rtl'> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/margin-padding-vertical.html b/layout/reftests/forms/progress/margin-padding-vertical.html new file mode 100644 index 000000000..8e4d48565 --- /dev/null +++ b/layout/reftests/forms/progress/margin-padding-vertical.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { + -moz-orient: vertical; + } + progress:nth-child(1) { margin: 10px; padding: 0px; } + progress:nth-child(2) { margin: 0px; padding: 10px; } + progress:nth-child(3) { margin: 10px; padding: 10px; } + progress:nth-child(4) { margin: 5px; padding: 5px; } + progress:nth-child(5) { margin: 50px; padding: 50px; } + progress:nth-child(6) { margin: 100px; padding: 100px; } + progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/margin-padding.html b/layout/reftests/forms/progress/margin-padding.html new file mode 100644 index 000000000..fe4f3d003 --- /dev/null +++ b/layout/reftests/forms/progress/margin-padding.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress:nth-child(1) { margin: 10px; padding: 0px; } + progress:nth-child(2) { margin: 0px; padding: 10px; } + progress:nth-child(3) { margin: 10px; padding: 10px; } + progress:nth-child(4) { margin: 5px; padding: 5px; } + progress:nth-child(5) { margin: 50px; padding: 50px; } + progress:nth-child(6) { margin: 100px; padding: 100px; } + progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; } + progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; } + progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; } + progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; } + progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; } + progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; } + progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; } + progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; } + progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; } + progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; } + </style> + <body> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/max-height-ref.html b/layout/reftests/forms/progress/max-height-ref.html new file mode 100644 index 000000000..872f9cc82 --- /dev/null +++ b/layout/reftests/forms/progress/max-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + progress { + height: 50px; + padding: 23px; + border: 1px solid black; + box-sizing: border-box; + overflow: hidden; + } +</style> +<progress>Some text</progress> diff --git a/layout/reftests/forms/progress/max-height.html b/layout/reftests/forms/progress/max-height.html new file mode 100644 index 000000000..c9d545330 --- /dev/null +++ b/layout/reftests/forms/progress/max-height.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + progress { + max-height: 50px; + padding: 23px; + border: 1px solid black; + box-sizing: border-box; + overflow: hidden; + } +</style> +<progress>Some text</progress> diff --git a/layout/reftests/forms/progress/progress-orient-block.html b/layout/reftests/forms/progress/progress-orient-block.html new file mode 100644 index 000000000..e5f33c497 --- /dev/null +++ b/layout/reftests/forms/progress/progress-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="-moz-orient:block" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html new file mode 100644 index 000000000..64d715724 --- /dev/null +++ b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="-moz-orient:horizontal" max=100 value=0 dir=rtl> diff --git a/layout/reftests/forms/progress/progress-orient-horizontal.html b/layout/reftests/forms/progress/progress-orient-horizontal.html new file mode 100644 index 000000000..e37e46170 --- /dev/null +++ b/layout/reftests/forms/progress/progress-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="-moz-orient:horizontal" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-orient-inline.html b/layout/reftests/forms/progress/progress-orient-inline.html new file mode 100644 index 000000000..352537ae7 --- /dev/null +++ b/layout/reftests/forms/progress/progress-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="-moz-orient:inline" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-orient-vertical-rtl.html b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html new file mode 100644 index 000000000..7fb4d81be --- /dev/null +++ b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="-moz-orient:vertical" max=100 value=0 dir=rtl> diff --git a/layout/reftests/forms/progress/progress-orient-vertical.html b/layout/reftests/forms/progress/progress-orient-vertical.html new file mode 100644 index 000000000..6a64a5e8c --- /dev/null +++ b/layout/reftests/forms/progress/progress-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="-moz-orient:vertical" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vlr-orient-block.html b/layout/reftests/forms/progress/progress-vlr-orient-block.html new file mode 100644 index 000000000..954bc9dd1 --- /dev/null +++ b/layout/reftests/forms/progress/progress-vlr-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html new file mode 100644 index 000000000..9584f95d7 --- /dev/null +++ b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vlr-orient-inline.html b/layout/reftests/forms/progress/progress-vlr-orient-inline.html new file mode 100644 index 000000000..9ec89960d --- /dev/null +++ b/layout/reftests/forms/progress/progress-vlr-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vlr-orient-vertical.html b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html new file mode 100644 index 000000000..625b543b4 --- /dev/null +++ b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vlr.html b/layout/reftests/forms/progress/progress-vlr.html new file mode 100644 index 000000000..52f42aede --- /dev/null +++ b/layout/reftests/forms/progress/progress-vlr.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-lr" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vrl-orient-block.html b/layout/reftests/forms/progress/progress-vrl-orient-block.html new file mode 100644 index 000000000..52df5dd29 --- /dev/null +++ b/layout/reftests/forms/progress/progress-vrl-orient-block.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html new file mode 100644 index 000000000..03ea99bb8 --- /dev/null +++ b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vrl-orient-inline.html b/layout/reftests/forms/progress/progress-vrl-orient-inline.html new file mode 100644 index 000000000..57ee166d0 --- /dev/null +++ b/layout/reftests/forms/progress/progress-vrl-orient-inline.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vrl-orient-vertical.html b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html new file mode 100644 index 000000000..becd4504e --- /dev/null +++ b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=0> diff --git a/layout/reftests/forms/progress/progress-vrl.html b/layout/reftests/forms/progress/progress-vrl.html new file mode 100644 index 000000000..a3f0b889f --- /dev/null +++ b/layout/reftests/forms/progress/progress-vrl.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html> +<progress style="writing-mode:vertical-rl" max=100 value=0> diff --git a/layout/reftests/forms/progress/reftest-stylo.list b/layout/reftests/forms/progress/reftest-stylo.list new file mode 100644 index 000000000..5019c4486 --- /dev/null +++ b/layout/reftests/forms/progress/reftest-stylo.list @@ -0,0 +1,49 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== values.html values.html +== values-rtl.html values-rtl.html +== margin-padding.html margin-padding.html +== margin-padding-rtl.html margin-padding-rtl.html +skip-if(B2G||Mulet) == bar-pseudo-element.html bar-pseudo-element.html +# Initial mulet triage: parity with B2G/B2G Desktop +== bar-pseudo-element-rtl.html bar-pseudo-element-rtl.html +== indeterminate-style-width.html indeterminate-style-width.html + +# vertical tests +== values-vertical.html values-vertical.html +== values-vertical-rtl.html values-vertical-rtl.html +== margin-padding-vertical.html margin-padding-vertical.html +== margin-padding-vertical-rtl.html margin-padding-vertical-rtl.html +skip-if(B2G||Mulet) == bar-pseudo-element-vertical.html bar-pseudo-element-vertical.html +# Initial mulet triage: parity with B2G/B2G Desktop +== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl.html +== indeterminate-style-height.html indeterminate-style-height.html + +# The following test is disabled but kept in the repository because the +# transformations will not behave exactly the same for <progress> and two divs. +# However, it would be possible to manually check those. +# == transformations.html transformations.html + +# Tests for bugs: +== block-invalidate.html block-invalidate.html +== in-cells.html in-cells.html +== max-height.html max-height.html + +# Tests for block and inline orientation in combination with writing-mode +# XXX Remove default-preferences setting here after bug 1138384 makes +# it the default for all channels + +== progress-orient-horizontal.html progress-orient-horizontal.html +skip == progress-orient-vertical.html progress-orient-vertical.html +# only OS X currently has direction-dependent rendering here +== progress-orient-block.html progress-orient-block.html +== progress-orient-inline.html progress-orient-inline.html +== progress-vlr.html progress-vlr.html +== progress-vlr-orient-block.html progress-vlr-orient-block.html +== progress-vlr-orient-inline.html progress-vlr-orient-inline.html +== progress-vlr-orient-horizontal.html progress-vlr-orient-horizontal.html +== progress-vlr-orient-vertical.html progress-vlr-orient-vertical.html +== progress-vrl.html progress-vrl.html +== progress-vrl-orient-block.html progress-vrl-orient-block.html +== progress-vrl-orient-inline.html progress-vrl-orient-inline.html +== progress-vrl-orient-horizontal.html progress-vrl-orient-horizontal.html +== progress-vrl-orient-vertical.html progress-vrl-orient-vertical.html diff --git a/layout/reftests/forms/progress/reftest.list b/layout/reftests/forms/progress/reftest.list new file mode 100644 index 000000000..445a76a4d --- /dev/null +++ b/layout/reftests/forms/progress/reftest.list @@ -0,0 +1,42 @@ +== values.html values-ref.html +== values-rtl.html values-rtl-ref.html +== margin-padding.html margin-padding-ref.html +== margin-padding-rtl.html margin-padding-rtl-ref.html +== bar-pseudo-element.html bar-pseudo-element-ref.html +== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html +== indeterminate-style-width.html indeterminate-style-width-ref.html + +# vertical tests +== values-vertical.html values-vertical-ref.html +== values-vertical-rtl.html values-vertical-rtl-ref.html +== margin-padding-vertical.html margin-padding-vertical-ref.html +== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html +== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html +== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html +== indeterminate-style-height.html indeterminate-style-height-ref.html + +# The following test is disabled but kept in the repository because the +# transformations will not behave exactly the same for <progress> and two divs. +# However, it would be possible to manually check those. +# == transformations.html transformations-ref.html + +# Tests for bugs: +== block-invalidate.html block-invalidate-ref.html +== in-cells.html in-cells-ref.html +== max-height.html max-height-ref.html + +# Tests for block and inline orientation in combination with writing-mode +!= progress-orient-horizontal.html progress-orient-vertical.html +fails-if(!cocoaWidget||OSX==1010) != progress-orient-vertical.html progress-orient-vertical-rtl.html # only OS X currently has direction-dependent rendering here +== progress-orient-block.html progress-orient-vertical.html +== progress-orient-inline.html progress-orient-horizontal.html +== progress-vlr.html progress-orient-vertical.html +== progress-vlr-orient-block.html progress-orient-horizontal.html +== progress-vlr-orient-inline.html progress-orient-vertical.html +== progress-vlr-orient-horizontal.html progress-orient-horizontal.html +== progress-vlr-orient-vertical.html progress-orient-vertical.html +== progress-vrl.html progress-orient-vertical-rtl.html +== progress-vrl-orient-block.html progress-orient-horizontal-rtl.html +== progress-vrl-orient-inline.html progress-orient-vertical-rtl.html +== progress-vrl-orient-horizontal.html progress-orient-horizontal-rtl.html +== progress-vrl-orient-vertical.html progress-orient-vertical-rtl.html diff --git a/layout/reftests/forms/progress/style.css b/layout/reftests/forms/progress/style.css new file mode 100644 index 000000000..025bde8f8 --- /dev/null +++ b/layout/reftests/forms/progress/style.css @@ -0,0 +1,39 @@ +div.progress-element { + -moz-appearance: progressbar; + display: inline-block; + height: 1em; + width: 10em; + vertical-align: -0.2em; + + /* Default style in case of there is -moz-appearance: none; */ + border: 2px solid; + -moz-border-top-colors: ThreeDShadow #e6e6e6; + -moz-border-right-colors: ThreeDHighlight #e6e6e6; + -moz-border-bottom-colors: ThreeDHighlight #e6e6e6; + -moz-border-left-colors: ThreeDShadow #e6e6e6; + background-color: #e6e6e6; +} + +div.progress-element.vertical { + height: 10em; + width: 1em; +} + +div.progress-bar { + -moz-appearance: progresschunk; + height: 100%; + /* + * We can't apply the following style to the reference because it will have + * underisable effectes: + * width: 100%; + */ + + box-sizing: border-box; + + /* Default style in case of there is -moz-appearance: none; */ + background-color: #0064b4; +} + +progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar { + -moz-appearance: none; +} diff --git a/layout/reftests/forms/progress/transformations-ref.html b/layout/reftests/forms/progress/transformations-ref.html new file mode 100644 index 000000000..f77751ac8 --- /dev/null +++ b/layout/reftests/forms/progress/transformations-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + body > div:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); } + body > div:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); } + body > div:nth-child(3) { -moz-transform: rotate(30deg); } + body > div:nth-child(4) { -moz-transform: scale(2, 4); } + body > div:nth-child(5) { -moz-transform: scale(0.1, 0.4); } + body > div:nth-child(6) { -moz-transform: scale(1, 0.4); } + body > div:nth-child(7) { -moz-transform: scale(0.1, 1); } + body > div:nth-child(8) { -moz-transform: skew(30deg, -10deg); } + body > div:nth-child(9) { -moz-transform: skew(-30deg, 10deg); } + body > div:nth-child(10) { -moz-transform: translate(10px, 30px); } + body > div:nth-child(11) { -moz-transform: translate(30px, 10px); } + body > div:nth-child(12) { -moz-transform: translate(-10px, 30px); } + body > div:nth-child(13) { -moz-transform: translate(30px, -10px); } + body > div:nth-child(14) { -moz-transform: scale(0, 0); } + </style> + <body> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/transformations.html b/layout/reftests/forms/progress/transformations.html new file mode 100644 index 000000000..d15637977 --- /dev/null +++ b/layout/reftests/forms/progress/transformations.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); } + progress:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); } + progress:nth-child(3) { -moz-transform: rotate(30deg); } + progress:nth-child(4) { -moz-transform: scale(2, 4); } + progress:nth-child(5) { -moz-transform: scale(0.1, 0.4); } + progress:nth-child(6) { -moz-transform: scale(1, 0.4); } + progress:nth-child(7) { -moz-transform: scale(0.1, 1); } + progress:nth-child(8) { -moz-transform: skew(30deg, -10deg); } + progress:nth-child(9) { -moz-transform: skew(-30deg, 10deg); } + progress:nth-child(10) { -moz-transform: translate(10px, 30px); } + progress:nth-child(11) { -moz-transform: translate(30px, 10px); } + progress:nth-child(12) { -moz-transform: translate(-10px, 30px); } + progress:nth-child(13) { -moz-transform: translate(30px, -10px); } + progress:nth-child(14) { -moz-transform: scale(0, 0); } + </style> + <body> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + <progress value='1'></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/values-ref.html b/layout/reftests/forms/progress/values-ref.html new file mode 100644 index 000000000..048e1164c --- /dev/null +++ b/layout/reftests/forms/progress/values-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .progress-bar { width: 100%; } + div:nth-child(2) > .progress-bar { width: 0%; } + div:nth-child(3) > .progress-bar { width: 10%; } + div:nth-child(4) > .progress-bar { width: 50%; } + div:nth-child(5) > .progress-bar { width: 0%; } + div:nth-child(6) > .progress-bar { width: 100%; } + div:nth-child(7) > .progress-bar { width: 42%; } + div:nth-child(8) > .progress-bar { width: 100%; } + div:nth-child(9) > .progress-bar { width: 100%; } + div:nth-child(10) > .progress-bar { width: 10%; } + </style> + <body> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/values-rtl-ref.html b/layout/reftests/forms/progress/values-rtl-ref.html new file mode 100644 index 000000000..99bf9fb2a --- /dev/null +++ b/layout/reftests/forms/progress/values-rtl-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .progress-bar { width: 100%; } + div:nth-child(2) > .progress-bar { width: 0%; } + div:nth-child(3) > .progress-bar { width: 10%; } + div:nth-child(4) > .progress-bar { width: 50%; } + div:nth-child(5) > .progress-bar { width: 0%; } + div:nth-child(6) > .progress-bar { width: 100%; } + div:nth-child(7) > .progress-bar { width: 42%; } + div:nth-child(8) > .progress-bar { width: 100%; } + div:nth-child(9) > .progress-bar { width: 100%; } + div:nth-child(10) > .progress-bar { width: 10%; } + </style> + <body dir='rtl'> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/values-rtl.html b/layout/reftests/forms/progress/values-rtl.html new file mode 100644 index 000000000..6a143b0c1 --- /dev/null +++ b/layout/reftests/forms/progress/values-rtl.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body dir='rtl'> + <progress value="1.0"></progress> + <progress value="0.0"></progress> + <progress value="0.1"></progress> + <progress value="0.5"></progress> + <progress value="-1"></progress> + <progress value="42"></progress> + <progress value="42" max="100"></progress> + <progress value="42" max="1"></progress> + <progress value="42" max="-1"></progress> + <progress value="0.1" max="-1"></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/values-vertical-ref.html b/layout/reftests/forms/progress/values-vertical-ref.html new file mode 100644 index 000000000..e6d85b317 --- /dev/null +++ b/layout/reftests/forms/progress/values-vertical-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; } + div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; } + div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; } + </style> + <body> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/values-vertical-rtl-ref.html b/layout/reftests/forms/progress/values-vertical-rtl-ref.html new file mode 100644 index 000000000..6da23eae6 --- /dev/null +++ b/layout/reftests/forms/progress/values-vertical-rtl-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; } + div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; } + div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; } + div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; } + div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; } + div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; } + </style> + <body dir='rtl'> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + <div class="progress-element vertical"> + <div class="progress-bar"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/forms/progress/values-vertical-rtl.html b/layout/reftests/forms/progress/values-vertical-rtl.html new file mode 100644 index 000000000..b50db9ad2 --- /dev/null +++ b/layout/reftests/forms/progress/values-vertical-rtl.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { + -moz-orient: vertical; + } + </style> + <body dir='rtl'> + <progress value="1.0"></progress> + <progress value="0.0"></progress> + <progress value="0.1"></progress> + <progress value="0.5"></progress> + <progress value="-1"></progress> + <progress value="42"></progress> + <progress value="42" max="100"></progress> + <progress value="42" max="1"></progress> + <progress value="42" max="-1"></progress> + <progress value="0.1" max="-1"></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/values-vertical.html b/layout/reftests/forms/progress/values-vertical.html new file mode 100644 index 000000000..47294fdeb --- /dev/null +++ b/layout/reftests/forms/progress/values-vertical.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + progress { + -moz-orient: vertical; + } + </style> + <body> + <progress value="1.0"></progress> + <progress value="0.0"></progress> + <progress value="0.1"></progress> + <progress value="0.5"></progress> + <progress value="-1"></progress> + <progress value="42"></progress> + <progress value="42" max="100"></progress> + <progress value="42" max="1"></progress> + <progress value="42" max="-1"></progress> + <progress value="0.1" max="-1"></progress> + </body> +</html> diff --git a/layout/reftests/forms/progress/values.html b/layout/reftests/forms/progress/values.html new file mode 100644 index 000000000..3c5e3e80b --- /dev/null +++ b/layout/reftests/forms/progress/values.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <progress value="1.0"></progress> + <progress value="0.0"></progress> + <progress value="0.1"></progress> + <progress value="0.5"></progress> + <progress value="-1"></progress> + <progress value="42"></progress> + <progress value="42" max="100"></progress> + <progress value="42" max="1"></progress> + <progress value="42" max="-1"></progress> + <progress value="0.1" max="-1"></progress> + </body> +</html> diff --git a/layout/reftests/forms/reftest-stylo.list b/layout/reftests/forms/reftest-stylo.list new file mode 100644 index 000000000..cfea24b9a --- /dev/null +++ b/layout/reftests/forms/reftest-stylo.list @@ -0,0 +1,36 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +skip-if(B2G||Mulet) fuzzy-if(skiaContent,1,10) HTTP(..) == text-control-baseline-1.html text-control-baseline-1.html +# Initial mulet triage: parity with B2G/B2G Desktop + +# button element +include button/reftest-stylo.list + +# legend element +include legend/reftest-stylo.list + +# fieldset element +include fieldset/reftest-stylo.list + +# placeholder +include placeholder/reftest-stylo.list + +# input +include input/reftest-stylo.list + +# meter element +include meter/reftest-stylo.list + +# output element +include output/reftest-stylo.list + +# progress element +include progress/reftest-stylo.list + +# select element +include select/reftest-stylo.list + +# textarea element +include textarea/reftest-stylo.list + +# textbox element +include textbox/reftest-stylo.list diff --git a/layout/reftests/forms/reftest.list b/layout/reftests/forms/reftest.list new file mode 100644 index 000000000..d45db276f --- /dev/null +++ b/layout/reftests/forms/reftest.list @@ -0,0 +1,34 @@ +fuzzy-if(skiaContent,1,10) HTTP(..) == text-control-baseline-1.html text-control-baseline-1-ref.html + +# button element +include button/reftest.list + +# legend element +include legend/reftest.list + +# fieldset element +include fieldset/reftest.list + +# placeholder +include placeholder/reftest.list + +# input +include input/reftest.list + +# meter element +include meter/reftest.list + +# output element +include output/reftest.list + +# progress element +include progress/reftest.list + +# select element +include select/reftest.list + +# textarea element +include textarea/reftest.list + +# textbox element +include textbox/reftest.list diff --git a/layout/reftests/forms/select/997709-2-ref.html b/layout/reftests/forms/select/997709-2-ref.html new file mode 100644 index 000000000..349abe0b7 --- /dev/null +++ b/layout/reftests/forms/select/997709-2-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE HTML> +<html><body> +<select style="display:block"><option>A</select> +</body></html> diff --git a/layout/reftests/forms/select/997709-2.html b/layout/reftests/forms/select/997709-2.html new file mode 100644 index 000000000..46be45418 --- /dev/null +++ b/layout/reftests/forms/select/997709-2.html @@ -0,0 +1,4 @@ +<!DOCTYPE HTML> +<html><body> +<select style="display:flex"><option>A</select> +</body></html> diff --git a/layout/reftests/forms/select/boguskids-ref.html b/layout/reftests/forms/select/boguskids-ref.html new file mode 100644 index 000000000..905b64649 --- /dev/null +++ b/layout/reftests/forms/select/boguskids-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <body> + <select size="10"> + <option>one</option> + <option>two</option> + <optgroup> + <option>three</option> + <option>four</option> + </optgroup> + </select> + </body> +</html> diff --git a/layout/reftests/forms/select/boguskids.html b/layout/reftests/forms/select/boguskids.html new file mode 100644 index 000000000..102f820c8 --- /dev/null +++ b/layout/reftests/forms/select/boguskids.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <body> + <select size="10"> + Shouldn't see me + <option>one</option> + Or me + <option>two</option> + <optgroup> + I should hide too + <option>three</option> + And me too + <option>four</option> + </optgroup> + And I + </select> + </body> +</html> diff --git a/layout/reftests/forms/select/dynamic-boguskids.html b/layout/reftests/forms/select/dynamic-boguskids.html new file mode 100644 index 000000000..2a6b7c261 --- /dev/null +++ b/layout/reftests/forms/select/dynamic-boguskids.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <script> + function doIt() { + var insertions = [ + [ "opt1", "Shouldn't see me" ], + [ "opt2", "Or me" ], + [ "opt3", "I should hide too" ], + [ "opt4", "And me too" ] + ]; + for (var i = 0; i < insertions.length; ++i) { + var next = document.getElementById(insertions[i][0]); + next.parentNode.insertBefore(document.createTextNode(insertions[i][1]), + next); + } + document.getElementById("sel").appendChild(document.createTextNode("And I")); + } + </script> + </head> + <body onload="doIt()"> + <select size="10" id="sel"> + <option id="opt1">one</option> + <option id="opt2">two</option> + <optgroup> + <option id="opt3">three</option> + <option id="opt4">four</option> + </optgroup> + </select> + </body> +</html> diff --git a/layout/reftests/forms/select/focusring-1-ref.html b/layout/reftests/forms/select/focusring-1-ref.html new file mode 100644 index 000000000..9118d265e --- /dev/null +++ b/layout/reftests/forms/select/focusring-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #1 for bug 1253977</title> + <style type="text/css"> + +* { -moz-appearance:none; } +:focus { + border:2px solid black; +} +:-moz-focusring { + outline: 2px dashed black; +} + + </style> +</head> +<body> + +<select><option>1<option>2</select> +<input> + +<script> + +function runTests() { + var b = document.querySelector("input"); + b.focus(); + document.body.offsetHeight; + setTimeout(function(){ document.body.offsetHeight; document.documentElement.removeAttribute("class"); }, 100); +} + +window.focus(); +window.addEventListener("MozReftestInvalidate", runTests, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/forms/select/focusring-1.html b/layout/reftests/forms/select/focusring-1.html new file mode 100644 index 000000000..fa3bb204f --- /dev/null +++ b/layout/reftests/forms/select/focusring-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #1 for bug 1253977</title> + <style type="text/css"> + +* { -moz-appearance:none; } +:focus { + border:2px solid black; +} +:-moz-focusring { + outline: 2px dashed black; +} + + </style> +</head> +<body> + +<select><option>1<option>2</select> +<input> + +<script> + +function runTests() { + var s = document.querySelector("select"); + var b = document.querySelector("input"); + s.focus(); + document.body.offsetHeight; + setTimeout(function(){ s.style.display = 'none'; document.body.offsetHeight; }, 2); + setTimeout(function(){ b.focus(); document.body.offsetHeight; }, 3); + setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4); + setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100); +} + +window.focus(); +window.addEventListener("MozReftestInvalidate", runTests, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/forms/select/focusring-2-ref.html b/layout/reftests/forms/select/focusring-2-ref.html new file mode 100644 index 000000000..c7c16a5e5 --- /dev/null +++ b/layout/reftests/forms/select/focusring-2-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 1253977</title> + <style type="text/css"> + +* { -moz-appearance:none; } +:focus { + border:2px solid black; +} +:-moz-focusring { + outline: 2px dashed black; +} + + </style> +</head> +<body> + +<select><option>1<option>2</select> + +</body> +</html> diff --git a/layout/reftests/forms/select/focusring-2.html b/layout/reftests/forms/select/focusring-2.html new file mode 100644 index 000000000..413ca3a83 --- /dev/null +++ b/layout/reftests/forms/select/focusring-2.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #2 for bug 1253977</title> + <style type="text/css"> + +* { -moz-appearance:none; } +:focus { + border:2px solid black; +} +:-moz-focusring { + outline: 2px dashed black; +} + + </style> +</head> +<body> + +<select onfocus="continueTest1()" onblur="continueTest2()"><option>1<option>2</select> + +<script> + +function continueTest2(){ + var s = document.querySelector("select"); + setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4); + setTimeout(function(){ document.body.offsetHeight; document.documentElement.removeAttribute("class"); }, 100); +} + +function continueTest1(){ + var s = document.querySelector("select"); + setTimeout(function(){ s.style.display = 'none'; }, 2); + setTimeout(function(){ s.blur(); document.body.offsetHeight; }, 3); +} + +function runTests(){ + var s = document.querySelector("select"); + s.focus(); +} + +window.focus(); +window.addEventListener("MozReftestInvalidate", runTests, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/forms/select/focusring-3-ref.html b/layout/reftests/forms/select/focusring-3-ref.html new file mode 100644 index 000000000..0238f8bdb --- /dev/null +++ b/layout/reftests/forms/select/focusring-3-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #3 for bug 1253977</title> + <style type="text/css"> + +* { -moz-appearance:none; } +:focus { + border:2px solid black; +} +:-moz-focusring { + outline: 2px dashed black; +} + + </style> +</head> +<body> + +<select><option>1<option>2</select> + +<script> + +function runTests(){ + var s = document.querySelector("select"); + s.focus(); + document.body.offsetHeight; + setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100); +} + +window.focus(); +window.addEventListener("MozReftestInvalidate", runTests, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/forms/select/focusring-3.html b/layout/reftests/forms/select/focusring-3.html new file mode 100644 index 000000000..4a51476db --- /dev/null +++ b/layout/reftests/forms/select/focusring-3.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"><head> + <meta charset="utf-8"> + <title>Testcase #3 for bug 1253977</title> + <style type="text/css"> + +* { -moz-appearance:none; } +:focus { + border:2px solid black; +} +:-moz-focusring { + outline: 2px dashed black; +} + + </style> +</head> +<body> + +<select onfocus="continueTest1()"><option>1<option>2</select> + +<script> + +function continueTest1(){ + var s = document.querySelector("select"); + setTimeout(function(){ s.style.display = 'none'; }, 2); + setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4); + setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100); +} +function runTests(){ + var s = document.querySelector("select"); + s.focus(); +} + +window.focus(); +window.addEventListener("MozReftestInvalidate", runTests, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/forms/select/multiple-ref.html b/layout/reftests/forms/select/multiple-ref.html new file mode 100644 index 000000000..70bdac6bc --- /dev/null +++ b/layout/reftests/forms/select/multiple-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body> + <select size='4'> + <option>Tulip</option> + <option>Lily</option> + <option>Gagea</option> + <option>Snowflake</option> + <option>Ismene</option> + </select> + </body> +</html> diff --git a/layout/reftests/forms/select/multiple.html b/layout/reftests/forms/select/multiple.html new file mode 100644 index 000000000..6b95eebc5 --- /dev/null +++ b/layout/reftests/forms/select/multiple.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body> + <select multiple> + <option>Tulip</option> + <option>Lily</option> + <option>Gagea</option> + <option>Snowflake</option> + <option>Ismene</option> + </select> + </body> +</html> diff --git a/layout/reftests/forms/select/option-children-ref.html b/layout/reftests/forms/select/option-children-ref.html new file mode 100644 index 000000000..09f6d19f0 --- /dev/null +++ b/layout/reftests/forms/select/option-children-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<title>Option elements with children</title> +<body> +<select><option>font</option></select> diff --git a/layout/reftests/forms/select/option-children.html b/layout/reftests/forms/select/option-children.html new file mode 100644 index 000000000..357247b56 --- /dev/null +++ b/layout/reftests/forms/select/option-children.html @@ -0,0 +1,11 @@ +<!doctype html> +<meta charset=utf-8> +<title>Option elements with children</title> +<body> +<script> +document.body + .appendChild(document.createElement("select")) + .appendChild(document.createElement("option")) + .appendChild(document.createElement("font")) + .appendChild(document.createTextNode("font")) +</script> diff --git a/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html b/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html new file mode 100644 index 000000000..413024176 --- /dev/null +++ b/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html @@ -0,0 +1,112 @@ +<html class="reftest-wait"> +<head><title>Testcase for bug 471741</title> +<script> +function sel(id,index) { + var el = document.getElementById(id) + el.selectedIndex = index; +} + +</script> +</head> +<body> +<select size="4" id="m1" multiple="multiple"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> +<select size="1" id="s1"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> + +<select size="4" id="m2" multiple="multiple"> + <option value="Item0">Item0</option> +</select> +<select size="1" id="s2"> + <option value="Item0">Item0</option> +</select> + +<select size="4" id="m3" multiple="multiple"></select> +<select size="1" id="s3"></select> +<br> + +<select size="4" id="r2m1" multiple="multiple"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> +<select size="1" id="r2s1"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> + +<select size="4" id="r2m2" multiple="multiple"> + <option value="Item0">Item0</option> +</select> +<select size="1" id="r2s2"> + <option value="Item0">Item0</option> +</select> + +<select size="4" id="r2m3" multiple="multiple"></select> +<select size="1" id="r2s3"></select> +<br> + +<select size="4" id="r3m1" multiple="multiple"> + <option selected="selected" value="Item0">Item0</option> + <option value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> +<select size="1" id="r3s1"> + <option selected="selected" value="Item0">Item0</option> + <option value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> + +<select size="4" id="r3m2" multiple="multiple"> + <option selected="selected" value="Item0">Item0</option> +</select> +<select size="1" id="r3s2"> + <option selected="selected" value="Item0">Item0</option> +</select> + +<select size="4" id="r3m3" multiple="multiple"></select> +<select size="1" id="r3s3"></select> +<br> + +<div id="result">Result: -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 0 0 0 0 -1 -1 </div> + +<script> +sel('m1', -1) +sel('s1', -1) +sel('m2', -1) +sel('s2', -1) +sel('m3', -1) +sel('s3', -1) + +sel('r2m1', -1) +sel('r2s1', -1) +sel('r2m2', -1) +sel('r2s2', -1) +sel('r2m3', -1) +sel('r2s3', -1) + +var flush = document.documentElement.offsetHeight; +document.documentElement.className=''; + +</script> +</body> +</html> diff --git a/layout/reftests/forms/select/out-of-bounds-selectedindex.html b/layout/reftests/forms/select/out-of-bounds-selectedindex.html new file mode 100644 index 000000000..4ae9ed06b --- /dev/null +++ b/layout/reftests/forms/select/out-of-bounds-selectedindex.html @@ -0,0 +1,129 @@ +<html class="reftest-wait"> +<head><title>Testcase for bug 471741</title> +<script> +var result = "Result: " +function sel(id,index) { + var el = document.getElementById(id) + el.selectedIndex = index; + result += el.selectedIndex + ' '; +} + +</script> +</head> +<body id="body"> +<select size="4" id="m1" multiple="multiple"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> +<select size="1" id="s1"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> + +<select size="4" id="m2" multiple="multiple"> + <option value="Item0">Item0</option> +</select> +<select size="1" id="s2"> + <option value="Item0">Item0</option> +</select> + +<select size="4" id="m3" multiple="multiple"></select> +<select size="1" id="s3"></select> +<br> + +<select size="4" id="r2m1" multiple="multiple"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> +<select size="1" id="r2s1"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> + +<select size="4" id="r2m2" multiple="multiple"> + <option value="Item0">Item0</option> +</select> +<select size="1" id="r2s2"> + <option value="Item0">Item0</option> +</select> + +<select size="4" id="r2m3" multiple="multiple"></select> +<select size="1" id="r2s3"></select> +<br> + +<select size="4" id="r3m1" multiple="multiple"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> +<select size="1" id="r3s1"> + <option value="Item0">Item0</option> + <option selected="selected" value="Item1">Item1</option> + <option value="Item2">Item2</option> + <option value="Item3">Item3</option> + <option value="Item4">Item4</option> +</select> + +<select size="4" id="r3m2" multiple="multiple"> + <option value="Item0">Item0</option> +</select> +<select size="1" id="r3s2"> + <option value="Item0">Item0</option> +</select> + +<select size="4" id="r3m3" multiple="multiple"></select> +<select size="1" id="r3s3"></select> +<br> + +<div id="result"></div> + +<script> +sel('m1', 10) +sel('s1', 10) +sel('m2', 99999) +sel('s2', 99999) +sel('m3', 10) +sel('s3', 10) + +sel('r2m1', -2) +sel('r2s1', -2) +sel('r2m2', -12) +sel('r2s2', -12) +sel('r2m3', -2) +sel('r2s3', -2) + +sel('r3m1', -2) +sel('r3s1', -2) +sel('r3m2', -12) +sel('r3s2', -12) +sel('r3m3', -2) +sel('r3s3', -2) +sel('r3m1', 0) +sel('r3s1', 0) +sel('r3m2', 0) +sel('r3s2', 0) +sel('r3m3', 0) +sel('r3s3', 0) + +document.getElementById('result').innerHTML = result; + +var flush = document.documentElement.offsetHeight; +document.documentElement.className=''; + +</script> +</body> +</html> diff --git a/layout/reftests/forms/select/padding-button-placement-ref.html b/layout/reftests/forms/select/padding-button-placement-ref.html new file mode 100644 index 000000000..342b404c6 --- /dev/null +++ b/layout/reftests/forms/select/padding-button-placement-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + </head> + <body> + <div style="box-sizing:border-box; width:402px; height:202px; border:1px solid black; border-right:50px solid black;"></div> + <div style="box-sizing:border-box; width:402px; height:202px; border:1px solid black; border-left:50px solid black;"></div> + </body> +</html> diff --git a/layout/reftests/forms/select/padding-button-placement.html b/layout/reftests/forms/select/padding-button-placement.html new file mode 100644 index 000000000..370715032 --- /dev/null +++ b/layout/reftests/forms/select/padding-button-placement.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + </head> + <body> + <!-- The div's border should hide the select's button --> + <!-- z-index:1 works around an unrelated bug in B2G --> + <div style="position:absolute; z-index:1; box-sizing:border-box; width:402px; height:202px; border-right:50px solid black;"></div> + <div><select style="background:transparent; border-radius:0; box-sizing:content-box; padding:50px; width:300px; height:100px; border:1px solid black; direction:ltr"></select></div> + + <div style="position:absolute; z-index:1; box-sizing:border-box; width:402px; height:202px; border-left:50px solid black;"></div> + <div><select style="background:transparent; border-radius:0; box-sizing:content-box; padding:50px; width:300px; height:100px; border:1px solid black; direction:rtl"></select></div> + </body> +</html> diff --git a/layout/reftests/forms/select/reftest-stylo.list b/layout/reftests/forms/select/reftest-stylo.list new file mode 100644 index 000000000..998f27237 --- /dev/null +++ b/layout/reftests/forms/select/reftest-stylo.list @@ -0,0 +1,15 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +fuzzy-if(Android,2,2) skip-if(B2G||Mulet) == out-of-bounds-selectedindex.html out-of-bounds-selectedindex.html +# test for bug 471741 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == multiple.html multiple.html +# Initial mulet triage: parity with B2G/B2G Desktop +== boguskids.html boguskids.html +== dynamic-boguskids.html dynamic-boguskids.html +== option-children.html option-children.html +fuzzy(1,4) == padding-button-placement.html padding-button-placement.html +HTTP(../..) == vertical-centering.html vertical-centering.html +== 997709-2.html 997709-2.html +needs-focus == focusring-1.html focusring-1.html +needs-focus == focusring-2.html focusring-2.html +needs-focus == focusring-3.html focusring-3.html diff --git a/layout/reftests/forms/select/reftest.list b/layout/reftests/forms/select/reftest.list new file mode 100644 index 000000000..1261dad9f --- /dev/null +++ b/layout/reftests/forms/select/reftest.list @@ -0,0 +1,11 @@ +fuzzy-if(Android,4,11) == out-of-bounds-selectedindex.html out-of-bounds-selectedindex-ref.html # test for bug 471741 +== multiple.html multiple-ref.html +== boguskids.html boguskids-ref.html +== dynamic-boguskids.html boguskids-ref.html +== option-children.html option-children-ref.html +fuzzy(1,4) == padding-button-placement.html padding-button-placement-ref.html +HTTP(../..) == vertical-centering.html vertical-centering-ref.html +== 997709-2.html 997709-2-ref.html +needs-focus == focusring-1.html focusring-1-ref.html +needs-focus == focusring-2.html focusring-2-ref.html +needs-focus == focusring-3.html focusring-3-ref.html diff --git a/layout/reftests/forms/select/vertical-centering-ref.html b/layout/reftests/forms/select/vertical-centering-ref.html new file mode 100644 index 000000000..f5d855456 --- /dev/null +++ b/layout/reftests/forms/select/vertical-centering-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> + @font-face { + font-family: "Ahem"; + src: url(../../fonts/Ahem.ttf); + } + select { + -moz-appearance: none; + border: none; + font-family: Ahem; + font-size: 20px; + box-sizing: content-box; + /* + * Why are these top/bottom paddings 7px rather than 10px? 1px each is + * eaten up by padding on the combobox display area, but I have no idea + * where the extra 4px somewhere else are coming from... + */ + padding: 7px 0 7px 0; + } +</style> +<select> + <option>X</option> +</select> diff --git a/layout/reftests/forms/select/vertical-centering.html b/layout/reftests/forms/select/vertical-centering.html new file mode 100644 index 000000000..6a2daa9e7 --- /dev/null +++ b/layout/reftests/forms/select/vertical-centering.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<style> + @font-face { + font-family: "Ahem"; + src: url(../../fonts/Ahem.ttf); + } + select { + -moz-appearance: none; + border: none; + font-family: Ahem; + font-size: 20px; + padding: 0; + box-sizing: content-box; + height: 40px; + } +</style> +<select> + <option>X</option> +</select> diff --git a/layout/reftests/forms/text-control-baseline-1-ref.html b/layout/reftests/forms/text-control-baseline-1-ref.html new file mode 100644 index 000000000..f46e55f1d --- /dev/null +++ b/layout/reftests/forms/text-control-baseline-1-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Reference for bug 481751</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <style type="text/css"> + @font-face { + font-family: "MarkA"; + src: url(../fonts/markA.ttf); + } + body { + background-color: white; + } + input, textarea { + font-family: "MarkA", sans-serif; + font-size: 32px; + background-color: black; + color: black; + vertical-align: baseline; + } + </style> +</head> +<body> + <input size="2" value="A"> + <input size="2" value="A"> + <textarea cols="2">A</textarea> + <textarea cols="2">A</textarea> +</body> +</html> diff --git a/layout/reftests/forms/text-control-baseline-1.html b/layout/reftests/forms/text-control-baseline-1.html new file mode 100644 index 000000000..080eeb5cd --- /dev/null +++ b/layout/reftests/forms/text-control-baseline-1.html @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title>Test for bug 481751</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <!-- + The primary font MarkA has a small line height. The default font + (used for the character '1') will probably have a maximum ascent + greater than the ascent plus half leading of MarkA, but this + should not change the baseline (and thus position) of the text + control. + --> + <style type="text/css"> + @font-face { + font-family: "MarkA"; + src: url(../fonts/markA.ttf); + } + body { + background-color: white; + } + input, textarea { + font-family: "MarkA", sans-serif; + font-size: 32px; + background-color: black; + color: black; + vertical-align: baseline; + } + </style> +</head> +<body> + <input size="2" value="A"> + <input size="2" value="A1"> + <textarea cols="2">A</textarea> + <textarea cols="2">A1</textarea> +</body> +</html> diff --git a/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html b/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html new file mode 100644 index 000000000..c8afa20cf --- /dev/null +++ b/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body style="text-align: left"> + <textarea cols=20 rows=4></textarea> + <script> + onload = function() { + setTimeout(function() { + document.dir = "rtl"; + document.documentElement.removeAttribute("class"); + }); + }; + </script> + </body> +</html> diff --git a/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html b/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html new file mode 100644 index 000000000..e6b14358e --- /dev/null +++ b/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html dir="ltr"> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea cols=20 rows=4 style="overflow: scroll; resize: none"></textarea> + </body> +</html> diff --git a/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html b/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html new file mode 100644 index 000000000..8c915b5ee --- /dev/null +++ b/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html dir="rtl"> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea cols=20 rows=4 style="float: left; overflow: scroll; resize: none"></textarea> + </body> +</html> diff --git a/layout/reftests/forms/textarea/ltr-scrollbar.html b/layout/reftests/forms/textarea/ltr-scrollbar.html new file mode 100644 index 000000000..927fbede6 --- /dev/null +++ b/layout/reftests/forms/textarea/ltr-scrollbar.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea dir="ltr" cols=20 rows=4 style="overflow: scroll; resize: none"></textarea> + </body> +</html> diff --git a/layout/reftests/forms/textarea/ltr.html b/layout/reftests/forms/textarea/ltr.html new file mode 100644 index 000000000..c7e84be0e --- /dev/null +++ b/layout/reftests/forms/textarea/ltr.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea cols=20 rows=4></textarea> + </body> +</html> diff --git a/layout/reftests/forms/textarea/no-resize.html b/layout/reftests/forms/textarea/no-resize.html new file mode 100644 index 000000000..fbf879653 --- /dev/null +++ b/layout/reftests/forms/textarea/no-resize.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea cols=20 rows=4 style="resize: none"></textarea> + </body> +</html> diff --git a/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html b/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html new file mode 100644 index 000000000..30928bbd7 --- /dev/null +++ b/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <title>Padding and Scrollbar Placement Test Reference</title> + <style>input, textarea { border-radius:0; background:none; border:none; }</style> + <style type="text/css"> + #t { + display: block; + position: absolute; + left: 50px; + top: 50px; + padding: 50px; + width: 300px; + height: 100px; + border: 5px solid red; + margin: 10px; + overflow: scroll; + font-family: verdana; + white-space: pre-wrap; + z-index: 0; /* force a stacking context */ + } + #cover { + position: absolute; + left: 400px; + top: 50px; + width: 100px; + height: 300px; + background: black; + } + #cover2 { /* corresponds to the bottom padding inside the textarea */ + position: absolute; + left: 0px; + bottom: 0px; + width: 100%; + height: 50px; + background: white; + } + </style> + </head> + <body> + <script> + var ss = []; + for (var i = 0; i < 1000; ++i) { + ss.push(i); + } + document.write("<div id='t'><div id=cover2></div>" + ss.join(" ") + "</div>"); + </script> + <div id="cover"></div> + </body> +</html> diff --git a/layout/reftests/forms/textarea/padding-scrollbar-placement.html b/layout/reftests/forms/textarea/padding-scrollbar-placement.html new file mode 100644 index 000000000..e1b0d7d67 --- /dev/null +++ b/layout/reftests/forms/textarea/padding-scrollbar-placement.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <title>Padding and Scrollbar Placement Test</title> + <style>input, textarea { border-radius:0; background:none; border:none; }</style> + <style type="text/css"> + #t { + display: block; + position: absolute; + left: 50px; + top: 50px; + padding: 50px; + width: 300px; + height: 100px; + border: 5px solid red; + margin: 10px; + overflow: scroll; + font-family: verdana; + resize: none; + color: black; + z-index: 0; /* force a stacking context */ + } + #cover { + position: absolute; + left: 400px; + top: 50px; + width: 100px; + height: 300px; + background: black; + } + </style> + </head> + <body> + <script> + var ss = []; + for (var i = 0; i < 1000; ++i) { + ss.push(i); + } + document.write("<textarea id='t'>" + ss.join(" ") + "</textarea>"); + </script> + <div id="cover"></div> + </body> +</html> diff --git a/layout/reftests/forms/textarea/reftest-stylo.list b/layout/reftests/forms/textarea/reftest-stylo.list new file mode 100644 index 000000000..0a050f16b --- /dev/null +++ b/layout/reftests/forms/textarea/reftest-stylo.list @@ -0,0 +1,23 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +skip-if(B2G||Mulet||Android) == resize.html resize.html +# Initial mulet triage: parity with B2G/B2G Desktop +# an offset seems to apply to the native resizer on windows so skip this test for now +fails skip-if(B2G||Mulet||Android) skip-if(winWidget) fuzzy-if(cocoaWidget,1,33) fuzzy-if(skiaContent&&!winWidget,5,10) == resize-background.html resize-background.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet||Android) == ltr.html ltr.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet||Android) == ltr-scrollbar.html ltr-scrollbar.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip == in-ltr-doc-scrollbar.html in-ltr-doc-scrollbar.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet||Android) == ltr.html ltr.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet||Android) fails-if(xulRuntime.widgetToolkit=="gtk2") == rtl.html rtl.html +# bug 834724 +# Initial mulet triage: parity with B2G/B2G Desktop +== rtl.html rtl.html +== rtl.html rtl.html +== rtl.html rtl.html +fuzzy-if(skiaContent,1,3) == setvalue-framereconstruction-1.html setvalue-framereconstruction-1.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,102,4168) == padding-scrollbar-placement.html padding-scrollbar-placement.html +== various-cols.html various-cols.html diff --git a/layout/reftests/forms/textarea/reftest.list b/layout/reftests/forms/textarea/reftest.list new file mode 100644 index 000000000..aee3654cb --- /dev/null +++ b/layout/reftests/forms/textarea/reftest.list @@ -0,0 +1,14 @@ +skip-if(Android) == resize.html resize-ref.html +# an offset seems to apply to the native resizer on windows so skip this test for now +skip-if(Android) skip-if(winWidget) fuzzy-if(cocoaWidget,1,33) fuzzy-if(skiaContent&&!winWidget&&!Android,5,10) == resize-background.html resize-background-ref.html +skip-if(Android) != ltr.html rtl.html +skip-if(Android) != ltr-scrollbar.html rtl-scrollbar.html +skip-if(Android) != in-ltr-doc-scrollbar.html in-rtl-doc-scrollbar.html +skip-if(Android) != ltr.html no-resize.html +skip-if(Android) fails-if(xulRuntime.widgetToolkit=="gtk2") != rtl.html no-resize.html # bug 834724 +== rtl.html rtl-dynamic-attr.html +== rtl.html rtl-dynamic-style.html +== rtl.html in-dynamic-rtl-doc.html +fuzzy-if(skiaContent,1,3) == setvalue-framereconstruction-1.html setvalue-framereconstruction-ref.html +fuzzy-if(asyncPan&&!layersGPUAccelerated,102,4168) == padding-scrollbar-placement.html padding-scrollbar-placement-ref.html +== various-cols.html various-cols-ref.html diff --git a/layout/reftests/forms/textarea/resize-background-ref.html b/layout/reftests/forms/textarea/resize-background-ref.html new file mode 100644 index 000000000..c0a97fb63 --- /dev/null +++ b/layout/reftests/forms/textarea/resize-background-ref.html @@ -0,0 +1,30 @@ +<html> +<script> +function sizeResizer() { + // reference resizer + var img = document.getElementsByTagName("img")[0]; + // hidden textarea + var textarea = document.getElementsByTagName("textarea")[0]; + var width = 200 - textarea.clientWidth; + var height = 200 - textarea.clientHeight; + // (Leave test failing if a scrollbar is missing) + if (width != 0 && height != 0) { + img.style.width = width + "px"; + img.style.left = textarea.clientWidth + "px"; + img.style.height = height + "px"; + img.style.top = textarea.clientHeight + "px"; + } +} +</script> +<body onload="sizeResizer()"> +<textarea style="width: 200px; height: 200px; margin: 0; border: none; + background: red; font-size: 400px;"> +M +</textarea> +<div style="position: relative; top: -200px; + width: 200px; height: 200px; margin: 0; border: none; + background: lightgreen"> + <img style="position: relative;" src="chrome://global/skin/icons/resizer.png"> +</div> +</body> +</html> diff --git a/layout/reftests/forms/textarea/resize-background.html b/layout/reftests/forms/textarea/resize-background.html new file mode 100644 index 000000000..24c6f70d8 --- /dev/null +++ b/layout/reftests/forms/textarea/resize-background.html @@ -0,0 +1,3 @@ +<html><body> +<textarea style="width: 200px; height: 200px; margin: 0; background: lightgreen; border: none;"></textarea> +</body></html> diff --git a/layout/reftests/forms/textarea/resize-ref.html b/layout/reftests/forms/textarea/resize-ref.html new file mode 100644 index 000000000..5d3334889 --- /dev/null +++ b/layout/reftests/forms/textarea/resize-ref.html @@ -0,0 +1,3 @@ +<html><body> +<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div> +</body></html> diff --git a/layout/reftests/forms/textarea/resize.html b/layout/reftests/forms/textarea/resize.html new file mode 100644 index 000000000..f513b4634 --- /dev/null +++ b/layout/reftests/forms/textarea/resize.html @@ -0,0 +1,3 @@ +<html><body> +<textarea style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea> +</body></html> diff --git a/layout/reftests/forms/textarea/rtl-dynamic-attr.html b/layout/reftests/forms/textarea/rtl-dynamic-attr.html new file mode 100644 index 000000000..47f97baa7 --- /dev/null +++ b/layout/reftests/forms/textarea/rtl-dynamic-attr.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea cols=20 rows=4></textarea> + <script> + onload = function() { + setTimeout(function() { + document.querySelector("textarea").setAttribute("dir", "rtl"); + document.documentElement.removeAttribute("class"); + }); + }; + </script> + </body> +</html> diff --git a/layout/reftests/forms/textarea/rtl-dynamic-style.html b/layout/reftests/forms/textarea/rtl-dynamic-style.html new file mode 100644 index 000000000..8997e31c0 --- /dev/null +++ b/layout/reftests/forms/textarea/rtl-dynamic-style.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea cols=20 rows=4></textarea> + <script> + onload = function() { + setTimeout(function() { + document.querySelector("textarea").style.direction = "rtl"; + document.documentElement.removeAttribute("class"); + }); + }; + </script> + </body> +</html> diff --git a/layout/reftests/forms/textarea/rtl-scrollbar.html b/layout/reftests/forms/textarea/rtl-scrollbar.html new file mode 100644 index 000000000..2770dc694 --- /dev/null +++ b/layout/reftests/forms/textarea/rtl-scrollbar.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea dir="rtl" cols=20 rows=4 style="overflow: scroll; resize: none"></textarea> + </body> +</html> diff --git a/layout/reftests/forms/textarea/rtl.html b/layout/reftests/forms/textarea/rtl.html new file mode 100644 index 000000000..984f9d9aa --- /dev/null +++ b/layout/reftests/forms/textarea/rtl.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title></title> + </head> + <body> + <textarea dir="rtl" cols=20 rows=4></textarea> + </body> +</html> diff --git a/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html b/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html new file mode 100644 index 000000000..dd8f1d2c0 --- /dev/null +++ b/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html @@ -0,0 +1,50 @@ +<!-- + +This test is mostly a copy of layout/forms/crashtests/373586-1.xhtml, +and it makes sure that the value setter works correctly when setting +the value causes the frame to be reconstructed. + +--> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<head> + +<bindings xmlns="http://www.mozilla.org/xbl"> + <binding id="foo"> + <content> + <children xmlns="http://www.mozilla.org/xbl" /> + </content> + </binding> +</bindings> + +<script> +function boom() +{ + document.getElementById("div").style.MozBinding = "url('#foo')"; + + var opt1 = document.getElementById("opt1"); + opt1.removeChild(opt1.firstChild); + + document.getElementById("textarea").value += " y"; + + document.getElementById("div").style.MozBinding = ""; + document.documentElement.removeAttribute("class") +} + +window.addEventListener("MozReftestInvalidate", boom, false); +</script> + +</head> + +<body> + +<div id="div"> + <textarea rows="3" cols="5" id="textarea">x</textarea> +</div> + +<select style="-moz-appearance:none"> + <option id="opt1">opt1</option> +</select> + +</body> +</html> + diff --git a/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html b/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html new file mode 100644 index 000000000..3f5108815 --- /dev/null +++ b/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html @@ -0,0 +1,17 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +</head> + +<body> + +<div id="div"> + <textarea rows="3" cols="5" id="textarea">x y</textarea> +</div> + +<select style="-moz-appearance:none"> + <option id="opt1"></option> +</select> + +</body> +</html> + diff --git a/layout/reftests/forms/textarea/various-cols-ref.html b/layout/reftests/forms/textarea/various-cols-ref.html new file mode 100644 index 000000000..7ba962e61 --- /dev/null +++ b/layout/reftests/forms/textarea/various-cols-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<textarea cols="20"></textarea><br> +<textarea cols="20"></textarea><br> +<textarea cols="20"></textarea> diff --git a/layout/reftests/forms/textarea/various-cols.html b/layout/reftests/forms/textarea/various-cols.html new file mode 100644 index 000000000..dc62941d8 --- /dev/null +++ b/layout/reftests/forms/textarea/various-cols.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<textarea></textarea><br> +<textarea cols="0"></textarea><br> +<textarea cols="-1"></textarea> diff --git a/layout/reftests/forms/textbox/accesskey-1-notref.xul b/layout/reftests/forms/textbox/accesskey-1-notref.xul new file mode 100644 index 000000000..697d10879 --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-1-notref.xul @@ -0,0 +1,35 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <label value="test"/> + <textbox value="text"/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-1.xul b/layout/reftests/forms/textbox/accesskey-1.xul new file mode 100644 index 000000000..39ad15b2d --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-1.xul @@ -0,0 +1,35 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <label value="test" accesskey="s"/> + <textbox value="text"/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-2-ref.xul b/layout/reftests/forms/textbox/accesskey-2-ref.xul new file mode 100644 index 000000000..ce6ed1ebc --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-2-ref.xul @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <!-- access key in LTR-overridden Arabic text --> + <label value="‭يبرعلا‬ test" accesskey="ع"/> + <textbox value=""/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-2.xul b/layout/reftests/forms/textbox/accesskey-2.xul new file mode 100644 index 000000000..98b2c272b --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-2.xul @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <!-- access key in RTL Arabic text --> + <label value="العربي test" accesskey="ع"/> + <textbox value=""/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-3-notref.xul b/layout/reftests/forms/textbox/accesskey-3-notref.xul new file mode 100644 index 000000000..1a81e2811 --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-3-notref.xul @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <!-- no access key, for != test --> + <label value="العربي hello world"/> + <textbox value=""/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-3-ref.xul b/layout/reftests/forms/textbox/accesskey-3-ref.xul new file mode 100644 index 000000000..b7907e9a6 --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-3-ref.xul @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <!-- access key in LTR text that follows RTL text (mixed direction) --> + <label value="العربي hello world" accesskey="d"/> + <textbox value=""/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-3.xul b/layout/reftests/forms/textbox/accesskey-3.xul new file mode 100644 index 000000000..97e2c6fbc --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-3.xul @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <!-- access key in RTL-overridden English text --> + <label value="العربي hello ‮dlrow‬" accesskey="d"/> + <textbox value=""/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-4-notref.xul b/layout/reftests/forms/textbox/accesskey-4-notref.xul new file mode 100644 index 000000000..1a81e2811 --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-4-notref.xul @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <!-- no access key, for != test --> + <label value="العربي hello world"/> + <textbox value=""/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-4-ref.xul b/layout/reftests/forms/textbox/accesskey-4-ref.xul new file mode 100644 index 000000000..df787415f --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-4-ref.xul @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <!-- access key in English text following LTR-overridden Arabic --> + <label value="‭يبرعلا‬ hello world" accesskey="w"/> + <textbox value=""/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/accesskey-4.xul b/layout/reftests/forms/textbox/accesskey-4.xul new file mode 100644 index 000000000..d63bafbc5 --- /dev/null +++ b/layout/reftests/forms/textbox/accesskey-4.xul @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox access key tests (see bug 698185)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + font-size: 36px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <!-- access key in English text following RTL Arabic --> + <label value="العربي hello world" accesskey="w"/> + <textbox value=""/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/align-baseline-1-ref.xul b/layout/reftests/forms/textbox/align-baseline-1-ref.xul new file mode 100644 index 000000000..646e412de --- /dev/null +++ b/layout/reftests/forms/textbox/align-baseline-1-ref.xul @@ -0,0 +1,26 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox align=baseline reference" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + #container { + margin-top: 12px; + padding-top: 8px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + </html:style> + + <hbox id="container" align="center"> + <label value="test"/> + <textbox value="text"/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/align-baseline-1.xul b/layout/reftests/forms/textbox/align-baseline-1.xul new file mode 100644 index 000000000..711e1858a --- /dev/null +++ b/layout/reftests/forms/textbox/align-baseline-1.xul @@ -0,0 +1,34 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/"?> +<window title="textbox align=baseline test (bug 494901)" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style type="text/css"> + hbox { + margin-top: 0px; + padding-top: 0px; + } + label, textbox { + -moz-appearance: none; + background: inherit; + border: none 0px; + } + label { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; + padding-bottom: 0px; + } + textbox { + margin-top: 12px; + padding-top: 8px; + margin-bottom: 5px; + padding-bottom: 9px; + } + </html:style> + + <hbox align="baseline"> + <label value="test"/> + <textbox value="text"/> + </hbox> +</window> diff --git a/layout/reftests/forms/textbox/reftest-stylo.list b/layout/reftests/forms/textbox/reftest-stylo.list new file mode 100644 index 000000000..f14a2c20a --- /dev/null +++ b/layout/reftests/forms/textbox/reftest-stylo.list @@ -0,0 +1,28 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# access-key tests are no use on OS X because access keys are not indicated visually +# no real XUL theme on Android so we just skip +skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-1.xul accesskey-1.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-2.xul accesskey-2.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +# accesskey-3 fails because of defects in XUL bidi support +skip == accesskey-3.xul accesskey-3.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-3.xul accesskey-3.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-4.xul accesskey-4.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-4.xul accesskey-4.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if((B2G&&browserIsRemote)||Mulet||Android) == align-baseline-1.xul align-baseline-1.xul +# test for bug 494901 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet||Android) == setsize.xul setsize.xul +# bug 974780 +# Initial mulet triage: parity with B2G/B2G Desktop diff --git a/layout/reftests/forms/textbox/reftest.list b/layout/reftests/forms/textbox/reftest.list new file mode 100644 index 000000000..eb0b8fc9d --- /dev/null +++ b/layout/reftests/forms/textbox/reftest.list @@ -0,0 +1,11 @@ +# access-key tests are no use on OS X because access keys are not indicated visually +# no real XUL theme on Android so we just skip +skip-if(cocoaWidget||Android) != accesskey-1.xul accesskey-1-notref.xul +skip-if(cocoaWidget||Android) == accesskey-2.xul accesskey-2-ref.xul +# accesskey-3 fails because of defects in XUL bidi support +fails-if(!cocoaWidget) skip-if(cocoaWidget||Android) == accesskey-3.xul accesskey-3-ref.xul +skip-if(cocoaWidget||Android) != accesskey-3.xul accesskey-3-notref.xul +skip-if(cocoaWidget||Android) == accesskey-4.xul accesskey-4-ref.xul +skip-if(cocoaWidget||Android) != accesskey-4.xul accesskey-4-notref.xul +skip-if(Android) == align-baseline-1.xul align-baseline-1-ref.xul # test for bug 494901 +skip-if(Android) == setsize.xul setsize-ref.xul diff --git a/layout/reftests/forms/textbox/setsize-ref.xul b/layout/reftests/forms/textbox/setsize-ref.xul new file mode 100644 index 000000000..ca0d30e72 --- /dev/null +++ b/layout/reftests/forms/textbox/setsize-ref.xul @@ -0,0 +1,9 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> + +<hbox style="-moz-appearance: textfield-multiline; width: 200px; height: 200px;"/> +<html:div style="position:fixed;top:0;left:0;width:100%;height:100%;"></html:div> + +</window> diff --git a/layout/reftests/forms/textbox/setsize.xul b/layout/reftests/forms/textbox/setsize.xul new file mode 100644 index 000000000..30d2face1 --- /dev/null +++ b/layout/reftests/forms/textbox/setsize.xul @@ -0,0 +1,8 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> + +<html:textarea style="width: 200px; height: 200px; margin: 0; resize: none;"/> +<html:div style="position:fixed;top:0;left:0;width:100%;height:100%;"></html:div> +</window> |