Update web-platform-tests to revision 6856483bcc86322198f10e0c42385a7f9127eb66

This commit is contained in:
WPT Sync Bot 2018-11-14 20:46:44 -05:00
parent b1a2b6b5bf
commit ff06f1d031
265 changed files with 7539 additions and 988 deletions

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: multi-column and margin bottom of last 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/#the-multi-column-model">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<meta name="assert" content="This test checks the margin-bottom of the last child of a multi-column should not affect its parent's margin-bottom.">
<style>
article {
font: 25px/25px Ahem;
color: green;
background-color: green;
width: 100px;
column-count: 2;
column-gap: 0;
margin-bottom: 0;
orphans: 1;
widows: 1;
}
article div:last-child {
margin-bottom: 13px;
}
</style>
<body>
<p>Test passes if there is a filled green square.</p>
<article>
<div>a1 a2 a3 a4</div>
<div>a5</div>
</article>
<article>b1 b2</article>
<!--
Expected result:
|------+------|
| a1 | a4 |
| a2 | a5 |
| a3 |margin|
|------+------|
| b1 | b2 |
|------+------|
-->
</body>
</html>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Remove the parent of a column-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-remove-001-ref.html">
<meta name="assert" content="This test checks removing the parent of a column-spanner 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;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<body onload="runTest();">
<article id="column">
<div>block1</div>
<div id="block">
<h3>inner spanner</h3>
<div>inner block</div>
</div>
<div>block2</div>
</article>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Restyle column-span's parent that is a block</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: 1;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
}
#div {
background-color: yellow;
}
</style>
<body>
<article id="column">
<div id="div">
<div>yellow block1</div>
<h3>spanner (no background-color)</h3>
<div>yellow block2</div>
</div>
</article>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Restyle column-span's parent that is 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="help" href="https://github.com/w3c/csswg-drafts/issues/1072">
<link rel="match" href="multicol-span-all-restyle-001-ref.html">
<meta name="assert" content="This test checks change the style of the spanner's parent should not affect the spanner.">
<script>
function runTest() {
document.body.offsetHeight; // flush layout
var div = document.getElementById("div");
div.style.backgroundColor = "yellow";
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 1;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
}
</style>
<body onload="runTest();">
<article id="column">
<div id="div">
<div>yellow block1</div>
<h3>spanner (no background-color)</h3>
<div>yellow block2</div>
</div>
</article>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Restyle column-span's parent that is an inline</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>
html {
overflow: hidden;
}
#column {
column-count: 1;
}
#span {
position: relative;
left: 200px;
}
h3 {
column-span: all;
}
</style>
<body>
<article id="column">
<span id="span">
All text should be offset 200px, except the spanner
<h3>Spanner</h3>
<div>Some more text</div>
</span>
</article>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Restyle column-span's parent that is an inline</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="help" href="https://github.com/w3c/csswg-drafts/issues/1072">
<link rel="match" href="multicol-span-all-restyle-002-ref.html">
<meta name="assert" content="This test checks change the style of the spanner's parent should not affect the spanner.">
<script>
function runTest() {
document.body.offsetHeight; // flush layout
var span = document.getElementById("span");
span.offsetWidth;
span.style.left = "200px";
document.documentElement.removeAttribute("class");
}
</script>
<style>
html {
overflow: hidden;
}
#column {
column-count: 1;
}
#span {
position: relative;
left: 100px;
}
h3 {
column-span: all;
}
</style>
<body onload="runTest();">
<article id="column">
<span id="span">
All text should be offset 200px, except the spanner
<h3>Spanner</h3>
<div>Some more text</div>
</span>
</article>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Restyle column-span's multi-column container</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: 1;
width: 400px;
outline: 1px solid black;
background-color: yellow;
}
h3 {
column-span: all;
}
#div {
background-color: yellow;
}
</style>
<body>
<article id="column">
<div>
<div>block1</div>
<h3>spanner</h3>
<div>block2</div>
</div>
</article>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Restyle column-span's multi-column container</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="help" href="https://github.com/w3c/csswg-drafts/issues/1072">
<link rel="match" href="multicol-span-all-restyle-003-ref.html">
<meta name="assert" content="This test checks change the style of the spanner's multi-column container should not affect the spanner.">
<script>
function runTest() {
document.body.offsetHeight; // flush layout
var column = document.getElementById("column");
column.style.backgroundColor = "yellow";
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 1;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
}
</style>
<body onload="runTest();">
<article id="column">
<div>
<div>block1</div>
<h3>spanner</h3>
<div>block2</div>
</div>
</article>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Restyle the column-span itself</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: 1;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
background-color: yellow;
}
</style>
<body>
<article id="column">
<div>
<div>block1</div>
<h3>yellow spanner</h3>
<div>block2</div>
</div>
</article>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Restyle the column-span itself</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="help" href="https://github.com/w3c/csswg-drafts/issues/1072">
<link rel="match" href="multicol-span-all-restyle-004-ref.html">
<meta name="assert" content="This test checks change the style of the spanner itself.">
<script>
function runTest() {
document.body.offsetHeight; // flush layout
var spanner = document.getElementById("spanner");
spanner.style.backgroundColor = "yellow";
document.documentElement.removeAttribute("class");
}
</script>
<style>
#column {
column-count: 1;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
}
</style>
<body onload="runTest();">
<article id="column">
<div>
<div>block1</div>
<h3 id="spanner">yellow spanner</h3>
<div>block2</div>
</div>
</article>
</body>
</html>