зеркало из https://github.com/mozilla/gecko-dev.git
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
Родитель
822925bcd6
Коммит
11a3e0712a
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[multicol-span-all-button-001.html]
|
||||
prefs: [layout.css.column-span.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[multicol-span-all-button-002.html]
|
||||
prefs: [layout.css.column-span.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[multicol-span-all-button-003.html]
|
||||
prefs: [layout.css.column-span.enabled:true]
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Загрузка…
Ссылка в новой задаче