зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1578586: Don't let the "percentages-can-resolve-against-ancestor" quirk apply to percentages in flex/grid items. r=mats
Differential Revision: https://phabricator.services.mozilla.com/D44583 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Daniel Holbert
Родитель
2738d493c6
Коммит
571fd2eafe
|
|
@ -2134,11 +2134,12 @@ LogicalSize ReflowInput::ComputeContainingBlockRectangle(
|
|||
return aSize.ConvertsToPercentage();
|
||||
};
|
||||
// an element in quirks mode gets a containing block based on looking for a
|
||||
// parent with a non-auto height if the element has a percent height
|
||||
// Note: We don't emulate this quirk for percents in calc() or in
|
||||
// vertical writing modes.
|
||||
// parent with a non-auto height if the element has a percent height.
|
||||
// Note: We don't emulate this quirk for percents in calc(), or in vertical
|
||||
// writing modes, or if the containing block is a flex or grid item.
|
||||
if (!wm.IsVertical() && NS_UNCONSTRAINEDSIZE == cbSize.BSize(wm)) {
|
||||
if (eCompatibility_NavQuirks == aPresContext->CompatibilityMode() &&
|
||||
!aContainingBlockRI->mFrame->IsFlexOrGridItem() &&
|
||||
(IsQuirky(mStylePosition->mHeight) ||
|
||||
(mFrame->IsTableWrapperFrame() &&
|
||||
IsQuirky(mFrame->PrincipalChildList()
|
||||
|
|
@ -2275,7 +2276,8 @@ void ReflowInput::InitConstraints(
|
|||
// in quirks mode, get the cb height using the special quirk method
|
||||
if (!wm.IsVertical() &&
|
||||
eCompatibility_NavQuirks == aPresContext->CompatibilityMode()) {
|
||||
if (!cbri->mFrame->IsTableCellFrame()) {
|
||||
if (!cbri->mFrame->IsTableCellFrame() &&
|
||||
!cbri->mFrame->IsFlexOrGridItem()) {
|
||||
cbSize.BSize(wm) = CalcQuirkContainingBlockHeight(cbri);
|
||||
if (cbSize.BSize(wm) == NS_UNCONSTRAINEDSIZE) {
|
||||
isAutoBSize = true;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test: Percent height quirk does not traverse flex/grid containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
|
||||
<link rel="match" href="reference/percentage-height-quirk-excludes-flex-grid-001-ref.html">
|
||||
<meta name="assert" content="This quirk is specific to block boxes and table wrapper boxes; if it hits another type of box, it doesn't traverse further. So this file should look the same whether in quirks or standards mode.">
|
||||
<style>
|
||||
.fixed-height-outer {
|
||||
height: 80px;
|
||||
border: 1px solid gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
display: flex;
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.column-flex {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.container {
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
.pct {
|
||||
height: 75%;
|
||||
min-height: 10px;
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: purple;
|
||||
}
|
||||
.px {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: blue
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="container column-flex">
|
||||
<div>
|
||||
<div class="pct"></div>
|
||||
<div class="px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="container row-flex">
|
||||
<div>
|
||||
<div class="pct"></div>
|
||||
<div class="px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="container grid">
|
||||
<div>
|
||||
<div class="pct"></div>
|
||||
<div class="px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test: Percent height quirk applies for percent heights on flex/grid containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
|
||||
<link rel="match" href="reference/percentage-height-quirk-excludes-flex-grid-002-ref.html">
|
||||
<meta name="assert" content="This quirk only starts differentiating by box-type when looking at the containing block of the percent-height thing. So, the quirk applies to percent-heights on flex/grid containers, when the ancestors are all blocks up to the nearest definite height.">
|
||||
<style>
|
||||
.fixed-height-outer {
|
||||
height: 80px;
|
||||
border: 1px solid gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
display: flex;
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.column-flex {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.pct {
|
||||
height: 75%;
|
||||
min-height: 10px;
|
||||
width: 50px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixed-height-outer">
|
||||
<div>
|
||||
<div class="column-flex pct"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div>
|
||||
<div class="row-flex pct"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div>
|
||||
<div class="grid pct"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: Percent height quirk does not traverse flex/grid containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<style>
|
||||
.fixed-height-outer {
|
||||
height: 80px;
|
||||
border: 1px solid gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
display: flex;
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.column-flex {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.container {
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
.pct {
|
||||
height: 75%;
|
||||
min-height: 10px;
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: purple;
|
||||
}
|
||||
.px {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: blue
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="container column-flex">
|
||||
<div>
|
||||
<div class="pct"></div>
|
||||
<div class="px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="container row-flex">
|
||||
<div>
|
||||
<div class="pct"></div>
|
||||
<div class="px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="container grid">
|
||||
<div>
|
||||
<div class="pct"></div>
|
||||
<div class="px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Not-reference case: Percent height quirk applies for percent heights on flex/grid containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<style>
|
||||
.fixed-height-outer {
|
||||
height: 80px;
|
||||
border: 1px solid gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
display: flex;
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.column-flex {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.pct {
|
||||
height: 75%;
|
||||
min-height: 10px;
|
||||
width: 50px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixed-height-outer">
|
||||
<div>
|
||||
<div class="column-flex pct"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div>
|
||||
<div class="row-flex pct"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div>
|
||||
<div class="grid pct"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference case: Percent height quirk applies for percent heights on flex/grid containers</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="mismatch" href="percentage-height-quirk-excludes-flex-grid-002-notref.html">
|
||||
<style>
|
||||
.fixed-height-outer {
|
||||
height: 80px;
|
||||
border: 1px solid gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
display: flex;
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.column-flex {
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.pct {
|
||||
height: 75%;
|
||||
min-height: 10px;
|
||||
width: 50px;
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="column-flex pct"></div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="row-flex pct"></div>
|
||||
</div>
|
||||
<div class="fixed-height-outer">
|
||||
<div class="grid pct"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче