зеркало из https://github.com/mozilla/pjs.git
Bug 746966: Conditionally set NS_FRAME_IN_CONSTRAINED_HEIGHT for font inflation on percentage-based height so fonts with room to inflate can do so. [r=dbaron]
This commit is contained in:
Scott Johnson
Родитель
7865ab6e60
Коммит
a35a0ee456
|
|
@ -303,7 +303,36 @@ nsHTMLReflowState::Init(nsPresContext* aPresContext,
|
|||
(frame->GetContent() &&
|
||||
!(frame->GetContent()->IsHTML(nsGkAtoms::body) ||
|
||||
frame->GetContent()->IsHTML(nsGkAtoms::html)))) {
|
||||
frame->AddStateBits(NS_FRAME_IN_CONSTRAINED_HEIGHT);
|
||||
|
||||
// If our height was specified as a percentage, then this could
|
||||
// actually resolve to 'auto', based on:
|
||||
// http://www.w3.org/TR/CSS21/visudet.html#the-height-property
|
||||
nsIFrame* containingBlk = frame;
|
||||
while (containingBlk) {
|
||||
const nsStylePosition* stylePos = containingBlk->GetStylePosition();
|
||||
if ((stylePos->mHeight.IsCoordPercentCalcUnit() &&
|
||||
!stylePos->mHeight.HasPercent()) ||
|
||||
(stylePos->mMaxHeight.IsCoordPercentCalcUnit() &&
|
||||
!stylePos->mMaxHeight.HasPercent())) {
|
||||
frame->AddStateBits(NS_FRAME_IN_CONSTRAINED_HEIGHT);
|
||||
break;
|
||||
} else if ((stylePos->mHeight.IsCoordPercentCalcUnit() &&
|
||||
stylePos->mHeight.HasPercent()) ||
|
||||
(stylePos->mMaxHeight.IsCoordPercentCalcUnit() &&
|
||||
stylePos->mMaxHeight.HasPercent())) {
|
||||
if (!(containingBlk = containingBlk->GetContainingBlock())) {
|
||||
// If we've reached the top of the tree, then we don't have
|
||||
// a constrained height.
|
||||
frame->RemoveStateBits(NS_FRAME_IN_CONSTRAINED_HEIGHT);
|
||||
break;
|
||||
}
|
||||
|
||||
continue;
|
||||
} else {
|
||||
frame->RemoveStateBits(NS_FRAME_IN_CONSTRAINED_HEIGHT);
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
frame->RemoveStateBits(NS_FRAME_IN_CONSTRAINED_HEIGHT);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { font-size: 34px; width: 450px }
|
||||
#center-block { height: 80%;}
|
||||
#center-col { background: yellow; }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</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 id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { height: 80%; }
|
||||
#center-col { background: yellow }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</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 id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { font-size: 34px; width: 450px }
|
||||
#center-block { max-height: 80%;}
|
||||
#center-col { background: yellow; }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</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 id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { max-height: 80%; }
|
||||
#center-col { background: yellow }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</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 id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { font-size: 34px; width: 450px }
|
||||
#center-block { height: -moz-calc(80% + 5%); }
|
||||
#center-col { background: yellow; }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</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 id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { height: -moz-calc(80% + 5%); }
|
||||
#center-col { background: yellow }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</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 id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { height: 80%; }
|
||||
#center-col { background: yellow }
|
||||
#containing-block { height: 800px; }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</style>
|
||||
<!--
|
||||
Because the height of the containing block is constrained, the percent height should also
|
||||
be constrained, resulting in font inflation being disabled.
|
||||
-->
|
||||
<div id="containing-block">
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { height: 80%; }
|
||||
#center-col { background: yellow }
|
||||
#containing-block { height: 800px; }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</style>
|
||||
<!--
|
||||
Because the height of the containing block is constrained, the percent height should also
|
||||
be constrained, resulting in font inflation being disabled.
|
||||
-->
|
||||
<div id="containing-block">
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { height: 80%; }
|
||||
#center-col { background: yellow }
|
||||
#containing-block { height: -moz-calc(400px + 20px); }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</style>
|
||||
<!--
|
||||
Because the height of the containing block is constrained, the percent height should also
|
||||
be constrained, resulting in font inflation being disabled.
|
||||
-->
|
||||
<div id="containing-block">
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { height: 80%; }
|
||||
#center-col { background: yellow }
|
||||
#containing-block { height: -moz-calc(400px + 20px); }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</style>
|
||||
<!--
|
||||
Because the height of the containing block is constrained, the percent height should also
|
||||
be constrained, resulting in font inflation being disabled.
|
||||
-->
|
||||
<div id="containing-block">
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { font-size: 12px; width: 450px }
|
||||
#center-block { height: 400px; }
|
||||
#center-col { background: yellow; }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</style>
|
||||
<!--
|
||||
Because the height is constrained, this should not be inflated.
|
||||
-->
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { height: 400px; }
|
||||
#center-col { background: yellow }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</style>
|
||||
<!--
|
||||
Because the height is constrained, this should not be inflated.
|
||||
-->
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { max-height: 400px; }
|
||||
#center-col { background: yellow }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</style>
|
||||
<!--
|
||||
Because the max height is constrained, this should not be inflated.
|
||||
-->
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { max-height: 400px; }
|
||||
#center-col { background: yellow }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</style>
|
||||
<!--
|
||||
Because the max height is constrained, this should not be inflated.
|
||||
-->
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 34px; width: 450px }
|
||||
#center-block { height: 80%; }
|
||||
#containing-block { height: 80%; }
|
||||
#center-col { background: yellow }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</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 id="containing-block">
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE HTML>
|
||||
<style>
|
||||
div { margin-top: 0; font-size: 12px; width: 450px }
|
||||
#center-block { height: 80%; }
|
||||
#containing-block { height: 80%; }
|
||||
#center-col { background: yellow }
|
||||
p { margin-top: 0px; }
|
||||
|
||||
</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 id="containing-block">
|
||||
<div id="center-block">
|
||||
<div id="center-col">
|
||||
<p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -9,6 +9,14 @@ 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) == text-2.html text-2-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == text-3.html text-3-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == text-4.html text-4-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-1.html height-constraint-percent-1-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-2.html height-constraint-percent-2-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-3.html height-constraint-percent-3-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-4.html height-constraint-percent-4-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-5.html height-constraint-percent-5-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-6.html height-constraint-percent-6-ref.html
|
||||
test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-7.html height-constraint-percent-7-ref.html
|
||||
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
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче