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

Bug 1489295 Part 3 - Implement column-span:all for <button>. r=dbaron 

We need to pull outerFrame one level up to the outer scope because it's
needed when calling FinishBuildingColumns().

The patch is very similar to implementing column-span:all for <fieldset>
in bug 1535200.

Differential Revision: https://phabricator.services.mozilla.com/D24396

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ting-Yu Lin 2019-03-22 02:50:34 +00:00
Родитель 822925bcd6
Коммит 11a3e0712a
10 изменённых файлов: 250 добавлений и 7 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

44
layout/base/nsCSSFrameConstructor.cpp
Просмотреть файл

@ -3682,6 +3682,7 @@ void nsCSSFrameConstructor::ConstructFrameFromItemInternal(
nsIFrame* maybeAbsoluteContainingBlockStyleFrame = primaryFrame;
nsIFrame* maybeAbsoluteContainingBlock = newFrame;
nsIFrame* possiblyLeafFrame = newFrame;
nsContainerFrame* outerFrame = nullptr;
if (bits & FCDATA_CREATE_BLOCK_WRAPPER_FOR_ALL_KIDS) {
RefPtr<ComputedStyle> outerStyle =
mPresShell->StyleSet()->ResolveInheritingAnonymousBoxStyle(
@ -3691,7 +3692,6 @@ void nsCSSFrameConstructor::ConstructFrameFromItemInternal(
MOZ_ASSERT(containerFrame);
#endif
nsContainerFrame* container = static_cast<nsContainerFrame*>(newFrame);
nsContainerFrame* outerFrame;
nsContainerFrame* innerFrame;
if (bits & FCDATA_ALLOW_GRID_FLEX_COLUMN) {
switch (display->mDisplay) {
@ -3709,8 +3709,14 @@ void nsCSSFrameConstructor::ConstructFrameFromItemInternal(
break;
default: {
innerFrame = NS_NewBlockFormattingContext(mPresShell, outerStyle);
outerFrame = InitAndWrapInColumnSetFrameIfNeeded(
aState, content, container, innerFrame, outerStyle);
if (outerStyle->StyleColumn()->IsColumnContainerStyle()) {
outerFrame = BeginBuildingColumns(aState, content, container,
innerFrame, outerStyle);
} else {
// No need to create column container. Initialize innerFrame.
InitAndRestoreFrame(aState, content, container, innerFrame);
outerFrame = innerFrame;
}
break;
}
}
@ -3820,10 +3826,34 @@ void nsCSSFrameConstructor::ConstructFrameFromItemInternal(
childItems = newItems;
}
// Set the frame's initial child list
// Note that MathML depends on this being called even if
// childItems is empty!
newFrameAsContainer->SetInitialChildList(kPrincipalList, childItems);
if (!StaticPrefs::layout_css_column_span_enabled() ||
!(bits & FCDATA_ALLOW_GRID_FLEX_COLUMN) ||
!MayNeedToCreateColumnSpanSiblings(newFrameAsContainer, childItems)) {
// Set the frame's initial child list. Note that MathML depends on this
// being called even if childItems is empty!
newFrameAsContainer->SetInitialChildList(kPrincipalList, childItems);
} else {
// Extract any initial non-column-span kids, and put them in inner
// frame's child list.
nsFrameList initialNonColumnSpanKids =
childItems.Split([](nsIFrame* f) { return f->IsColumnSpan(); });
newFrameAsContainer->SetInitialChildList(kPrincipalList,
initialNonColumnSpanKids);
if (childItems.NotEmpty()) {
nsFrameList columnSpanSiblings = CreateColumnSpanSiblings(
aState, newFrameAsContainer, childItems,
// Column content should never be a absolute/fixed positioned
// containing block. Pass nullptr as aPositionedFrame.
nullptr);
MOZ_ASSERT(outerFrame,
"outerFrame should be non-null if multi-column container "
"is created.");
FinishBuildingColumns(aState, outerFrame, newFrameAsContainer,
columnSpanSiblings);
}
}
if (bits & FCDATA_MAY_NEED_BULLET) {
nsBlockFrame* block = do_QueryFrame(newFrameAsContainer);

2
testing/web-platform/meta/css/css-multicol/multicol-span-all-button-001.html.ini Normal file
Просмотреть файл

@ -0,0 +1,2 @@
[multicol-span-all-button-001.html]
prefs: [layout.css.column-span.enabled:true]

2
testing/web-platform/meta/css/css-multicol/multicol-span-all-button-002.html.ini Normal file
Просмотреть файл

@ -0,0 +1,2 @@
[multicol-span-all-button-002.html]
prefs: [layout.css.column-span.enabled:true]

2
testing/web-platform/meta/css/css-multicol/multicol-span-all-button-003.html.ini Normal file
Просмотреть файл

@ -0,0 +1,2 @@
[multicol-span-all-button-003.html]
prefs: [layout.css.column-span.enabled:true]

29
testing/web-platform/tests/css/css-multicol/multicol-span-all-button-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a multi-column container on button works with a column-span:all child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
button {
width: 400px;
}
.inner {
column-count: 3;
column-rule: 6px solid;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<button>
<div class="inner">
<div>block1</div><div>block2</div>
<h3>spanner</h3>
<div>block3</div><div>block4</div>
</div>
</button>
</html>

28
testing/web-platform/tests/css/css-multicol/multicol-span-all-button-001.html Normal file
Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a multi-column container on button works with a column-span:all child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="multicol-span-all-button-001-ref.html">
<meta name="assert" content="This test checks the page is rendered correctly for a multi-column container on button with a column-span:all child.">
<style>
button {
column-count: 3;
column-rule: 6px solid;
width: 400px;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<button>
<div>block1</div><div>block2</div>
<h3>spanner</h3>
<div>block3</div><div>block4</div>
</button>
</html>

38
testing/web-platform/tests/css/css-multicol/multicol-span-all-button-002-ref.html Normal file
Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on button works with a column-span:all child and position:absolute boxes</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
button {
width: 400px;
padding: 1em;
overflow: hidden;
position: absolute;
}
.inner {
column-count: 3;
column-rule: 6px solid;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
a {
position: absolute;
width: 1em;
height: 1em;
background-color: blue;
}
</style>
<button>
<div class="inner">
<div>block1</div><div>block2</div><a></a>
<h3>spanner<a></a></h3>
<div>block3</div><div>block4</div><a></a>
</div>
</button>
</html>

37
testing/web-platform/tests/css/css-multicol/multicol-span-all-button-002.html Normal file
Просмотреть файл

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on button works with a column-span:all child and position:absolute boxes</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="multicol-span-all-button-002-ref.html">
<meta name="assert" content="This test checks the page is rendered correctly for a overflow:hidden and position:absolute button multi-column container with a column-span:all child and position:absolute boxes.">
<style>
button {
column-count: 3;
column-rule: 6px solid;
width: 400px;
padding: 1em;
overflow: hidden;
position: absolute;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
a {
position: absolute;
width: 1em;
height: 1em;
background-color: blue;
}
</style>
<button>
<div>block1</div><div>block2</div><a></a>
<h3>spanner<a></a></h3>
<div>block3</div><div>block4</div><a></a>
</button>
</html>

38
testing/web-platform/tests/css/css-multicol/multicol-span-all-button-003-ref.html Normal file
Просмотреть файл

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on button works with a column-span:all child and position:fixed boxes</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
button {
width: 400px;
padding: 1em;
overflow: hidden;
position: absolute;
}
.inner {
column-count: 3;
column-rule: 6px solid;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
a {
position: fixed;
width: 1em;
height: 1em;
background-color: blue;
}
</style>
<button>
<div class="inner">
<div>block1</div><div>block2</div><a></a>
<h3>spanner<a></a></h3>
<div>block3</div><div>block4</div><a></a>
</div>
</button>
</html>

37
testing/web-platform/tests/css/css-multicol/multicol-span-all-button-003.html Normal file
Просмотреть файл

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on button works with a column-span:all child and position:fixed boxes</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="multicol-span-all-button-003-ref.html">
<meta name="assert" content="This test checks the page is rendered correctly for a overflow:hidden and position:absolute button multi-column container with a column-span:all child and position:absolute boxes.">
<style>
button {
column-count: 3;
column-rule: 6px solid;
width: 400px;
padding: 1em;
overflow: hidden;
position: absolute;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
a {
position: fixed;
width: 1em;
height: 1em;
background-color: blue;
}
</style>
<button>
<div>block1</div><div>block2</div><a></a>
<h3>spanner<a></a></h3>
<div>block3</div><div>block4</div><a></a>
</button>
</html>