зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1498281: Make flexbox devtools API report actual flex base size (not its min/max-clamped version). r=bradwerth
This patch also updates the expectations in the mochitest test_flex_items.html. Before this commit, the test (incorrectly) expected the mainBaseSize API to return some items' *final sizes*, because that's what our implementation did return, up until now. As of this patch, that API will now return the item's actual flex base size, which means the text expectations need to change. I'm also adding a new flex item to the test, to exercise a formerly-untested scenario. And to accommodate this new item, I'm also doubling the width of the flex container to be sure there's plenty of space. Differential Revision: https://phabricator.services.mozilla.com/D8476 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Daniel Holbert
Родитель
11fa187a60
Коммит
8d0f407881
|
|
@ -9,9 +9,13 @@
|
|||
display: flex;
|
||||
background-color: grey;
|
||||
font: 14px sans-serif;
|
||||
width: 800px;
|
||||
height: 50px;
|
||||
}
|
||||
.huge {
|
||||
/* This just needs to be large enough so that no shrinking is required
|
||||
inside the flex container that uses this class. */
|
||||
width: 1600px;
|
||||
}
|
||||
|
||||
.base { align-self: baseline; }
|
||||
.lastbase { align-self: last baseline; }
|
||||
|
|
@ -23,6 +27,7 @@
|
|||
.yellow { background: yellow; }
|
||||
.orange { background: orange; }
|
||||
.pink { background: pink; }
|
||||
.tan { background: tan; }
|
||||
.white { background: white; }
|
||||
|
||||
.crossMinMax { min-height: 40px;
|
||||
|
|
@ -32,6 +37,11 @@
|
|||
max-width: 500px; }
|
||||
|
||||
.flexGrow { flex-grow: 1; }
|
||||
.spacer150 { width: 150px;
|
||||
box-sizing: border-box;
|
||||
height: 10px;
|
||||
border: 1px solid teal; }
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -118,7 +128,7 @@ function runTests() {
|
|||
|
||||
let expectedValues = [
|
||||
{ crossMinSize: 0 },
|
||||
{ mainBaseSize: lbElemBoundingRect.width,
|
||||
{ mainBaseSize: 100,
|
||||
mainDeltaSize: 0 },
|
||||
{ crossMinSize: 40,
|
||||
crossMaxSize: 120,
|
||||
|
|
@ -126,10 +136,14 @@ function runTests() {
|
|||
{ mainMinSize: 120,
|
||||
mainMaxSize: 500,
|
||||
mainDeltaSize: 0 },
|
||||
{ mainBaseSize: 5, /* XXXdholbert should be 10, fixing in bug 1498281 */
|
||||
{ mainMinSize: 120,
|
||||
mainMaxSize: 500,
|
||||
mainBaseSize: 150,
|
||||
mainDeltaSize: 0 },
|
||||
{ mainBaseSize: 10,
|
||||
mainMaxSize: 5,
|
||||
mainDeltaSize: 0 },
|
||||
{ mainBaseSize: 15, /* XXXdholbert should be 10, fixing in bug 1498281 */
|
||||
{ mainBaseSize: 10,
|
||||
mainMinSize: 15,
|
||||
mainDeltaSize: 0 },
|
||||
{ mainBaseSize: 50,
|
||||
|
|
@ -176,11 +190,16 @@ function runTests() {
|
|||
</head>
|
||||
|
||||
<body onLoad="runTests();">
|
||||
<div id="wrapper" class="container">
|
||||
<div id="wrapper" class="container huge">
|
||||
<div class="lime base flexGrow">one line (first)</div>
|
||||
<div class="yellow lastbase" style="width: 100px">one line (last)</div>
|
||||
<div class="orange offset lastbase crossMinMax">two<br/>lines and offset (last)</div>
|
||||
<div class="pink offset base mainMinMax">offset (first)</div>
|
||||
<!-- Inflexible item w/ content-derived flex base size, which has min/max
|
||||
but doesn't violate them: -->
|
||||
<div class="tan mainMinMax">
|
||||
<div class="spacer150"></div>
|
||||
</div>
|
||||
<!-- Inflexible item that is trivially clamped to smaller max-width: -->
|
||||
<div style="flex: 0 0 10px; max-width: 5px"></div>
|
||||
<!-- Inflexible item that is trivially clamped to larger min-width: -->
|
||||
|
|
|
|||
|
|
@ -2626,6 +2626,19 @@ FlexLine::ResolveFlexibleLengths(nscoord aFlexContainerMainSize,
|
|||
{
|
||||
MOZ_LOG(gFlexContainerLog, LogLevel::Debug, ("ResolveFlexibleLengths\n"));
|
||||
|
||||
// Before we start resolving sizes: if we have an aLineInfo structure to fill
|
||||
// out, we inform it of each item's base size, and we initialize the "delta"
|
||||
// for each item to 0. (And if the flex algorithm wants to grow or shrink the
|
||||
// item, we'll update this delta further down.)
|
||||
if (aLineInfo) {
|
||||
uint32_t itemIndex = 0;
|
||||
for (FlexItem* item = mItems.getFirst(); item; item = item->getNext(),
|
||||
++itemIndex) {
|
||||
aLineInfo->mItems[itemIndex].mMainBaseSize = item->GetFlexBaseSize();
|
||||
aLineInfo->mItems[itemIndex].mMainDeltaSize = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Determine whether we're going to be growing or shrinking items.
|
||||
const bool isUsingFlexGrow =
|
||||
(mTotalOuterHypotheticalMainSize < aFlexContainerMainSize);
|
||||
|
|
@ -2671,21 +2684,6 @@ FlexLine::ResolveFlexibleLengths(nscoord aFlexContainerMainSize,
|
|||
availableFreeSpace -= item->GetMainSize();
|
||||
}
|
||||
|
||||
// If we have an aLineInfo structure to fill out, and this is the
|
||||
// first time through the loop, capture these sizes as mainBaseSizes.
|
||||
// We only care about the first iteration, because additional
|
||||
// iterations will only reset item base sizes to these values.
|
||||
// We also set a 0 mainDeltaSize. This will be modified later if
|
||||
// the item is stretched or shrunk.
|
||||
if (aLineInfo && (iterationCounter == 0)) {
|
||||
uint32_t itemIndex = 0;
|
||||
for (FlexItem* item = mItems.getFirst(); item; item = item->getNext(),
|
||||
++itemIndex) {
|
||||
aLineInfo->mItems[itemIndex].mMainBaseSize = item->GetMainSize();
|
||||
aLineInfo->mItems[itemIndex].mMainDeltaSize = 0;
|
||||
}
|
||||
}
|
||||
|
||||
MOZ_LOG(gFlexContainerLog, LogLevel::Debug,
|
||||
(" available free space = %d\n", availableFreeSpace));
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче