mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 758079: Inflate margin of numeric list elements to prevent cut-off text during font inflation. [r=dbaron]
This commit is contained in:
Scott Johnson
parent
019b28da5b
commit
5bb0b6bbba
@ -85,6 +85,45 @@ static bool CheckNextInFlowParenthood(nsIFrame* aFrame, nsIFrame* aParent)
|
||||
return frameNext && parentNext && frameNext->GetParent() == parentNext;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjusts the margin for a list (ol, ul), if necessary, depending on
|
||||
* font inflation settings. Unfortunately, because bullets from a list are
|
||||
* placed in the margin area, we only have ~40px in which to place the
|
||||
* bullets. When they are inflated, however, this causes problems, since
|
||||
* the text takes up more space than is available in the margin.
|
||||
*
|
||||
* This method will return a small amount (in app units) by which the
|
||||
* margin can be adjusted, so that the space is available for list
|
||||
* bullets to be rendered with font inflation enabled.
|
||||
*/
|
||||
static nscoord
|
||||
FontSizeInflationListMarginAdjustment(const nsIFrame* aFrame)
|
||||
{
|
||||
float inflation = nsLayoutUtils::FontSizeInflationFor(aFrame);
|
||||
if (aFrame->IsFrameOfType(nsIFrame::eBlockFrame)) {
|
||||
const nsBlockFrame* blockFrame = static_cast<const nsBlockFrame*>(aFrame);
|
||||
const nsStyleList* styleList = aFrame->GetStyleList();
|
||||
|
||||
// We only want to adjust the margins if we're dealing with an ordered
|
||||
// list.
|
||||
if (inflation > 1.0f &&
|
||||
blockFrame->HasBullet() &&
|
||||
styleList->mListStyleType != NS_STYLE_LIST_STYLE_NONE &&
|
||||
styleList->mListStyleType != NS_STYLE_LIST_STYLE_DISC &&
|
||||
styleList->mListStyleType != NS_STYLE_LIST_STYLE_CIRCLE &&
|
||||
styleList->mListStyleType != NS_STYLE_LIST_STYLE_SQUARE &&
|
||||
inflation > 1.0f) {
|
||||
|
||||
// The HTML spec states that the default padding for ordered lists begins
|
||||
// at 40px, indicating that we have 40px of space to place a bullet. When
|
||||
// performing font inflation calculations, we add space equivalent to this,
|
||||
// but simply inflated at the same amount as the text, in app units.
|
||||
return nsPresContext::CSSPixelsToAppUnits(40) * (inflation - 1);
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
// Initialize a reflow state for a child frames reflow. Some state
|
||||
// is copied from the parent reflow state; the remaining state is
|
||||
// computed.
|
||||
@ -2336,6 +2375,18 @@ nsCSSOffsetState::ComputeMargin(nscoord aContainingBlockWidth)
|
||||
ComputeWidthDependentValue(aContainingBlockWidth,
|
||||
styleMargin->mMargin.GetBottom());
|
||||
}
|
||||
|
||||
nscoord marginAdjustment = FontSizeInflationListMarginAdjustment(frame);
|
||||
|
||||
if (marginAdjustment > 0) {
|
||||
const nsStyleVisibility* visibility = frame->GetStyleVisibility();
|
||||
if (visibility->mDirection == NS_STYLE_DIRECTION_RTL) {
|
||||
mComputedMargin.right = mComputedMargin.right + marginAdjustment;
|
||||
} else {
|
||||
mComputedMargin.left = mComputedMargin.left + marginAdjustment;
|
||||
}
|
||||
}
|
||||
|
||||
return isWidthDependent;
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
ol, li { line-height: 1.0; font-size: 35px; }
|
||||
ol { width: 500px; margin: 0; padding: 0 }
|
||||
li { margin: 0 0 0 50px; padding: 0 }
|
||||
</style>
|
||||
<ol>
|
||||
<li>item</li>
|
||||
</ol>
|
||||
@ -1,9 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
ol, li { line-height: 1.0; font-size: 15px; }
|
||||
ol { width: 500px; margin: 0; padding: 0 }
|
||||
li { margin: 0 0 0 50px; padding: 0 }
|
||||
</style>
|
||||
<ol>
|
||||
<li>item</li>
|
||||
</ol>
|
||||
23
layout/reftests/font-inflation/list-1-ref.html
Normal file
23
layout/reftests/font-inflation/list-1-ref.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE HTML>
|
||||
<head>
|
||||
<style>
|
||||
div { background: yellow; line-height: 1.0; font-size: 12px; width: 480px; border: 1px solid red; }
|
||||
ol { padding-left: 120px; width: 400px;}
|
||||
li { font-size: 36px; }
|
||||
</style>
|
||||
</head>
|
||||
<!--
|
||||
In a 480px container, the minimum font size at 15em per line is 32px.
|
||||
This means we map 0px-48px into 32px-48px, so 12px gets mapped to 36px.
|
||||
The margins will be a little bit screwy, since we're fiddling with them
|
||||
to make the list rendering better.
|
||||
-->
|
||||
<body>
|
||||
<div>
|
||||
<ol>
|
||||
<li>Separate interface design from internals</li>
|
||||
<li>Enable multiple user-interface strategies</li>
|
||||
<li>Enable multiple-platform support</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
22
layout/reftests/font-inflation/list-1.html
Normal file
22
layout/reftests/font-inflation/list-1.html
Normal file
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE HTML>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="ahem.css" />
|
||||
<style>
|
||||
div { background: yellow; line-height: 1.0; border: 1px solid red; font-size: 12px; width: 480px; }
|
||||
ol { width: 480px;}
|
||||
li { font-family: ahem; }
|
||||
</style>
|
||||
</head>
|
||||
<!--
|
||||
In a 480px container, the minimum font size at 15em per line is 32px.
|
||||
This means we map 0px-48px into 32px-48px, so 12px gets mapped to 36px.
|
||||
-->
|
||||
<body>
|
||||
<div>
|
||||
<ol>
|
||||
<li>Separate interface design from internals</li>
|
||||
<li>Enable multiple user-interface strategies</li>
|
||||
<li>Enable multiple-platform support</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
@ -19,7 +19,6 @@ test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineTh
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-8.html height-constraint-percent-8-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == decoration-1.html decoration-1-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == bullet-1.html bullet-1-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == bullet-2.html bullet-2-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == input-text-1-height.html input-text-1-height-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == input-text-1-noheight.html input-text-1-noheight-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == input-text-2-height.html input-text-2-height-ref.html
|
||||
@ -63,6 +62,7 @@ test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineTh
|
||||
|
||||
# The tests below use nonzero values of the lineThreshold preference.
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,100) == text-1.html text-1.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,100) HTTP(..) == list-1.html list-1-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,100) == threshold-1a.html threshold-1a.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,100) == threshold-1b.html threshold-1b-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,100) == threshold-1c.html threshold-1c-ref.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user