| author | Daniel Holbert <dholbert@cs.stanford.edu> |
| Sat, 28 Sep 2013 10:24:01 -0700 | |
| changeset 149154 | d28e8f43b09e4026d5936a88f2b1b1169d301b44 |
| parent 149153 | a831cc6240b2b976de4d844ec53c9984a0b7cb90 |
| child 149155 | ba049304cb5ecd4b35b14170926f15a7ff835930 |
| push id | 25374 |
| push user | cbook@mozilla.com |
| push date | Sun, 29 Sep 2013 09:37:16 +0000 |
| treeherder | mozilla-central@8f805d3ef377 [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | bz |
| bugs | 913759 |
| milestone | 27.0a1 |
| first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
new file mode 100644 --- /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>
--- a/layout/reftests/forms/button/reftest.list +++ b/layout/reftests/forms/button/reftest.list @@ -1,5 +1,14 @@ asserts(2) == first-letter-1.html first-letter-1-ref.html asserts(1) != first-letter-1.html first-letter-1-noref.html == max-height.html max-height-ref.html == min-height.html min-height-ref.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,125,20) == percent-height-child-1.html percent-height-child-1-ref.html +fuzzy-if(B2G,125,80) == percent-height-child-2.html percent-height-child-2-ref.html +fuzzy-if(B2G,125,20) == percent-width-child-1.html percent-width-child-1-ref.html +fuzzy-if(B2G,125,80) == percent-width-child-2.html percent-width-child-2-ref.html + == vertical-centering.html vertical-centering-ref.html