mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
Update web-platform-tests to revision 6856483bcc86322198f10e0c42385a7f9127eb66
This commit is contained in:
parent
b1a2b6b5bf
commit
ff06f1d031
265 changed files with 7539 additions and 988 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue