Bug 913759 part 2: reftests for percent-sized content in a button. r=bz
authorDaniel Holbert <dholbert@cs.stanford.edu>
Sat, 28 Sep 2013 10:24:01 -0700
changeset 149154 d28e8f43b09e4026d5936a88f2b1b1169d301b44
parent 149153 a831cc6240b2b976de4d844ec53c9984a0b7cb90
child 149155 ba049304cb5ecd4b35b14170926f15a7ff835930
push id25374
push usercbook@mozilla.com
push dateSun, 29 Sep 2013 09:37:16 +0000
treeherdermozilla-central@8f805d3ef377 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz
bugs913759
milestone27.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
Bug 913759 part 2: reftests for percent-sized content in a button. r=bz
layout/reftests/forms/button/percent-height-child-1-ref.html
layout/reftests/forms/button/percent-height-child-1.html
layout/reftests/forms/button/percent-height-child-2-ref.html
layout/reftests/forms/button/percent-height-child-2.html
layout/reftests/forms/button/percent-width-child-1-ref.html
layout/reftests/forms/button/percent-width-child-1.html
layout/reftests/forms/button/percent-width-child-2-ref.html
layout/reftests/forms/button/percent-width-child-2.html
layout/reftests/forms/button/reftest.list
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