Bug 1513959 - Make <input type=range> deal with "percentage inline-si…

…ze implies zero min-content size" properly. r=dholbert
Brli · Dec 18, 2018 · 37d7135 · 37d7135
1 parent a58b7a2
commit 37d7135
Show file tree

Hide file tree

Showing 5 changed files with 618 additions and 0 deletions.
diff --git a/layout/forms/nsRangeFrame.cpp b/layout/forms/nsRangeFrame.cpp
@@ -741,6 +741,13 @@ LogicalSize nsRangeFrame::ComputeAutoSize(
 }
 
 nscoord nsRangeFrame::GetMinISize(gfxContext* aRenderingContext) {
+  auto pos = StylePosition();
+  auto wm = GetWritingMode();
+  if (pos->ISize(wm).HasPercent()) {
+    // https://drafts.csswg.org/css-sizing-3/#percentage-sizing
+    // https://drafts.csswg.org/css-sizing-3/#min-content-zero
+    return nsLayoutUtils::ResolveToLength<true>(pos->ISize(wm), nscoord(0));
+  }
   return GetPrefISize(aRenderingContext);
 }
 

diff --git a/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1-ref.html b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1-ref.html
@@ -0,0 +1,161 @@
+<!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: INPUT type=range percent intrinsic inline-size</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace;
+}
+
+input { margin: 2px; }
+
+input.i {
+  min-width: 0;
+  background: lime;
+}
+
+input.mi {
+  min-width: 0;
+  max-width: 100%;
+  width: -moz-max-content;
+  width: max-content;
+  background: lime;
+}
+
+.n {
+  -webkit-appearance: none;
+}
+
+div {
+  display: inline-block;
+  border:1px solid;
+}
+
+.grid {
+  display: inline-grid;
+  grid: auto / min-content;
+  place-items: start;
+}
+
+.outerFlex { 
+  display: flex;
+  width: 100px;
+  border: 1px solid black;
+}
+.innerFlex {
+  display: grid;
+  border: 1px solid pink;
+}
+.innerFlex > input {
+  min-width: 0;
+  justify-self: stretch;
+  background: yellow;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+</style></head><body>
+
+<div style="width:30px"><div style="width:28px">
+  <input type="range" class="i" style="width:14px; margin-right:0">
+</div></div>
+
+<div style="width:200px"><div style="">
+  <input type="range" class="i" style="max-width:50%">
+</div></div>
+
+<div class="grid" style="grid-template-columns:4px">
+  <input type="range" class="i" style="width:2px;">
+</div>
+
+<div class="grid" style="grid-template-columns:30px">
+  <input type="range" class="i" style="width:15px">
+</div>
+
+<div class="grid" style="grid-template-columns:30px">
+  <input type="range" class="i" style="width:15px">
+</div>
+
+<div class="grid" style="grid-template-columns:30px">
+  <input type="range" class="i min-auto" style="width:15px">
+</div>
+
+<div style="width:30px"><div style="width:28px;">
+  <input type="range" class="i n" style="width:14px; margin-right:0">
+</div></div>
+
+<div class="grid" style="grid-template-columns:4px">
+  <input type="range" class="i n" style="width:2px;">
+</div>
+
+<div class="grid" style="grid-template-columns:30px">
+  <input type="range" class="i n" style="width:15px">
+</div>
+
+<div class="grid" style="grid-template-columns:30px">
+  <input type="range" class="i n" style="width:15px">
+</div>
+
+<div class="grid" style="grid-template-columns:30px">
+  <input type="range" class="i n min-auto" style="width:15px">
+</div>
+
+<br>
+<br>
+
+<div style="width:30px"><div>
+  <input type="range" class="mi">
+</div></div>
+
+<div class="grid">
+  <input type="range" class="mi">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(min-content,30px)">
+  <input type="range" class="mi">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="mi">
+</div>
+
+<div style="width:30px"><div>
+  <input type="range" class="mi n">
+</div></div>
+
+<div style="width:30px"><div style="width:-moz-max-content;width:max-content">
+  <input type="range" class="mi n" style="width:50%">
+</div></div>
+
+<div class="grid">
+  <input type="range" class="mi n">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(min-content,30px)">
+  <input type="range" class="mi n">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="mi n">
+</div>
+
+<div class="grid" style="width:30px; grid-template-columns:15px">
+  <input type="range" class="mi n min-auto">
+</div>
+
+<br>
+<br>
+
+<div class="outerFlex">
+  <div class="innerFlex">
+    <input type="range">
+  </div>
+  abc
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1.html b/testing/web-platform/tests/css/css-sizing/range-percent-intrinsic-size-1.html
@@ -0,0 +1,169 @@
+<!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: INPUT type=range percent intrinsic inline-size</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959">
+  <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
+  <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero">
+  <link rel="match" href="range-percent-intrinsic-size-1-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace;
+}
+
+input { margin: 2px; }
+
+input.i {
+  width: 50%;
+  min-width: -moz-min-content;
+  min-width: min-content;
+  background: lime;
+}
+
+input.mi {
+  max-width: 50%;
+  min-width: -moz-min-content;
+  min-width: min-content;
+  background: lime;
+}
+
+input.i.min-auto, input.mi.min-auto {
+  min-width: auto;
+}
+
+.n {
+  -webkit-appearance: none;
+}
+
+div {
+  display: inline-block;
+  border:1px solid;
+}
+
+.grid {
+  display: inline-grid;
+  grid: auto / min-content;
+  place-items: start;
+}
+
+.outerFlex { 
+  display: flex;
+  width: 100px;
+  border: 1px solid black;
+}
+.innerFlex {
+  display: flex;
+  border: 1px solid pink;
+}
+.innerFlex > input {
+  width: 50%;
+  flex: 1;
+  background: yellow;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+</style></head><body>
+
+<div style="width:30px"><div>
+  <input type="range" class="i">
+</div></div>
+
+<div style="width:200px"><div>
+  <input type="range" class="i">
+</div></div>
+
+<div class="grid">
+  <input type="range" class="i">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(min-content,30px)">
+  <input type="range" class="i">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="i">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="i min-auto">
+</div>
+
+<div style="width:30px"><div>
+  <input type="range" class="i n">
+</div></div>
+
+<div class="grid">
+  <input type="range" class="i n">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(min-content,30px)">
+  <input type="range" class="i n">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="i n">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="i n min-auto">
+</div>
+
+<br>
+<br>
+
+<div style="width:30px"><div>
+  <input type="range" class="mi">
+</div></div>
+
+<div class="grid">
+  <input type="range" class="mi">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(min-content,30px)">
+  <input type="range" class="mi">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="mi">
+</div>
+
+<div style="width:30px"><div>
+  <input type="range" class="mi n">
+</div></div>
+
+<div style="width:30px"><div>
+  <input type="range" class="mi n min-auto">
+</div></div>
+
+<div class="grid">
+  <input type="range" class="mi n">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(min-content,30px)">
+  <input type="range" class="mi n">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="mi n">
+</div>
+
+<div class="grid" style="grid-template-columns:minmax(auto,30px)">
+  <input type="range" class="mi n min-auto">
+</div>
+
+<br>
+<br>
+
+<div class="outerFlex">
+  <div class="innerFlex">
+    <input type="range">
+  </div>
+  abc
+</div>
+
+</body></html>