Merge branch 'html_input_datetime_1'

This is almost everything needed for #162.
author: wolfbeast <mcwerewolf@gmail.com> 2018-04-15 11:50:14 +0200
committer: wolfbeast <mcwerewolf@gmail.com> 2018-04-15 11:51:11 +0200
commit: fca67bb95d4cda5046365e124e79ec583c336697 (patch)
tree: c511e5060d170f181c10155c0a5a3583fe66b756 /layout
parent: f8ad954f7d670ba7d4de0648f4b60d3507164dd2 (diff)
parent: f4d1b4804a0dad0a616b01edc31187dace152165 (diff)
download: UXP-fca67bb95d4cda5046365e124e79ec583c336697.tar
UXP-fca67bb95d4cda5046365e124e79ec583c336697.tar.gz
UXP-fca67bb95d4cda5046365e124e79ec583c336697.tar.lz
UXP-fca67bb95d4cda5046365e124e79ec583c336697.tar.xz
UXP-fca67bb95d4cda5046365e124e79ec583c336697.zip
15 files changed, 175 insertions, 3 deletions
diff --git a/layout/base/nsCSSFrameConstructor.cpp b/layout/base/nsCSSFrameConstructor.cpp
index a118c38f9..f8c7f52a9 100644
--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -3658,13 +3658,13 @@ nsCSSFrameConstructor::FindInputData(Element* aElement,
                                  nsCSSAnonBoxes::buttonContent) },
     // TODO: this is temporary until a frame is written: bug 635240.
     SIMPLE_INT_CREATE(NS_FORM_INPUT_NUMBER, NS_NewNumberControlFrame),
-    // TODO: this is temporary until a frame is written: bug 888320.
-    SIMPLE_INT_CREATE(NS_FORM_INPUT_DATE, NS_NewTextControlFrame),
 #if defined(MOZ_WIDGET_ANDROID) || defined(MOZ_WIDGET_GONK)
     // On Android/B2G, date/time input appears as a normal text box.
     SIMPLE_INT_CREATE(NS_FORM_INPUT_TIME, NS_NewTextControlFrame),
+    SIMPLE_INT_CREATE(NS_FORM_INPUT_DATE, NS_NewTextControlFrame),
 #else
     SIMPLE_INT_CREATE(NS_FORM_INPUT_TIME, NS_NewDateTimeControlFrame),
+    SIMPLE_INT_CREATE(NS_FORM_INPUT_DATE, NS_NewDateTimeControlFrame),
 #endif
     // TODO: this is temporary until a frame is written: bug 888320
     SIMPLE_INT_CREATE(NS_FORM_INPUT_MONTH, NS_NewTextControlFrame),
diff --git a/layout/forms/nsDateTimeControlFrame.cpp b/layout/forms/nsDateTimeControlFrame.cpp
index df2e43986..fa22dceba 100644
--- a/layout/forms/nsDateTimeControlFrame.cpp
+++ b/layout/forms/nsDateTimeControlFrame.cpp
@@ -372,7 +372,8 @@ nsDateTimeControlFrame::AttributeChanged(int32_t aNameSpaceID,
       auto contentAsInputElem = static_cast<dom::HTMLInputElement*>(mContent);
       // If script changed the <input>'s type before setting these attributes
       // then we don't need to do anything since we are going to be reframed.
-      if (contentAsInputElem->GetType() == NS_FORM_INPUT_TIME) {
+      if (contentAsInputElem->GetType() == NS_FORM_INPUT_TIME ||
+          contentAsInputElem->GetType() == NS_FORM_INPUT_DATE) {
         if (aAttribute == nsGkAtoms::value) {
           nsCOMPtr<nsIDateTimeInputArea> inputAreaContent =
             do_QueryInterface(mInputAreaContent);
diff --git a/layout/reftests/forms/input/datetime/reftest.list b/layout/reftests/forms/input/datetime/reftest.list
index 0ce2002bd..a62d56c7c 100644
--- a/layout/reftests/forms/input/datetime/reftest.list
+++ b/layout/reftests/forms/input/datetime/reftest.list
@@ -11,3 +11,14 @@ skip-if(!Android&&!B2G&&!Mulet) == time-simple-unthemed.html time-simple-untheme
 # type change
 skip-if(Android||B2G||Mulet) == to-time-from-other-type-unthemed.html time-simple-unthemed.html
 skip-if(Android||B2G||Mulet) == from-time-to-other-type-unthemed.html from-time-to-other-type-unthemed-ref.html
+
+# content should not overflow on small width/height
+skip-if(Android) == time-small-width.html time-small-width-ref.html
+skip-if(Android) == time-small-height.html time-small-height-ref.html
+skip-if(Android) == time-small-width-height.html time-small-width-height-ref.html
+
+# content (text) should be left aligned
+skip-if(Android) == time-content-left-aligned.html time-content-left-aligned-ref.html
+
+# reset button should be right aligned
+skip-if(Android) fails-if(styloVsGecko) == time-reset-button-right-aligned.html time-reset-button-right-aligned-ref.html # bug 1372062
diff --git a/layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html b/layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html
new file mode 100644
index 000000000..ad8be9adc
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+     <input type="time" style="width: 200px;">
+     <!-- div to cover the right area -->
+     <div style="display:block; position:absolute; background-color:black;
+                 top:0px; left:40px; width:200px; height:100px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-content-left-aligned.html b/layout/reftests/forms/input/datetime/time-content-left-aligned.html
new file mode 100644
index 000000000..aa910cddf
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-content-left-aligned.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+     <input type="time" style="width: 50px;">
+     <!-- div to cover the right area -->
+     <div style="display:block; position:absolute; background-color:black;
+                 top:0px; left:40px; width:200px; height:100px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html
new file mode 100644
index 000000000..3d36f2068
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="time" value="10:00" style="float: right; color: white;">
+    <!-- div to cover the left area -->
+    <div style="display:block; position:absolute; background-color:black;
+                top:0px; right:30px; width:500px; height:100px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html
new file mode 100644
index 000000000..72d5cc140
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="time" value="10:00" style="width: 150px; float: right;
+                                            color: white;">
+    <!-- div to cover the left area -->
+    <div style="display:block; position:absolute; background-color:black;
+                top:0px; right:30px; width:500px; height:100px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-height-ref.html b/layout/reftests/forms/input/datetime/time-small-height-ref.html
new file mode 100644
index 000000000..fcda93df9
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-height-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+input {
+  width: 200px;
+  height: 5px;
+  outline: 1px dotted black;
+  /* Disable baseline alignment, so that our y-position isn't influenced by the
+   * choice of font inside of input: */
+  vertical-align: top;
+}
+    </style>
+  </head>
+  <body>
+    <input>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-height.html b/layout/reftests/forms/input/datetime/time-small-height.html
new file mode 100644
index 000000000..3044822fe
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-height.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+input {
+  width: 200px;
+  height: 5px;
+  outline: 1px dotted black;
+  color: white;
+  /* Disable baseline alignment, so that our y-position isn't influenced by the
+   * choice of font inside of input: */
+  vertical-align: top;
+}
+    </style>
+  </head>
+  <body>
+    <input type="time">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-height-ref.html b/layout/reftests/forms/input/datetime/time-small-width-height-ref.html
new file mode 100644
index 000000000..0979243db
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-height-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+input {
+  width: 8px;
+  height: 8px;
+  outline: 1px dotted black;
+  /* Disable baseline alignment, so that our y-position isn't influenced by the
+   * choice of font inside of input: */
+  vertical-align: top;
+}
+    </style>
+  </head>
+  <body>
+    <input>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-height.html b/layout/reftests/forms/input/datetime/time-small-width-height.html
new file mode 100644
index 000000000..a221b2819
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-height.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+input {
+  width: 8px;
+  height: 8px;
+  outline: 1px dotted black;
+  color: white;
+  /* Disable baseline alignment, so that our y-position isn't influenced by the
+   * choice of font inside of input: */
+  vertical-align: top;
+}
+    </style>
+  </head>
+  <body>
+    <input type="time">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-ref.html b/layout/reftests/forms/input/datetime/time-small-width-ref.html
new file mode 100644
index 000000000..2379c7080
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+input {
+  width: 10px;
+  height: 1.5em;
+  outline: 1px dotted black;
+  background: white;
+  /* Disable baseline alignment, so that our y-position isn't influenced by the
+   * choice of font inside of input: */
+  vertical-align: top;
+}
+    </style>
+  </head>
+  <body>
+    <input>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width.html b/layout/reftests/forms/input/datetime/time-small-width.html
new file mode 100644
index 000000000..f76f7fdfa
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+input {
+  width: 10px;
+  height: 1.5em;
+  outline: 1px dotted black;
+  color: white;
+  background: white;
+  /* Disable baseline alignment, so that our y-position isn't influenced by the
+   * choice of font inside of input: */
+  vertical-align: top;
+}
+    </style>
+  </head>
+  <body>
+    <input type="time">
+  </body>
+</html>
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css
index f045540b1..e7566e183 100644
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -1135,3 +1135,8 @@ input[type="number"] > div > div > div:hover {
   /* give some indication of hover state for the up/down buttons */
   background-color: lightblue;
 }
+
+input[type="date"],
+input[type="time"] {
+  overflow: hidden !important;
+}
diff --git a/layout/style/res/html.css b/layout/style/res/html.css
index a779461de..bc3f08210 100644
--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@@ -774,6 +774,11 @@ input[type="time"] > xul|datetimebox {
   -moz-binding: url("chrome://global/content/bindings/datetimebox.xml#time-input");
 }
 
+input[type="date"] > xul|datetimebox {
+  display: flex;
+  -moz-binding: url("chrome://global/content/bindings/datetimebox.xml#date-input");
+}
+
 /* details & summary */
 /* Need to revert Bug 1259889 Part 2 when removing details preference. */
 @supports -moz-bool-pref("dom.details_element.enabled") {
author	wolfbeast <mcwerewolf@gmail.com>	2018-04-15 11:50:14 +0200
committer	wolfbeast <mcwerewolf@gmail.com>	2018-04-15 11:51:11 +0200
commit	fca67bb95d4cda5046365e124e79ec583c336697 (patch)
tree	c511e5060d170f181c10155c0a5a3583fe66b756 /layout
parent	f8ad954f7d670ba7d4de0648f4b60d3507164dd2 (diff)
parent	f4d1b4804a0dad0a616b01edc31187dace152165 (diff)
download	UXP-fca67bb95d4cda5046365e124e79ec583c336697.tar UXP-fca67bb95d4cda5046365e124e79ec583c336697.tar.gz UXP-fca67bb95d4cda5046365e124e79ec583c336697.tar.lz UXP-fca67bb95d4cda5046365e124e79ec583c336697.tar.xz UXP-fca67bb95d4cda5046365e124e79ec583c336697.zip