Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 08:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

Browse source
This commit is contained in:
WPT Sync Bot 2021-09-07 11:16:33 +00:00 • committed by cybai
parent 35e95f55a1
commit 58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
Download patch file Download diff file Expand all files Collapse all files

29
tests/wpt/web-platform-tests/css/css-multicol/abspos-after-spanner-static-pos.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<title>Abspos element after a column spanner</title>
<link rel="help" href="href=https://drafts.csswg.org/css-multicol/">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
columns: 2;
column-fill: auto;
column-gap: 0px;
width: 400px;
margin-top: -60px;
margin-left: -200px;
}
.abs {
position: absolute;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 70px;"></div>
<div style="column-span: all; height: 10px;"></div>
<div style="height: 35px;"></div>
<div style="height: 15px;"></div>
<div class="abs"></div>
<div style="height: 20px; width: 100px; background: red;"></div>
</div>

25
tests/wpt/web-platform-tests/css/css-multicol/abspos-after-spanner.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<title>Abspos element after a column spanner</title>
<link rel="help" href="href=https://drafts.csswg.org/css-multicol/">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
columns: 2;
column-fill: auto;
column-gap: 0px;
margin-top: -10px;
}
.abs {
position: absolute;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="column-span: all; height: 10px;"></div>
<div class="abs"></div>
<div style="height: 30px; width: 30px; background-color: red;"></div>
<div style="height: 70px;"></div>
</div>

10
tests/wpt/web-platform-tests/css/css-multicol/abspos-autopos-contained-by-viewport-000.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div style="height:120px; background:green;"></div>
<div style="position:absolute; width:50px; height:80px; background:green;"></div>
</div>

12
tests/wpt/web-platform-tests/css/css-multicol/abspos-autopos-contained-by-viewport-001.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-height">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;">
<div>
<div style="height:120px; background:green;"></div>
<div style="position:absolute; width:50px; height:80px; background:green;"></div>
</div>
</div>

2
tests/wpt/web-platform-tests/css/css-multicol/column-balancing-paged-001-print-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test fragmentation for a nested multi-column container with column-span in paginated context</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/column-balancing-paged-001-print.html
View file

@ -3,7 +3,7 @@
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test fragmentation for a nested multi-column container with column-span in paginated context</title>
<link rel="match" href="column-balancing-paged-001-print-ref.html">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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://drafts.csswg.org/css-break/#breaking-rules">

27
tests/wpt/web-platform-tests/css/css-multicol/column-balancing-with-overflow-auto-crash.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1240384">
<style>
#multicol {
column-count: 2;
column-gap: 5px;
width: 200px;
}
#container {
position: relative;
box-sizing: border-box;
width: 50px;
overflow: auto;
}
#abs {
position: absolute;
width: 20px;
height: 200px;
}
</style>
<p>PASS if no crash.</p>
<div id="multicol">
<div id="container">
<div id="abs"></div>
<div style="height: 100px; width: 30px;"></div>
</div>
</div>

28
tests/wpt/web-platform-tests/css/css-multicol/column-balancing-with-span-and-oof-001.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="help" href="https://drafts.csswg.org/css-break/#breaking-rules">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
width: 100px;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
top: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div id="multicol">
<div style="position: relative;">
<div style="height: 100px;"></div>
<div class="abs"></div>
</div>
<div style="column-span: all;"></div>
<div style="height: 100px;"></div>
</div>

27
tests/wpt/web-platform-tests/css/css-multicol/column-balancing-with-span-and-oof-002.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="help" href="https://drafts.csswg.org/css-break/#breaking-rules">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
width: 100px;
}
#abs {
position: absolute;
width: 50px;
height: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div id="multicol">
<div style="position: relative;">
<div style="height: 100px; background: green;"></div>
<div id="abs"></div>
</div>
<div style="column-span: all;"></div>
<div style="height: 100px;"></div>
</div>

15
tests/wpt/web-platform-tests/css/css-multicol/crashtests/multicol-cached-consumed-bsize-crash.html Normal file
View file

@ -0,0 +1,15 @@
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1715098">
<style>
:not(table) {
column-width: 0;
margin-right: 91%;
}
#a {
column-span: all;
display: -webkit-box;
}
</style>
<textarea>a</textarea>
<del>a</del>
<q style="float: left">a</q>
<br id="a"></br>

