Bug 1405986 - Add test cases for clamping checkbox/radio. r?mats
MozReview-Commit-ID: EIWvJFqdpP3
rename from layout/reftests/forms/input/checkbox/checkbox-clamp-ref.html
rename to layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html
--- a/layout/reftests/forms/input/checkbox/checkbox-clamp-ref.html
+++ b/layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html
@@ -1,1 +1,13 @@
-<input type="checkbox" style="top:58px; position:absolute">
+<style>
+ div {
+ top: 50px;
+ line-height: 0px;
+ position: relative;
+ }
+</style>
+
+<div>
+ <input type="checkbox">
+ <input type="checkbox" checked>
+</div>
+
rename from layout/reftests/forms/input/checkbox/checkbox-clamp.html
rename to layout/reftests/forms/input/checkbox/checkbox-clamp-01.html
--- a/layout/reftests/forms/input/checkbox/checkbox-clamp.html
+++ b/layout/reftests/forms/input/checkbox/checkbox-clamp-01.html
@@ -5,12 +5,29 @@
-->
<html>
<head>
<meta charset="utf-8">
<title>Test clamping width/height of checkbox.</title>
<link rel="author" title="Louis Chang" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1400050">
<link rel="match" href="checkbox-clamp-ref.html">
</head>
+ <style>
+div {
+ position: relative;
+ line-height: 0px;
+}
+input {
+ height: 113px;
+}
+ </style>
<body>
- <input type="checkbox" style="height:113px">
+ <!--
+ Default Size of checkbox is 13px * 13px on all platforms except Linux
+ (18px * 18px). So given a checkbox with height 113px, the checkbox will be
+ clamped to 13px * 13px and move to center which y is 50px ((113 - 13) / 2).
+ -->
+ <div>
+ <input type="checkbox">
+ <input type="checkbox" checked>
+ <div>
</body>
</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-clamp-02-ref.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>Testcase for bug 1405986</title>
+ <style type="text/css">
+html,body {
+ color: black;
+ background-color: white;
+ font: 16px/1 monospace;
+ padding: 0;
+ margin: 0;
+}
+
+.grid {
+ display: inline-grid;
+ grid: 100px / 40px 40px;
+ border: 1px solid;
+ vertical-align: top;
+ justify-items: start;
+}
+
+input {
+ margin: 0;
+}
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <input type=checkbox style="align-self: center">
+ <input type=checkbox checked style="align-self: center">
+ </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-clamp-02.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1405986</title>
+ <style type="text/css">
+html,body {
+ color: black;
+ background-color: white;
+ font: 16px/1 monospace;
+ padding: 0;
+ margin: 0;
+}
+
+.grid {
+ display: inline-grid;
+ grid: 100px / 40px 40px;
+ border: 1px solid;
+ vertical-align: top;
+ justify-items: start;
+}
+
+input {
+ margin: 0;
+}
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <input type=checkbox style="height: 100px">
+ <input type=checkbox checked style="height: 100px">
+ </div>
+</body>
+</html>
+
--- a/layout/reftests/forms/input/checkbox/reftest.list
+++ b/layout/reftests/forms/input/checkbox/reftest.list
@@ -9,10 +9,11 @@
== indeterminate-checked-notref.html about:blank
== indeterminate-unchecked.html about:blank
!= 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
== checkbox-baseline.html checkbox-baseline-ref.html
== checkbox-radio-color.html checkbox-radio-color-ref.html
-fails-if(gtkWidget) == checkbox-clamp.html checkbox-clamp-ref.html
+skip-if(gtkWidget) == checkbox-clamp-01.html checkbox-clamp-01-ref.html
+skip-if(OSX||winWidget) == checkbox-clamp-02.html checkbox-clamp-02-ref.html
fails-if(OSX) == checkbox-minimum-size.html checkbox-minimum-size-ref.html
rename from layout/reftests/forms/input/radio/radio-clamp-ref.html
rename to layout/reftests/forms/input/radio/radio-clamp-01-ref.html
--- a/layout/reftests/forms/input/radio/radio-clamp-ref.html
+++ b/layout/reftests/forms/input/radio/radio-clamp-01-ref.html
@@ -1,1 +1,12 @@
-<input type="radio" style="top:58px; position:absolute">
+<style>
+ div {
+ top: 50px;
+ line-height: 0px;
+ position: relative;
+ }
+</style>
+
+<div>
+ <input type="radio">
+ <input type="radio" checked>
+</div>
rename from layout/reftests/forms/input/radio/radio-clamp.html
rename to layout/reftests/forms/input/radio/radio-clamp-01.html
--- a/layout/reftests/forms/input/radio/radio-clamp.html
+++ b/layout/reftests/forms/input/radio/radio-clamp-01.html
@@ -5,12 +5,29 @@
-->
<html>
<head>
<meta charset="utf-8">
<title>Test clamping width/height of radio.</title>
<link rel="author" title="Louis Chang" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1400050">
<link rel="match" href="radio-clamp-ref.html">
</head>
+ <style>
+div {
+ position: relative;
+ line-height: 0px;
+}
+input {
+ height: 113px;
+}
+ </style>
<body>
- <input type="radio" style="height:113px">
+ <!--
+ Default Size of radio is 13px * 13px on all platforms except Linux
+ (18px * 18px). So given a radio with height 113px, the radio will be
+ clamped to 13px * 13px and move to center which y is 50px ((113 - 13) / 2).
+ -->
+ <div>
+ <input type="radio">
+ <input type="radio" checked>
+ <div>
</body>
</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/radio/radio-clamp-02-ref.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>Testcase for bug 1405986</title>
+ <style type="text/css">
+html,body {
+ color: black;
+ background-color: white;
+ font: 16px/1 monospace;
+ padding: 0;
+ margin: 0;
+}
+
+.grid {
+ display: inline-grid;
+ grid: 100px / 40px 40px;
+ border: 1px solid;
+ vertical-align: top;
+ justify-items: start;
+}
+
+input {
+ margin: 0;
+}
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <input type=radio style="align-self: center">
+ <input type=radio checked style="align-self: center">
+ </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/radio/radio-clamp-02.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1405986</title>
+ <style type="text/css">
+html,body {
+ color: black;
+ background-color: white;
+ font: 16px/1 monospace;
+ padding: 0;
+ margin: 0;
+}
+
+.grid {
+ display: inline-grid;
+ grid: 100px / 40px 40px;
+ border: 1px solid;
+ vertical-align: top;
+ justify-items: start;
+}
+
+input {
+ margin: 0;
+}
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <input type=radio style="height: 100px">
+ <input type=radio checked style="height: 100px">
+ </div>
+</body>
+</html>
+
--- a/layout/reftests/forms/input/radio/reftest.list
+++ b/layout/reftests/forms/input/radio/reftest.list
@@ -1,9 +1,10 @@
== label-dynamic.html label-dynamic-ref.html
!= checked-native.html checked-native-notref.html
== checked-appearance-none.html about:blank
== unchecked-appearance-none.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
-fails-if(gtkWidget) == radio-clamp.html radio-clamp-ref.html
+skip-if(gtkWidget) == radio-clamp-01.html radio-clamp-01-ref.html
+skip-if(OSX||winWidget) == radio-clamp-02.html radio-clamp-02-ref.html
fails-if(OSX) == radio-minimum-size.html radio-minimum-size-ref.html
