diff options
Diffstat (limited to 'layout/reftests/forms/button')
68 files changed, 1488 insertions, 0 deletions
diff --git a/layout/reftests/forms/button/1317351-ref.html b/layout/reftests/forms/button/1317351-ref.html new file mode 100644 index 0000000000..3ad5be0a13 --- /dev/null +++ b/layout/reftests/forms/button/1317351-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> + +html { padding: 100px } + +mask { + position: absolute; + top: 98px; left: 98px; + width: 300px; + height: 200px; + background: black; +} + </style> +</head> +<body> +<mask></mask> +</body> +</html> diff --git a/layout/reftests/forms/button/1317351.html b/layout/reftests/forms/button/1317351.html new file mode 100644 index 0000000000..d0054024e8 --- /dev/null +++ b/layout/reftests/forms/button/1317351.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title></title> + <style type="text/css"> + +html { padding: 100px } + +input,button { + width: auto; + min-width: 50px; + writing-mode: vertical-rl; +} + +mask { + position: absolute; + top: 98px; left: 98px; + width: 300px; + height: 200px; + background: black; +} + </style> +</head> +<body> +<input type="color"> +<button><div style="width:100%; height:100%"></div></button> + +<mask></mask> +</body> +</html> diff --git a/layout/reftests/forms/button/1349646-ref.html b/layout/reftests/forms/button/1349646-ref.html new file mode 100644 index 0000000000..d36f19477a --- /dev/null +++ b/layout/reftests/forms/button/1349646-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +button { + padding: 0px; + border:none; + font-size: 64px; + background-color: green; +} +button::-moz-focus-inner { + padding-inline-start: 0px; + padding-inline-end: 0px; +} +button:-moz-focusring::-moz-focus-inner { + border: 4px solid; +} +</style> +<div> + <button id="button1"><span>Menu1</span></button> +</div> +<script> +window.onload = () => { + button1.focus(); + document.documentElement.classList.remove('reftest-wait'); +} +</script> +</html> diff --git a/layout/reftests/forms/button/1349646.html b/layout/reftests/forms/button/1349646.html new file mode 100644 index 0000000000..a51c69a010 --- /dev/null +++ b/layout/reftests/forms/button/1349646.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +button { + padding: 0px; + border:none; + font-size: 64px; + background-color: green; +} +button::-moz-focus-inner { + padding-inline-start: 20px; + padding-inline-end: 20px; +} +button:-moz-focusring::-moz-focus-inner { + border: 4px solid; +} +</style> +<div> + <button id="button1"><span>Menu1</span></button> +</div> +<script> +window.onload = () => { + button1.focus(); + document.documentElement.classList.remove('reftest-wait'); +} +</script> +</html> diff --git a/layout/reftests/forms/button/appearance-revert-ref.html b/layout/reftests/forms/button/appearance-revert-ref.html new file mode 100644 index 0000000000..9e863880df --- /dev/null +++ b/layout/reftests/forms/button/appearance-revert-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<button>Foo</button> diff --git a/layout/reftests/forms/button/appearance-revert.html b/layout/reftests/forms/button/appearance-revert.html new file mode 100644 index 0000000000..06f1d045d2 --- /dev/null +++ b/layout/reftests/forms/button/appearance-revert.html @@ -0,0 +1,2 @@ +<!doctype html> +<button style="border: revert">Foo</button> diff --git a/layout/reftests/forms/button/author-padding-notref.html b/layout/reftests/forms/button/author-padding-notref.html new file mode 100644 index 0000000000..9e863880df --- /dev/null +++ b/layout/reftests/forms/button/author-padding-notref.html @@ -0,0 +1,2 @@ +<!doctype html> +<button>Foo</button> diff --git a/layout/reftests/forms/button/author-padding.html b/layout/reftests/forms/button/author-padding.html new file mode 100644 index 0000000000..9b924488c0 --- /dev/null +++ b/layout/reftests/forms/button/author-padding.html @@ -0,0 +1,3 @@ +<!doctype html> +<!-- This technically assumes that no theme would have 300px of padding by default, looks like a safe enough assumption --> +<button style="padding: 300px">Foo</button> diff --git a/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html b/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html new file mode 100644 index 0000000000..2c45c375ab --- /dev/null +++ b/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>Reference: Testing for full height flex container in a button.</title> + <meta charset="utf-8"> + <style> + button { + vertical-align: top; + padding: 0; + border: solid 1px black; + background: lightblue; + width: 200px; + height: 200px; + } + + .flex { + display: flex; + justify-content: space-between; + align-items: stretch; + width: 100%; + height: 100%; + } + + .flex > * { + margin: 1px; + background: teal; + min-height: 10px; + min-width: 10px; + } + + .vertical { + flex-direction: column; + } + </style> +</head> +<body> + <button> + <div class="flex"> + <div></div> + <div></div> + <div></div> + </div> + </button> + <button> + <div class="flex vertical"> + <div></div> + <div></div> + <div></div> + </div> + </button> +</body> +</html> + diff --git a/layout/reftests/forms/button/button-display-flex-fullsize-1.html b/layout/reftests/forms/button/button-display-flex-fullsize-1.html new file mode 100644 index 0000000000..f351fc66b3 --- /dev/null +++ b/layout/reftests/forms/button/button-display-flex-fullsize-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>CSS Test: Testing for full height flex container in a button.</title> + <meta charset="utf-8"> + <style> + button { + vertical-align: top; + padding: 0; + border: solid 1px black; + background: lightblue; + width: 200px; + height: 200px; + } + + .flex { + display: inline-flex; + justify-content: space-between; + align-items: stretch; + } + + .flex > * { + margin: 1px; + background: teal; + min-height: 10px; + min-width: 10px; + } + + .vertical { + flex-direction: column; + } + </style> +</head> +<body> + <button class="flex"> + <div></div> + <div></div> + <div></div> + </button> + <button class="flex vertical"> + <div></div> + <div></div> + <div></div> + </button> +</body> +</html> + diff --git a/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html b/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html new file mode 100644 index 0000000000..1b3df75dff --- /dev/null +++ b/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>Reference: Testing for full height grid container in a button.</title> + <meta charset="utf-8"> + <style> + button { + vertical-align: top; + padding: 0; + border: solid 1px black; + background: lightblue; + width: 200px; + height: 200px; + } + + .grid { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + justify-content: space-between; + align-items: stretch; + width: 100%; + height: 100%; + } + + .grid > * { + margin: 1px; + background: teal; + min-height: 10px; + min-width: 10px; + } + + .vertical { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr; + } + </style> +</head> +<body> + <button> + <div class="grid"> + <div></div> + <div></div> + <div></div> + </div> + </button> + <button> + <div class="grid vertical"> + <div></div> + <div></div> + <div></div> + </div> + </button> +</body> +</html> + diff --git a/layout/reftests/forms/button/button-display-grid-fullsize-1.html b/layout/reftests/forms/button/button-display-grid-fullsize-1.html new file mode 100644 index 0000000000..4998c213d2 --- /dev/null +++ b/layout/reftests/forms/button/button-display-grid-fullsize-1.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0 +--> +<html> +<head> + <title>CSS Test: Testing for full height grid container in a button.</title> + <meta charset="utf-8"> + <style> + button { + vertical-align: top; + padding: 0; + border: solid 1px black; + background: lightblue; + width: 200px; + height: 200px; + } + + .grid { + display: inline-grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + justify-content: space-between; + align-items: stretch; + } + + .grid > * { + margin: 1px; + background: teal; + min-height: 10px; + min-width: 10px; + } + + .vertical { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr; + } + </style> +</head> +<body> + <!-- 3 columns/1 row --> + <button class="grid"> + <div></div> + <div></div> + <div></div> + </button> + <!-- 1 column/3 rows, using "fr" units to fill container --> + <button class="grid vertical"> + <div></div> + <div></div> + <div></div> + </button> +</body> +</html> + diff --git a/layout/reftests/forms/button/button-empty-columns-ref.html b/layout/reftests/forms/button/button-empty-columns-ref.html new file mode 100644 index 0000000000..0016d8cc8c --- /dev/null +++ b/layout/reftests/forms/button/button-empty-columns-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<button style="width: 100px; height: 5px;"></button> diff --git a/layout/reftests/forms/button/button-empty-columns.html b/layout/reftests/forms/button/button-empty-columns.html new file mode 100644 index 0000000000..6154310810 --- /dev/null +++ b/layout/reftests/forms/button/button-empty-columns.html @@ -0,0 +1,2 @@ +<!DOCTYPE HTML> +<button style="columns: 2; width: 100px; height: 5px;"></button> diff --git a/layout/reftests/forms/button/button-visibility-1-ref.html b/layout/reftests/forms/button/button-visibility-1-ref.html new file mode 100644 index 0000000000..441b5151cf --- /dev/null +++ b/layout/reftests/forms/button/button-visibility-1-ref.html @@ -0,0 +1,25 @@ +<html> + +<head> + <meta charset="utf-8"> + <title>Test for bug 1732921</title> + <style> + .parent { + border: 0px; + background: none; + will-change: transform; + } + + .child { + visibility: visible; + } + </style> +</head> + +<body> + <button class="parent"> + <span class="child">foo</span> + </button> +</body> + +</html> diff --git a/layout/reftests/forms/button/button-visibility-1.html b/layout/reftests/forms/button/button-visibility-1.html new file mode 100644 index 0000000000..84faf2ca03 --- /dev/null +++ b/layout/reftests/forms/button/button-visibility-1.html @@ -0,0 +1,26 @@ +<html> + +<head> + <meta charset="utf-8"> + <title>Test for bug 1732921</title> + <style> + .parent { + border: 0px; + background: none; + visibility: hidden; + will-change: transform; + } + + .child { + visibility: visible; + } + </style> +</head> + +<body> + <button class="parent"> + <span class="child">foo</span> + </button> +</body> + +</html> diff --git a/layout/reftests/forms/button/disabled-1-ref.html b/layout/reftests/forms/button/disabled-1-ref.html new file mode 100644 index 0000000000..c408ec16fb --- /dev/null +++ b/layout/reftests/forms/button/disabled-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: test button "disabled" text style</title> +<style> + button { + color: GrayText; + border-width: 0; + background: transparent; + } +</style> +</head> +<body> + <button>Some text</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-1.html b/layout/reftests/forms/button/disabled-1.html new file mode 100644 index 0000000000..6bcba667bd --- /dev/null +++ b/layout/reftests/forms/button/disabled-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: test button "disabled" text style</title> +<style> + button { + border-width: 0; + background: transparent; + } +</style> +</head> +<body> + <button disabled>Some text</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-2-ref.html b/layout/reftests/forms/button/disabled-2-ref.html new file mode 100644 index 0000000000..53958f76b7 --- /dev/null +++ b/layout/reftests/forms/button/disabled-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: test all types of buttons look similar when disabled</title> +</head> +<body> + <button>Some text</button> + <button>Some text</button> + <button>Reset</button> + <button>Submit Query</button> + <br> + <button disabled>Some text</button> + <button disabled>Some text</button> + <button disabled>Reset</button> + <button disabled>Submit Query</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-2.html b/layout/reftests/forms/button/disabled-2.html new file mode 100644 index 0000000000..a77287dfee --- /dev/null +++ b/layout/reftests/forms/button/disabled-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: test all types of buttons look similar when disabled</title> +</head> +<body> + <button>Some text</button> + <input type="button" value="Some text"> + <input type="reset"> + <input type="submit"> + <br> + <button disabled>Some text</button> + <input disabled type="button" value="Some text"> + <input disabled type="reset"> + <input disabled type="submit"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-3-notref.html b/layout/reftests/forms/button/disabled-3-notref.html new file mode 100644 index 0000000000..bd8b457746 --- /dev/null +++ b/layout/reftests/forms/button/disabled-3-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <button disabled>Some text</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-3.html b/layout/reftests/forms/button/disabled-3.html new file mode 100644 index 0000000000..440d43b531 --- /dev/null +++ b/layout/reftests/forms/button/disabled-3.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <button>Some text</button> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-4-notref.html b/layout/reftests/forms/button/disabled-4-notref.html new file mode 100644 index 0000000000..41fe9e6107 --- /dev/null +++ b/layout/reftests/forms/button/disabled-4-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input disabled type="button" value="Some text"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-4.html b/layout/reftests/forms/button/disabled-4.html new file mode 100644 index 0000000000..38f71544a2 --- /dev/null +++ b/layout/reftests/forms/button/disabled-4.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input type="button" value="Some text"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-5-notref.html b/layout/reftests/forms/button/disabled-5-notref.html new file mode 100644 index 0000000000..d944d04216 --- /dev/null +++ b/layout/reftests/forms/button/disabled-5-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input disabled type="reset"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-5.html b/layout/reftests/forms/button/disabled-5.html new file mode 100644 index 0000000000..ded7c1905d --- /dev/null +++ b/layout/reftests/forms/button/disabled-5.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input type="reset"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-6-notref.html b/layout/reftests/forms/button/disabled-6-notref.html new file mode 100644 index 0000000000..c6f0abce66 --- /dev/null +++ b/layout/reftests/forms/button/disabled-6-notref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input disabled type="submit"> +</body> +</html> diff --git a/layout/reftests/forms/button/disabled-6.html b/layout/reftests/forms/button/disabled-6.html new file mode 100644 index 0000000000..2a1d9cfa7f --- /dev/null +++ b/layout/reftests/forms/button/disabled-6.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> +<title>Bug 1007278: check disabled and non-disabled buttons look different</title> +</head> +<body> + <input type="submit"> +</body> +</html> diff --git a/layout/reftests/forms/button/display-grid-flex-columnset-ref.html b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html new file mode 100644 index 0000000000..c843a84b6a --- /dev/null +++ b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html @@ -0,0 +1,60 @@ +<!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 { + -ms-columns: 2; + -webkit-columns: 2; + columns: 2; +} + +.block-columnset, .b { display: block; } + +a { + position: absolute; + right:0; bottom:0; + width:5px; height:5px; + background: lime; +} +.rel { position:relative; } + +button { vertical-align: bottom; } + </style> +</head> +<body> + +<button><wrap class="grid">x<span>y</span>z</wrap></button> +<button><wrap class="iflex">x<span>y</span>z</wrap></button> +<button><wrap class="b columnset">x<br><span>y</span>z</wrap></button> + +<button class="rel"><wrap class="grid">x<span>y</span>z<a></a></wrap></button> +<button class="rel"><wrap class="iflex">x<span>y</span>z<a></a></wrap></button> +<button class="rel"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button> + +<button class="b"><wrap class="grid">x<span>y</span>z</wrap></button> +<button class="b"><wrap class="flex">x<span>y</span>z</wrap></button> +<button class="b"><wrap class="b columnset">x<br><span>y</span>z</wrap></button> + +<button class="rel b"><wrap class="grid">x<span>y</span>z<a></a></wrap></button> +<button class="rel b"><wrap class="flex">x<span>y</span>z<a></a></wrap></button> +<button class="rel b"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button> + +</body> +</html> diff --git a/layout/reftests/forms/button/display-grid-flex-columnset.html b/layout/reftests/forms/button/display-grid-flex-columnset.html new file mode 100644 index 0000000000..ffada3bced --- /dev/null +++ b/layout/reftests/forms/button/display-grid-flex-columnset.html @@ -0,0 +1,60 @@ +<!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 { + -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/dynamic-text-indent-ref.html b/layout/reftests/forms/button/dynamic-text-indent-ref.html new file mode 100644 index 0000000000..1b1789cd3e --- /dev/null +++ b/layout/reftests/forms/button/dynamic-text-indent-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<html> + <button style="text-indent: 50px">Some text</button> +</html> diff --git a/layout/reftests/forms/button/dynamic-text-indent.html b/layout/reftests/forms/button/dynamic-text-indent.html new file mode 100644 index 0000000000..9b0724ed51 --- /dev/null +++ b/layout/reftests/forms/button/dynamic-text-indent.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <button>Some text</button> + <script> + onload = function() { + var obj = document.querySelector("button"); + window.w = obj.getBoundingClientRect().width; + obj.style.textIndent = "50px"; + document.documentElement.className = ""; + } + </script> +</html> diff --git a/layout/reftests/forms/button/first-letter-1-noref.html b/layout/reftests/forms/button/first-letter-1-noref.html new file mode 100644 index 0000000000..d59db575fa --- /dev/null +++ b/layout/reftests/forms/button/first-letter-1-noref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<style> + body { line-height: 0; } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/first-letter-1-ref.html b/layout/reftests/forms/button/first-letter-1-ref.html new file mode 100644 index 0000000000..34ffa64f22 --- /dev/null +++ b/layout/reftests/forms/button/first-letter-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<style> + button { display: block; } + button::first-letter { color: green; } + body { line-height: 0; } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/first-letter-1.html b/layout/reftests/forms/button/first-letter-1.html new file mode 100644 index 0000000000..3dbf1667fa --- /dev/null +++ b/layout/reftests/forms/button/first-letter-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<style> + button::first-letter { color: green; } + body { line-height: 0; } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/focus-non-themed-ref.html b/layout/reftests/forms/button/focus-non-themed-ref.html new file mode 100644 index 0000000000..8f5577671c --- /dev/null +++ b/layout/reftests/forms/button/focus-non-themed-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<style> + button { + outline: none; + -moz-appearance: none; + appearance: none; + } + button::-moz-focus-inner { border: 0 } +</style> +<button autofocus>Foo</button> diff --git a/layout/reftests/forms/button/focus-non-themed.html b/layout/reftests/forms/button/focus-non-themed.html new file mode 100644 index 0000000000..0fa28a9259 --- /dev/null +++ b/layout/reftests/forms/button/focus-non-themed.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> + button { + outline: none; + -moz-appearance: none; + appearance: none; + } +</style> +<button autofocus>Foo</button> diff --git a/layout/reftests/forms/button/line-height-button-0.5.html b/layout/reftests/forms/button/line-height-button-0.5.html new file mode 100644 index 0000000000..e3343d9e42 --- /dev/null +++ b/layout/reftests/forms/button/line-height-button-0.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +button { line-height: 0.5 } + +</style> +<button>button input</button> diff --git a/layout/reftests/forms/button/line-height-button-1.0.html b/layout/reftests/forms/button/line-height-button-1.0.html new file mode 100644 index 0000000000..2685624dc0 --- /dev/null +++ b/layout/reftests/forms/button/line-height-button-1.0.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +button { line-height: 1.0 } + +</style> +<button>button input</button> diff --git a/layout/reftests/forms/button/line-height-button-1.5.html b/layout/reftests/forms/button/line-height-button-1.5.html new file mode 100644 index 0000000000..f86839fc3c --- /dev/null +++ b/layout/reftests/forms/button/line-height-button-1.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +button { line-height: 1.5 } + +</style> +<button>button input</button> diff --git a/layout/reftests/forms/button/line-height-input-0.5.html b/layout/reftests/forms/button/line-height-input-0.5.html new file mode 100644 index 0000000000..e3b6dd9200 --- /dev/null +++ b/layout/reftests/forms/button/line-height-input-0.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 0.5 } + +</style> +<input type="button" value="button input" size="20"> diff --git a/layout/reftests/forms/button/line-height-input-1.0.html b/layout/reftests/forms/button/line-height-input-1.0.html new file mode 100644 index 0000000000..18f8b4646c --- /dev/null +++ b/layout/reftests/forms/button/line-height-input-1.0.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 1.0 } + +</style> +<input type="button" value="button input" size="20"> diff --git a/layout/reftests/forms/button/line-height-input-1.5.html b/layout/reftests/forms/button/line-height-input-1.5.html new file mode 100644 index 0000000000..ea486d14ea --- /dev/null +++ b/layout/reftests/forms/button/line-height-input-1.5.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<style> + +input { line-height: 1.5 } + +</style> +<input type="button" value="button input" size="20"> diff --git a/layout/reftests/forms/button/max-height-ref.html b/layout/reftests/forms/button/max-height-ref.html new file mode 100644 index 0000000000..ea12a86681 --- /dev/null +++ b/layout/reftests/forms/button/max-height-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + button { + height: 50px; + padding: 23px; + border: 1px solid black; + box-sizing: border-box; + overflow: hidden; + } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/max-height.html b/layout/reftests/forms/button/max-height.html new file mode 100644 index 0000000000..87ac8a979c --- /dev/null +++ b/layout/reftests/forms/button/max-height.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> + button { + max-height: 50px; + padding: 23px; + border: 1px solid black; + box-sizing: border-box; + overflow: hidden; + } +</style> +<button>Some text</button> diff --git a/layout/reftests/forms/button/min-height-ref.html b/layout/reftests/forms/button/min-height-ref.html new file mode 100644 index 0000000000..5f0f2d654e --- /dev/null +++ b/layout/reftests/forms/button/min-height-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=utf-8"> +<style> +.btn1, .btn2 { + border: 5px solid green; + background-color: blue; + height: 50px; +} +</style> +</head> +<body> +<input type='submit' class='btn1' value='' /> +<input type='submit' class='btn2' value='' /> +</body> +</html> diff --git a/layout/reftests/forms/button/min-height.html b/layout/reftests/forms/button/min-height.html new file mode 100644 index 0000000000..cadffa78d5 --- /dev/null +++ b/layout/reftests/forms/button/min-height.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=utf-8"> +<style> +.btn1, .btn2 { + border: 5px solid green; + background-color: blue; +} +.btn1 { + min-height: 50px; +} +.btn2 { + height: 50px; +} +</style> +</head> +<body> +<input type='submit' class='btn1' value='' /> +<input type='submit' class='btn2' value='' /> +</body> +</html> diff --git a/layout/reftests/forms/button/overflow-areas-1-ref.html b/layout/reftests/forms/button/overflow-areas-1-ref.html new file mode 100644 index 0000000000..a1eb505753 --- /dev/null +++ b/layout/reftests/forms/button/overflow-areas-1-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <title>Reference case</title> + <style> + input, button { + border: 0; /* Combined, these mean the gray area is the */ + background: lightgray; /* border-box size. */ + + outline: 2px solid black; /* The outlined area is the overflow area. */ + width: 1px; /* (To attempt to trigger overflow) */ + + display: block; /* Put each button on its own line, w/ some margin, */ + margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */ + + font: 8px serif; /* (This just lets the testcase fit better on mobile.) */ + } + + .oh { overflow: hidden } + </style> +</head> +<body> + <!-- For the reference case, we just put "overflow:hidden" on everything. --> + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <!-- ...with one exception: button with (default) overflow:visible. + Such buttons *do* actually allow their contents to overflow. --> + <button>ActualButton</button> + + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <button class="oh">ActualButton</button> + + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <button class="oh">ActualButton</button> + + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <button class="oh">ActualButton</button> +</body> +</html> diff --git a/layout/reftests/forms/button/overflow-areas-1.html b/layout/reftests/forms/button/overflow-areas-1.html new file mode 100644 index 0000000000..b1a34dfe40 --- /dev/null +++ b/layout/reftests/forms/button/overflow-areas-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<!-- For buttons whose painting gets clipped to their border-box area, + we should *also* clip their overflow area (as exposed via 'outline'). + This test exposes these areas so they can be visualized, and checks that + they match when we expect them to. --> +<head> + <title>Testcase for bug 1261284</title> + <style> + input, button { + border: 0; /* Combined, these mean the gray area is the */ + background: lightgray; /* border-box size. */ + + outline: 2px solid black; /* The outlined area is the overflow area. */ + width: 1px; /* (To attempt to trigger overflow) */ + + display: block; /* Put each button on its own line, w/ some margin, */ + margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */ + + font: 8px serif; /* (This just lets the testcase fit better on mobile.) */ + } + + .oh { overflow: hidden } + .oa { overflow: auto } + .os { overflow: scroll } + </style> +</head> +<body> + <input type="reset"> + <input type="submit"> + <input type="button" value="InputTypeButton"> + <button>ActualButton</button> + + <input class="oh" type="reset"> + <input class="oh" type="submit"> + <input class="oh" type="button" value="InputTypeButton"> + <button class="oh">ActualButton</button> + + <input class="oa" type="reset"> + <input class="oa" type="submit"> + <input class="oa" type="button" value="InputTypeButton"> + <button class="oa">ActualButton</button> + + <input class="os" type="reset"> + <input class="os" type="submit"> + <input class="os" type="button" value="InputTypeButton"> + <button class="os">ActualButton</button> +</body> +</html> diff --git a/layout/reftests/forms/button/percent-height-child-ref.html b/layout/reftests/forms/button/percent-height-child-ref.html new file mode 100644 index 0000000000..b2b8109587 --- /dev/null +++ b/layout/reftests/forms/button/percent-height-child-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.html b/layout/reftests/forms/button/percent-height-child.html new file mode 100644 index 0000000000..c676715c23 --- /dev/null +++ b/layout/reftests/forms/button/percent-height-child.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-width-child-ref.html b/layout/reftests/forms/button/percent-width-child-ref.html new file mode 100644 index 0000000000..dcc2289944 --- /dev/null +++ b/layout/reftests/forms/button/percent-width-child-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.html b/layout/reftests/forms/button/percent-width-child.html new file mode 100644 index 0000000000..fdd2b49236 --- /dev/null +++ b/layout/reftests/forms/button/percent-width-child.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/reftest.list b/layout/reftests/forms/button/reftest.list new file mode 100644 index 0000000000..cfd67fc662 --- /dev/null +++ b/layout/reftests/forms/button/reftest.list @@ -0,0 +1,59 @@ +# Tests for grid and flex sizing in buttons +== button-display-flex-fullsize-1.html button-display-flex-fullsize-1-ref.html +== button-display-grid-fullsize-1.html button-display-grid-fullsize-1-ref.html + +== first-letter-1.html first-letter-1-ref.html +!= first-letter-1.html first-letter-1-noref.html + +== max-height.html max-height-ref.html +== min-height.html min-height-ref.html + +# Android is off ever-so-slightly on the points where the text +# runs into the border on this text, so a little fuzz is needed. +fuzzy-if(Android,0-1,0-16) == 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,0-125,0-20) == percent-height-child.html percent-height-child-ref.html +fuzzy-if(Android,0-125,0-20) == percent-width-child.html percent-width-child-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 +== 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 + +!= author-padding.html author-padding-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-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 +== display-grid-flex-columnset.html display-grid-flex-columnset-ref.html +== button-empty-columns.html button-empty-columns-ref.html +== 1317351.html 1317351-ref.html + +== dynamic-text-indent.html dynamic-text-indent-ref.html + +fuzzy(0-5,0-1) == 1349646.html 1349646-ref.html + +== appearance-revert.html appearance-revert-ref.html + +needs-focus == focus-non-themed.html focus-non-themed-ref.html + +== button-visibility-1.html button-visibility-1-ref.html + diff --git a/layout/reftests/forms/button/vertical-centering-ref.html b/layout/reftests/forms/button/vertical-centering-ref.html new file mode 100644 index 0000000000..aa6d763676 --- /dev/null +++ b/layout/reftests/forms/button/vertical-centering-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + height: 100px; + display: inline-block; + border: 0; + padding: 0; + + font: 2em/100px sans-serif; + text-align: center; + + background: transparent; + color: black; +} +</style> +</head> +<body> +<div>button</div> +<div>button</div> +</body> +</html> diff --git a/layout/reftests/forms/button/vertical-centering.html b/layout/reftests/forms/button/vertical-centering.html new file mode 100644 index 0000000000..08ca385191 --- /dev/null +++ b/layout/reftests/forms/button/vertical-centering.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<style> +input, div { + height: 100px; + display: inline-block; + border: 0; + padding: 0; + + font: 2em sans-serif; + + background: transparent; + color: black; +} +input { + -moz-appearance: none; +} +input::-moz-focus-inner { + padding: 0; + border: 0; +} +div { + line-height: 100px; + text-align: center; +} +</style> +</head> +<body> +<input type='button' value='button' /> +<div>button</div> +</body> +</html> diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html new file mode 100644 index 0000000000..4a998c3435 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html @@ -0,0 +1,18 @@ +<!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; +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr.html b/layout/reftests/forms/button/width-auto-size-em-ltr.html new file mode 100644 index 0000000000..3285c3e955 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-em-ltr.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 1em; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html new file mode 100644 index 0000000000..59f3ba424b --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html @@ -0,0 +1,19 @@ +<!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; +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl.html b/layout/reftests/forms/button/width-auto-size-em-rtl.html new file mode 100644 index 0000000000..fb72ef97e9 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-em-rtl.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 1em; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-auto-size-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-ltr-ref.html new file mode 100644 index 0000000000..48372131ea --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html @@ -0,0 +1,19 @@ +<!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; +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-auto-size-ltr.html b/layout/reftests/forms/button/width-auto-size-ltr.html new file mode 100644 index 0000000000..c8f3f7d110 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-ltr.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-auto-size-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-rtl-ref.html new file mode 100644 index 0000000000..f644a196f2 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-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; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-auto-size-rtl.html b/layout/reftests/forms/button/width-auto-size-rtl.html new file mode 100644 index 0000000000..7ae3092f94 --- /dev/null +++ b/layout/reftests/forms/button/width-auto-size-rtl.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 2em; width: 5em; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html new file mode 100644 index 0000000000..762e443f81 --- /dev/null +++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +div.button { + display: inline-block; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; + margin: 1px 0px; /* for implicit focuspadding, fully eroded */ +} + +</style> + +<div class=button><span></span></div> diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html new file mode 100644 index 0000000000..d4b028b48e --- /dev/null +++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html dir=rtl> +<style> + +button { + -moz-appearance: none; + background: yellow; + border: 2px solid fuchsia; + padding: 2px; + font-size: 10px; + width: 62px; + border-radius: 0; /* override mobile/android/themes/core/content.css */ +} + +span { + display: inline-block; vertical-align: middle; + height: 20px; width: 50px; border: 2px solid blue; +} + +</style> + +<button><span></span></button> diff --git a/layout/reftests/forms/button/width-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html new file mode 100644 index 0000000000..4978a57e4e --- /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: 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-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html new file mode 100644 index 0000000000..d4b028b48e --- /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: 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> |