37
tests/wpt/web-platform-tests/css/css-multicol/crashtests/multicol-dynamic-contain-crash.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<link rel="help" href="https://crbug.com/965639">
<style>
#multicol {
columns: 2;
column-fill: auto;
height: 50px;
background: orange;
}
#container {
contain: strict;
width: 100px;
height: 100px;
background: blue;
}
#target {
width: 100px;
height: 100px;
position: absolute;
background: purple;
}
.transform {
transform: translate(0, 50px);
}
</style>
<body>
<div id="multicol">
<div id="container">
<div id="target"></div>
</div>
</div>
<script>
document.body.offsetTop;
target.appendChild(document.createTextNode('a'));
</script>
</body>

31
tests/wpt/web-platform-tests/css/css-multicol/crashtests/multicol-dynamic-transform-crash.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<link rel="help" href="https://crbug.com/965639">
<style>
#container {
columns: 2;
column-fill: auto;
background: orange;
height: 50px;
}
#target {
width: 100px;
height: 100px;
background: purple;
position: absolute;
}
.transform {
transform: translate(0, 50px);
}
</style>
<body>
<div id="container">
<div style="position: relative">
<div id="target"></div>
</div>
</div>
<script>
document.body.offsetTop;
target.classList.add('transform');
</script>
</body>

20
tests/wpt/web-platform-tests/css/css-multicol/crashtests/multicol-floats-after-column-span-crash.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html id="a">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1674011">
<style>
:not(animateTransform) { columns: 1px }
</style>
<script>
function go() {
a.appendChild(b)
}
function eh() {
a.appendChild(c)
}
</script>
<body onload=go()>
<data id="b">x</command>
<dir style="column-span: all">x</dir>
<details id="c" ontoggle="eh()" open="">x</details>
<iframe align="right">x</iframe>

43
tests/wpt/web-platform-tests/css/css-multicol/fixed-in-multicol-with-transform-container.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<title>
Nested fixedpos static position in a multicol with transform containing
block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -350px;
margin-top: -200px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.fixed {
position: fixed;
width: 100px;
height: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="transform: translateX(0);">
<div style="height: 100px; width: 100px; background-color: red;"></div>
<div class="multicol">
<div class="rel">
<div style="height: 400px;"></div>
<div class="abs">
<div style="height: 400px;"></div>
<div class="fixed"></div>
</div>
</div>
</div>
</div>

52
tests/wpt/web-platform-tests/css/css-multicol/fixed-in-nested-multicol-with-transform-container.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<title>
Nested fixedpos static position in a nested multicol with transform containing
block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
margin-top: -200px;
margin-left: -275px;
}
#inner {
width: 50px;
height: 400px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.fixed {
position: fixed;
width: 100px;
height: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="transform: translateX(0);">
<div style="height: 100px; width: 100px; background-color: red;"></div>
<div class="multicol" id="outer">
<div style="height: 200px;"></div>
<div class="multicol" id="inner">
<div class="rel">
<div style="height: 400px;"></div>
<div class="abs">
<div style="height: 400px; width:25px;"></div>
<div class="fixed"></div>
</div>
</div>
</div>
</div>
</div>

46
tests/wpt/web-platform-tests/css/css-multicol/fixed-in-nested-multicol-with-viewport-container.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a nested fragmentation context with viewport containing
block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
}
#inner {
width: 50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
height: 400px;
width: 25px;
background: red;
}
.fixed {
position: fixed;
height: 100px;
width: 100px;
background:green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div class="rel">
<div class="abs">
<div class="fixed"></div>
</div>
</div>
</div>
</div>

46
tests/wpt/web-platform-tests/css/css-multicol/fixed-in-nested-multicol.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a nested fragmentation context where the outer
multicol is the containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
transform: translateX(0);
}
#inner {
width: 50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.fixed {
position: fixed;
height: 100px;
width: 100px;
top: -100px;
background:green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="height: 100px; width: 100px; background: red;"></div>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div class="rel">
<div class="abs">
<div class="fixed"></div>
</div>
</div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-001.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<title>
Nested fixedpos static position in a multicol with viewport containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
width: 50px;
height: 100px;
margin-top: -100px;
margin-left: -175px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 25px;
height: 400px;
}
.fixed {
position: fixed;
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel">
<div style="height: 400px;"></div>
<div class="abs">
<div style="height: 400px;"></div>
<div class="fixed" style="background: green;"></div>
</div>
</div>
</div>
<div class="fixed" style="background: red; z-index: -1;"></div>

41
tests/wpt/web-platform-tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-002.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a multicol with viewport containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
width: 50px;
height: 100px;
margin-top: -100px;
margin-left: -50px;
}
.rel {
position: relative;
height: 300px;
}
.abs {
position: absolute;
width: 25px;
}
.fixed {
position: fixed;
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div class="rel">
<div style="height: 100px;"></div>
<div class="abs">
<div style="height: 200px;"></div>
<div class="fixed" style="background: green;"></div>
</div>
</div>
</div>
<div class="fixed" style="background: red; z-index: -1;"></div>

48
tests/wpt/web-platform-tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-003.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<title>
Nested fixedpos in a nested multicol with viewport containing block.
</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
}
#outer {
height: 100px;
width: 100px;
margin-top: -100px;
margin-left: -50px;
}
#inner {
width: 50px;
height: 100px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 25px;
}
.fixed {
position: fixed;
width: 100px;
height: 100px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" id="outer">
<div class="multicol" id="inner">
<div class="rel">
<div style="height: 100px;"></div>
<div class="abs">
<div style="height: 200px;"></div>
<div class="fixed" style="background: green;"></div>
</div>
</div>
</div>
<div class="fixed" style="background: red; z-index: -1; left: 8px;"></div>
</div>

5
tests/wpt/web-platform-tests/css/css-multicol/increase-prev-sibling-height.html
View file

@ -1,4 +1,5 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1066640">
@ -11,7 +12,9 @@
<script>
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{
elm.style.height = "2em";
elm.style.height = "2em";
document.documentElement.classList.remove("reftest-wait");
});
});
</script>
</html>

