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 385583 2ebd11851adf2b09c4bdf38c3270a8eb7d6d9441
parent 385582 8ebfa90c4ebca44ac1c3829ef54de74d3b004dfc
child 385584 d305adca613e2b2377307292fe4b0b8e9e3be11b
push id53085
push userryanvm@gmail.com
push dateWed, 11 Oct 2017 17:18:56 +0000
treeherderautoland@2ebd11851adf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1405986
milestone58.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 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