зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1549620 - [css-grid] Take box-sizing:border-box into account when calculating the input sizes for repeat(auto-fill/fit) track count. r=dholbert
Differential Revision: https://phabricator.services.mozilla.com/D45708 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Mats Palmgren
Родитель
f5e3f907e5
Коммит
ae1542ae49
|
|
@ -204,20 +204,53 @@ struct RepeatTrackSizingInput {
|
|||
const LogicalSize& aMax)
|
||||
: mMin(aMin), mSize(aSize), mMax(aMax) {}
|
||||
|
||||
void SetDefiniteSizes(LogicalAxis aAxis, WritingMode aWM,
|
||||
const StyleSize& aMinCoord, const StyleSize& aSizeCoord,
|
||||
const StyleMaxSize& aMaxCoord) {
|
||||
// This should be used in intrinsic sizing (i.e. when we can't initialize
|
||||
// the sizes directly from ReflowInput values).
|
||||
void InitFromStyle(LogicalAxis aAxis, WritingMode aWM,
|
||||
const ComputedStyle* aStyle) {
|
||||
const auto& pos = aStyle->StylePosition();
|
||||
const bool borderBoxSizing = pos->mBoxSizing == StyleBoxSizing::Border;
|
||||
nscoord bp = NS_UNCONSTRAINEDSIZE; // a sentinel to calculate it only once
|
||||
auto adjustForBoxSizing =
|
||||
[borderBoxSizing, aWM, aAxis, aStyle, &bp](nscoord aSize) {
|
||||
if (!borderBoxSizing) {
|
||||
return aSize;
|
||||
}
|
||||
if (bp == NS_UNCONSTRAINEDSIZE) {
|
||||
const auto& padding = aStyle->StylePadding()->mPadding;
|
||||
LogicalMargin border(aWM, aStyle->StyleBorder()->GetComputedBorder());
|
||||
// We can use zero percentage basis since this is only called from
|
||||
// intrinsic sizing code.
|
||||
const nscoord percentageBasis = 0;
|
||||
if (aAxis == eLogicalAxisInline) {
|
||||
bp = std::max(padding.GetIStart(aWM).Resolve(percentageBasis), 0) +
|
||||
std::max(padding.GetIEnd(aWM).Resolve(percentageBasis), 0) +
|
||||
border.IStartEnd(aWM);
|
||||
} else {
|
||||
bp = std::max(padding.GetBStart(aWM).Resolve(percentageBasis), 0) +
|
||||
std::max(padding.GetBEnd(aWM).Resolve(percentageBasis), 0) +
|
||||
border.BStartEnd(aWM);
|
||||
}
|
||||
}
|
||||
return std::max(aSize - bp, 0);
|
||||
};
|
||||
nscoord& min = mMin.Size(aAxis, aWM);
|
||||
nscoord& size = mSize.Size(aAxis, aWM);
|
||||
nscoord& max = mMax.Size(aAxis, aWM);
|
||||
if (aMinCoord.ConvertsToLength()) {
|
||||
min = aMinCoord.ToLength();
|
||||
const auto& minCoord = aAxis == eLogicalAxisInline ? pos->MinISize(aWM)
|
||||
: pos->MinBSize(aWM);
|
||||
if (minCoord.ConvertsToLength()) {
|
||||
min = adjustForBoxSizing(minCoord.ToLength());
|
||||
}
|
||||
if (aMaxCoord.ConvertsToLength()) {
|
||||
max = std::max(min, aMaxCoord.ToLength());
|
||||
const auto& maxCoord = aAxis == eLogicalAxisInline ? pos->MaxISize(aWM)
|
||||
: pos->MaxBSize(aWM);
|
||||
if (maxCoord.ConvertsToLength()) {
|
||||
max = std::max(min, adjustForBoxSizing(maxCoord.ToLength()));
|
||||
}
|
||||
if (aSizeCoord.ConvertsToLength()) {
|
||||
size = Clamp(aSizeCoord.ToLength(), min, max);
|
||||
const auto& sizeCoord = aAxis == eLogicalAxisInline ? pos->ISize(aWM)
|
||||
: pos->BSize(aWM);
|
||||
if (sizeCoord.ConvertsToLength()) {
|
||||
size = Clamp(adjustForBoxSizing(sizeCoord.ToLength()), min, max);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3999,16 +4032,12 @@ void nsGridContainerFrame::Grid::SubgridPlaceGridItems(
|
|||
// computing them otherwise.
|
||||
RepeatTrackSizingInput repeatSizing(state.mWM);
|
||||
if (!childGrid->IsColSubgrid() && state.mColFunctions.mHasRepeatAuto) {
|
||||
repeatSizing.SetDefiniteSizes(eLogicalAxisInline, state.mWM,
|
||||
state.mGridStyle->MinISize(state.mWM),
|
||||
state.mGridStyle->ISize(state.mWM),
|
||||
state.mGridStyle->MaxISize(state.mWM));
|
||||
repeatSizing.InitFromStyle(eLogicalAxisInline, state.mWM,
|
||||
state.mFrame->Style());
|
||||
}
|
||||
if (!childGrid->IsRowSubgrid() && state.mRowFunctions.mHasRepeatAuto) {
|
||||
repeatSizing.SetDefiniteSizes(eLogicalAxisBlock, state.mWM,
|
||||
state.mGridStyle->MinBSize(state.mWM),
|
||||
state.mGridStyle->BSize(state.mWM),
|
||||
state.mGridStyle->MaxBSize(state.mWM));
|
||||
repeatSizing.InitFromStyle(eLogicalAxisBlock, state.mWM,
|
||||
state.mFrame->Style());
|
||||
}
|
||||
|
||||
PlaceGridItems(state, repeatSizing);
|
||||
|
|
@ -7726,19 +7755,15 @@ nscoord nsGridContainerFrame::IntrinsicISize(gfxContext* aRenderingContext,
|
|||
// They're only used for auto-repeat so we skip computing them otherwise.
|
||||
RepeatTrackSizingInput repeatSizing(state.mWM);
|
||||
if (!IsColSubgrid() && state.mColFunctions.mHasRepeatAuto) {
|
||||
repeatSizing.SetDefiniteSizes(eLogicalAxisInline, state.mWM,
|
||||
state.mGridStyle->MinISize(state.mWM),
|
||||
state.mGridStyle->ISize(state.mWM),
|
||||
state.mGridStyle->MaxISize(state.mWM));
|
||||
repeatSizing.InitFromStyle(eLogicalAxisInline, state.mWM,
|
||||
state.mFrame->Style());
|
||||
}
|
||||
if (!IsRowSubgrid() && state.mRowFunctions.mHasRepeatAuto &&
|
||||
!(state.mGridStyle->mGridAutoFlow & NS_STYLE_GRID_AUTO_FLOW_ROW)) {
|
||||
// Only 'grid-auto-flow:column' can create new implicit columns, so that's
|
||||
// the only case where our block-size can affect the number of columns.
|
||||
repeatSizing.SetDefiniteSizes(eLogicalAxisBlock, state.mWM,
|
||||
state.mGridStyle->MinBSize(state.mWM),
|
||||
state.mGridStyle->BSize(state.mWM),
|
||||
state.mGridStyle->MaxBSize(state.mWM));
|
||||
repeatSizing.InitFromStyle(eLogicalAxisBlock, state.mWM,
|
||||
state.mFrame->Style());
|
||||
}
|
||||
|
||||
Grid grid;
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
[grid-auto-repeat-max-size-001.html]
|
||||
[.grid 9]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 11]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 10]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 12]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
[grid-auto-repeat-min-size-001.html]
|
||||
[.grid 9]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 11]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 10]
|
||||
expected: FAIL
|
||||
|
||||
[.grid 12]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -25,6 +25,14 @@
|
|||
grid-column: -2;
|
||||
grid-row: -2;
|
||||
}
|
||||
.pad-calc {
|
||||
border-width: 0;
|
||||
padding: calc(10% + 20px);
|
||||
}
|
||||
.pad-percent {
|
||||
border-width: 0;
|
||||
padding: 10%;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
|
@ -69,16 +77,64 @@
|
|||
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div style="width:min-content" data-expected-width="300" data-expected-height="160">
|
||||
<div class="grid border border-box pad-percent" data-expected-width="300" data-expected-height="160">
|
||||
<div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50">x</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:min-content" data-expected-width="240" data-expected-height="188">
|
||||
<div class="grid border border-box pad-calc" data-expected-width="240" data-expected-height="188">
|
||||
<div class="item" data-offset-x="44" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
|
||||
<div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div style="width:min-content" data-expected-width="200" data-expected-height="100">
|
||||
<div class="grid border border-box pad-percent" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
|
||||
<div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:min-content" data-expected-width="200" data-expected-height="100">
|
||||
<div class="grid border border-box pad-calc" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
|
||||
<div class="item" data-offset-x="40" data-offset-y="40" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="220" data-expected-height="170">
|
||||
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div style="width:min-content" data-expected-width="300" data-expected-height="160">
|
||||
<div class="grid border border-box pad-percent" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="160">
|
||||
<div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:min-content" data-expected-width="240" data-expected-height="188">
|
||||
<div class="grid border border-box pad-calc" style="width: min-content; height: min-content;" data-expected-width="288" data-expected-height="188">
|
||||
<div class="item" data-offset-x="144" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="220" data-expected-height="170">
|
||||
<div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
<div style="width:min-content" data-expected-width="300" data-expected-height="160">
|
||||
<div class="grid border border-box pad-percent" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="160">
|
||||
<div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:min-content" data-expected-width="240" data-expected-height="188">
|
||||
<div class="grid border border-box pad-calc" style="width: max-content; height: max-content;" data-expected-width="288" data-expected-height="188">
|
||||
<div class="item" data-offset-x="144" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче