Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-22 17:55:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1421105 Part 3 - Support dynamically adding or removing elements under multi-column subtree. r=bzbarsky,dbaron

Browse Source 
Depends on D5209

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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Ting-Yu Lin 2018-10-24 22:19:19 +00:00
parent a1e36d1d46
commit cce6ef31c9
26 changed files with 1010 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
layout/base/nsCSSFrameConstructor.cpp
View File

@ -611,6 +611,22 @@ GetIBContainingBlockFor(nsIFrame* aFrame)
return parentFrame;
}
static nsIFrame*
GetMultiColumnContainingBlockFor(nsIFrame* aFrame)
{
MOZ_ASSERT(aFrame->HasAnyStateBits(NS_FRAME_HAS_MULTI_COLUMN_ANCESTOR),
"Should only be called if the frame has a multi-column ancestor!");
nsIFrame* current = aFrame->GetParent();
while (current && !current->IsColumnSetWrapperFrame()) {
current = current->GetParent();
}
MOZ_ASSERT(current, "No ColumnSetWrapperFrame in a valid column hierarchy?");
return current;
}
// This is a bit slow, but sometimes we need it.
static bool
ParentIsWrapperAnonBox(nsIFrame* aParent)
@ -8719,6 +8735,50 @@ nsCSSFrameConstructor::MaybeRecreateContainerForFrameRemoval(nsIFrame* aFrame)
MOZ_ASSERT(aFrame == aFrame->FirstContinuation(),
"aFrame not the result of GetPrimaryFrame()?");
if (aFrame->HasAnyStateBits(NS_FRAME_HAS_MULTI_COLUMN_ANCESTOR)) {
nsIFrame* parent = aFrame->GetParent();
bool needsReframe =
// 1. Removing a column-span may lead to an empty
// ::-moz-column-span-wrapper.
aFrame->IsColumnSpan() ||
// 2. Removing the only child of a ::-moz-column-content whose
// ColumnSet parent has a previous column-span sibling requires
// reframing since we might connect the ColumnSet's next column-span
// sibling (if there's one). Note that this isn't actually needed if
// the ColumnSet is at the end of ColumnSetWrapper since we create
// empty ones at the end anyway, but we're not worried about
// optimizing that case.
(parent->Style()->GetPseudo() == nsCSSAnonBoxes::columnContent() &&
// The only child in ::-moz-column-content (might be tall enough to
// split across columns)
!aFrame->GetPrevSibling() && !aFrame->GetNextSibling() &&
// That ::-moz-column-content is the first column.
!parent->GetPrevInFlow() &&
// The ColumnSet containing ::-moz-column-set has a previous sibling
// that is a column-span.
parent->GetPrevContinuation());
if (needsReframe) {
nsIFrame* containingBlock = GetMultiColumnContainingBlockFor(aFrame);
#ifdef DEBUG
if (IsFramePartOfIBSplit(aFrame)) {
nsIFrame* ibContainingBlock = GetIBContainingBlockFor(aFrame);
MOZ_ASSERT(containingBlock == ibContainingBlock ||
nsLayoutUtils::IsProperAncestorFrame(containingBlock,
ibContainingBlock),
"Multi-column containing block should be equal to or be the "
"ancestor of the IB containing block!");
}
#endif
TRACE("Multi-column");
RecreateFramesForContent(containingBlock->GetContent(),
InsertionKind::Async);
return true;
}
}
if (IsFramePartOfIBSplit(aFrame)) {
// The removal functions can't handle removal of an {ib} split directly; we
// need to rebuild the containing block.
@ -12017,6 +12077,46 @@ nsCSSFrameConstructor::WipeContainingBlock(nsFrameConstructorState& aState,
}
}
// Situation #6 is a column hierarchy that's getting new children.
if (aFrame->HasAnyStateBits(NS_FRAME_HAS_MULTI_COLUMN_ANCESTOR)) {
if (aFrame->IsColumnSetWrapperFrame()) {
// Reframe the multi-column container whenever elements insert/append
// into it.
TRACE("Multi-column");
RecreateFramesForContent(aFrame->GetContent(), InsertionKind::Async);
return true;
}
bool anyColumnSpanItems = false;
for (FCItemIterator iter(aItems); !iter.IsDone(); iter.Next()) {
if (iter.item().mComputedStyle->StyleColumn()->IsColumnSpanStyle()) {
anyColumnSpanItems = true;
break;
}
}
bool needsReframe =
// 1. Insert / append any column-span children.
anyColumnSpanItems ||
// 2. GetInsertionPrevSibling() modifies insertion parent. If the prev
// sibling is a column-span, aFrame ends up being the
// column-span-wrapper.
aFrame->Style()->GetPseudo() == nsCSSAnonBoxes::columnSpanWrapper() ||
// 3. Append into {ib} split container. There might be room for
// optimization, but let's reframe for correctness...
IsFramePartOfIBSplit(aFrame);
if (needsReframe) {
TRACE("Multi-column");
RecreateFramesForContent(
GetMultiColumnContainingBlockFor(aFrame)->GetContent(),
InsertionKind::Async);
return true;
}
return false;
}
// Now we have several cases involving {ib} splits. Put them all in a
// do/while with breaks to take us to the "go and reconstruct" code.
do {
@ -12132,7 +12232,7 @@ nsCSSFrameConstructor::ReframeContainingBlock(nsIFrame* aFrame)
printf(" ==> blockContent=%p\n", blockContent);
}
#endif
RecreateFramesForContent(blockContent->AsElement(), InsertionKind::Async);
RecreateFramesForContent(blockContent, InsertionKind::Async);
return;
}
}

18
layout/generic/ColumnSetWrapperFrame.cpp
View File

@ -33,6 +33,24 @@ ColumnSetWrapperFrame::ColumnSetWrapperFrame(ComputedStyle* aStyle)
{
}
nsContainerFrame*
ColumnSetWrapperFrame::GetContentInsertionFrame()
{
nsIFrame* columnSet = PrincipalChildList().OnlyChild();
if (columnSet) {
// We have only one child, which means we don't have any column-span
// descendants. Thus we can safely return our only ColumnSet child's
// insertion frame as ours.
MOZ_ASSERT(columnSet->IsColumnSetFrame());
return columnSet->GetContentInsertionFrame();
}
// We have column-span descendants. Return ourselves as the insertion
// frame to let nsCSSFrameConstructor::WipeContainingBlock() figure out
// what to do.
return this;
}
void
ColumnSetWrapperFrame::AppendDirectlyOwnedAnonBoxes(nsTArray<OwnedAnonBox>& aResult)
{

2
layout/generic/ColumnSetWrapperFrame.h
View File

@ -33,6 +33,8 @@ public:
ComputedStyle* aStyle,
nsFrameState aStateFlags);
nsContainerFrame* GetContentInsertionFrame() override;
void AppendDirectlyOwnedAnonBoxes(nsTArray<OwnedAnonBox>& aResult) override;
#ifdef DEBUG_FRAME_DUMP

28
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-001-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Add the spanner as the first child of the columns</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<h3>spanner</h3>
<div>block1</div>
<div>block2</div>
</article>
</body>
</html>

46
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-001.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Add the spanner as the first child of the columns</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-dynamic-add-001-ref.html">
<meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
/* Add the spanner as the first child of the columns. */
var spanner = document.createElement("h3");
var text = document.createTextNode("spanner");
spanner.appendChild(text);
var column = document.getElementById("column");
column.insertBefore(spanner, column.children[0]);
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div>block1</div>
<div>block2</div>
</article>
</body>
</html>

28
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-002-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Add the spanner as the second child of the columns</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<div>block1</div>
<h3>spanner</h3>
<div>block2</div>
</article>
</body>
</html>

46
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-002.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Add the spanner as the second child of the columns</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-dynamic-add-002-ref.html">
<meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
/* Add the spanner as the second child of the columns. */
var spanner = document.createElement("h3");
var text = document.createTextNode("spanner");
spanner.appendChild(text);
var column = document.getElementById("column");
column.insertBefore(spanner, column.children[1]);
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div>block1</div>
<div>block2</div>
</article>
</body>
</html>

27
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-003-ref.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Add the spanner in block1. It should correctly span across all columns</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<div>block1<h3>spanner</h3></div>
<div>block2</div>
</article>
</body>
</html>

46
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-003.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Add the spanner in block1. It should correctly span across all columns</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-dynamic-add-003-ref.html">
<meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
/* Add the spanner in block1. It should correctly span across all columns. */
var spanner = document.createElement("h3");
var text = document.createTextNode("spanner");
spanner.appendChild(text);
var block1 = document.getElementById("block1");
block1.appendChild(spanner);
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div id="block1">block1</div>
<div>block2</div>
</article>
</body>
</html>

