Bug 708175: Disable font inflation for fixed-width or fixed-height input controls. [r=dbaron]
authorScott Johnson <sjohnson@mozilla.com>
Fri, 13 Apr 2012 02:21:39 -0500
changeset 94914 1587faab5e5c69818282a9943daad4fe4a33baa6
parent 94913 709a9867cc31314012a132f76bad041c61e64d61
child 94915 68a7e8713ea81c3d63146a92c4d2d82904dfc3f3
push id886
push userlsblakk@mozilla.com
push dateMon, 04 Jun 2012 19:57:52 +0000
treeherdermozilla-beta@bbd8d5efd6d1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs708175
milestone14.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 708175: Disable font inflation for fixed-width or fixed-height input controls. [r=dbaron]
layout/base/nsLayoutUtils.cpp
layout/reftests/font-inflation/input-text-1-height-ref.html
layout/reftests/font-inflation/input-text-1-height.html
layout/reftests/font-inflation/input-text-1-noheight-ref.html
layout/reftests/font-inflation/input-text-1-noheight.html
layout/reftests/font-inflation/input-text-1-ref.html
layout/reftests/font-inflation/input-text-1.html
layout/reftests/font-inflation/input-text-2-height-ref.html
layout/reftests/font-inflation/input-text-2-height.html
layout/reftests/font-inflation/input-text-2-noheight-ref.html
layout/reftests/font-inflation/input-text-2-noheight.html
layout/reftests/font-inflation/input-text-2-ref.html
layout/reftests/font-inflation/input-text-2.html
layout/reftests/font-inflation/input-text-3-height-ref.html
layout/reftests/font-inflation/input-text-3-height.html
layout/reftests/font-inflation/input-text-3-noheight-ref.html
layout/reftests/font-inflation/input-text-3-noheight.html
layout/reftests/font-inflation/input-text-3-ref.html
layout/reftests/font-inflation/input-text-3.html
layout/reftests/font-inflation/reftest.list
layout/reftests/font-inflation/select-combobox-1.html
layout/reftests/font-inflation/select-combobox-3-ref.html
layout/reftests/font-inflation/select-combobox-3.html
layout/reftests/font-inflation/textarea-1-ref.html
layout/reftests/font-inflation/textarea-1.html
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -4661,16 +4661,38 @@ nsLayoutUtils::FontSizeInflationInner(co
     return 1.0;
   }
 
   if (aMinFontSize <= 0) {
     // No need to scale.
     return 1.0;
   }
 
+  // If between this current frame and its font inflation container there is a
+  // non-inline element with fixed width or height, then we should not inflate
+  // fonts for this frame.
+  for (const nsIFrame* f = aFrame;
+       f && !IsContainerForFontSizeInflation(f);
+       f = f->GetParent()) {
+    nsIContent* content = f->GetContent();
+    // Also, if there is more than one frame corresponding to a single
+    // content node, we want the outermost one.
+    if (!(f->GetParent() &&
+          f->GetParent()->GetContent() == content) &&
+        f->GetType() != nsGkAtoms::inlineFrame) {
+      nsStyleCoord stylePosWidth = f->GetStylePosition()->mWidth;
+      nsStyleCoord stylePosHeight = f->GetStylePosition()->mHeight;
+      if (stylePosWidth.GetUnit() != eStyleUnit_Auto ||
+          stylePosHeight.GetUnit() != eStyleUnit_Auto) {
+
+        return 1.0;
+      }
+    }
+  }
+
   // Scale everything from 0-1.5 times min to instead fit in the range
   // 1-1.5 times min, so that we still show some distinction rather than
   // just enforcing a minimum.
   // FIXME: Fiddle with this algorithm; maybe have prefs to control it?
   float ratio = float(styleFontSize) / float(aMinFontSize);
   if (ratio >= 1.5f) {
     // If we're already at 1.5 or more times the minimum, don't scale.
     return 1.0;
rename from layout/reftests/font-inflation/input-text-1-ref.html
rename to layout/reftests/font-inflation/input-text-1-height-ref.html
--- a/layout/reftests/font-inflation/input-text-1-ref.html
+++ b/layout/reftests/font-inflation/input-text-1-height-ref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
-div { font-size: 34px; line-height: 1.0; width: 450px }
-input { font-size: 34px; width: 200px }
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; width: 200px }
 input { height: 50px }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because this input has a fixed height (and also a fixed-width), font
+inflation should be disabled.
 -->
 <div><input type="text" value="Hello world"></div>
