Commit f038ea34 authored by Chromium WPT Sync's avatar Chromium WPT Sync Committed by Commit Bot

Import wpt@a996d2028df7fe48935f1e8303cbd49dfb6a59d7

Using wpt-import in Chromium 7963defb.
With Chromium commits locally applied on WPT:
270d4abd "ServiceWorker: Add new WPT tests to make sure to update a registration with different script type and identical script content."


Note to sheriffs: This CL imports external tests and adds
expectations for those tests; if this CL is large and causes
a few new failures, please fix the failures by adding new
lines to TestExpectations rather than reverting. See:
https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md

Directory owners for changes in this CL:
mstensho@chromium.org:
  external/wpt/css/css-multicol

NOAUTOREVERT=true
TBR=robertma

No-Export: true
Change-Id: I19c1f1a503fec2ad9086489fb20d598cb03b8a1b
Reviewed-on: https://chromium-review.googlesource.com/c/1328706
Commit-Queue: WPT Autoroller <wpt-autoroller@chops-service-accounts.iam.gserviceaccount.com>
Reviewed-by: default avatarWPT Autoroller <wpt-autoroller@chops-service-accounts.iam.gserviceaccount.com>
Cr-Commit-Position: refs/heads/master@{#606769}
parent 99c07a8c
......@@ -2891,6 +2891,7 @@ crbug.com/893480 external/wpt/infrastructure/testdriver/actions/eventOrder.html
crbug.com/893480 external/wpt/infrastructure/testdriver/actions/multiDevice.html [ Failure ]
# ====== New tests from wpt-importer added here ======
crbug.com/626703 external/wpt/css/css-multicol/multicol-span-all-restyle-003.html [ Failure ]
crbug.com/626703 external/wpt/css/css-scoping/slotted-placeholder.html [ Failure ]
crbug.com/626703 external/wpt/css/filter-effects/filter-grayscale-003.html [ Failure ]
crbug.com/626703 external/wpt/css/filter-effects/filter-grayscale-002.html [ Failure ]
......
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment