Bug 1405986 - Add test cases for clamping checkbox/radio. r=mats
authorLouis Chang <lochang@mozilla.com>
Tue, 10 Oct 2017 01:02:19 +0800
changeset 679114 2ebd11851adf2b09c4bdf38c3270a8eb7d6d9441
parent 679113 8ebfa90c4ebca44ac1c3829ef54de74d3b004dfc
child 679115 d305adca613e2b2377307292fe4b0b8e9e3be11b
push id84141
push userbmo:schien@mozilla.com
push dateThu, 12 Oct 2017 11:13:04 +0000
reviewersmats
bugs1405986
milestone58.0a1
Bug 1405986 - Add test cases for clamping checkbox/radio. r=mats MozReview-Commit-ID: EIWvJFqdpP3
layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html
layout/reftests/forms/input/checkbox/checkbox-clamp-01.html
layout/reftests/forms/input/checkbox/checkbox-clamp-02-ref.html
layout/reftests/forms/input/checkbox/checkbox-clamp-02.html
layout/reftests/forms/input/checkbox/checkbox-clamp-ref.html
layout/reftests/forms/input/checkbox/checkbox-clamp.html
layout/reftests/forms/input/checkbox/reftest.list
layout/reftests/forms/input/radio/radio-clamp-01-ref.html
layout/reftests/forms/input/radio/radio-clamp-01.html
layout/reftests/forms/input/radio/radio-clamp-02-ref.html
layout/reftests/forms/input/radio/radio-clamp-02.html
layout/reftests/forms/input/radio/radio-clamp-ref.html
layout/reftests/forms/input/radio/radio-clamp.html
layout/reftests/forms/input/radio/reftest.list
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