12
tests/wpt/web-platform-tests/css/css-multicol/intrinsic-size-002.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="width:fit-content; columns:3; background:green;">
<div style="column-span:all;">
<div style="width:100px; height:100px;"></div>
</div>
</div>
</div>

19
tests/wpt/web-platform-tests/css/css-multicol/intrinsic-size-003.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">
<meta name="assert" content="Spanners may be nested inside blocks, as long as none of them establish a new formatting context">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="width:fit-content; columns:3; background:green;">
<div>
<div>
<div>
<div style="column-span:all;">
<div style="width:100px; height:100px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>

15
tests/wpt/web-platform-tests/css/css-multicol/intrinsic-size-004.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">
<meta name="assert" content="Spanners may be not be nested formatting context roots - then the element becomes regular column content">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="width:fit-content; columns:4; column-gap:0; background:green;">
<div style="display:flow-root;">
<div style="column-span:all;">
<div style="width:25px; height:400px;"></div>
</div>
</div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-multicol/intrinsic-size-005.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="width:fit-content; columns:4; column-gap:0; height:100%; background:green;">
<div style="column-span:all; height:100%; aspect-ratio:1/1;"></div>
</div>
</div>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004-ref.html
View file

@ -2,7 +2,7 @@
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004.html
View file

@ -2,7 +2,7 @@
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-005-ref.html
View file

@ -2,7 +2,7 @@
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-005.html
View file

@ -2,7 +2,7 @@
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-004-ref.html
View file

@ -2,7 +2,7 @@
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-004.html
View file

@ -2,7 +2,7 @@
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-005-ref.html
View file

@ -2,7 +2,7 @@
<title>CSS Test Reference: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-005.html
View file

@ -2,7 +2,7 @@
<title>CSS Test: breaking of a multicolumn</title>
<meta charset="utf-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-dynamic-add-001-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Append a block to an empty inline element</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-dynamic-add-001.html
View file

@ -2,7 +2,7 @@
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Append a block to an empty inline element</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level">

