diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-multicol')
24 files changed, 631 insertions, 5 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-000-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-000-ref.html index 3d496cd391a..916f7161de6 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-000-ref.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-000-ref.html @@ -52,7 +52,7 @@ <div class="outer"> <div class="blueborders"></div> <div class="innerbg" style="left: 0"></div> - <div class="inner lefthalf" style="left: 0; height: 60px"> + <div class="inner lefthalf" style="left: 0"> AAAAA<br> BBBBB<br> CCCCC diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-000.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-000.html index 391985d6a89..98f808164e7 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-000.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-000.html @@ -5,6 +5,7 @@ <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"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> <link rel="match" href="multicol-breaking-000-ref.html"> <style> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-001-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-001-ref.html index 46357f940d2..db2b45c4dd6 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-001-ref.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-001-ref.html @@ -67,7 +67,7 @@ JJJJJ </div> <div class="innerbg" style="left: 204px"></div> - <div class="inner lefthalf" style="left: 204px; height: 80px"> + <div class="inner lefthalf" style="left: 204px"> KKKKK<br> LLLLL<br> MMMMM<br> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-001.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-001.html index 69c9049266d..e1ba9669233 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-001.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-001.html @@ -5,6 +5,7 @@ <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"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> <link rel="match" href="multicol-breaking-001-ref.html"> <style> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004-ref.html index 016885a9e64..f48ebb2108e 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004-ref.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004-ref.html @@ -77,7 +77,7 @@ </div> <div class="border-bottom" style="left: 0"></div> <div class="innerbg" style="left: 204px"></div> - <div class="inner lefthalf" style="left: 204px; height: 80px"> + <div class="inner lefthalf" style="left: 204px"> KKKKK<br> LLLLL<br> MMMMM<br> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004.html index 34b9f59137e..82931ac8516 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-004.html @@ -6,6 +6,7 @@ <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"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> <link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration"> <link rel="match" href="multicol-breaking-004-ref.html"> <style> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-000-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-000-ref.html index e7ebcff4a08..7a99354061c 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-000-ref.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-000-ref.html @@ -32,7 +32,7 @@ </style> <div class="outer"> - <div class="inner lefthalf" style="left: 0; height: 60px"> + <div class="inner lefthalf" style="left: 0"> AAAAA<br> BBBBB<br> CCCCC diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-000.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-000.html index a66a58fc746..768ec63298f 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-000.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-000.html @@ -5,6 +5,7 @@ <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"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> <link rel="match" href="multicol-breaking-nobackground-000-ref.html"> <style> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-001-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-001-ref.html index 006ec1d2221..ecba5cd0d9a 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-001-ref.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-001-ref.html @@ -46,7 +46,7 @@ IIIII<br> JJJJJ </div> - <div class="inner lefthalf" style="left: 204px; height: 80px"> + <div class="inner lefthalf" style="left: 204px"> KKKKK<br> LLLLL<br> MMMMM<br> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-001.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-001.html index d47fcd31a0a..78eda2331f0 100644 --- a/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-001.html +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-breaking-nobackground-001.html @@ -5,6 +5,7 @@ <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"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> <link rel="match" href="multicol-breaking-nobackground-001-ref.html"> <style> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-001-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-001-ref.html new file mode 100644 index 00000000000..29acc05a222 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-001-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<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="Mozilla" href="https://www.mozilla.org/"> + + <style> + .outer { + column-count: 2; + column-rule: 6px solid black; + column-fill: auto; + width: 400px; + height: 250px; + } + .inner { + column-count: 2; + column-rule: 3px solid gray; + column-fill: auto; + height: 200px; + } + .outer-block { + background-color: lightgreen; + height: 200px; + } + .inner-block { + background-color: lightblue; + height: 150px; + } + .space { + height: 50px; + } + </style> + + <article class="outer"> + <div class="outer-block"></div> + <div class="space"></div> + <article class="inner"> + <div class="inner-block"></div><div class="space"></div> + <div class="inner-block"></div><div class="space"></div> + </article> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-001.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-001.html new file mode 100644 index 00000000000..0491bd37f1a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<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="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"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> + <link rel="match" href="multicol-rule-nested-balancing-001-ref.html"> + <meta name="assert" content="This test verifies that the column-rules are extended to the content block-end edges of their corresponding inner and outer multicol container."> + + <style> + .outer { + column-count: 2; + column-rule: 6px solid black; + width: 400px; + height: 250px; + } + .inner { + column-count: 2; + column-rule: 3px solid gray; + height: 200px; + } + .outer-block { + background-color: lightgreen; + height: 200px; + } + .inner-block { + background-color: lightblue; + height: 300px; + } + </style> + + <article class="outer"> + <div class="outer-block"></div> + <article class="inner"> + <div class="inner-block"></div> + </article> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-002-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-002-ref.html new file mode 100644 index 00000000000..f5579661788 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-002-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<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="Mozilla" href="https://www.mozilla.org/"> + + <style> + .outer { + column-count: 2; + column-rule: 6px solid black; + column-fill: auto; + width: 400px; + height: 250px; + } + .inner { + column-count: 2; + column-rule: 3px solid gray; + column-fill: auto; + height: 200px; + } + .outer-block { + background-color: lightgreen; + height: 200px; + } + .inner-block { + background-color: lightblue; + height: 200px; + } + .space { + height: 50px; + } + </style> + + <article class="outer"> + <div class="outer-block"></div> + <div class="space"></div> + <article class="inner"> + <div class="inner-block"></div> + <div class="inner-block"></div> + </article> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-002.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-002.html new file mode 100644 index 00000000000..b38f90947a9 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-rule-nested-balancing-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<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="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"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> + <link rel="match" href="multicol-rule-nested-balancing-002-ref.html"> + <meta name="assert" content="This test verifies that the column-rules are extended to the content block-end edges of their corresponding inner and outer multicol container, where the inner container has height: auto."> + + <style> + .outer { + column-count: 2; + column-rule: 6px solid black; + width: 400px; + height: 250px; + } + .inner { + column-count: 2; + column-rule: 3px solid gray; + height: auto; + } + .outer-block { + background-color: lightgreen; + height: 200px; + } + .inner-block { + background-color: lightblue; + height: 400px; + } + </style> + + <article class="outer"> + <div class="outer-block"></div> + <article class="inner"> + <div class="inner-block"></div> + </article> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004a-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004a-ref.html new file mode 100644 index 00000000000..0d6d44cc076 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004a-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Test the block-size distribution across column-span split in a balancing multicol container</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + article { + column-count: 2; + width: 400px; + background-color: lightgreen; + } + div.container { + height: 200px; + background-color: pink; + } + div.block { + width: 100px; + height: 200px; + background-color: yellow; + } + div.column-span { + width: 400px; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <div class="container"> + <div class="block">block1</div> + </div> + </article> + <div class="column-span">column-span1</div> + <article> + <div class="container"> + <div class="block">block2</div> + </div> + </article> + <div class="column-span">column-span2</div> + <article> + <div class="container" style="height: 50px;"> + <div class="block">block3</div> + </div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004a.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004a.html new file mode 100644 index 00000000000..366ca33d078 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004a.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test the block-size distribution across column-span split in a balancing multicol container</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> + <link rel="match" href="multicol-span-all-children-height-004a-ref.html"> + <meta name="assert" content="This test verifies that a block container with a fixed block-size, split by column-span, distributes just enough block-size to hold its children."> + + <style> + article { + column-count: 2; + width: 400px; + background-color: lightgreen; + } + div.container { + height: 450px; + background-color: pink; + } + div.block { + width: 100px; + height: 200px; + background-color: yellow; + } + div.column-span { + column-span: all; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <!-- The container is split by the column-spans. + a) Before column-span1, it distributes 200px height into two columns, + and each column takes 100px height. + b) In between column-span1 and column-span2, same distribution as a). + c) After column-span2, it has 50px height left, which goes to the first + column. + --> + <div class="container"> + <!-- Each block spreads its height evenly into two columns, and + each column contains 100px height. --> + <div class="block">block1</div> + <div class="column-span">column-span1</div> + <div class="block">block2</div> + <div class="column-span">column-span2</div> + <div class="block">block3</div> + </div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004b-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004b-ref.html new file mode 100644 index 00000000000..c6412ceaf3d --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004b-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Test the block-size distribution across column-span split in a balancing multicol container</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + article { + column-count: 2; + width: 400px; + background-color: lightgreen; + } + div.container { + height: 200px; + background-color: pink; + } + div.block { + width: 100px; + height: 200px; + background-color: yellow; + } + div.column-span { + width: 400px; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <div class="container"> + <div class="block">block1</div> + </div> + </article> + <div class="column-span">column-span1</div> + <article> + <div class="container" style="height: 150px;"> + <div class="block">block2</div> + </div> + </article> + <div class="column-span">column-span2</div> + <article> + <div class="container" style="height: 0;"> + <div class="block">block3</div> + </div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004b.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004b.html new file mode 100644 index 00000000000..19202323047 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-004b.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test the block-size distribution across column-span split in a balancing multicol container</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> + <link rel="match" href="multicol-span-all-children-height-004b-ref.html"> + <meta name="assert" content="This test verifies that a block container with a fixed block-size, split by column-span, distributes just enough block-size to hold its children."> + + <style> + article { + column-count: 2; + width: 400px; + background-color: lightgreen; + } + div.container { + height: 350px; + background-color: pink; + } + div.block { + width: 100px; + height: 200px; + background-color: yellow; + } + div.column-span { + column-span: all; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <!-- The container is split by the column-spans. + a) Before column-span1, it distributes 200px height into two columns, + and each column takes 100px height. + b) In between column-span1 and column-span2, it has 150px left. The first + column takes 100px, and the second column takes 50px. + --> + <div class="container"> + <!-- Each block spreads its height evenly into two columns, and + each column contains 100px height. --> + <div class="block">block1</div> + <div class="column-span">column-span1</div> + <div class="block">block2</div> + <div class="column-span">column-span2</div> + <div class="block">block3</div> + </div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-005-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-005-ref.html new file mode 100644 index 00000000000..d5102e1f420 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-005-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Test the block-size distribution across column-span split in a column-fill:auto multicol container</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + article { + column-count: 1; + width: 200px; + background-color: lightgreen; + } + div.container { + background-color: pink; + } + div.block { + width: 100px; + height: 100px; + background-color: yellow; + } + div.column-span { + width: 200px; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <div class="container"> + <div class="block">block1</div> + </div> + </article> + <div class="column-span">column-span1</div> + <article> + <div class="container"> + <div class="block">block2</div> + </div> + </article> + <div class="column-span">column-span2</div> + <article> + <div class="container" style="height: 50px;"> + <div class="block">block3</div> + </div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-005.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-005.html new file mode 100644 index 00000000000..33a820d32c5 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-005.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test the block-size distribution across column-span split in a column-fill:auto multicol container</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> + <link rel="match" href="multicol-span-all-children-height-005-ref.html"> + <meta name="assert" content="This test verifies that a block container with a fixed block-size, split by column-span, distributes just enough block-size to hold its children."> + + <style> + article { + column-count: 1; + column-fill: auto; + width: 200px; + background-color: lightgreen; + } + div.container { + height: 250px; + background-color: pink; + } + div.block { + width: 100px; + height: 100px; + background-color: yellow; + } + div.column-span { + column-span: all; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <!-- The container is split by the column-spans. + a) Before column-span1, it distributes 100px height into the sole column. + b) In between column-span1 and column-span2, same distribution as a). + c) After column-span2, it has 50px height left. + --> + <div class="container"> + <div class="block">block1</div> + <div class="column-span">column-span1</div> + <div class="block">block2</div> + <div class="column-span">column-span2</div> + <div class="block">block3</div> + </div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-006-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-006-ref.html new file mode 100644 index 00000000000..e34036b008b --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-006-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Test the borders drawing for a block split by column-span</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + article { + column-count: 2; + width: 400px; + background-color: lightgreen; + } + div.container { + background-color: pink; + border: 20px solid purple; + } + div.block { + /* This block spreads evenly into two columns, each has 100px height. */ + width: 100px; + height: 200px; + background-color: yellow; + } + div.column-span { + width: 400px; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <div class="container" style="border-bottom: none; height: 200px;"> + <div class="block">block1</div> + </div> + </article> + <div class="column-span">column-span1</div> + <article> + <div class="container" style="border-top: none; height: 50px;"> + <div class="block">block2</div> + </div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-006.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-006.html new file mode 100644 index 00000000000..dd63cd8716f --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-children-height-006.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test the borders drawing for a block split by column-span</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> + <link rel="match" href="multicol-span-all-children-height-006-ref.html"> + <meta name="assert" content="This test verifies that the borders of block container with a fixed block-size, split by column-span, are skipped on the sides adjacent to column-span."> + + <style> + article { + column-count: 2; + width: 400px; + background-color: lightgreen; + } + div.container { + height: 250px; + background-color: pink; + border: 20px solid purple; + } + div.block { + width: 100px; + height: 200px; + background-color: yellow; + } + div.column-span { + column-span: all; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <div class="container"> + <div class="block">block1</div> + <div class="column-span">column-span1</div> + <div class="block">block2</div> + </div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-rule-001-ref.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-rule-001-ref.html new file mode 100644 index 00000000000..0ab9ac55345 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-rule-001-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test the column-rule's block-size</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + article { + column-count: 2; + column-rule: 6px solid; + width: 400px; + height: 500px; + background-color: lightgreen; + border: 2em solid purple; + padding: 2em; + } + div.block { + width: 100px; + height: 200px; + } + div.column-span { + column-span: all; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <div class="block">block1</div> + <div class="column-span">column-span1</div> + <div class="block">block2</div> + <div class="column-span">column-span2</div> + <div class="block" style="height: 400px;">block3</div> + </article> +</html> diff --git a/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-rule-001.html b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-rule-001.html new file mode 100644 index 00000000000..215aa567409 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-multicol/multicol-span-all-rule-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test the column rule's block-size</title> + <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://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-multicol-1/#column-gaps-and-rules"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> + <link rel="match" href="multicol-span-all-rule-001-ref.html"> + <meta name="assert" content="This test verifies that the column-rule after the last column-span is extended to the content block-end edge of the multicol container."> + + <style> + article { + column-count: 2; + column-rule: 6px solid; + width: 400px; + height: 500px; + background-color: lightgreen; + border: 2em solid purple; + padding: 2em; + } + div.block { + width: 100px; + height: 200px; + } + div.column-span { + column-span: all; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <!-- Each block spreads its height evenly into two columns, and + each column contains 100px height. --> + <div class="block">block1</div> + <div class="column-span">column-span1</div> + <div class="block">block2</div> + <div class="column-span">column-span2</div> + <!-- The column rule after column-span2 should extend to the content edge + of the multicol container as if block3 has "height: 400px;" --> + <div class="block">block3</div> + </article> +</html> |