37
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-004-ref.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Add the spanner to the inner column</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
body {
width: 600px;
}
article {
column-count: 2;
column-rule: 6px solid;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article>
<article>
<div>inner block1</div>
<h3>spanner</h3>
<div>inner block2</div>
</article>
<article>
<div>inner block3</div>
<h3>static spanner</h3>
<div>inner block4</div>
</article>
</article>
</body>
</html>

55
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-004.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Add the spanner to the inner column</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-dynamic-add-004-ref.html">
<meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
/* Add the spanner to the inner column. */
var spanner = document.createElement("h3");
var text = document.createTextNode("spanner");
spanner.appendChild(text);
var innerColumn = document.getElementById("inner-column");
innerColumn.insertBefore(spanner, innerColumn.children[1]);
document.documentElement.removeAttribute("class");
}
</script>
<style>
body {
width: 600px;
}
article {
column-count: 2;
column-rule: 6px solid;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<article id="inner-column">
<div>inner block1</div>
<div>inner block2</div>
</article>
<article>
<div>inner block3</div>
<h3>static spanner</h3>
<div>inner block4</div>
</article>
</article>
</body>
</html>

48
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-005.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Add block1 before block2. It should join the column content box with
block2, not with the spanner</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-dynamic-add-001-ref.html">
<meta name="assert" content="This test checks a dynamically added block element should be rendered correctly in a column hierarchy containing a column-span.">
<script>
function runTest() {
document.body.offsetHeight;
/* Add block1 before block2. It should join the column content box with
block2, not with the spanner. */
var block = document.createElement("div");
var text = document.createTextNode("block1");
block.appendChild(text);
var column = document.getElementById("column");
column.insertBefore(block, column.children[1]);
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<h3>spanner</h3>
<div>block2</div>
</article>
</body>
</html>

44
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-006.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Append a text in column-span</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-dynamic-add-002-ref.html">
<meta name="assert" content="This test checks adding a text in column-span should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
/* Append a text in column-span */
var text = document.createTextNode("spanner");
var spanner = document.getElementById("spanner");
spanner.appendChild(text)
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div>block1</div>
<h3 id="spanner"></h3>
<div>block2</div>
</article>
</body>
</html>

32
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-007-ref.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Append the block to the inline element which contains "column-span"</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<span id="span">
inline1
<h3>spanner</h3>
<div>block1</div>
inline2
<div>block2</div>
</span>
</article>
</body>
</html>

50
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-007.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Append the block to the inline element which contains "column-span"</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-dynamic-add-007-ref.html">
<meta name="assert" content="This test checks a dynamically added block element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
/* Append the block to the inline element which contains "column-span". */
var block = document.createElement("div");
var text = document.createTextNode("block2");
block.appendChild(text);
var span = document.getElementById("span");
span.appendChild(block);
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<span id="span">
inline1
<h3>spanner</h3>
<div>block1</div>
inline2
</span>
</article>
</body>
</html>

30
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-008-ref.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Add a nested multi-column spanner to the outer column</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-count: 2;
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<div>block1</div>
<h3>multi-column spanner</h3>
<h3>spanner</h3>
<div>block2</div>
</article>
</body>
</html>

48
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-008.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Add a nested multi-column spanner to the outer column</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-dynamic-add-008-ref.html">
<meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
/* Add a nested multi-column spanner to the outer column. */
var spanner = document.createElement("h3");
var text = document.createTextNode("multi-column spanner");
spanner.appendChild(text);
var column = document.getElementById("column");
column.insertBefore(spanner, column.children[1]);
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-count: 2;
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div>block1</div>
<h3>spanner</h3>
<div>block2</div>
</article>
</body>
</html>

27
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-001-ref.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Remove the spanner as the first child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<div>block1</div>
<div>block2</div>
</article>
</body>
</html>

41
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-001.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Remove the spanner as the first 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-dynamic-remove-001-ref.html">
<meta name="assert" content="This test checks removing a 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
document.getElementById("spanner").remove();
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<h3 id="spanner">spanner</h3>
<div>block1</div>
<div>block2</div>
</article>
</body>
</html>

28
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-002-ref.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Remove the spanner in nested blocks</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<div>block1</div>
<div><div></div></div>
<div>block2</div>
</article>
</body>
</html>

41
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-002.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Remove the spanner in nested blocks</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-dynamic-remove-002-ref.html">
<meta name="assert" content="This test checks removing a 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
document.getElementById("spanner").remove();
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div>block1</div>
<div><div><h3 id="spanner">spanner</h3></div></div>
<div>block2</div>
</article>
</body>
</html>

40
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-003.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Remove the spanner in a block</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-dynamic-remove-001-ref.html">
<meta name="assert" content="This test checks removing a 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
document.getElementById("spanner").remove();
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div id="block1">block1<h3 id="spanner">spanner</h3></div>
<div>block2</div>
</article>
</body>
</html>

31
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-004-ref.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Remove the spanner with block siblings in an inline element</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<span>
inline1
<div>block1</div>
inline2
<div>block2</div>
</span>
</article>
</body>
</html>

45
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-004.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Remove the spanner with a block sibling in an inline element</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-dynamic-remove-004-ref.html">
<meta name="assert" content="This test checks removing a 'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
document.getElementById("spanner").remove();
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<span>
inline1
<h3 id="spanner">spanner</h3>
<div>block1</div>
inline2
<div>block2</div>
</span>
</article>
</body>
</html>

27
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-005-ref.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Remove a block with spanner siblings</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body>
<article id="column">
<h3>spanner1</h3>
<h3>spanner2</h3>
</article>
</body>
</html>

44
testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-005.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Remove a tall block (spliting across the three columns) with spanner siblings</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-dynamic-remove-005-ref.html">
<meta name="assert" content="This test checks removing a non-'column-span' element should be rendered correctly.">
<script>
function runTest() {
document.body.offsetHeight;
document.getElementById("block").remove();
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
#block {
height: 400px;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<h3>spanner1</h3>
<div id="block">block</div>
<h3>spanner2</h3>
</article>
</body>
</html>