mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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:
Mats Palmgren 2019-05-03 05:35:18 +02:00
Родитель de3b35d86d
Коммит a697823fed
4 изменённых файлов: 92 добавлений и 3 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

7
layout/generic/ReflowInput.cpp
Просмотреть файл

@ -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;

8
layout/generic/nsGridContainerFrame.cpp
Просмотреть файл

@ -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()) {

45
testing/web-platform/tests/css/css-contain/contain-subgrid-001.html Normal file
Просмотреть файл

@ -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>

35
testing/web-platform/tests/css/css-contain/reference/contain-subgrid-001.html Normal file
Просмотреть файл

@ -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>