Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-26 22:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1930672 - Resolve percentage sizes when computing auto repeat grid tracks. r=layout-grid-reviewers,tlouw

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D229379
This commit is contained in:
Ting-Yu Lin 2024-11-20 00:22:57 +00:00
parent 1ba3f9d647
commit b58e8f46f3
5 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
layout/generic/nsGridContainerFrame.cpp
View File

@ -289,6 +289,7 @@ struct RepeatTrackSizingInput {
: mMin(aWM, 0, 0),
mSize(aWM, NS_UNCONSTRAINEDSIZE, NS_UNCONSTRAINEDSIZE),
mMax(aWM, NS_UNCONSTRAINEDSIZE, NS_UNCONSTRAINEDSIZE) {}
RepeatTrackSizingInput(const LogicalSize& aMin, const LogicalSize& aSize,
const LogicalSize& aMax)
: mMin(aMin), mSize(aSize), mMax(aMax) {}
@ -301,6 +302,9 @@ struct RepeatTrackSizingInput {
const Maybe<LogicalSize>& aContainingBlockSize) {
const auto& pos = aStyle->StylePosition();
BoxSizingAdjustment boxSizingAdjustment(aWM, *aStyle);
const nscoord cbSizeInAxis = aContainingBlockSize
? aContainingBlockSize->Size(aAxis, aWM)
: NS_UNCONSTRAINEDSIZE;
auto adjustForBoxSizing = [aWM, aAxis,
&boxSizingAdjustment](nscoord aSize) {
@ -312,6 +316,10 @@ struct RepeatTrackSizingInput {
const auto& styleMinSize = pos->MinSize(aAxis, aWM);
if (styleMinSize.ConvertsToLength()) {
min = adjustForBoxSizing(styleMinSize.ToLength());
} else if (styleMinSize.HasPercent() &&
cbSizeInAxis != NS_UNCONSTRAINEDSIZE) {
min = adjustForBoxSizing(
styleMinSize.AsLengthPercentage().Resolve(cbSizeInAxis));
} else if (aAspectRatio && IsInitialSize(styleMinSize, aAxis)) {
// Use GetOrthogonalAxis() to get the ratio-determining axis. Same for max
// and size below in this function.
@ -327,6 +335,11 @@ struct RepeatTrackSizingInput {
const auto& styleMaxSize = pos->MaxSize(aAxis, aWM);
if (styleMaxSize.ConvertsToLength()) {
max = std::max(min, adjustForBoxSizing(styleMaxSize.ToLength()));
} else if (styleMaxSize.HasPercent() &&
cbSizeInAxis != NS_UNCONSTRAINEDSIZE) {
max = std::max(
min, adjustForBoxSizing(
styleMaxSize.AsLengthPercentage().Resolve(cbSizeInAxis)));
} else if (aAspectRatio && IsInitialSize(styleMaxSize, aAxis)) {
const auto& styleRDMaxSize = pos->MaxSize(GetOrthogonalAxis(aAxis), aWM);
if (Maybe<nscoord> resolvedMaxSize = ComputeTransferredSize(
@ -340,6 +353,11 @@ struct RepeatTrackSizingInput {
const auto& styleSize = pos->Size(aAxis, aWM);
if (styleSize.ConvertsToLength()) {
size = std::clamp(adjustForBoxSizing(styleSize.ToLength()), min, max);
} else if (styleSize.HasPercent() && cbSizeInAxis != NS_UNCONSTRAINEDSIZE) {
size =
std::clamp(adjustForBoxSizing(
styleSize.AsLengthPercentage().Resolve(cbSizeInAxis)),
min, max);
} else if (aAspectRatio && IsInitialSize(styleSize, aAxis)) {
const auto& styleRDSize = pos->Size(GetOrthogonalAxis(aAxis), aWM);
if (Maybe<nscoord> resolvedSize = ComputeTransferredSize(

4
layout/reftests/css-grid/grid-repeat-auto-fill-fit-001-ref.html
View File

@ -131,7 +131,7 @@ fill,fit {
<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c2 w42 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c2 w42 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c4 w100 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c1 w40 float"><x></x><x></x><a></a><b></b><x></x></div>
@ -139,7 +139,7 @@ fill,fit {
<br clear="all">
<div class="grid r1 w80 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c4 cxw10 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c1 w20 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 w64 float"><x></x><x></x><a></a><b></b><x></x></div>
<div class="grid r1 c4 w100 float"><x></x><x></x><a></a><b></b><x></x></div>

10
layout/reftests/css-grid/grid-repeat-auto-fill-fit-004-ref.html
View File

@ -25,13 +25,13 @@ html,body {
padding-top: 3px;
}
.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; width:34px; }
.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; width:34px; }
.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; width:34px; }
.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; width:34px; }
.r12 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d]; width:22px; }
.r13 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d]; width:10px; }
.r14 { grid-template-rows: [a] repeat(4, [b] 20px [c]) [d]; width:10px; }
.r20,.r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; width:22px; }
.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; width:22px; }
.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; width:22px; }
.r22 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; width:10px; }
.r23 { grid-template-rows: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; width:10px; }
.r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; }
.r32 { grid-template-rows: [a] repeat(2, [b] 20px [c]) [d] 30px [e] 30px [f]; width:10px; }

2
testing/web-platform/meta/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html.ini
View File

@ -1,2 +0,0 @@
[grid-auto-repeat-dynamic-001.html]
expected: FAIL

8
testing/web-platform/meta/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html.ini
View File

@ -1,8 +0,0 @@
[grid-auto-repeat-max-size-002.html]
expected:
if (os == "android") and fission: [OK, TIMEOUT]
[.grid 3]
expected: FAIL
[.grid 4]
expected: FAIL