Bug 1585216 - Propagate the inner text field's baseline as the baseline for a number input. r=dholbert
authorMats Palmgren <mats@mozilla.com>
Thu, 10 Oct 2019 20:45:32 +0000
changeset 497177 106fddd0491636603c83208fdb5f953b8f360096
parent 497176 9daa83397ca7af0361af3ef66e87446e1f467d66
child 497178 4695136f7e822e205c86e6a2e0e570f749baaeb7
push id36678
push userrmaries@mozilla.com
push dateFri, 11 Oct 2019 03:48:17 +0000
treeherdermozilla-central@106fddd04916 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1585216
milestone71.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 1585216 - Propagate the inner text field's baseline as the baseline for a number input. r=dholbert Differential Revision: https://phabricator.services.mozilla.com/D48588
layout/forms/nsNumberControlFrame.cpp
layout/forms/nsNumberControlFrame.h
testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number-ref.html
testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number.html
testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text-ref.html
testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text.html
--- a/layout/forms/nsNumberControlFrame.cpp
+++ b/layout/forms/nsNumberControlFrame.cpp
@@ -414,17 +414,17 @@ void nsNumberControlFrame::SetFocus(bool
   GetTextFieldFrame()->SetFocus(aOn, aRepaint);
 }
 
 nsresult nsNumberControlFrame::SetFormProperty(nsAtom* aName,
                                                const nsAString& aValue) {
   return GetTextFieldFrame()->SetFormProperty(aName, aValue);
 }
 
-HTMLInputElement* nsNumberControlFrame::GetAnonTextControl() {
+HTMLInputElement* nsNumberControlFrame::GetAnonTextControl() const {
   return HTMLInputElement::FromNode(mTextField);
 }
 
 /* static */
 nsNumberControlFrame* nsNumberControlFrame::GetNumberControlFrameForTextField(
     nsIFrame* aFrame) {
   // If aFrame is the anon text field for an <input type=number> then we expect
   // the frame of its mContent's grandparent to be that input's frame. We
@@ -569,16 +569,35 @@ bool nsNumberControlFrame::ShouldUseNati
              spinUpFrame, STYLES_DISABLING_NATIVE_THEMING) &&
          spinDownFrame &&
          spinDownFrame->StyleDisplay()->mAppearance ==
              StyleAppearance::SpinnerDownbutton &&
          !PresContext()->HasAuthorSpecifiedRules(
              spinDownFrame, STYLES_DISABLING_NATIVE_THEMING);
 }
 
+bool nsNumberControlFrame::GetNaturalBaselineBOffset(
+    WritingMode aWM, BaselineSharingGroup aGroup, nscoord* aBaseline) const {
+  if (StyleDisplay()->IsContainLayout()) {
+    return false;
+  }
+  nsIFrame* inner = GetAnonTextControl()->GetPrimaryFrame();
+  nscoord baseline;
+  DebugOnly<bool> hasBaseline = inner->GetNaturalBaselineBOffset(
+      aWM, BaselineSharingGroup::First, &baseline);
+  MOZ_ASSERT(hasBaseline);
+  nsPoint offset = inner->GetOffsetToIgnoringScrolling(this);
+  baseline += aWM.IsVertical() ? offset.x : offset.y;
+  if (aGroup == BaselineSharingGroup::Last) {
+    baseline = BSize(aWM) - baseline;
+  }
+  *aBaseline = baseline;
+  return true;
+}
+
 void nsNumberControlFrame::AppendAnonymousContentTo(
     nsTArray<nsIContent*>& aElements, uint32_t aFilter) {
   // Only one direct anonymous child:
   if (mOuterWrapper) {
     aElements.AppendElement(mOuterWrapper);
   }
 }
 
--- a/layout/forms/nsNumberControlFrame.h
+++ b/layout/forms/nsNumberControlFrame.h
@@ -62,16 +62,20 @@ class nsNumberControlFrame final : publi
 
   virtual void Reflow(nsPresContext* aPresContext, ReflowOutput& aDesiredSize,
                       const ReflowInput& aReflowInput,
                       nsReflowStatus& aStatus) override;
 
   virtual nsresult AttributeChanged(int32_t aNameSpaceID, nsAtom* aAttribute,
                                     int32_t aModType) override;
 
