Bug 1917771 - Use bottom of border box as the range frame's baseline. r=emilio

tannal · tannal · commit e12883160c1f · 2024-10-01T10:54:12.000Z
Differential Revision: https://phabricator.services.mozilla.com/D223107
diff --git a/layout/forms/nsRangeFrame.cpp b/layout/forms/nsRangeFrame.cpp
@@ -674,6 +674,26 @@ double nsRangeFrame::GetValue() const {
       .toDouble();
 }
 
+Maybe<nscoord> nsRangeFrame::GetNaturalBaselineBOffset(
+    WritingMode aWM, BaselineSharingGroup aBaselineGroup,
+    BaselineExportContext) const {
+  NS_ASSERTION(!IsSubtreeDirty(), "frame must not be dirty");
+
+  if (aBaselineGroup == BaselineSharingGroup::Last) {
+    return Nothing{};
+  }
+
+  if (StyleDisplay()->IsBlockOutsideStyle()) {
+    return Nothing{};
+  }
+
+  if (aWM.IsCentralBaseline()) {
+    return Some(BSize(aWM) / 2);
+  }
+
+  return Some(GetLogicalSize(aWM).BSize(aWM));
+}
+
 bool nsRangeFrame::ShouldUseNativeStyle() const {
   nsIFrame* trackFrame = mTrackDiv->GetPrimaryFrame();
   nsIFrame* progressFrame = mProgressDiv->GetPrimaryFrame();
diff --git a/layout/forms/nsRangeFrame.h b/layout/forms/nsRangeFrame.h
@@ -54,6 +54,10 @@ class nsRangeFrame final : public nsContainerFrame,
               const ReflowInput& aReflowInput,
               nsReflowStatus& aStatus) override;
 
+  Maybe<nscoord> GetNaturalBaselineBOffset(
+      mozilla::WritingMode aWM, BaselineSharingGroup aBaselineGroup,
+      BaselineExportContext) const override;
+
 #ifdef DEBUG_FRAME_DUMP
   nsresult GetFrameName(nsAString& aResult) const override {
     return MakeFrameName(u"Range"_ns, aResult);
diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/range-baseline-ref.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/range-baseline-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference for Input type=range baseline alignment</title>
+<style>
+  .range-placeholder {
+    display: inline-block;
+    margin: 20px 20px 0 20px;
+    padding: 10px;
+    border: 20px solid transparent;
+    box-sizing: border-box;
+    width: 180px;
+    height: 60px;
+  }
+</style>
+<div>
+  Baseline text
+  <span class="range-placeholder"></span>
+  More baseline text
+</div>
diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/range-baseline.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/range-baseline.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Input type=range baseline alignment</title>
+<link rel="match" href="range-baseline-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range)">
+<style>
+  .range-input {
+    box-sizing: border-box;
+    width: 180px;
+    height: 60px;
+    margin: 20px;
+    padding: 10px;
+    border: 20px solid transparent;
+    visibility: hidden;
+  }
+</style>
+<div class="text-wrapper">
+  Baseline text
+  <input type="range" class="range-input">
+  More baseline text
+</div>