rename from layout/reftests/font-inflation/input-text-1.html
rename to layout/reftests/font-inflation/input-text-1-height.html
--- a/layout/reftests/font-inflation/input-text-1.html
+++ b/layout/reftests/font-inflation/input-text-1-height.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 12px; line-height: 1.0; width: 450px }
 input { font-size: 12px; width: 200px }
 input { height: 50px }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because this input has a fixed height (and also a fixed-width), font
+inflation should be disabled.
 -->
 <div><input type="text" value="Hello world"></div>
copy from layout/reftests/font-inflation/input-text-1-ref.html
copy to layout/reftests/font-inflation/input-text-1-noheight-ref.html
--- a/layout/reftests/font-inflation/input-text-1-ref.html
+++ b/layout/reftests/font-inflation/input-text-1-noheight-ref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 34px; line-height: 1.0; width: 450px }
-input { font-size: 34px; width: 200px }
-input { height: 50px }
+input { font-size: 12px; width: 200px }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because the width of the input element is constrained, font inflation
+should be disabled for the input element, but not the div containing
+it.
 -->
-<div><input type="text" value="Hello world"></div>
+<div>test<input type="text" value="Hello world"></div>
copy from layout/reftests/font-inflation/input-text-1.html
copy to layout/reftests/font-inflation/input-text-1-noheight.html
--- a/layout/reftests/font-inflation/input-text-1.html
+++ b/layout/reftests/font-inflation/input-text-1-noheight.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 12px; line-height: 1.0; width: 450px }
 input { font-size: 12px; width: 200px }
-input { height: 50px }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because the width of the input element is constrained, font inflation
+should be disabled for the input element, but not the div containing
+it.
 -->
-<div><input type="text" value="Hello world"></div>
+<div>test<input type="text" value="Hello world"></div>
rename from layout/reftests/font-inflation/input-text-2-ref.html
rename to layout/reftests/font-inflation/input-text-2-height-ref.html
--- a/layout/reftests/font-inflation/input-text-2-ref.html
+++ b/layout/reftests/font-inflation/input-text-2-height-ref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
-div { font-size: 34px; line-height: 1.0; width: 450px }
-input { font-size: 34px; }
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
 input { height: 50px }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because this input has a fixed height (and also a fixed width), font
+inflation should be disabled.
 -->
 <div><input type="text" value="Hello world" size="15"></div>
rename from layout/reftests/font-inflation/input-text-2.html
rename to layout/reftests/font-inflation/input-text-2-height.html
--- a/layout/reftests/font-inflation/input-text-2.html
+++ b/layout/reftests/font-inflation/input-text-2-height.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 12px; line-height: 1.0; width: 450px }
 input { font-size: 12px; }
 input { height: 50px }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because this input has a fixed height (and also a fixed width), font
+inflation should be disabled.
 -->
 <div><input type="text" value="Hello world" size="15"></div>
copy from layout/reftests/font-inflation/input-text-2-ref.html
copy to layout/reftests/font-inflation/input-text-2-noheight-ref.html
--- a/layout/reftests/font-inflation/input-text-2-ref.html
+++ b/layout/reftests/font-inflation/input-text-2-noheight-ref.html
@@ -1,11 +1,10 @@
 <!DOCTYPE HTML>
 <style>
-div { font-size: 34px; line-height: 1.0; width: 450px }
-input { font-size: 34px; }
-input { height: 50px }
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
 </style>
 <!--
 In a 450px container, the minimum font size at 15em per line is 30px.
 This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
 -->
 <div><input type="text" value="Hello world" size="15"></div>
copy from layout/reftests/font-inflation/input-text-2-ref.html
copy to layout/reftests/font-inflation/input-text-2-noheight.html
--- a/layout/reftests/font-inflation/input-text-2-ref.html
+++ b/layout/reftests/font-inflation/input-text-2-noheight.html
@@ -1,11 +1,10 @@
 <!DOCTYPE HTML>
 <style>
-div { font-size: 34px; line-height: 1.0; width: 450px }
-input { font-size: 34px; }
-input { height: 50px }
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
 </style>
 <!--
 In a 450px container, the minimum font size at 15em per line is 30px.
 This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
 -->
 <div><input type="text" value="Hello world" size="15"></div>
rename from layout/reftests/font-inflation/input-text-3-ref.html
rename to layout/reftests/font-inflation/input-text-3-height-ref.html
--- a/layout/reftests/font-inflation/input-text-3-ref.html
+++ b/layout/reftests/font-inflation/input-text-3-height-ref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
-div { font-size: 34px; line-height: 1.0; width: 450px }
-input { font-size: 34px; }
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
 input { height: 50px }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because this input has a fixed height (and also a fixed-width), font
+inflation should be disabled.
 -->
 <div><input type="text" value="Hello world"></div>
rename from layout/reftests/font-inflation/input-text-3.html
rename to layout/reftests/font-inflation/input-text-3-height.html
--- a/layout/reftests/font-inflation/input-text-3.html
+++ b/layout/reftests/font-inflation/input-text-3-height.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 12px; line-height: 1.0; width: 450px }
 input { font-size: 12px; }
 input { height: 50px }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because this input has a fixed height (and also a fixed-width), font
+inflation should be disabled.
 -->
 <div><input type="text" value="Hello world"></div>
copy from layout/reftests/font-inflation/input-text-3-ref.html
copy to layout/reftests/font-inflation/input-text-3-noheight-ref.html
--- a/layout/reftests/font-inflation/input-text-3-ref.html
+++ b/layout/reftests/font-inflation/input-text-3-noheight-ref.html
@@ -1,11 +1,10 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 34px; line-height: 1.0; width: 450px }
 input { font-size: 34px; }
-input { height: 50px }
 </style>
 <!--
 In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+This means we map 0px-45px into 30-px-45px, so 12px gets mapped to 34px.
 -->
 <div><input type="text" value="Hello world"></div>
copy from layout/reftests/font-inflation/input-text-3.html
copy to layout/reftests/font-inflation/input-text-3-noheight.html
--- a/layout/reftests/font-inflation/input-text-3.html
+++ b/layout/reftests/font-inflation/input-text-3-noheight.html
@@ -1,11 +1,10 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 12px; line-height: 1.0; width: 450px }
 input { font-size: 12px; }
-input { height: 50px }
 </style>
 <!--
 In a 450px container, the minimum font size at 15em per line is 30px.
 This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
 -->
 <div><input type="text" value="Hello world"></div>
--- a/layout/reftests/font-inflation/reftest.list
+++ b/layout/reftests/font-inflation/reftest.list
@@ -1,18 +1,21 @@
 test-pref(font.size.inflation.emPerLine,15) == text-1.html text-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) == text-2.html text-2-ref.html
 test-pref(font.size.inflation.emPerLine,15) == text-3.html text-3-ref.html
 test-pref(font.size.inflation.emPerLine,15) == text-4.html text-4-ref.html
 test-pref(font.size.inflation.emPerLine,15) == decoration-1.html decoration-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) == bullet-1.html bullet-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) == bullet-2.html bullet-2-ref.html
-test-pref(font.size.inflation.emPerLine,15) == input-text-1.html input-text-1-ref.html
-test-pref(font.size.inflation.emPerLine,15) == input-text-2.html input-text-2-ref.html
-test-pref(font.size.inflation.emPerLine,15) == input-text-3.html input-text-3-ref.html
+test-pref(font.size.inflation.emPerLine,15) == input-text-1-height.html input-text-1-height-ref.html
+test-pref(font.size.inflation.emPerLine,15) == input-text-1-noheight.html input-text-1-noheight-ref.html
+test-pref(font.size.inflation.emPerLine,15) == input-text-2-height.html input-text-2-height-ref.html
+test-pref(font.size.inflation.emPerLine,15) == input-text-2-height.html input-text-2-height-ref.html
+test-pref(font.size.inflation.emPerLine,15) == input-text-3-noheight.html input-text-3-noheight-ref.html
+test-pref(font.size.inflation.emPerLine,15) == input-text-3-noheight.html input-text-3-noheight-ref.html
 test-pref(font.size.inflation.emPerLine,15) == textarea-1.html textarea-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) == textarea-2.html textarea-2-ref.html
 test-pref(font.size.inflation.emPerLine,15) == textarea-3.html textarea-3-ref.html
 test-pref(font.size.inflation.emPerLine,15) == css-transform-1.html css-transform-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) == css-transform-2.html css-transform-2-ref.html
 test-pref(font.size.inflation.emPerLine,15) == container-with-clamping.html container-with-clamping-ref.html
 test-pref(font.size.inflation.emPerLine,15) load video-1.html
 test-pref(font.size.inflation.emPerLine,15) HTTP(..) == intrinsic-min-1.html intrinsic-min-1-ref.html
@@ -26,18 +29,19 @@ test-pref(font.size.inflation.emPerLine,
 test-pref(font.size.inflation.emPerLine,15) == select-listbox-1.html select-listbox-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) != select-listbox-1.html select-listbox-1.html
 test-pref(font.size.inflation.emPerLine,15) == select-combobox-1.html select-combobox-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) != select-combobox-1.html select-combobox-1.html
 test-pref(font.size.inflation.emPerLine,15) == select-listbox-2.html select-listbox-2-ref.html
 test-pref(font.size.inflation.emPerLine,15) != select-listbox-2.html select-listbox-2.html
 test-pref(font.size.inflation.emPerLine,15) == select-combobox-2.html select-combobox-2-ref.html
 test-pref(font.size.inflation.emPerLine,15) != select-combobox-2.html select-combobox-2.html
-asserts-if(gtk2Widget,1-2) test-pref(font.size.inflation.emPerLine,15) != input-checkbox.html input-checkbox.html
-asserts-if(gtk2Widget,1-2) test-pref(font.size.inflation.emPerLine,15) != input-radio.html input-radio.html
+test-pref(font.size.inflation.emPerLine,15) == select-combobox-3.html select-combobox-3-ref.html
+asserts-if(gtk2Widget,0-2) test-pref(font.size.inflation.emPerLine,15) != input-checkbox.html input-checkbox.html
+asserts-if(gtk2Widget,0-2) test-pref(font.size.inflation.emPerLine,15) != input-radio.html input-radio.html
 test-pref(font.size.inflation.emPerLine,15) == disable-fontinfl-on-mobile.html disable-fontinfl-on-mobile-ref.html
 test-pref(font.size.inflation.emPerLine,15) == disable-fontinfl-on-mobile-2.html disable-fontinfl-on-mobile-ref.html
 test-pref(font.size.inflation.emPerLine,15) == disable-fontinfl-on-mobile-3.html disable-fontinfl-on-mobile-ref.html
 test-pref(font.size.inflation.emPerLine,15) == disable-fontinfl-on-mobile-4.html disable-fontinfl-on-mobile-ref.html
 test-pref(font.size.inflation.emPerLine,15) == preformatted-text.html preformatted-text-ref.html
 test-pref(font.size.inflation.emPerLine,15) == fixed-height-body.html fixed-height-body-ref.html
 test-pref(font.size.inflation.emPerLine,15) == fixed-height-body-child.html fixed-height-body-child-ref.html
 test-pref(font.size.inflation.emPerLine,15) == consecutive-inline.html consecutive-inline-ref.html
--- a/layout/reftests/font-inflation/select-combobox-1.html
+++ b/layout/reftests/font-inflation/select-combobox-1.html
@@ -1,10 +1,10 @@
 <!DOCTYPE HTML>
 <style>
-body { width: 450px }
+body { line-height: 1.0; width: 450px }
 select { font-size: 12px }
 </style>
 <!--
 In a 450px container, the minimum font size at 15em per line is 30px.
 This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
 -->
 <select><option>One</option><option>Two</option></select>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/font-inflation/select-combobox-3-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+  body { line-height: 1.0; width: 450px }
+  select { vertical-align: top; font-size: 12px; width: 100px; }
+</style>
+<!--
+Because the combobox has constrained width, font inflation
+should be disabled.
+-->
+<select><option>One</Option><option>Two</option></select>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/font-inflation/select-combobox-3.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+  body { line-height: 1.0; width: 450px }
+  select { vertical-align: top; font-size: 12px; width: 100px; }
+</style>
+<!--
+Because the combobox has constrained width, font inflation
+should be disabled.
+-->
+<select><option>One</Option><option>Two</option></select>
--- a/layout/reftests/font-inflation/textarea-1-ref.html
+++ b/layout/reftests/font-inflation/textarea-1-ref.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 34px; line-height: 1.0; width: 450px }
-textarea { font-size: 34px; width: 200px; height: 50px }
+textarea { font-size: 12px; width: 200px; height: 50px }
 textarea { line-height: 1.0 }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because the textarea has constrained width and height, font
+inflation should be disabled for this case.
 -->
 <div><textarea>Hello world</textarea></div>
--- a/layout/reftests/font-inflation/textarea-1.html
+++ b/layout/reftests/font-inflation/textarea-1.html
@@ -1,11 +1,11 @@
 <!DOCTYPE HTML>
 <style>
 div { font-size: 12px; line-height: 1.0; width: 450px }
 textarea { font-size: 12px; width: 200px; height: 50px }
 textarea { line-height: 1.0 }
 </style>
 <!--
-In a 450px container, the minimum font size at 15em per line is 30px.
-This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+Because the textarea has constrained width and height, font
+inflation should be disabled for this case.
 -->
 <div><textarea>Hello world</textarea></div>