14
tests/wpt/web-platform-tests/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001-ref.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html>
<title>CSS Test reference</title>
<style>
input { -moz-appearance: none; -webkit-appearance: none; appearance: none; }
</style>
<div style="column-count: 2">
a<br>
<input>
<div style="page-break-inside: avoid; break-inside: avoid;">
b
<div><input id="editme" value="Am I clipped?"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html class="tweak reftest-wait">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-break/#break-within">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1721262">
<link rel="match" href="multicol-dynamic-change-inside-break-inside-avoid-001-ref.html">
<style>
input { -moz-appearance: none; -webkit-appearance: none; appearance: none; }
.tweak input {
border: 3px solid red;
}
</style>
<div style="column-count: 2">
a<br>
<input>
<div style="page-break-inside: avoid; break-inside: avoid;">
b
<div><input id="editme" value="."></div>
</div>
</div>
<script>
function paint() {
return new Promise(resolve => {
requestAnimationFrame(() => requestAnimationFrame(resolve));
});
}
(async function() {
await paint();
document.documentElement.classList.remove("tweak");
await paint();
document.getElementById("editme").value = "Am I clipped?";
document.documentElement.classList.remove("reftest-wait");
})();
</script>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-auto-block-children-003-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: 'column-fill: auto' and height constrained of a multi-column container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-auto-block-children-003.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: 'column-fill: auto' and height constrained of a multi-column container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
<link rel="match" href="multicol-fill-auto-block-children-003-ref.html">

25
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-balance-007.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
<style>
#container {
position: relative;
columns: 2;
width: 100px;
column-gap: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square below.</p>
<div id="container" data-expected-height="100">
<div style="break-after:column; height:10px;"></div>
<div style="break-after:column; height:10px;"></div>
<div style="break-after:column; height:10px;"></div>
<div data-offset-x="150" style="contain:size; height:100px;"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>

24
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-balance-008.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1193966">
<style>
#container {
columns: 2;
width: 100px;
column-gap: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square below.</p>
<div id="container" data-expected-height="100">
<div style="padding:25px 0;">
<div style="contain:size; height:50px;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>

24
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-balance-009.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
<style>
#container {
columns: 4;
width: 100px;
column-gap: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square below.</p>
<div id="container" data-expected-height="100">
<div style="margin-top:50px;">
<div style="contain:size; height:50px;"></div>
<div style="contain:size; height:25px;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>

21
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-balance-010.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
<style>
#container {
columns: 2;
width: 100px;
column-gap: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square below.</p>
<div id="container" data-expected-height="100">
<div style="padding-top:50px; border-top:50px solid green;"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>

21
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-balance-011.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
<style>
#container {
columns: 2;
width: 100px;
column-gap: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square below.</p>
<div id="container" data-expected-height="100">
<div style="padding-bottom:50px; border-bottom:50px solid green;"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>

24
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-balance-012.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
<style>
#container {
columns: 10;
width: 100px;
column-gap: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square below.</p>
<div id="container" data-expected-height="100">
<div style="padding:40px 0; border-style:solid; border-color:green; border-width:40px 0;">
<div style="contain:size; height:20px;"></div>
<div style="contain:size; height:20px;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>

23
tests/wpt/web-platform-tests/css/css-multicol/multicol-fill-balance-013.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
<style>
#container {
columns: 10;
width: 100px;
column-gap: 0;
background: green;
}
</style>
<p>Test passes if there is a filled green square below.</p>
<div id="container" data-expected-height="100">
<div style="padding:20px 0; border-style:solid; border-color:green; border-width:20px 0;">
<div style="contain:size; height:20px;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>

3
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-001.xht
View file

@ -28,6 +28,7 @@
{
margin-left: 1em;
padding: 0em;
list-style-type: "X";
}
span {display: block;}
@ -50,4 +51,4 @@
</ul>
</body>
</html>
</html>

6
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-003-ref.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<div style="display:list-item; width:490px; margin:50px;">
<div style="height:100px;"></div>
&larr; Marker here
</div>

9
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-003.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="match" href="multicol-list-item-003-ref.html">
<div style="display:list-item; columns:3; column-gap:20px; width:490px; margin:50px;">
<div style="height:150px;"></div>
<div style="column-span:all; height:50px;"></div>
&larr; Marker here
</div>

7
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-004-ref.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<div style="display:list-item; margin:50px;">
<div style="height:50px;"></div>
<div style="height:50px;">&larr; Marker here</div>
Marker NOT here
</div>

9
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-004.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="match" href="multicol-list-item-004-ref.html">
<div style="display:list-item; columns:3; column-gap:20px; width:490px; margin:50px;">
<div style="height:150px;"></div>
<div style="column-span:all; height:50px;">&larr; Marker here</div>
Marker NOT here
</div>

7
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-005-ref.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<div style="display:list-item; margin:50px;">
<div style="height:100px;"></div>
<div style="height:50px;">&larr; Marker here.</div>
Marker NOT here
</div>

10
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-005.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="match" href="multicol-list-item-005-ref.html">
<div style="display:list-item; columns:2; column-gap:20px; width:320px; margin:50px;">
<div style="height:100px;"></div>
<div style="column-span:all; height:50px;"></div>
<div style="column-span:all; height:50px;">&larr; Marker here.</div>
Marker NOT here
</div>

4
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-006-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<div style="position:absolute; left:40px; top:30px;">&darr; Marker here.</div>
<div style="display:list-item; margin:50px;"></div>

10
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-006.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="match" href="multicol-list-item-006-ref.html">
<div style="position:absolute; left:40px; top:30px;">&darr; Marker here.</div>
<div style="display:list-item; columns:2; column-gap:20px; width:320px; margin:50px;">
<div style="height:100px;"></div>
<div style="column-span:all; height:50px;"></div>
<div style="height:100px;"></div>
</div>

5
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-007-ref.html Normal file
View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<div style="display:list-item; list-style-position:inside;">
List item markes should render identically, regardless of multicol.
</div>

7
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-007.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="match" href="multicol-list-item-007-ref.html">
<div style="columns:1; display:list-item; list-style-position:inside;">
List item markes should render identically, regardless of multicol.
</div>

21
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-008-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<style>
#columns {
font-size: 20px;
line-height: 50px;
columns: 2;
column-fill: auto;
width: 200px;
height: 100px;
margin-left: 50px;
}
#li {
display: list-item;
}
</style>
<div id="columns">
<div style="height: 100px">Normal</div>
<div id="li">
<div>List item</div>
</div>
</div>

25
tests/wpt/web-platform-tests/css/css-multicol/multicol-list-item-008.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/">
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
<link rel="match" href="multicol-list-item-008-ref.html">
<style>
#columns {
font-size: 20px;
line-height: 50px;
columns: 2;
column-fill: auto;
width: 200px;
height: 100px;
margin-left: 50px;
}
#li {
display: list-item;
}
</style>
<div id="columns">
<div style="height: 80px">Normal</div>
<div id="li">
<div style="height: 10px"></div>
<div>List item</div>
</div>
</div>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-margin-003.html
View file

@ -2,7 +2,7 @@
<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="Ting-Yu Lin" href="mailto: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">

15
tests/wpt/web-platform-tests/css/css-multicol/multicol-nested-007.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; column-fill:auto; column-gap:0; height:160px; orphans:2; widows:2;">
<div style="height:100px; background:green;"></div>
<div style="columns:2; column-fill:auto; column-gap:0; height:100px;">
<div style="display:inline-block; vertical-align:top; width:200%; height:50px; background:green;"></div><br>
<div style="display:inline-block; vertical-align:top; width:200%; height:50px; background:green;"></div><br>
</div>
</div>
</div>

14
tests/wpt/web-platform-tests/css/css-multicol/multicol-nested-008.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-within">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; column-fill:auto; column-gap:0; height:160px; orphans:2; widows:2;">
<div style="height:100px; background:green;"></div>
<div style="columns:2; column-fill:auto; column-gap:0; height:100px;">
<div style="break-inside:avoid; width:200%; height:100px; background:green;"></div><br>
</div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-multicol/multicol-nested-009.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; column-fill:auto; column-gap:0; height:120px;">
<div style="height:100px; background:green;"></div>
<div style="columns:2; column-fill:auto; column-gap:0; height:100px; background:red;">
<div style="vertical-align:top; display:inline-block; width:200%; height:100px; background:green;"></div>
</div>
</div>

13
tests/wpt/web-platform-tests/css/css-multicol/multicol-nested-010.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; column-fill:auto; column-gap:0; height:120px;">
<div style="height:100px; background:green;"></div>
<div style="columns:2; column-fill:auto; column-gap:0; height:100px; background:red;">
<div style="contain:size; width:200%; height:100px; background:green;"></div>
</div>
</div>

12
tests/wpt/web-platform-tests/css/css-multicol/multicol-nested-011.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<div style="columns:2; column-fill:auto; column-gap:0; height:50px;">
<div style="columns:2; column-fill:auto; column-gap:0; height:100px;">
<div style="contain:size; width:400%; height:100px; background:green;"></div>
</div>
</div>

