Bug 708175: Disable font inflation for fixed-width or fixed-height input controls. [r=dbaron]

--HG--
rename : layout/reftests/font-inflation/input-text-1-ref.html => layout/reftests/font-inflation/input-text-1-height-ref.html
rename : layout/reftests/font-inflation/input-text-1.html => layout/reftests/font-inflation/input-text-1-height.html
rename : layout/reftests/font-inflation/input-text-1-ref.html => layout/reftests/font-inflation/input-text-1-noheight-ref.html
rename : layout/reftests/font-inflation/input-text-1.html => layout/reftests/font-inflation/input-text-1-noheight.html
rename : layout/reftests/font-inflation/input-text-2-ref.html => layout/reftests/font-inflation/input-text-2-height-ref.html
rename : layout/reftests/font-inflation/input-text-2.html => layout/reftests/font-inflation/input-text-2-height.html
rename : layout/reftests/font-inflation/input-text-2-ref.html => layout/reftests/font-inflation/input-text-2-noheight-ref.html
rename : layout/reftests/font-inflation/input-text-2-ref.html => layout/reftests/font-inflation/input-text-2-noheight.html
rename : layout/reftests/font-inflation/input-text-3-ref.html => layout/reftests/font-inflation/input-text-3-height-ref.html
rename : layout/reftests/font-inflation/input-text-3.html => layout/reftests/font-inflation/input-text-3-height.html
rename : layout/reftests/font-inflation/input-text-3-ref.html => layout/reftests/font-inflation/input-text-3-noheight-ref.html
rename : layout/reftests/font-inflation/input-text-3.html => layout/reftests/font-inflation/input-text-3-noheight.html
This commit is contained in:
Scott Johnson 2012-04-13 02:21:39 -05:00
parent 611dcd8782
commit d0c9228876
20 changed files with 139 additions and 31 deletions

View File

@ -4666,6 +4666,28 @@ nsLayoutUtils::FontSizeInflationInner(const nsIFrame *aFrame,
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.

View File

@ -5,7 +5,7 @@ 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>

View File

@ -0,0 +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>
<!--
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>

View File

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<style>
div { font-size: 34px; line-height: 1.0; width: 450px }
input { font-size: 12px; width: 200px }
</style>
<!--
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>test<input type="text" value="Hello world"></div>

View File

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<style>
div { font-size: 12px; line-height: 1.0; width: 450px }
input { font-size: 12px; width: 200px }
</style>
<!--
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>test<input type="text" value="Hello world"></div>

View File

@ -1,11 +0,0 @@
<!DOCTYPE HTML>
<style>
div { font-size: 34px; line-height: 1.0; width: 450px }
input { font-size: 34px; 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.
-->
<div><input type="text" value="Hello world"></div>

View File

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<style>
div { font-size: 12px; line-height: 1.0; width: 450px }
input { font-size: 12px; }
input { height: 50px }
</style>
<!--
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>

View File

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<style>
div { font-size: 12px; line-height: 1.0; width: 450px }
input { font-size: 12px; }
input { height: 50px }
</style>
<!--
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>

View File

@ -2,7 +2,6 @@
<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.

View File

@ -1,8 +1,7 @@
<!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.

View File

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<style>
div { font-size: 12px; line-height: 1.0; width: 450px }
input { font-size: 12px; }
input { height: 50px }
</style>
<!--
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>

View File

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<style>
div { font-size: 12px; line-height: 1.0; width: 450px }
input { font-size: 12px; }
input { height: 50px }
</style>
<!--
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>

View File

@ -2,10 +2,9 @@
<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>

View File

@ -2,7 +2,6 @@
<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.

View File

@ -5,9 +5,12 @@ 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
@ -31,8 +34,9 @@ test-pref(font.size.inflation.emPerLine,15) == select-listbox-2.html select-list
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

View File

@ -1,6 +1,6 @@
<!DOCTYPE HTML>
<style>
body { width: 450px }
body { line-height: 1.0; width: 450px }
select { font-size: 12px }
</style>
<!--

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -5,7 +5,7 @@ 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>