зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1471758 - [css-grid-2][css-contain] Make 'contain:paint' and 'contain:layout' inhibit a grid container from being a subgrid. r=dholbert
Differential Revision: https://phabricator.services.mozilla.com/D29793 --HG-- extra : rebase_source : 8a709b9a0c58fe0ff1f21e1da07905470810bedd
This commit is contained in:
Родитель
de3b35d86d
Коммит
a697823fed
|
@ -857,11 +857,12 @@ void ReflowInput::InitDynamicReflowRoot() {
|
|||
canBeDynamicReflowRoot = false;
|
||||
}
|
||||
|
||||
// Subgrids are never reflow roots.
|
||||
// FIXME: bug 1471758 will update this for 'contain'.
|
||||
// Subgrids are never reflow roots, but 'contain:layout/paint' prevents
|
||||
// creating a subgrid in the first place.
|
||||
if (canBeDynamicReflowRoot &&
|
||||
(mStylePosition->GridTemplateColumns().mIsSubgrid ||
|
||||
mStylePosition->GridTemplateRows().mIsSubgrid)) {
|
||||
mStylePosition->GridTemplateRows().mIsSubgrid) &&
|
||||
!(mStyleDisplay->IsContainLayout() || mStyleDisplay->IsContainPaint())) {
|
||||
// NOTE: we could check that 'display' of our content's primary frame is
|
||||
// '[inline-]grid' here but that's probably not worth it in practice.
|
||||
canBeDynamicReflowRoot = false;
|
||||
|
|
|
@ -7387,6 +7387,14 @@ void nsGridContainerFrame::UpdateSubgridFrameState() {
|
|||
}
|
||||
|
||||
nsFrameState nsGridContainerFrame::ComputeSelfSubgridBits() const {
|
||||
// 'contain:layout/paint' makes us an "independent formatting context",
|
||||
// which prevents us from being a subgrid in this case (but not always).
|
||||
// https://drafts.csswg.org/css-display-3/#establish-an-independent-formatting-context
|
||||
auto* display = StyleDisplay();
|
||||
if (display->IsContainLayout() || display->IsContainPaint()) {
|
||||
return nsFrameState(0);
|
||||
}
|
||||
|
||||
// skip our scroll frame and such if we have it
|
||||
auto* parent = GetParent();
|
||||
while (parent && parent->GetContent() == GetContent()) {
|
||||
|
|
|
@ -0,0 +1,45 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout/paint containment on subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<meta name=assert content="layout/paint containment inhibits subgrid">
|
||||
<link rel="match" href="reference/contain-subgrid-001.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel=help href="https://drafts.csswg.org/css-grid-2/">
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b];
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid;
|
||||
background: lightgrey;
|
||||
grid-area:1/1/3/3;
|
||||
}
|
||||
|
||||
.layout { contain: layout; }
|
||||
.paint { contain: paint; }
|
||||
|
||||
.inner {
|
||||
background: blue;
|
||||
grid-area:a/a/b/b;
|
||||
}
|
||||
.p {
|
||||
place-self: start;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>
|
||||
<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>
|
||||
<div class="grid"><div class="subgrid layout"><div class="inner p"></div></div></div>
|
||||
<div class="grid"><div class="subgrid paint"><div class="inner p"></div></div></div>
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain reference: layout/paint containment on subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b];
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: none;
|
||||
background: lightgrey;
|
||||
grid-area:1/1/3/3;
|
||||
}
|
||||
|
||||
.layout { contain: layout; }
|
||||
.paint { contain: paint; }
|
||||
|
||||
.inner {
|
||||
background: blue;
|
||||
grid-area:a/a/b/b;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>
|
||||
<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>
|
||||
<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>
|
||||
<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>
|
Загрузка…
Ссылка в новой задаче