33
tests/wpt/web-platform-tests/css/css-multicol/multicol-nested-012.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model">
<style>
.mc {
columns: 2;
column-gap: 0;
}
.outer {
position: relative;
column-fill: auto;
width: 64px;
height: 40px;
font: 16px/32px monospace;
text-align: right;
}
</style>
<p>The word "WIN" should be seen below.</p>
<div class="mc outer">
<div data-offset-x="0" data-offset-y="0">W</div>
<div class="mc">
<div data-offset-x="32" data-offset-y="0">
<span data-offset-x="32" data-offset-y="0" style="display:inline-block; width:100%;">I</span>
</div>
<div data-offset-x="48" data-offset-y="0" style="break-before:column;">N</div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout(".outer");
</script>

20
tests/wpt/web-platform-tests/css/css-multicol/multicol-nested-column-rule-002.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-gaps-and-rules">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<style>
.multicol {
column-fill: auto;
column-gap: 4px;
column-rule:4px solid green;
background:red;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol" style="columns:2; width:100px; height:100px;">
<div class="multicol" style="columns:4;">
<div style="position:relative; height:450px;">
<div style="position:absolute; width:9px; height:800px; background:green;"></div>
</div>
</div>
</div>

67
tests/wpt/web-platform-tests/css/css-multicol/multicol-overflow-positioned-transform-001.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column: Scrollable Overflow Transform Dynamic Positioned Element</title>
<link rel="author" titlae="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-multicol/" />
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow on a positioned element in a multicol.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.container {
position: absolute;
width: 100px;
height: 100px;
overflow: auto;
background: silver;
border: solid thick;
}
.element {
width: 50px;
height: 50px;
background: lime;
}
</style>
<div style="column-count: 2;">
<div style="position: relative;">
<div id="container1" style="top: 0px;" class="container">
<div id="element1" style="transform: translateX(20px);" class="element"></div>
</div>
<div id="container2" style="top: 150px;" class="container">
<div id="element2" style="transform: translateY(30px);" class="element"></div>
</div>
<div id="container3" style="top: 300px;" class="container">
<div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
</div>
</div>
</div>
<script>
test(() => {
assert_equals(container1.scrollWidth, 100);
element1.style.transform = "translateX(200px)";
assert_equals(container1.scrollWidth, 250);
}, "Check scrollWidth before and after transform chage");
test(() => {
assert_equals(container2.scrollHeight, 100);
element2.style.transform = "translateY(300px)";
assert_equals(container2.scrollHeight, 350);
}, "Check scrollHeight before and after transform chage");
test(() => {
assert_equals(container3.scrollWidth, 100);
assert_equals(container3.scrollHeight, 100);
element3.style.transform = "translate(200px, 300px)";
assert_equals(container3.scrollWidth, 250);
assert_equals(container3.scrollHeight, 350);
}, "Check scrollWidth and scrollHeight before and after transform chage");
</script>

66
tests/wpt/web-platform-tests/css/css-multicol/multicol-overflow-transform-001.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column: Scrollable Overflow Transform Dynamic</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-multicol/" />
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow on an element in a multicol.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.container {
width: 100px;
height: 100px;
overflow: auto;
background: silver;
border: solid thick;
}
.element {
width: 50px;
height: 50px;
background: lime;
}
</style>
<div style="column-count: 2;">
<div style="position: relative;">
<div id="container1" class="container">
<div id="element1" style="transform: translateX(20px);" class="element"></div>
</div>
<div id="container2" class="container">
<div id="element2" style="transform: translateY(30px);" class="element"></div>
</div>
<div id="container3" class="container">
<div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
</div>
</div>
</div>
<script>
test(() => {
assert_equals(container1.scrollWidth, 100);
element1.style.transform = "translateX(200px)";
assert_equals(container1.scrollWidth, 250);
}, "Check scrollWidth before and after transform chage");
test(() => {
assert_equals(container2.scrollHeight, 100);
element2.style.transform = "translateY(300px)";
assert_equals(container2.scrollHeight, 350);
}, "Check scrollHeight before and after transform chage");
test(() => {
assert_equals(container3.scrollWidth, 100);
assert_equals(container3.scrollHeight, 100);
element3.style.transform = "translate(200px, 300px)";
assert_equals(container3.scrollWidth, 250);
assert_equals(container3.scrollHeight, 350);
}, "Check scrollWidth and scrollHeight before and after transform chage");
</script>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-001-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested balancing multicol container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-001.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test the column rules' block-size with nested balancing multicol container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-002-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested balancing multicol container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-002.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test the column rules' block-size with nested balancing multicol container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-003-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested balancing multicol container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-003.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test the column rules' block-size with nested balancing multicol container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-004-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested balancing multicol container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-004.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test the column rules' block-size with nested balancing multicol container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cf">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules">

8
tests/wpt/web-platform-tests/css/css-multicol/multicol-scroll-content-ref.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<div style="overflow: scroll; width: 100px; height: 150px; background: green">
<div style="width: 400px; height: 400px"></div>
</div>
<div style="overflow: scroll; width: 100px; height: 150px;
position: relative; top: -50px; left: 100px; background: green">
<div style="width: 400px; height: 400px"></div>
</div>

15
tests/wpt/web-platform-tests/css/css-multicol/multicol-scroll-content.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<title>CSS Test: Multi-column element with scrolled content</title>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
<link rel="match" href="multicol-scroll-content-ref.html"/>
<div style="columns: 2; width: 200px; height: 100px; column-gap: 0">
<div style="overflow: scroll; height: 150px; background: red">
<div style="width: 400px; height: 400px; background: green; position: relative"></div>
</div>
</div>
<div style="columns: 2; width: 200px; height: 100px; column-gap: 0">
<div style="height: 100px"></div>
<div style="overflow: scroll; height: 150px; background: red">
<div style="width: 400px; height: 400px; background: green; position: relative"></div>
</div>
</div>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-004-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: column-span:all should act like column-span:none in different block formatting context</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-004.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: column-span:all should act like column-span:none in different block formatting context</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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-004-ref.html">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-005-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test column-span:all with various display types</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-005.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test column-span:all with various display types</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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-005-ref.html">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-006-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test column-span:all under HTML details tag</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-006.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test column-span:all under HTML details tag</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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-006-ref.html">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-007-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test column-span:all when the body tag is the multi-column container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-007.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test column-span:all when the body tag is the multi-column container</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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-007-ref.html">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-008-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test a bidi-override multi-column container with a dir=rtl column-span:all child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-008.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a bidi-override multi-column container with a dir=rtl column-span:all child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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-008-ref.html">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-009-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test the multicol element is the containing block of absolute elements</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-009.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test the multicol element is the containing block of absolute elements</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-010-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test the position of the out-of-flow block is relative to the fragment divided by column-span:all</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-010.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test the position of the out-of-flow block is relative to the later fragment divided by the column-span:all</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-011-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test Reference: Test a bidi-override multi-column container with a dir=rtl column-span:all child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-011.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a bidi-override multi-column container with a dir=rtl column-span:all child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto: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-011-ref.html">

17
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-016.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Height of container with a column spanner descendant.</title>
<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<div id="multicol" style="columns:2;">
<div id="container" style="height:100px; width:0px;" data-expected-bounding-client-rect-height="50">
<div style="column-span:all;"></div>
</div>
</div>
<script>
checkLayout('#container');
</script>

18
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-017-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
article {
column-count: 1;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
/* "column-count: 1" makes this behave like a real spanner. */
outline: 1px solid blue;
}
</style>
<article>
<h3>spanner</h3>
</article>

28
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-017.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test column-span:all inside a transform</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#the-multi-column-model">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="multicol-span-all-017-ref.html">
<meta name="assert" content="This test checks that the spanner propagates past the transform to the multicol.">
<style>
article {
column-count: 3;
column-rule: 6px solid;
width: 400px;
outline: 1px solid black;
}
h3 {
column-span: all;
outline: 1px solid blue;
}
</style>
<article>
<!-- "transform" doesn't create a new block formatting context, so
column-span:all still works. -->
<div style="transform: scale(1)">
<h3>spanner</h3>
</div>
</article>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-button-001-ref.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a multi-column container on button works with a column-span:all child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<style>

2
tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-button-001.html
View file

@ -2,7 +2,7 @@
<html>
<meta charset="utf-8">
<title>CSS Multi-column Layout Test: Test a multi-column container on button works with a column-span:all child</title>
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
<link rel="match" href="multicol-span-all-button-001-ref.html">

Some files were not shown because too many files have changed in this diff Show more