+  bool GetNaturalBaselineBOffset(mozilla::WritingMode aWM,
+                                 BaselineSharingGroup aGroup,
+                                 nscoord* aBaseline) const override;
+
   // nsIAnonymousContentCreator
   virtual nsresult CreateAnonymousContent(
       nsTArray<ContentInfo>& aElements) override;
   virtual void AppendAnonymousContentTo(nsTArray<nsIContent*>& aElements,
                                         uint32_t aFilter) override;
 
 #ifdef DEBUG_FRAME_DUMP
   virtual nsresult GetFrameName(nsAString& aResult) const override {
@@ -111,17 +115,17 @@ class nsNumberControlFrame final : publi
   /**
    * Called to notify this frame that its HTMLInputElement is currently
    * processing a DOM 'input' event.
    */
   void HandlingInputEvent(bool aHandlingEvent) {
     mHandlingInputEvent = aHandlingEvent;
   }
 
-  HTMLInputElement* GetAnonTextControl();
+  HTMLInputElement* GetAnonTextControl() const;
 
   /**
    * If the frame is the frame for an nsNumberControlFrame's anonymous text
    * field, returns the nsNumberControlFrame. Else returns nullptr.
    */
   static nsNumberControlFrame* GetNumberControlFrameForTextField(
       nsIFrame* aFrame);
 
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset=utf-8>
+  <title>Reference baseline alignment of inline-grid with an INPUT type=number item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+
+.grid {
+  display: inline-block;
+  line-height: 0;
+  border: 5px solid;
+  padding: 1px 0 3px 0;
+  margin: 11px 0;
+}
+
+input { -webkit-appearance:none; inline-size:4ch; }
+
+.big {
+ font-size: 4em;
+}
+
+.small {
+  font-size: 0.2em;
+}
+
+.vlr { writing-mode: vertical-lr; }
+  </style>
+</head>
+<body>
+
+<div>
+  <span class="big">B</span>
+  <div class="grid"><input type="number" value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div>
+  <span>B</span>
+  <div class="grid"><input class="big" type="number" value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div class="vlr">
+<div>
+  <span class="big">B</span>
+  <div class="grid"><input type="number" value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div>
+  <span>B</span>
+  <div class="grid"><input class="big" type="number" value="9"></div>
+  <span class="small">B</span>
+</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-number.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset=utf-8>
+  <title>Test baseline alignment of inline-grid with an INPUT type=number item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align/">
+  <link rel="match" href="grid-item-input-type-number-ref.html">
+  <style>
+
+.grid {
+  display: inline-grid;
+  border: 5px solid;
+  padding: 1px 0 3px 0;
+  margin: 11px 0;
+}
+
+input { -webkit-appearance:none; inline-size:4ch; }
+
+.big {
+ font-size: 4em;
+}
+
+.small {
+  font-size: 0.2em;
+}
+
+.vlr { writing-mode: vertical-lr; }
+  </style>
+</head>
+<body>
+
+<div>
+  <span class="big">B</span>
+  <div class="grid"><input type="number" value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div>
+  <span>B</span>
+  <div class="grid"><input class="big" type="number" value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div class="vlr">
+<div>
+  <span class="big">B</span>
+  <div class="grid"><input type="number" value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div>
+  <span>B</span>
+  <div class="grid"><input class="big" type="number" value="9"></div>
+  <span class="small">B</span>
+</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset=utf-8>
+  <title>Reference baseline alignment of inline-grid with an INPUT type=text item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+
+.grid {
+  display: inline-block;
+  line-height: 0;
+  border: 5px solid;
+  padding: 1px 0 3px 0;
+  margin: 11px 0;
+}
+
+input { -webkit-appearance:none; inline-size:4ch; }
+
+.big {
+ font-size: 4em;
+}
+
+.small {
+  font-size: 0.2em;
+}
+
+.vlr { writing-mode: vertical-lr; }
+  </style>
+</head>
+<body>
+
+<div>
+  <span class="big">B</span>
+  <div class="grid"><input value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div>
+  <span>B</span>
+  <div class="grid"><input class="big" value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div class="vlr">
+<div>
+  <span class="big">B</span>
+  <div class="grid"><input value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div>
+  <span>B</span>
+  <div class="grid"><input class="big" value="9"></div>
+  <span class="small">B</span>
+</div>
+</div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-align/baseline-rules/grid-item-input-type-text.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset=utf-8>
+  <title>Test baseline alignment of inline-grid with an INPUT type=text item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align/">
+  <link rel="match" href="grid-item-input-type-text-ref.html">
+  <style>
+
+.grid {
+  display: inline-grid;
+  border: 5px solid;
+  padding: 1px 0 3px 0;
+  margin: 11px 0;
+}
+
+input { -webkit-appearance:none; inline-size:4ch; }
+
+.big {
+ font-size: 4em;
+}
+
+.small {
+  font-size: 0.2em;
+}
+
+.vlr { writing-mode: vertical-lr; }
+  </style>
+</head>
+<body>
+
+<div>
+  <span class="big">B</span>
+  <div class="grid"><input value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div>
+  <span>B</span>
+  <div class="grid"><input class="big" value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div class="vlr">
+<div>
+  <span class="big">B</span>
+  <div class="grid"><input value="9"></div>
+  <span class="small">B</span>
+</div>
+
+<div>
+  <span>B</span>
+  <div class="grid"><input class="big" value="9"></div>
+  <span class="small">B</span>
+</div>
+</div>
+
+</body>
+</html>