diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-multicol | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-multicol')
803 files changed, 25841 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-multicol/META.yml b/testing/web-platform/tests/css/css-multicol/META.yml new file mode 100644 index 0000000000..cc95000ec5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-multicol/ +suggested_reviewers: + - frivoal + - mstensho + - rachelandrew diff --git a/testing/web-platform/tests/css/css-multicol/abspos-after-spanner-static-pos.html b/testing/web-platform/tests/css/css-multicol/abspos-after-spanner-static-pos.html new file mode 100644 index 0000000000..d257016a25 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/abspos-after-spanner-static-pos.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>Abspos element after a column spanner</title> +<link rel="help" 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> diff --git a/testing/web-platform/tests/css/css-multicol/abspos-after-spanner.html b/testing/web-platform/tests/css/css-multicol/abspos-after-spanner.html new file mode 100644 index 0000000000..98664b50cc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/abspos-after-spanner.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Abspos element after a column spanner</title> +<link rel="help" 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> diff --git a/testing/web-platform/tests/css/css-multicol/abspos-autopos-contained-by-viewport-000.html b/testing/web-platform/tests/css/css-multicol/abspos-autopos-contained-by-viewport-000.html new file mode 100644 index 0000000000..8dbf5215b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/abspos-autopos-contained-by-viewport-000.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/abspos-autopos-contained-by-viewport-001.html b/testing/web-platform/tests/css/css-multicol/abspos-autopos-contained-by-viewport-001.html new file mode 100644 index 0000000000..05af3e91a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/abspos-autopos-contained-by-viewport-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/abspos-containing-block-outside-spanner-ref.html b/testing/web-platform/tests/css/css-multicol/abspos-containing-block-outside-spanner-ref.html new file mode 100644 index 0000000000..c1322438b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/abspos-containing-block-outside-spanner-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<br><br><br><br><br> +<p>There should be no red.</p> +<div style="position:absolute; top:0; left:0; background-color:green; height:100px; width:100px;"></div> +<div style="position:absolute; bottom:0; right:0; background-color:green; height:100px; width:100px;"></div> diff --git a/testing/web-platform/tests/css/css-multicol/abspos-containing-block-outside-spanner.html b/testing/web-platform/tests/css/css-multicol/abspos-containing-block-outside-spanner.html new file mode 100644 index 0000000000..1f0419d9c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/abspos-containing-block-outside-spanner.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Abspos elements nested inside a column spanner</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/"> +<link rel="match" href="abspos-containing-block-outside-spanner-ref.html"> +<br><br><br><br><br> +<p>There should be no red.</p> +<div style="position:absolute; top:0; left:0; background-color:red; height:100px; width:100px;"></div> +<div style="position:absolute; bottom:0; right:0; background-color:red; height:100px; width:100px;"></div> +<div style="columns:3; column-gap:1em; width:20em;"> + <div style="position:relative;"> + <div style="column-span:all; height:50px;"> + <div style="position:absolute; top:0; left:0; background-color:green; height:100px; width:100px;"></div> + <div style="position:absolute; bottom:0; right:0; background-color:green; height:100px; width:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/abspos-in-multicol-with-spanner-crash.html b/testing/web-platform/tests/css/css-multicol/abspos-in-multicol-with-spanner-crash.html new file mode 100644 index 0000000000..c30a19d001 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/abspos-in-multicol-with-spanner-crash.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=967180"> +<div style="columns:2;"> + <br> + <div style="column-span:all;"></div> + <div style="position:relative;"> + <div style="position:absolute;"> + <div id="removeme"></div> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + removeme.style.display = "none"; + }, "No crash"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/abspos-multicol-in-second-outer-clipped.html b/testing/web-platform/tests/css/css-multicol/abspos-multicol-in-second-outer-clipped.html new file mode 100644 index 0000000000..9e1b3df69c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/abspos-multicol-in-second-outer-clipped.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1364402"> +<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; gap:0; width:100px; height:100px; column-fill:auto; background:red;"> + <div style="position:relative; overflow-y:clip; height:200px;"> + <div style="position:absolute; columns:2; width:100%; gap:0; height:200px; column-fill:auto;"> + <div style="height:300px; background:green;"></div> + </div> + <div style="height:100px;"></div> + <div style="margin-left:auto; width:50%; height:100px; background:green;"></div> + <div style="margin-left:auto; width:50%; height:1000px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/always-balancing-before-column-span.html b/testing/web-platform/tests/css/css-multicol/always-balancing-before-column-span.html new file mode 100644 index 0000000000..a80617b96e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/always-balancing-before-column-span.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <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://github.com/w3c/csswg-drafts/issues/4689"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="This test verifies columns are always balancing before column-spanning element in an unconstrained height and column-fill:auto column container."> + + <style> + .columns { + column-fill: auto; + column-count: 2; + column-gap: 0; + width: 100px; + background: red; + } + .colspan { + column-span: all; + } + .content { + height: 200px; + background: green; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="columns"> + <div class="content"></div> + <div class="colspan"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/animation/column-count-interpolation.html b/testing/web-platform/tests/css/css-multicol/animation/column-count-interpolation.html new file mode 100644 index 0000000000..66a7513265 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/animation/column-count-interpolation.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>column-count interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cc"> +<meta name="assert" content="column-count supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + column-count: 30; +} +.target { + column-count: 10; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'column-count', + from: neutralKeyframe, + to: '20', +}, [ + {at: -0.5, expect: '5'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '13'}, + {at: 0.7, expect: '17'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '25'}, +]); + +test_no_interpolation({ + property: 'column-count', + from: 'auto', + to: '20', +}); + +test_interpolation({ + property: 'column-count', + from: 'inherit', + to: '20', +}, [ + {at: -0.5, expect: '35'}, + {at: 0, expect: '30'}, + {at: 0.3, expect: '27'}, + {at: 0.7, expect: '23'}, + {at: 1, expect: '20'}, + {at: 1.5, expect: '15'}, +]); + +test_interpolation({ + property: 'column-count', + from: '10', + to: '1' +}, [ + {at: -0.5, expect: '15'}, + {at: 0, expect: '10'}, + {at: 0.3, expect: '7'}, + {at: 0.7, expect: '4'}, + // Only positive integers are valid + {at: 1, expect: '1'}, + {at: 1.5, expect: '1'} +]); + +test_no_interpolation({ + property: 'column-count', + from: 'initial', + to: '5', +}); + +test_no_interpolation({ + property: 'column-count', + from: 'unset', + to: '5', +}); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/animation/column-rule-color-interpolation.html b/testing/web-platform/tests/css/css-multicol/animation/column-rule-color-interpolation.html new file mode 100644 index 0000000000..3aba9446b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/animation/column-rule-color-interpolation.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>column-rule-color interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#crc"> +<meta name="assert" content="column-rule-color supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + column-count: 2; + column-rule-color: rgb(70, 70, 170); +} +.target { + column-count: 2; + color: rgb(70, 170, 70); + column-rule-color: rgb(170, 70, 70); +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'column-rule-color', + from: neutralKeyframe, + to: 'rgb(70, 170, 70)', +}, [ + {at: -0.5, expect: 'rgb(220, 20, 70)'}, + {at: 0, expect: 'rgb(170, 70, 70)'}, + {at: 0.3, expect: 'rgb(140, 100, 70)'}, + {at: 0.6, expect: 'rgb(110, 130, 70)'}, + {at: 1, expect: 'rgb(70, 170, 70)'}, + {at: 1.5, expect: 'rgb(20, 220, 70)'}, +]); + +test_interpolation({ + property: 'column-rule-color', + from: 'initial', + to: 'rgb(70, 70, 170)', +}, [ + {at: -0.5, expect: 'rgb(70, 220, 20)'}, + {at: 0, expect: 'rgb(70, 170, 70)'}, + {at: 0.3, expect: 'rgb(70, 140, 100)'}, + {at: 0.6, expect: 'rgb(70, 110, 130)'}, + {at: 1, expect: 'rgb(70, 70, 170)'}, + {at: 1.5, expect: 'rgb(70, 20, 220)'}, +]); + +test_interpolation({ + property: 'column-rule-color', + from: 'inherit', + to: 'rgb(70, 170, 70)', +}, [ + {at: -0.5, expect: 'rgb(70, 20, 220)'}, + {at: 0, expect: 'rgb(70, 70, 170)'}, + {at: 0.3, expect: 'rgb(70, 100, 140)'}, + {at: 0.6, expect: 'rgb(70, 130, 110)'}, + {at: 1, expect: 'rgb(70, 170, 70)'}, + {at: 1.5, expect: 'rgb(70, 220, 20)'}, +]); + +test_interpolation({ + property: 'column-rule-color', + from: 'currentcolor', + to: 'rgb(170, 70, 70)', +}, [ + {at: -0.5, expect: 'rgb(20, 220, 70)'}, + {at: 0, expect: 'rgb(70, 170, 70)'}, + {at: 0.3, expect: 'rgb(100, 140, 70)'}, + {at: 0.6, expect: 'rgb(130, 110, 70)'}, + {at: 1, expect: 'rgb(170, 70, 70)'}, + {at: 1.5, expect: 'rgb(220, 20, 70)'}, +]); + +test_interpolation({ + property: 'column-rule-color', + from: 'unset', + to: 'rgb(0, 255, 0)', +}, [ + {at: -5, expect: 'rgb(255, 0, 255)'}, + {at: -0.4, expect: 'rgb(98, 136, 98)'}, + {at: 0, expect: 'rgb(70, 170, 70)'}, + {at: 0.2, expect: 'rgb(56, 187, 56)'}, + {at: 0.6, expect: 'rgb(28, 221, 28)'}, + {at: 1, expect: 'rgb(0, 255, 0)'}, + {at: 1.5, expect: 'rgb(0, 255, 0)'}, +]); + +test_interpolation({ + property: 'column-rule-color', + from: 'orange', + to: 'blue' +}, [ + {at: -5, expect: '#ffff00'}, + {at: -0.4, expect: '#ffe700'}, + {at: 0, expect: 'orange'}, + {at: 0.2, expect: '#cc8433'}, + {at: 0.6, expect: '#664299'}, + {at: 1, expect: 'blue'}, + {at: 1.5, expect: 'blue'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/animation/column-rule-width-interpolation.html b/testing/web-platform/tests/css/css-multicol/animation/column-rule-width-interpolation.html new file mode 100644 index 0000000000..d600d68ff1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/animation/column-rule-width-interpolation.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>column-rule-width interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#crw"> +<meta name="assert" content="column-rule-width supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + column-rule-width: 30px; +} +.target { + column-rule-width: 10px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'column-rule-width', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_interpolation({ + property: 'column-rule-width', + from: 'initial', + to: '20px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '3px'}, + {at: 0.3, expect: '8.1px'}, + {at: 0.6, expect: '13.2px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '28.5px'}, +]); + +test_interpolation({ + property: 'column-rule-width', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'column-rule-width', + from: 'unset', + to: '20px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '3px'}, + {at: 0.3, expect: '8.1px'}, + {at: 0.6, expect: '13.2px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '28.5px'}, +]); + +test_interpolation({ + property: 'column-rule-width', + from: '0px', + to: '10px' +}, [ + {at: -0.3, expect: '0px'}, // CSS column-rule-width can't be negative. + {at: 0, expect: '0px'}, + {at: 0.3, expect: '3px'}, + {at: 0.6, expect: '6px'}, + {at: 1, expect: '10px'}, + {at: 1.5, expect: '15px'} +]); + +test_interpolation({ + property: 'column-rule-width', + from: '15px', + to: 'thick' +}, [ + {at: -2, expect: '35px'}, + {at: -0.3, expect: '18px'}, + {at: 0, expect: '15px'}, + {at: 0.3, expect: '12px'}, + {at: 0.6, expect: '9px'}, + {at: 1, expect: '5px'}, + {at: 1.5, expect: '0px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/animation/column-width-interpolation.html b/testing/web-platform/tests/css/css-multicol/animation/column-width-interpolation.html new file mode 100644 index 0000000000..fdb26353b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/animation/column-width-interpolation.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>column-width interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cw"> +<meta name="assert" content="column-width supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + column-width: 30px; +} +.target { + font-size: 0px; /* column-width "specified values must be greater than 0", so use font-size to achieve 0px computed value. */ + display: inline-block; + column-width: 10px; +} +</style> + +<body> +<template id="target-template"> + <div><div class="transformed"></div></div> +</template> +</body> + +<script> +test_interpolation({ + property: 'column-width', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -20, expect: '1em'}, // column-width does not accept negative values + {at: -1, expect: '1em'}, // column-width does not accept negative values + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_no_interpolation({ + property: 'column-width', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'column-width', + from: 'inherit', + to: '20px', +}, [ + {at: -20, expect: '230px'}, + {at: -1, expect: '40px'}, + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_no_interpolation({ + property: 'column-width', + from: 'unset', + to: '20px', +}); + +test_interpolation({ + property: 'column-width', + from: '50px', + to: '100px', +}, [ + {at: -20, expect: '1em'}, // column-width does not accept negative values + {at: -1, expect: '1em'}, // column-width does not accept negative values + {at: -0.3, expect: '35px'}, + {at: 0, expect: '50px'}, + {at: 0.3, expect: '65px'}, + {at: 0.6, expect: '80px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '125px'}, +]); + +test_no_interpolation({ + property: 'column-width', + from: '50px', + to: 'auto', +}); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/as-column-flex-item.html b/testing/web-platform/tests/css/css-multicol/as-column-flex-item.html new file mode 100644 index 0000000000..21ff8d8d50 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/as-column-flex-item.html @@ -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/"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/"> +<meta name="assert" content="Tests that the intrinsic block-size of a multicol container is calculated correctly, including the border"> +<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="display:flex; flex-flow:column; background:red;"> + <div style="columns:4; column-gap:0; border:30px solid green; width:40px;"> + <div style="height:160px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-001-print-ref.html b/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-001-print-ref.html new file mode 100644 index 0000000000..fcd9b7deff --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-001-print-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +On the first page diff --git a/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-001-print.html b/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-001-print.html new file mode 100644 index 0000000000..6652fe18e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-001-print.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1339963"> +<link rel="match" href="auto-fill-auto-size-001-print-ref.html"> +<div style="columns:2; column-fill:auto; border:10px solid red; border-top:none; border-bottom:none;"></div> +On the first page diff --git a/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-002-print-ref.html b/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-002-print-ref.html new file mode 100644 index 0000000000..2ae0778d56 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-002-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="height:150vh;"></div> +Middle of second page diff --git a/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-002-print.html b/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-002-print.html new file mode 100644 index 0000000000..4e0243212e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/auto-fill-auto-size-002-print.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1339963"> +<link rel="match" href="auto-fill-auto-size-002-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="columns:2; column-fill:auto;"> + <div style="height:250vh;"></div> +</div> +Middle of second page diff --git a/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-000.html b/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-000.html new file mode 100644 index 0000000000..f6540e4ab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-000.html @@ -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/#filling-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between"> +<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:4; background:green;"> + <div style="break-inside:avoid; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-001.html b/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-001.html new file mode 100644 index 0000000000..1449110516 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-001.html @@ -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/#filling-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between"> +<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:4; background:green;"> + <div style="break-inside:avoid; break-after:avoid; height:50px;"></div> + <div style="break-inside:avoid; height:50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-002.html b/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-002.html new file mode 100644 index 0000000000..4506ef6add --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/balance-break-avoidance-002.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#filling-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-between"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-within"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width:100px; columns:2; column-gap:0; background:green;"> + <div style="height:25px;"></div> + <div style="height:50px;"></div> + <div style="height:25px; break-before:avoid;"></div> + <div style="height:50px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/balance-extremely-tall-monolithic-content-crash.html b/testing/web-platform/tests/css/css-multicol/balance-extremely-tall-monolithic-content-crash.html new file mode 100644 index 0000000000..1fb178ffb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/balance-extremely-tall-monolithic-content-crash.html @@ -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/#filling-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#monolithic"> +<div style="columns:2;"> + <div style="contain:size; height:12345678901234px;"></div> + <div style="contain:size; height:12345678901234px;"></div> + <div style="contain:size; height:12345678901234px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/balance-grid-container-ref.html b/testing/web-platform/tests/css/css-multicol/balance-grid-container-ref.html new file mode 100644 index 0000000000..aa0ea5595d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/balance-grid-container-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Balance a grid container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + :root { + font: 16px/1.25 sans-serif; + } + .two-columns { + column-count: 2; + width: 550px; + } + .two-column-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: auto; + } + .grid-col-1 { + grid-column: 1; + } + .grid-col-2 { + grid-column: 2; + } + .keep-together { + display: inline-block; + } + </style> + + <div class="two-columns"> + <div class="two-column-grid"> + <div class="grid-col-1">ID Number</div> + <div class="grid-col-2">01234567890</div> + <div class="grid-col-1">Address</div> + <div class="grid-col-2"> + <div class="keep-together"> + 123 Fake Street<br> + London<br> + NW1 1AA<br> + UK + </div> + </div> + </div> + + <div class="two-column-grid"> + <div class="grid-col-1">Relevant Countries</div> + <div class="grid-col-2"> + Ireland<br> + United Kingdom + </div> + </div> + </div> + + <div> + Some content underneath the details. + </div> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/balance-grid-container.html b/testing/web-platform/tests/css/css-multicol/balance-grid-container.html new file mode 100644 index 0000000000..64df23e09f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/balance-grid-container.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Balance a grid container</title> + <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 ref="help" href="https://drafts.csswg.org/css-grid/"> + <link ref="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1657345"> + <link rel="match" href="balance-grid-container-ref.html"> + <meta name="assert" content="This test verifies a grid container in a balanced multicol container can have a balance multicol height."> + + <style> + :root { + font: 16px/1.25 sans-serif; + } + .two-columns { + column-count: 2; + width: 550px; + } + .two-column-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: auto; + } + .grid-col-1 { + grid-column: 1; + } + .grid-col-2 { + grid-column: 2; + } + .keep-together { + display: inline-block; + } + </style> + + <div class="two-columns"> + <div class="two-column-grid"> + <div class="grid-col-1">ID Number</div> + <div class="grid-col-2">01234567890</div> + <div class="grid-col-1">Address</div> + <div class="grid-col-2"> + <div class="keep-together"> + 123 Fake Street<br> + London<br> + NW1 1AA<br> + UK + </div> + </div> + <div class="grid-col-1">Relevant Countries</div> + <div class="grid-col-2"> + Ireland<br> + United Kingdom + </div> + </div> + </div> + + <div> + Some content underneath the details. + </div> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/balance-orphans-widows-000.html b/testing/web-platform/tests/css/css-multicol/balance-orphans-widows-000.html new file mode 100644 index 0000000000..97f2d0ccd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/balance-orphans-widows-000.html @@ -0,0 +1,37 @@ +<!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/#filling-columns"> +<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"> +<style> + .multicol { + columns: 2; + orphans: 4; + widows: 4; + width: 100px; + column-gap: 80px; + column-rule: 80px solid green; + line-height: 0; + background: red; + } + span { + display: inline-block; + width: 100%; + height: 10px; + background: green; + } + span.tall { + height: 40px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <span></span><br> + <span></span><br> + <span class="tall"></span><br> + <span class="tall"></span><br> + <span class="tall"></span><br> + <span class="tall"></span><br> + <span></span><br> + <span></span><br> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-000-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-000-ref.html new file mode 100644 index 0000000000..aba812bb9d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-000-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +PASS diff --git a/testing/web-platform/tests/css/css-multicol/baseline-000.html b/testing/web-platform/tests/css/css-multicol/baseline-000.html new file mode 100644 index 0000000000..e01e9de1dd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-000.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<link rel="match" href="baseline-000-ref.html"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="display:flex; align-items:baseline;"> + PA + <div style="columns:2; column-fill:auto; height:5em;"> + SS + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-001-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-001-ref.html new file mode 100644 index 0000000000..181f7bafec --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a green square below.</p> +<div style="width:100px; height:100px; background:green;"></div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-001.html b/testing/web-platform/tests/css/css-multicol/baseline-001.html new file mode 100644 index 0000000000..cd27731f4f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<meta name="assert" content="The multicol container here has no baseline, since we're only supposed to look for a baseline in the first column, which has no lines at all."> +<link rel="match" href="baseline-001-ref.html"> +<p>There should be a green square below.</p> +<div style="display:flex; align-items:baseline;"> + <div style="width:50px; height:100px; background:green;"></div> + <div style="columns:2; height:100px; column-fill:auto;"> + <div style="width:50px; height:100px; background:green;"></div> + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-002-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-002-ref.html new file mode 100644 index 0000000000..6de99d0767 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-002-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="line-height:2em;"> + <br> + PASS +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-002.html b/testing/web-platform/tests/css/css-multicol/baseline-002.html new file mode 100644 index 0000000000..127ecd56fb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<link rel="match" href="baseline-002-ref.html"> +<meta name="assert" content="Make sure that baseline propagation doesn't take place before column balancing is finished."> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="display:flex; align-items:baseline;"> + PA + <div style="columns:3; orphans:1; widows:1; line-height:2em;"> + <div style="break-inside:avoid; height:2em;"></div> + SS<br> + <br> + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-003-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-003-ref.html new file mode 100644 index 0000000000..e031f1aeae --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-003-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> + PASS diff --git a/testing/web-platform/tests/css/css-multicol/baseline-003.html b/testing/web-platform/tests/css/css-multicol/baseline-003.html new file mode 100644 index 0000000000..7d1f252d47 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-003.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<link rel="match" href="baseline-003-ref.html"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="display:flex; align-items:baseline;"> + PA + <div style="columns:3;"> + <div style="column-span:all;">SS</div> + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-004-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-004-ref.html new file mode 100644 index 0000000000..c1d72cb015 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-004-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="padding-top:2em;"> + PASS +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-004.html b/testing/web-platform/tests/css/css-multicol/baseline-004.html new file mode 100644 index 0000000000..b14d42761c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-004.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<link rel="match" href="baseline-004-ref.html"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="display:flex; align-items:baseline;"> + PA + <div style="columns:3;"> + <div style="column-span:all; height:2em;"></div> + <div style="column-span:all;">SS</div> + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-005-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-005-ref.html new file mode 100644 index 0000000000..d5a382740f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-005-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +PASS diff --git a/testing/web-platform/tests/css/css-multicol/baseline-005.html b/testing/web-platform/tests/css/css-multicol/baseline-005.html new file mode 100644 index 0000000000..e1bf253dbc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-005.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<link rel="match" href="baseline-005-ref.html"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="display:flex; align-items:baseline;"> + PA + <div style="columns:3;"> + SS + <div style="column-span:all;"><br></div> + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-006-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-006-ref.html new file mode 100644 index 0000000000..e229db9ced --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-006-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="padding-top:33px;">PASS</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-006.html b/testing/web-platform/tests/css/css-multicol/baseline-006.html new file mode 100644 index 0000000000..c55ed73025 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-006.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<link rel="match" href="baseline-006-ref.html"> +<p>The word "PASS" should be seen below, with letters baseline aligned.</p> +<div style="display:flex; align-items:baseline;"> + PA + <div style="columns:3;"> + <div style="height:99px;"></div> + <div style="column-span:all;">SS</div> + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-007-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-007-ref.html new file mode 100644 index 0000000000..dc6562cd70 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-007-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a green square below.</p> +<div style="width:100px; height:100px; background:green"></div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-007.html b/testing/web-platform/tests/css/css-multicol/baseline-007.html new file mode 100644 index 0000000000..be886e919d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-007.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<meta name="assert" content="The first column has no baseline. The column after the spanner does have one, but we're not supposed to look beyond the first column (and any spanners)."> +<link rel="match" href="baseline-007-ref.html"> +<p>There should be a green square below.</p> +<div style="display:flex; align-items:baseline;"> + <div style="width:50px; height:100px; background:green;"></div> + <div style="columns:3; width:50px; line-height:40px; background:green;"> + <div style="height:90px;"></div> + <div style="column-span:all; height:30px;"></div> + <br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-008-ref.html b/testing/web-platform/tests/css/css-multicol/baseline-008-ref.html new file mode 100644 index 0000000000..181f7bafec --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-008-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a green square below.</p> +<div style="width:100px; height:100px; background:green;"></div> diff --git a/testing/web-platform/tests/css/css-multicol/baseline-008.html b/testing/web-platform/tests/css/css-multicol/baseline-008.html new file mode 100644 index 0000000000..beb19ca447 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/baseline-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1"> +<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639"> +<link rel="match" href="baseline-008-ref.html"> +<style> + .part { + display: inline-block; + width: 50px; + height: 100px; + background: green; + color: transparent; + } + .multicol { + columns: 2; + column-fill: auto; + } +</style> +<p>There should be a green square below.</p> +<div class="part"> + <div>line1<br>line2</div> +</div><div class="part multicol"> + <div>line1<br>line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/broken-column-rule-1-ref.html b/testing/web-platform/tests/css/css-multicol/broken-column-rule-1-ref.html new file mode 100644 index 0000000000..c696d079f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/broken-column-rule-1-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<title>CSS Test Reference: breaking of column rule</title> +<meta charset="utf-8"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<style> + +.ref1, .ref2 { + display: inline-block; + vertical-align: top; + + border: 2px solid blue; + border-top: none; + border-bottom: none; +} + +.ref1 { + margin-left:49px; + height: 100px; + width: 148px; +} + +.ref2 { + margin-left: 148px; + height: 50px; + width: 10px; + + border-right: none; +} + +</style> +<span class="ref1"></span><span class="ref2"></span> diff --git a/testing/web-platform/tests/css/css-multicol/broken-column-rule-1.html b/testing/web-platform/tests/css/css-multicol/broken-column-rule-1.html new file mode 100644 index 0000000000..13deaa72cb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/broken-column-rule-1.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<title>CSS Test: breaking of column rule</title> +<meta charset="utf-8"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules"> +<link rel="match" href="broken-column-rule-1-ref.html"> +<style> + +.outer { + height: 100px; + column-fill: auto; + width: 550px; + column-count: 4; + column-gap: 50px; + /* leaves 100px for each column */ +} + +.inner { + column-count: 2; + column-rule: 2px solid blue; + height: 250px; +} + +.fill { + height: 500px; /* work around https://bugzilla.mozilla.org/show_bug.cgi?id=1374479#c4 */ +} + +</style> + +<div class="outer"> + <div class="inner"> + <div class="fill"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/change-abspos-width-in-second-column-crash.html b/testing/web-platform/tests/css/css-multicol/change-abspos-width-in-second-column-crash.html new file mode 100644 index 0000000000..78243c7687 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-abspos-width-in-second-column-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1074480"> +<p>PASS if no crash.</p> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="position: relative;"> + <div style="height:150px;"></div> + <div id="target" style="position:absolute;"></div> + </div> +</div> +<script> + document.body.offsetTop; + target.style.width = '55px'; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-000.html b/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-000.html new file mode 100644 index 0000000000..823506d1c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-000.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285795"> + <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 id="mc" style="columns:4; column-gap:0; column-fill:auto; width:100px; height:25px; background:red;"> + <div style="width:100px; height:100px; background:green;"></div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + mc.style.height = '100px'; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-001.html b/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-001.html new file mode 100644 index 0000000000..d9ae7b1b66 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285795"> + <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:4; column-gap:0;"> + <div style="height:200px; background:green;"></div> + <div id="elm" style="display:none; height:200px; background:green;"></div> + </div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + elm.style.display = 'block'; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-002.html b/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-002.html new file mode 100644 index 0000000000..4b3804361e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285795"> + <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 id="mc" style="columns:4; column-gap:0; column-fill:auto; width:100px; height:400px; background:red;"> + <div style="height:400px; background:green;"></div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + mc.style.height = '100px'; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-003.html b/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-003.html new file mode 100644 index 0000000000..b8fae27502 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-fragmentainer-size-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285795"> + <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 id="mc" style="columns:2; column-gap:0; column-fill:auto; width:100px; height:150px; background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <script> + requestAnimationFrame(() => { + requestAnimationFrame(() => { + mc.style.height = "100px"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/change-intrinsic-width.html b/testing/web-platform/tests/css/css-multicol/change-intrinsic-width.html new file mode 100644 index 0000000000..3df3e1ebc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-intrinsic-width.html @@ -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/#pseudo-algorithm"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1037790"> +<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-fill:auto; column-gap:0; width:fit-content; height:100px; background:red;"> + <div id="firstChild" style="width:200px; height:100px; background:green;"></div> + <div style="width:50px; height:100px; background:green;"></div> +</div> +<script> + document.body.offsetTop; + firstChild.style.width = "50px"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/change-out-of-flow-type-and-remove-inner-multicol-crash.html b/testing/web-platform/tests/css/css-multicol/change-out-of-flow-type-and-remove-inner-multicol-crash.html new file mode 100644 index 0000000000..eec69f9ede --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-out-of-flow-type-and-remove-inner-multicol-crash.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1074480"> +<p>PASS if no crash.</p> +<body style="columns:2;"> + <div style="position:relative;"> + <div style="column-span:all;"></div> + <div id="target" style="columns:2; position:fixed;"></div> + </div> +</body> +<script> + document.body.offsetTop; + target.style.position = 'absolute'; + target.style.columns = 'auto'; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/change-transform-in-nested.html b/testing/web-platform/tests/css/css-multicol/change-transform-in-nested.html new file mode 100644 index 0000000000..fd5420bece --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-transform-in-nested.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1279525"> +<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="overflow:auto; width:500px;"> + <div style="columns:2; column-gap:0; column-fill:auto; margin-left:-300px; width:400px; height:100px;"> + <div style="break-after:column; height:1px;"></div> + <div style="columns:2; column-gap:0; column-fill:auto; height:200px;"> + <div style="break-after:column; height:1px;"></div> + <div style="width:100px; height:100px; background:red;"> + <div id="elm" style="transform:translateX(1000px); width:100px; height:100px; background:green;"></div> + </div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.transform = "translateX(0)"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/change-transform-in-second-column.html b/testing/web-platform/tests/css/css-multicol/change-transform-in-second-column.html new file mode 100644 index 0000000000..c627c33fbf --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-transform-in-second-column.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1279525"> +<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="overflow:auto; width:500px;"> + <div style="columns:2; column-gap:0; column-fill:auto; margin-left:-100px; width:200px; height:100px;"> + <div style="break-after:column; height:1px;"></div> + <div style="width:100px; height:100px; background:red;"> + <div id="elm" style="transform:translateX(1000px); width:100px; height:100px; background:green;"></div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.transform = "translateX(0)"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/change-transform-in-spanner.html b/testing/web-platform/tests/css/css-multicol/change-transform-in-spanner.html new file mode 100644 index 0000000000..a70a4151c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-transform-in-spanner.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1279525"> +<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="overflow:auto; width:500px;"> + <div style="columns:2; column-fill:auto; height:100px;"> + <div style="width:100px; height:100px; background:red;"> + <div id="elm" style="transform:translateX(1000px); width:100px; height:100px; background:green;"></div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.transform = "translateX(0)"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/change-transform.html b/testing/web-platform/tests/css/css-multicol/change-transform.html new file mode 100644 index 0000000000..a70a4151c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/change-transform.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1279525"> +<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="overflow:auto; width:500px;"> + <div style="columns:2; column-fill:auto; height:100px;"> + <div style="width:100px; height:100px; background:red;"> + <div id="elm" style="transform:translateX(1000px); width:100px; height:100px; background:green;"></div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.transform = "translateX(0)"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/column-balancing-paged-001-print-ref.html b/testing/web-platform/tests/css/css-multicol/column-balancing-paged-001-print-ref.html new file mode 100644 index 0000000000..f0ee4df8c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/column-balancing-paged-001-print-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + .inner { + column-count: 2; + column-rule: 3px solid green; + background-color: lightgreen; + } + .block1 { + background-color: yellow; + height: 3in; + } + .spanner { + height: 2in; + background-color: lightblue; + } + .block2 { + background-color: pink; + height: 3in; + } + </style> + + <article class="inner"> + <div class="block1">block1</div> + </article> + <div class="spanner">spanner</div> + <article class="inner"> + <div class="block2">block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/column-balancing-paged-001-print.html b/testing/web-platform/tests/css/css-multicol/column-balancing-paged-001-print.html new file mode 100644 index 0000000000..933519ab5b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/column-balancing-paged-001-print.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <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="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"> + + <style> + .outer { + column-count: 1; + column-rule: 6px solid black; + } + .inner { + column-count: 2; + column-rule: 3px solid green; + background-color: lightgreen; + } + .block1 { + background-color: yellow; + height: 3in; + } + .spanner { + column-span: all; + height: 2in; + background-color: lightblue; + } + .block2 { + background-color: pink; + height: 3in + } + </style> + + <article class="outer"> + <article class="inner"> + <div class="block1">block1</div> + <div class="spanner">spanner</div> + <div class="block2">block2</div> + </article> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/column-balancing-with-overflow-auto-crash.html b/testing/web-platform/tests/css/css-multicol/column-balancing-with-overflow-auto-crash.html new file mode 100644 index 0000000000..1e522c0ec9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/column-balancing-with-overflow-auto-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/column-balancing-with-span-and-oof-001.html b/testing/web-platform/tests/css/css-multicol/column-balancing-with-span-and-oof-001.html new file mode 100644 index 0000000000..7ecd9ee873 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/column-balancing-with-span-and-oof-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/column-balancing-with-span-and-oof-002.html b/testing/web-platform/tests/css/css-multicol/column-balancing-with-span-and-oof-002.html new file mode 100644 index 0000000000..71df0e2229 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/column-balancing-with-span-and-oof-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/column-count-used-001.html b/testing/web-platform/tests/css/css-multicol/column-count-used-001.html new file mode 100644 index 0000000000..2949a1996e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/column-count-used-001.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>column-count used value when neither column-count nor column-width are auto</title> +<link rel=help href=https://www.w3.org/TR/css-multicol-1/#pseudo-algorithm> +<link rel=match href=../reference/ref-filled-green-100px-square.xht> +<style> +div { + position: absolute; +} +.bg { + background: red; + width: 100px; + height: 100px; +} +.test { + line-height: 50px; + width: 100px; + background: green; + columns: 2 20px; + column-gap: 0; + orphans: 1; + widows: 1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class=bg></div> +<div class=test><br><br><br><br></div> diff --git a/testing/web-platform/tests/css/css-multicol/column-fill-balance-orthog-block-001.html b/testing/web-platform/tests/css/css-multicol/column-fill-balance-orthog-block-001.html new file mode 100644 index 0000000000..be665763df --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/column-fill-balance-orthog-block-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> + +<meta charset="UTF-8"> + + <title>CSS Writing Modes Test: 'column-fill: balance' of a vertical writing mode block in orthogonal context</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css3-multicol/#cf"> + <link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#auto-multicol"> + <link rel="match" href="reference/column-fill-balance-orthog-block-001-ref.html"> + + <!-- + + Issue 719014: column-fill: balance of a vertical block in orthogonal context incorrectly rendered + https://bugs.chromium.org/p/chromium/issues/detail?id=719014 + + --> + + <meta content="" name="flags"> + <meta name="assert" content="This test checks if a multi-column container with 'column-fill' set to 'balance' will not break an unbreakable run of text and will honor min-content inline size of a block that has its writing mode set to 'vertical-rl'. In this test, the word 'TEXT' should not break, even if div#multi-col's 'height' is set to '49px'."> + + <style> + div#multi-col + { + background-color: yellow; /* Not part of the test */ + columns: 2 auto; + column-fill: balance; /* Balance content equally between columns, if possible. */ + height: 250px; /* more than enough to display "TEXT" */ + } + + div#unbreakable-block + { + background-color: lime; /* Not part of the test */ + font-size: 50px; + line-height: 1.2; /* Not part of the test */ + writing-mode: vertical-rl; + } + </style> + + <p>Test passes if the word "TEXT" is unbroken and rotated 90 degrees clock-wise. + + <div id="multi-col"> + <div id="unbreakable-block">TEXT</div> + </div> diff --git a/testing/web-platform/tests/css/css-multicol/columnfill-auto-max-height-001.html b/testing/web-platform/tests/css/css-multicol/columnfill-auto-max-height-001.html new file mode 100644 index 0000000000..bc76caa547 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/columnfill-auto-max-height-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Multi-column Layout Test: 'column-fill: auto' and height constrained of a multi-column container</title> + + <!-- + + See also + + Bug 1348839: 'column-fill: auto' does not fill as expected, content ends up in one column + https://bugzilla.mozilla.org/show_bug.cgi?id=1348839 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1 column-fill"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <meta content="This test verifies how content is distributed among columns when the height of a multi-column container is constrained and when 'column-fill' is set to 'auto'. In this test, the line box height is exactly 25px. So, content should fill 4 lines of the first column and should only fill up the first column. Since column rules are only drawn between two columns that both have content and since the test expects only 1 column filled with content, therefore the column rule should not be painted, thus the 'no red' test success condition." name="assert"> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + div + { + color: green; + column-count: 2; + column-fill: auto; /* fill columns sequentially */ + column-gap: 4em; /* computes to 100px */ + column-rule: red solid 4em; + font-family: Ahem; + /* + To download Ahem font: + http://www.w3.org/Style/CSS/Test/Fonts/Ahem/ + */ + font-size: 25px; + line-height: 1; + max-height: 100px; + width: 300px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div>Abcd efgh ijkl mno.</div> diff --git a/testing/web-platform/tests/css/css-multicol/columnfill-auto-max-height-002.html b/testing/web-platform/tests/css/css-multicol/columnfill-auto-max-height-002.html new file mode 100644 index 0000000000..ae2e81d6aa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/columnfill-auto-max-height-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Multi-column Layout Test: 'column-fill: auto' and height constrained of a multi-column container</title> + + <!-- + + See also + + Bug 1348839: 'column-fill: auto' does not fill as expected, content ends up in one column + https://bugzilla.mozilla.org/show_bug.cgi?id=1348839 + + --> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1 column-fill"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + + <meta content="This test verifies how content is distributed among columns when the height of a multi-column container is constrained and when 'column-fill' is set to 'auto'. In this test, the line box height is exactly 25px. So, content should fill 4 lines of the first column and should only fill up the first column. Since column rules are only drawn between two columns that both have content and since the test expects only 1 column filled with content, therefore the column rule should not be painted, thus the 'no red' test success condition." name="assert"> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + div + { + color: green; + column-count: 4; + column-fill: auto; /* fill columns sequentially */ + column-gap: 4em; /* computes to 100px */ + column-rule: red solid 4em; + font-family: Ahem; + /* + To download Ahem font: + http://www.w3.org/Style/CSS/Test/Fonts/Ahem/ + */ + font-size: 25px; + line-height: 1; + max-height: 100px; + orphans: 1; + /* + In this test, the orphans property specifies the + minimum number of line boxes that must be left + in a column box before a column break, that must + be left at the bottom of a column box. + */ + widows: 1; + /* + In this test, the widows property specifies the + minimum number of line boxes that must be left + in a column box after a column break, that must + be left at the top of a column box. + */ + width: 700px; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div>Abcd efgh ijkl mno.</div> diff --git a/testing/web-platform/tests/css/css-multicol/composited-under-clip-under-multicol-ref.html b/testing/web-platform/tests/css/css-multicol/composited-under-clip-under-multicol-ref.html new file mode 100644 index 0000000000..ebd2d860ce --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/composited-under-clip-under-multicol-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-multicol/composited-under-clip-under-multicol.html b/testing/web-platform/tests/css/css-multicol/composited-under-clip-under-multicol.html new file mode 100644 index 0000000000..a47ed89a2e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/composited-under-clip-under-multicol.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-multicol"> +<link rel="match" href="composited-under-clip-under-multicol-ref.html"> +<meta name="assert" content="Test that clip under multicol is correctly applied on composited child"> +<style> +.columns { + columns: 2; + column-gap: 20px; + width: 220px; + height: 100px; +} +.clip { + height: 100px; + overflow: hidden; +} +.composited { + will-change: transform; + margin-top: -20px; + margin-left: -20px; + border: 20px solid red; + width: 200px; + height: 200px; + background: green; +} +</style> +<div class="columns"> + <div class="clip"> + <div class="composited"></div> + </div> + <div class="clip"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/as-baseline-aligned-grid-item.html b/testing/web-platform/tests/css/css-multicol/crashtests/as-baseline-aligned-grid-item.html new file mode 100644 index 0000000000..f9a9e1dad0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/as-baseline-aligned-grid-item.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1349884"> +<div style="display:grid; justify-items:baseline;"> + <div style="columns:0px; gap:100%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/balance-with-forced-break.html b/testing/web-platform/tests/css/css-multicol/crashtests/balance-with-forced-break.html new file mode 100644 index 0000000000..794f761766 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/balance-with-forced-break.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1372653"> +<div style="columns:2;"> + <div> + <div style="display:flow-root;"></div> + <div style="break-before:column; margin-bottom:100px;"></div> + </div> + <div> + <div style="display:flow-root;"></div> + <div style="break-before:column;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/balancing-flex-item-trailing-margin-freeze.html b/testing/web-platform/tests/css/css-multicol/crashtests/balancing-flex-item-trailing-margin-freeze.html new file mode 100644 index 0000000000..3cbf2f853e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/balancing-flex-item-trailing-margin-freeze.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395408"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399449"> +<div style="columns:2;"> + <div style="contain:size; height:40px;">PASS if no freeze.</div> + <div style="display:flex;"> + <div style="contain:size; margin-bottom:2px; height:30px; width:100px;"></div> + </div> + <div style="display:flex;"> + <div style="contain:size; margin-bottom:2px; height:30px; width:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/balancing-tall-borders-freeze.html b/testing/web-platform/tests/css/css-multicol/crashtests/balancing-tall-borders-freeze.html new file mode 100644 index 0000000000..2672690669 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/balancing-tall-borders-freeze.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1395408"> +<div style="columns:2;"> + <div style="contain:size; height:40px;">PASS if no freeze.</div> + <div style="display:flow-root; border-top:32px solid;"></div> + <div style="display:flow-root; border-top:32px solid;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/body-becomes-spanner-html-becomes-vertical-rl.html b/testing/web-platform/tests/css/css-multicol/crashtests/body-becomes-spanner-html-becomes-vertical-rl.html new file mode 100644 index 0000000000..7cd544b71c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/body-becomes-spanner-html-becomes-vertical-rl.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1377673"> +<style> + html { columns:2; } +</style> +<div style="height:100px;"></div> +<script> + document.body.offsetTop; + document.body.style.columnSpan = "all"; + document.documentElement.style.writingMode = "vertical-rl"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/break-before-multicol-caption.html b/testing/web-platform/tests/css/css-multicol/crashtests/break-before-multicol-caption.html new file mode 100644 index 0000000000..ac6f444eaa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/break-before-multicol-caption.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1375029"> +<div style="columns:5; column-fill:auto; height:10px;"> + <div style="display:table;"> + <div style="display:table-caption;"> + <div style="height:1px;"></div> + <div style="height:11px; contain:size;"></div> + </div> + <div style="display:table-caption; columns:2; column-fill:auto; height:1px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1293905.html b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1293905.html new file mode 100644 index 0000000000..2f1bd84528 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1293905.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1293905"> +<div style="columns:1;"> + <div style="columns:1; position:absolute;"> + <div style="position:absolute;"> + <div style="position:fixed;"></div> + <div style="appearance:searchfield; columns:1; background-image:url(not-found); width:100px; height:100px;"></div> + </div> + <div id="boo" style="display:none;"></div> + </div> +</div> +<script> + document.body.offsetTop; + function boom() { + boo.style.display = "block"; + } + window.addEventListener("load", boom); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1297118.html b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1297118.html new file mode 100644 index 0000000000..5c96614db2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1297118.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1297118"> +<div style="columns:2;"> + <div style="columns:2;"> + <div style="column-span:all;"> + <span style="position:relative;"> + <div style="display:flex; float:right;"></div> + </span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1301281.html b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1301281.html new file mode 100644 index 0000000000..0c34e08890 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1301281.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1301281"> + <div style="columns:2; column-fill:auto; height:30px; line-height:20px; width:fit-content;"> + <span><span id="first"></span><input style="float:right; padding:3%;"></span> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + first.innerHTML = "D"; + document.body.offsetTop; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.body.style.color = "blue"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1303256.html b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1303256.html new file mode 100644 index 0000000000..072af7d4ef --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1303256.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1303256"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="break-inside:avoid; width:100px; height:100px;"></div> + <div style="columns:2; column-fill:auto; height:50px;"> + <div style="columns:2; margin:8px; column-fill:auto; height:1px;"></div> + <div style="columns:2; column-fill:auto; height:1px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1314866.html b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1314866.html new file mode 100644 index 0000000000..538586ab5d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/chrome-bug-1314866.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1314866"> +<div style="columns:2; line-height:1px;"> + <div style="columns:2; column-fill:auto; height:20px; padding-top:9px;">x</div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/dynamic-simplified-layout-break-propagation.html b/testing/web-platform/tests/css/css-multicol/crashtests/dynamic-simplified-layout-break-propagation.html new file mode 100644 index 0000000000..c675b50f94 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/dynamic-simplified-layout-break-propagation.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<body style="columns: 1;"> + <div style="display: inline-block; position: relative;"> + <div style="position: absolute;"> + <div id="target"></div> + </div> + <div style="break-before: column;"></div> + </div> +</body> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '10px'; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/fit-content-with-spanner-and-auto-scrollbar-sibling.html b/testing/web-platform/tests/css/css-multicol/crashtests/fit-content-with-spanner-and-auto-scrollbar-sibling.html new file mode 100644 index 0000000000..105da399b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/fit-content-with-spanner-and-auto-scrollbar-sibling.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308960"> +<div style="columns:2; width:100px;"> + <div style="width:min-content;"> + <div style="column-span:all;"></div> + <div style="height:50px; overflow:auto;"> + <div style="width:100px; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/float-becomes-non-float-spanner-surprises-inside.html b/testing/web-platform/tests/css/css-multicol/crashtests/float-becomes-non-float-spanner-surprises-inside.html new file mode 100644 index 0000000000..39fccf4522 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/float-becomes-non-float-spanner-surprises-inside.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1373409"> +<div style="columns:2;"> + <div id="elm" style="margin-bottom:100px; float:left;"> + <div style="column-span:all;"></div> + <div style="column-span:all;"></div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.cssFloat = "none"; + elm.offsetTop; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/float-becomes-spanner.html b/testing/web-platform/tests/css/css-multicol/crashtests/float-becomes-spanner.html new file mode 100644 index 0000000000..90a4c9079c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/float-becomes-spanner.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1317656"> +<div style="columns:2;"> + <div> + <div id="elm" style="float:left;"></div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.cssFloat = "none"; + elm.style.columnSpan = "all"; + document.body.offsetTop; + elm.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/forced-break-in-oof-in-column-balancing-nested.html b/testing/web-platform/tests/css/css-multicol/crashtests/forced-break-in-oof-in-column-balancing-nested.html new file mode 100644 index 0000000000..02b3295444 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/forced-break-in-oof-in-column-balancing-nested.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1322319"> +<div style="columns:2;"> + <div style="columns:2; position:relative; column-fill:auto; height:10px;"> + <div style="position:absolute;"> + <div></div> + <div style="break-before:column;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/forced-break-in-oof-in-column-balancing.html b/testing/web-platform/tests/css/css-multicol/crashtests/forced-break-in-oof-in-column-balancing.html new file mode 100644 index 0000000000..31cafba9a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/forced-break-in-oof-in-column-balancing.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1322319"> +<div style="columns:2;"> + <div style="position:relative; height:10px;"> + <div style="position:absolute;"> + <div style="height:1px;"></div> + <div style="break-before:column;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/inline-with-spanner-in-overflowed-container-before-multicol-float.html b/testing/web-platform/tests/css/css-multicol/crashtests/inline-with-spanner-in-overflowed-container-before-multicol-float.html new file mode 100644 index 0000000000..69abc9bcf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/inline-with-spanner-in-overflowed-container-before-multicol-float.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1309859"> +<div style="columns:2;"> + <div style="height:10px;"></div> + <span> + <div style="height:20px;"> + <div style="display:inline-block; width:10px; height:50px;"></div> + <div> + <div style="column-span:all;"></div> + </div> + </div> + </span> + <div style="columns:2; height:100px; float:left;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/margin-and-break-before-child-spanner.html b/testing/web-platform/tests/css/css-multicol/crashtests/margin-and-break-before-child-spanner.html new file mode 100644 index 0000000000..8ec36250cf --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/margin-and-break-before-child-spanner.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1380371"> +<div style="columns:3; column-fill:auto; height:106px;"> + <div style="margin-top:10px;"> + <div style="float:left; width:10px; padding-bottom:100px;"></div> + <div style="column-span:all;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/monolithic-oof-in-clipped-container.html b/testing/web-platform/tests/css/css-multicol/crashtests/monolithic-oof-in-clipped-container.html new file mode 100644 index 0000000000..7a35062902 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/monolithic-oof-in-clipped-container.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1403467"> +<div style="columns:2; column-fill:auto; height:250px;"> + <div style="position:relative; overflow:clip; width:100px; height:100px;"> + <div style="position:absolute; contain:size; width:100px; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/move-linebreak-to-different-column.html b/testing/web-platform/tests/css/css-multicol/crashtests/move-linebreak-to-different-column.html new file mode 100644 index 0000000000..abe83ca194 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/move-linebreak-to-different-column.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1322739"> + <div id="container"> + <div id="mc" style="height:100px; columns:2; column-fill:auto; line-height:20px; orphans:1; widows:1;"> + <br><br><br><br><br><br> + </div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + mc.style.height = "80px"; + container.setAttribute("ontouchstart", "nonValidFunctionName()"); + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/move-newline-pre-text.html b/testing/web-platform/tests/css/css-multicol/crashtests/move-newline-pre-text.html new file mode 100644 index 0000000000..13833ae946 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/move-newline-pre-text.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1386676"> + <div id="container" style="columns:10; column-fill:auto; height:30px; line-height:20px; orphans:1; widows:1; white-space:pre;"> + <span id="htmlvar00001"><br><br></span> + +</div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + document.body.style.color = "blue"; + htmlvar00001.style.display = "none"; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + container.style.width = "88%"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-at-page-boundary-print.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-at-page-boundary-print.html new file mode 100644 index 0000000000..63b27c88cd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-at-page-boundary-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1383662"> +<style> + body { + margin: 0; + } +</style> +<div style="height:100vh;"></div> +<div style="columns:2;"> + <div style="padding-top:100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-block-in-inline-crash.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-block-in-inline-crash.html new file mode 100644 index 0000000000..037b558ac0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-block-in-inline-crash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style type="text/css"> +body { + column-count: 5 +} +</style> +<body> + aaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaa + <time><header><id>a + <p><div style="float: left"></div>aaaaa</p> + a<menu></menu>aaaaa aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaa +</body> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-cached-consumed-bsize-crash.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-cached-consumed-bsize-crash.html new file mode 100644 index 0000000000..f82bddfef1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-cached-consumed-bsize-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-column-change-crash.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-column-change-crash.html new file mode 100644 index 0000000000..6f0a05be29 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-column-change-crash.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class=test-wait> +<div id="outer" style="column-count: 100;"> + <div id="inner" style="transform: translateY(1px); height:300px;"></div> + <div id="changeme" style="padding: 100px;"></div> +</div> +<script> + requestAnimationFrame(function() { + requestAnimationFrame(function() { + changeme.style.padding = '0'; + requestAnimationFrame(function() { + requestAnimationFrame(function() { + document.documentElement.classList.remove('test-wait'); + }); + }); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-dynamic-contain-crash.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-dynamic-contain-crash.html new file mode 100644 index 0000000000..e20a6e70e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-dynamic-contain-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-dynamic-transform-crash.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-dynamic-transform-crash.html new file mode 100644 index 0000000000..993bd1eddd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-dynamic-transform-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-floats-after-column-span-crash.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-floats-after-column-span-crash.html new file mode 100644 index 0000000000..4fe3f363eb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-floats-after-column-span-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-floats-in-ifc.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-floats-in-ifc.html new file mode 100644 index 0000000000..63d1653049 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-floats-in-ifc.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://crbug.com/1283250"> +<div style="columns:2; column-fill:auto; height:10px; line-height:20px;"> + <div style="columns:1;"> + <div style="padding-top:1px; direction:rtl;"> + <span> + <div style="display:inline-block; width:101%; height:1px;"></div> + </span> + <div style="float:left; width:1px; height:1px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/multicol-with-monolithic-oof-with-multicol-with-oof.html b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-with-monolithic-oof-with-multicol-with-oof.html new file mode 100644 index 0000000000..43133fc233 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/multicol-with-monolithic-oof-with-multicol-with-oof.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1314492"> +<div style="columns:2;"> + <div style="position:absolute; contain:size;"> + <div style="columns:2;"> + <div style="position:absolute;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/negative-margin-on-column-spanner.html b/testing/web-platform/tests/css/css-multicol/crashtests/negative-margin-on-column-spanner.html new file mode 100644 index 0000000000..0e14943d01 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/negative-margin-on-column-spanner.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="columns: 2;"> + <div style="margin: -100px; column-span: all;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-as-balanced-legend.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-as-balanced-legend.html new file mode 100644 index 0000000000..72779dc3f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-as-balanced-legend.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308080"> +<div id="outer" style="columns:3; width:500px; height:200px; column-fill:auto;"> + <legend style="columns:1;"> + <div style="width:100px; height:100px;"></div> + </legend> +</div> +<script> + document.body.offsetTop; + outer.style.width = "501px"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-as-nested-balanced-legend.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-as-nested-balanced-legend.html new file mode 100644 index 0000000000..0575193c21 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-as-nested-balanced-legend.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308024"> +<div id="outer" style="columns:3; width:500px;"> + <legend style="columns:1;"> + <div style="width:100px; height:100px;"></div> + </legend> +</div> +<script> + document.body.offsetTop; + outer.style.width = "501px"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-floated-multicol-with-tall-margin.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-floated-multicol-with-tall-margin.html new file mode 100644 index 0000000000..93dc644d05 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-floated-multicol-with-tall-margin.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1322125"> +<div style="columns:2; column-fill:auto; height:99px;"> + <div style="float:left; margin-top:100px; column-fill:auto; height:10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-and-float-with-tall-padding-before-float.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-and-float-with-tall-padding-before-float.html new file mode 100644 index 0000000000..2a901d1f58 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-and-float-with-tall-padding-before-float.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289532"> +<div style="columns:4; column-fill:auto; height:40px;"> + <div style="float:left; width:100%; height:100px; padding-bottom:3000px;"></div> + <div style="float:left; columns:1; column-fill:auto; width:100%; height:100px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-and-float-with-tall-padding.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-and-float-with-tall-padding.html new file mode 100644 index 0000000000..8eabef27f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-and-float-with-tall-padding.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289532"> +<div style="columns:4; column-fill:auto; height:100px;"> + <div style="float:left; height:10px; padding-bottom:100px; width:100%;"></div> + <div style="columns:2; column-fill:auto; height:200px; width:100%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-fieldset-tall-trailing-border-freeze.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-fieldset-tall-trailing-border-freeze.html new file mode 100644 index 0000000000..014073a9e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-fieldset-tall-trailing-border-freeze.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1323250"> +<div style="columns:2; height:100px; column-fill:auto;"> + <div style="height:10px;"></div> + <div style="columns:1; height:100px; column-fill:auto;"> + <fieldset style="height:100px; border:none; padding:0; margin:0; border:1px solid; padding-bottom:19px;"> + <legend style="padding:0; margin:0;"></legend> + <div></div> + </fieldset> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-fieldset-tall-trailing-padding.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-fieldset-tall-trailing-padding.html new file mode 100644 index 0000000000..b155a4d7f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-fieldset-tall-trailing-padding.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318137"> +<div style="columns:2; height:100px; column-fill:auto;"> + <div style="height:10px;"></div> + <div style="columns:1; height:100px; column-fill:auto;"> + <fieldset style="height:100px; border:none; padding:0; margin:0; padding-top:1px; padding-bottom:20px;"> + <legend></legend> + x + </fieldset> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-in-svg-foreignobject.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-in-svg-foreignobject.html new file mode 100644 index 0000000000..b182f534d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-in-svg-foreignobject.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1339391"> +<div style="columns:2;"> + <svg> + <foreignObject> + <div style="columns:2;"> + <div style="height:100px;"></div> + </div> + </foreignObject> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-nested-flex.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-nested-flex.html new file mode 100644 index 0000000000..047f0ac65e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-nested-flex.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1376859"> +<div style="columns:3; column-fill:auto; height:20px;"> + <div style="height:10px;"></div> + <div style="display:flex;"> + <div style="display:flex; margin-top:15px;"> + <div> + <div style="columns:2;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-with-float-between.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-with-float-between.html new file mode 100644 index 0000000000..3a583ed0da --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-multicol-with-float-between.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1303662"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="height:70px;"></div> + <div style="float:left; break-inside:avoid; width:100%; height:200px;"></div> + <div style="columns:1; column-fill:auto; width:100%; height:50px;"> + <div style="height:40px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-monolithic-child.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-monolithic-child.html new file mode 100644 index 0000000000..bf7aa425b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-monolithic-child.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1306582"> +<div style="columns:4; column-fill:auto; height:100px;"> + <div style="position:relative;"> + <div style="height:90px;"></div> + <div style="position:absolute; columns:1; column-fill:auto; width:10px; height:95px;"> + <div style="height:95px; contain:size;"></div> + </div> + <div style="position:absolute; width:1px; height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-oof-needing-additional-columns.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-oof-needing-additional-columns.html new file mode 100644 index 0000000000..52c44ff9e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-oof-needing-additional-columns.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1302323"> +<div style="columns:1; column-fill:auto; height:100px;"> + <div style="position:relative;"> + <div style="position:absolute; columns:1;"> + <div style="position:relative; margin-top:101px;"> + <div style="position:absolute; margin-top:101px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-padding.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-padding.html new file mode 100644 index 0000000000..e479758174 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-oof-multicol-with-padding.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1306582"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="position:relative;"> + <div style="height:90px;"></div> + <div style="position:absolute; columns:2; padding-top:40px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-spanner-with-negative-margin.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-spanner-with-negative-margin.html new file mode 100644 index 0000000000..3a9b2e354c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-spanner-with-negative-margin.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1321365"> +<div style="columns:2; column-fill:auto; height:20px;"> + <div style="height:20px;"></div> + <div style="columns:1;"> + <div style="column-span:all; margin-bottom:-3px;"></div> + <div style="height:10px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-fragmented-oof-negative-top-offset.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-fragmented-oof-negative-top-offset.html new file mode 100644 index 0000000000..38f62888a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-fragmented-oof-negative-top-offset.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1311398"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="height:101px;"></div> + <div style="position:relative;"> + <div style="columns:2; column-fill:auto;"> + <div style="position:absolute; top:-50px;"> + <div style="height:100px;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-multicol-table-caption.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-multicol-table-caption.html new file mode 100644 index 0000000000..7ef78394e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-multicol-table-caption.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1347141"> +<div style="columns:3; column-fill:auto; height:100px;"> + <div style="height:100px;"></div> + <div style="display:table;"> + <div style="display:table-caption; columns:2;"> + Blargh, I'm dead! + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-multicol-table-cell.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-multicol-table-cell.html new file mode 100644 index 0000000000..abb99c6201 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-multicol-table-cell.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1347322"> +<div style="columns:2;"> + <div style="columns:2; margin-top:8px;"> + text + <div style="display:table-cell; columns:2;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-oof-inside-fixed-width.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-oof-inside-fixed-width.html new file mode 100644 index 0000000000..d53286ebe9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-oof-inside-fixed-width.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1303905"> +<div id="outer" style="columns:2; column-fill:auto; height:20px; width:100px;"> + <div style="position:relative; columns:2; column-fill:auto;"> + <div style="width:10px; position:relative;"> + <div style="position:absolute; right:0; bottom:0;"></div> + </div> + <div style="position:absolute;"></div> + </div> +</div> +<script> + document.body.offsetTop; + outer.style.width = "101px"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-percentage-size-and-oof.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-percentage-size-and-oof.html new file mode 100644 index 0000000000..bf53cc17f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-percentage-size-and-oof.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1302592"> +<div style="columns:2;"> + <div style="columns:2; width:100%;"> + <div style="position:relative;"> + <div style="position:absolute;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding-and-oof.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding-and-oof.html new file mode 100644 index 0000000000..a055124257 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding-and-oof.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1295998"> +<div id="outer" style="columns:2; column-fill:auto; height:50px;"> + <div id="inner" style="columns:2; padding-top:51px; column-fill:auto; height:1px;"> + <div style="position:absolute;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding-and-spanner-and-content.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding-and-spanner-and-content.html new file mode 100644 index 0000000000..cca75d461c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding-and-spanner-and-content.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308937"> +<div style="columns:2; height:100px;"> + <div style="columns:2; padding-top:101px;"> + <div style="column-span:all;"></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding.html b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding.html new file mode 100644 index 0000000000..7f062b1ef9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/nested-with-tall-padding.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308937"> +<div style="columns:2; height:100px;"> + <div style="columns:2; padding-top:101px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/oof-becomes-spanner.html b/testing/web-platform/tests/css/css-multicol/crashtests/oof-becomes-spanner.html new file mode 100644 index 0000000000..4897e47dbc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/oof-becomes-spanner.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1317656"> +<div style="columns:2;"> + <div> + <div id="elm" style="position:absolute;"></div> + </div> +</div> +<script> + document.body.offsetTop; + elm.style.position = "static"; + elm.style.columnSpan = "all"; + document.body.offsetTop; + elm.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/oof-in-additional-column-before-spanner.html b/testing/web-platform/tests/css/css-multicol/crashtests/oof-in-additional-column-before-spanner.html new file mode 100644 index 0000000000..afdeabe174 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/oof-in-additional-column-before-spanner.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1361902"> + <div style="columns:1;"> + <div style="float:left; padding-top:10px; position:relative;"> + <div style="position:absolute; height:2px;"></div> + <div id="elm" style="display:inline-block;"></div> + </div> + <span> + <div style="column-span:all;"></div> + </span> + </div> + <script> + requestAnimationFrame(()=>{ + requestAnimationFrame(()=>{ + elm.style.display = "none"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/oof-in-nested-line-float.html b/testing/web-platform/tests/css/css-multicol/crashtests/oof-in-nested-line-float.html new file mode 100644 index 0000000000..d4d67763c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/oof-in-nested-line-float.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1307990"> +<div style="columns:3; column-fill:auto; height:100px; line-height:20px; orphans:1; widows:1;"> + <br> + <div style="columns:2; float:left; height:20px; column-fill:auto;"> + <div style="position:relative;"> + <br> + <div style="position:absolute; width:100%; height:10px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/oof-nested-multicol-inside-oof.html b/testing/web-platform/tests/css/css-multicol/crashtests/oof-nested-multicol-inside-oof.html new file mode 100644 index 0000000000..f80225a5c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/oof-nested-multicol-inside-oof.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1320787"> +<div style="columns:3; height:30px; column-fill:auto; width:500px;"> + <div style="position:relative; columns:2; height:20px; column-fill:auto; width:5px;"> + <div style="position:absolute; height:200px; width:4px;"> + <div style="columns:2; position:absolute; column-fill:auto; height:114px; width:3px;"> + <div style="position:relative; width:2px;"> + <div style="position:absolute; width:1px; height:50px;"></div> + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/outline-move-oof-with-inline.html b/testing/web-platform/tests/css/css-multicol/crashtests/outline-move-oof-with-inline.html new file mode 100644 index 0000000000..f2b259bcf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/outline-move-oof-with-inline.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1374625"> +<div style="columns:2; column-fill:auto; outline-style:auto; height:100px;"> + <div style="position:relative;"> + <div id="dings" style="position:absolute; height:120px; left:10px;"> + <span style="border:solid;">a</span> + </div> + </div> +</div> +<script> + document.body.offsetTop; + dings.style.left = "11px"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/relayout-nested-with-oof.html b/testing/web-platform/tests/css/css-multicol/crashtests/relayout-nested-with-oof.html new file mode 100644 index 0000000000..bdc7147337 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/relayout-nested-with-oof.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1296900"> +<div id="outer" style="columns:1; column-fill:auto; width:333px; height:100px;"> + <div style="columns:1; column-fill:auto; width:100px; height:50px;"> + <div style="position:relative;"> + <div style="position:absolute; padding-left:1px; padding-bottom:10px;"></div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + outer.style.width = "334px"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/relpos-inline-with-abspos-multicol-gets-block-child.html b/testing/web-platform/tests/css/css-multicol/crashtests/relpos-inline-with-abspos-multicol-gets-block-child.html new file mode 100644 index 0000000000..19a9bdde3a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/relpos-inline-with-abspos-multicol-gets-block-child.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308071"> +<div style="columns:2;"> + <span style="position:relative;"> + <div style="position:absolute;"></div> + </span> + <div id="surprise" style="display:none;"></div> + <span></span> +</div> +<script> + document.body.offsetTop; + surprise.style.display = "block"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/relpos-spanner-with-spanner-child-becomes-regular.html b/testing/web-platform/tests/css/css-multicol/crashtests/relpos-spanner-with-spanner-child-becomes-regular.html new file mode 100644 index 0000000000..0f6f66557d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/relpos-spanner-with-spanner-child-becomes-regular.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1333166"> +<div style="columns:2;"> + <div id="trouble" style="column-span:all; position:relative;"> + <div style="column-span:all;"></div> + </div> + <div></div> +</div> +<script> + document.body.offsetTop; + trouble.style.columnSpan = "none"; + trouble.style.position = "static"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/remove-spanner-after-spanner-in-inline-before-inline.html b/testing/web-platform/tests/css/css-multicol/crashtests/remove-spanner-after-spanner-in-inline-before-inline.html new file mode 100644 index 0000000000..0836ef1a91 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/remove-spanner-after-spanner-in-inline-before-inline.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308253"> +<style> + #mc { columns: 2; } + #mc div { column-span: all; } +</style> +<div id="mc"> + <span><div></div></span><div id="removeme"></div><span id="removemetoo"></span><div></div> +</div> +<script> + document.body.offsetTop; + removeme.style.display = "none"; + document.body.offsetTop; + removemetoo.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/remove-spanner-in-table-caption-nested-multicol.html b/testing/web-platform/tests/css/css-multicol/crashtests/remove-spanner-in-table-caption-nested-multicol.html new file mode 100644 index 0000000000..21d8a7ee8c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/remove-spanner-in-table-caption-nested-multicol.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1379635"> +<div style="columns:1;"> + <div style="columns:2; display:table-caption;"> + <div style="width:10px;"> + <div style="height:100px;"> + <div style="height:1px;"></div> + <div style="break-before:column;"></div> + </div> + <div id="e52" style="overflow:hidden; column-span:all;"></div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + e52.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/repeated-section-in-nested-table-nested-multicol.html b/testing/web-platform/tests/css/css-multicol/crashtests/repeated-section-in-nested-table-nested-multicol.html new file mode 100644 index 0000000000..e48854a36b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/repeated-section-in-nested-table-nested-multicol.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1348774"> +<div style="columns:2; column-fill:auto; height:160px; background:yellow;"> + <div style="display:table;"> + <div style="display:table;"> + <div style="contain:size; height:150px;"></div> + <div style="display:table-footer-group; break-inside:avoid;"> + <div style="columns:2;"> + x AAAAAAAAAAAAAAAAAAAA x + </div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/repeated-table-footer-in-caption-nested-multicol.html b/testing/web-platform/tests/css/css-multicol/crashtests/repeated-table-footer-in-caption-nested-multicol.html new file mode 100644 index 0000000000..d630abe8bb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/repeated-table-footer-in-caption-nested-multicol.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1354966"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="display:table;"> + <div style="display:table-caption; columns:2; column-fill:auto; height:50px;"> + <div style="display:table;"> + <div style="display:table-footer-group; break-inside:avoid;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/restricted-height-bottom-border-overflow-and-spanner.html b/testing/web-platform/tests/css/css-multicol/crashtests/restricted-height-bottom-border-overflow-and-spanner.html new file mode 100644 index 0000000000..43c356509c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/restricted-height-bottom-border-overflow-and-spanner.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1381327"> +<div style="columns:4;"> + <div style="height:10px; border-bottom:1px solid;"> + <div style="height:20px; contain:size;"></div> + <div style="height:20px; contain:size;"></div> + <div style="float:right; width:10px; height:100px;"></div> + <div style="column-span:all;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/scrollable-spanner-in-nested.html b/testing/web-platform/tests/css/css-multicol/crashtests/scrollable-spanner-in-nested.html new file mode 100644 index 0000000000..b904aaddd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/scrollable-spanner-in-nested.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1334885"> +<div style="columns:2;"> + <!-- Add a table, as an attempt to trigger legacy layout fallback. --> + <div style="display:table;"></div> + <div style="columns:2;"> + <div style="overflow:scroll; column-span:all;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/size-containment-become-multicol-add-inline-child.html b/testing/web-platform/tests/css/css-multicol/crashtests/size-containment-become-multicol-add-inline-child.html new file mode 100644 index 0000000000..6933592c7e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/size-containment-become-multicol-add-inline-child.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1348714"> +<div id="container" style="width:fit-content; container-type:size;"> + <span></span> + <span id="boo" style="display:none;"></span> +</div> +<script> + document.body.offsetTop; + container.style.columnCount = "2"; + boo.style.display = "inline"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/spanner-after-parallel-flow.html b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-after-parallel-flow.html new file mode 100644 index 0000000000..4ed0914fc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-after-parallel-flow.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1383978"> +<div style="columns:5; height:10px;"> + <div style="height:0;"> + <div style="contain:size; height:20px;"></div> + <div style="contain:size; height:20px;"></div> + <div></div> + <div style="break-before:column;"></div> + </div> + <div> + <div style="contain:size; height:20px;"></div> + <div style="contain:size; height:20px;"></div> + <div style="column-span:all;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-inline-after-very-tall-content-001.html b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-inline-after-very-tall-content-001.html new file mode 100644 index 0000000000..6f3cb5c553 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-inline-after-very-tall-content-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1327882"> +<div style="columns:3; orphans:1; widows:2; line-height:20px;"> + <span> + <div style="height:1234567890px;"></div> + <br> + <div style="display:inline-block; width:100px; height:6000000px;"></div> + <div style="column-span:all;"></div> + </span> + <div id="tallthing" style="height:10000000px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-inline-after-very-tall-content-002.html b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-inline-after-very-tall-content-002.html new file mode 100644 index 0000000000..0a68ec8288 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-inline-after-very-tall-content-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1327882"> +<div style="columns:15;"> + <span> + <div style="height:214748364px;"></div> + </span> + <br> + <div style="display:inline-block; width:100px; height:2147487px;"></div> + <span> + <div style="column-span:all;"></div> + </span> + <div style="columns:1; column-fill:auto; height:2147483px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-overflowed-container-before-float.html b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-overflowed-container-before-float.html new file mode 100644 index 0000000000..c15d8aa0fa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-overflowed-container-before-float.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1309859"> +<div style="columns:2; column-fill:auto; height:400px;"> + <div style="height:10px;"></div> + <div style="height:20px;"> + <div style="display:inline-block; width:10px; height:50px;"></div> + <div> + <div style="column-span:all;"></div> + </div> + </div> + <div style="columns:2; height:100px; float:left;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-overflowed-container-before-inline-content.html b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-overflowed-container-before-inline-content.html new file mode 100644 index 0000000000..8fba171e25 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/spanner-in-overflowed-container-before-inline-content.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1314998"> +<div style="columns:10; height:100px; column-fill:auto; line-height:20px; orphans:1; widows:1;"> + <div style="height:0; padding-bottom:100px;"> + <div style="height:350px;"></div> + <div style="column-span:all; padding-bottom: 100px;"></div> + </div> + <div style="width:1px;"> + <br> + <div style="display:inline-block; columns:2; height:100px; column-fill:auto;"></div> + x + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/specified-height-with-just-spanner-and-oof.html b/testing/web-platform/tests/css/css-multicol/crashtests/specified-height-with-just-spanner-and-oof.html new file mode 100644 index 0000000000..3c4d51b0f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/specified-height-with-just-spanner-and-oof.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1296897"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="column-span:all;"></div> + <div style="position:absolute;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/sticky-in-abs-in-sticky.html b/testing/web-platform/tests/css/css-multicol/crashtests/sticky-in-abs-in-sticky.html new file mode 100644 index 0000000000..961b4fc2bb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/sticky-in-abs-in-sticky.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1224888"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="position:sticky; left:0;"> + <div style="position:absolute;"> + <div style="break-after:column;"></div> + <div style="position:sticky; backface-visibility:hidden; left:0; width:100px; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/table-caption-change-descendant-display-type.html b/testing/web-platform/tests/css/css-multicol/crashtests/table-caption-change-descendant-display-type.html new file mode 100644 index 0000000000..c44fcca5ac --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/table-caption-change-descendant-display-type.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1347713"> +<div style="columns:2;"> + <div style="display:table-caption; columns:2;"> + <div style="columns:2;"> + <div style="position:relative;"> + <div id="foo" style="position:absolute;"></div> + </div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + foo.style.display = "flex"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/table-caption-inline-block-remove-child.html b/testing/web-platform/tests/css/css-multicol/crashtests/table-caption-inline-block-remove-child.html new file mode 100644 index 0000000000..721f1e8889 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/table-caption-inline-block-remove-child.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1347868"> +<div style="columns:2; column-fill:auto; height:500px;"> + <table> + <caption> + <div style="display:inline-block;"> + <div style="writing-mode:vertical-lr;"> + <div id="elm" style="display:inline-block;"></div> + <div style="display:inline-block; overflow:auto;"></div> + </div> + </div> + </caption> + </table> +</div> +<script> + document.body.offsetTop; + elm.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/table-cell-writing-mode-root.html b/testing/web-platform/tests/css/css-multicol/crashtests/table-cell-writing-mode-root.html new file mode 100644 index 0000000000..394989e009 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/table-cell-writing-mode-root.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1174687"> +<div style="display:table-cell; writing-mode:vertical-lr; columns:2;"> + <span id="surprise" style="display:none;">x</span> +</div> +<script> + document.body.offsetTop; + surprise.style.display = "inline"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/trailing-parent-padding-between-spanners.html b/testing/web-platform/tests/css/css-multicol/crashtests/trailing-parent-padding-between-spanners.html new file mode 100644 index 0000000000..ffd1002177 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/trailing-parent-padding-between-spanners.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1310489"> +<div style="columns:2;"> + <div style="padding-bottom:12px;"> + <div style="column-span:all;"></div> + </div> + <div style="column-span:all;"></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/crashtests/vertical-rl-column-rules-wide-columns.html b/testing/web-platform/tests/css/css-multicol/crashtests/vertical-rl-column-rules-wide-columns.html new file mode 100644 index 0000000000..22eb9d56b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/crashtests/vertical-rl-column-rules-wide-columns.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308191"> +<div style="columns:1; writing-mode:vertical-rl; column-rule:solid; column-fill:auto; block-size:100px;"> + <div style="inline-size:1234567890px; block-size:500px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/dynamic-become-multicol-add-oof-inside-inline-crash.html b/testing/web-platform/tests/css/css-multicol/dynamic-become-multicol-add-oof-inside-inline-crash.html new file mode 100644 index 0000000000..226761bb5c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/dynamic-become-multicol-add-oof-inside-inline-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1282196"> +<div id="container"> + <div id="dynmc"> + <span style="position:relative;"> + <div id="oof" style="display:none; position:absolute;"></div> + </span> + </div> + <div id="newowner"></div> +</div> +<script> + document.body.offsetTop; + dynmc.style.columns = "1"; + oof.style.display = "block"; + document.body.offsetTop; + newowner.appendChild(oof); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/equal-gap-and-rule.html b/testing/web-platform/tests/css/css-multicol/equal-gap-and-rule.html new file mode 100644 index 0000000000..bf6d6b9cef --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/equal-gap-and-rule.html @@ -0,0 +1,8 @@ +<!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"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:8; column-fill:auto; column-gap:5px; column-rule:5px solid green; width:100px; height:100px; background:red;"> + <div style="height:800px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/extremely-tall-multicol-with-extremely-tall-child-crash.html b/testing/web-platform/tests/css/css-multicol/extremely-tall-multicol-with-extremely-tall-child-crash.html new file mode 100644 index 0000000000..1f74697489 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/extremely-tall-multicol-with-extremely-tall-child-crash.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Multi-column Layout Test: extremely tall multicolumn container with extremely tall inline-block inside</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model" title="CSS Multi-column Layout Module Level 1"> +<meta name="assert" content="This tests that we get no crash if we put an extremely tall inline-block inside an extremely tall multicol container. Engines typically have some maximum limit for how large values they can represent. If the value is large enough to become 'infinity', the engine should still not crash"> +<!-- Explanation for the CSS values specified below: This test was written for + the Chromium Blink engine, which uses a fixed-point 32 bit integer. In this + example, the value will be too large, so it will be clamped to the maximum + value (about 2^25 px). However, there's a a further complication in that + CSS length values in Blink are transported via a 32bit float, so precision + will be a few pixels off. So even if 1234567890px is way more than Blink + can handle, it will be truncated to a bit less than the maximum value + (about 2^25). We want the multicol container to be as tall as it can + possibly get, so we put it inside a 1234567890px tall container, and + specify the height of the child multicol container to be 200% to ensure + this. We also use a percentage to specify the height of the child inside + the multicol container, for the same reason. --> +<div style="height:1234567890px;"> + <div style="columns:2; column-fill:auto; height:200%;"> + <div style="display:inline-block; height:100%;"></div><br> + hest +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(() => { }, "No crash or assertion failure."); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/filter-with-abspos.html b/testing/web-platform/tests/css/css-multicol/filter-with-abspos.html new file mode 100644 index 0000000000..763bf1fc5a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/filter-with-abspos.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>Filtered block becomes containing block of absolutely positioned child</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty" title="5. Graphic filters: the filter property"> +<meta name="assert" content="A filtered block will be a containing block for absolutely positioned descendants. If all this takes place inside a multicol container, this means that the absolutely positioned box also has the multicol container in its containing block, which means that it should be fragmented."> +<div id="multicol" style="columns:2;"> + <div id="container" style="height:100px;"> + <!-- The spanner is here to trigger the crash in crbug.com/847328 --> + <div style="column-span:all;"></div> + <div id="abspos" style="position:absolute; height:100px;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(() => { + let container = document.getElementById("container"); + let abspos = document.getElementById("abspos"); + document.body.offsetTop; + assert_equals(abspos.getBoundingClientRect().height, 100); + container.style.filter = "opacity(0.5)"; + assert_equals(abspos.getBoundingClientRect().height, 50); + // The last step will cause a crash if crbug.com/847328 is present + document.body.offsetTop; + abspos.style.display = "none"; +}, "Making a container filtered, and then removing an abspos child"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/fixed-in-multicol-with-transform-container.html b/testing/web-platform/tests/css/css-multicol/fixed-in-multicol-with-transform-container.html new file mode 100644 index 0000000000..ee384c378e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/fixed-in-multicol-with-transform-container.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol-with-transform-container.html b/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol-with-transform-container.html new file mode 100644 index 0000000000..df836c18ea --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol-with-transform-container.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol-with-viewport-container.html b/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol-with-viewport-container.html new file mode 100644 index 0000000000..f3681f0917 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol-with-viewport-container.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol.html b/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol.html new file mode 100644 index 0000000000..0745b8394a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/fixed-in-nested-multicol.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/fixed-size-child-with-overflow.html b/testing/web-platform/tests/css/css-multicol/fixed-size-child-with-overflow.html new file mode 100644 index 0000000000..60300c3cd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/fixed-size-child-with-overflow.html @@ -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/#column-gaps-and-rules"> +<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:4; column-fill:auto; column-gap:5px; column-rule:5px solid green; width:100px; height:100px; background:red;"> + <div style="height:50px;"> + <div style="height:400px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-001.html b/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-001.html new file mode 100644 index 0000000000..8b71999a23 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-002.html b/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-002.html new file mode 100644 index 0000000000..c2afef38aa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-003.html b/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-003.html new file mode 100644 index 0000000000..fc29b5cb16 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/fixedpos-static-pos-with-viewport-cb-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/float-and-block.html b/testing/web-platform/tests/css/css-multicol/float-and-block.html new file mode 100644 index 0000000000..21f9fb9743 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/float-and-block.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Paint order with float VS regular block is correct inside multicol</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order" title="E.2 Painting order"> +<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; width:100px; background:hotpink;"> + <div style="float:left; width:50px; height:200px; background:green;"></div> + <div style="height:200px; background:red;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/float-with-line-after-spanner-ref.html b/testing/web-platform/tests/css/css-multicol/float-with-line-after-spanner-ref.html new file mode 100644 index 0000000000..7c33b48f5e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/float-with-line-after-spanner-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word 'PASS' should be seen below, inside a blue square.</p> +<div style="font-size:50px; width:225px; height:225px; line-height:60px; color:white; background:blue;"> + <div style="height:165px;"></div> + PASS +</div> diff --git a/testing/web-platform/tests/css/css-multicol/float-with-line-after-spanner.html b/testing/web-platform/tests/css/css-multicol/float-with-line-after-spanner.html new file mode 100644 index 0000000000..2351fb4bec --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/float-with-line-after-spanner.html @@ -0,0 +1,11 @@ +<!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="float-with-line-after-spanner-ref.html"> +<p>The word 'PASS' should be seen below, inside a blue square.</p> +<div style="columns:1; font-size:50px; width:225px; line-height:60px; color:white; background:blue;"> + <div style="float:left; padding-top:165px;">PASS</div> + <div style="height:65px;"></div> + <div style="column-span:all;"></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/getclientrects-000.html b/testing/web-platform/tests/css/css-multicol/getclientrects-000.html new file mode 100644 index 0000000000..be11ba9949 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/getclientrects-000.html @@ -0,0 +1,148 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + visibility: hidden; + position: absolute; + left: 100px; + top: 50px; + columns: 3; + column-gap: 10px; + inline-size: 290px; + font: 20px/1 Ahem; + orphans: 1; + widows: 1; + } + #horizontalTbLtr { + writing-mode: horizontal-tb; + } + #verticalLrLtr { + writing-mode: vertical-lr; + } + #verticalRlLtr { + writing-mode: vertical-rl; + } + #horizontalTbRtl { + writing-mode: horizontal-tb; + direction: rtl; + } + #verticalLrRtl { + writing-mode: vertical-lr; + direction: rtl; + } + #verticalRlRtl { + writing-mode: vertical-rl; + direction: rtl; + } +</style> +<div class="multicol" id="horizontalTbLtr"> + <div style="block-size:20px;"></div> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="verticalLrLtr"> + <div style="block-size:20px;"></div> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="verticalRlLtr"> + <div style="block-size:20px;"></div> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="horizontalTbRtl" > + <div style="block-size:20px;"></div> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="verticalLrRtl"> + <div style="block-size:20px;"></div> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="verticalRlRtl"> + <div style="block-size:20px;"></div> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var span = document.querySelector("#horizontalTbLtr span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 100); + assert_equals(rects[0].top, 70); + assert_equals(rects[1].left, 200); + assert_equals(rects[1].top, 50); + assert_equals(rects[2].left, 200); + assert_equals(rects[2].top, 70); + assert_equals(rects[3].left, 300); + assert_equals(rects[3].top, 50); + }, "horizontal-tb ltr"); + + test(()=> { + var span = document.querySelector("#verticalLrLtr span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 120); + assert_equals(rects[0].top, 50); + assert_equals(rects[1].left, 100); + assert_equals(rects[1].top, 150); + assert_equals(rects[2].left, 120); + assert_equals(rects[2].top, 150); + assert_equals(rects[3].left, 100); + assert_equals(rects[3].top, 250); + }, "vertical-lr ltr"); + + test(()=> { + var span = document.querySelector("#verticalRlLtr span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 100); + assert_equals(rects[0].top, 50); + assert_equals(rects[1].left, 120); + assert_equals(rects[1].top, 150); + assert_equals(rects[2].left, 100); + assert_equals(rects[2].top, 150); + assert_equals(rects[3].left, 120); + assert_equals(rects[3].top, 250); + }, "vertical-rl ltr"); + test(()=> { + var span = document.querySelector("#horizontalTbRtl span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 310); + assert_equals(rects[0].top, 70); + assert_equals(rects[1].left, 210); + assert_equals(rects[1].top, 50); + assert_equals(rects[2].left, 210); + assert_equals(rects[2].top, 70); + assert_equals(rects[3].left, 110); + assert_equals(rects[3].top, 50); + }, "horizontal-tb rtl"); + test(()=> { + var span = document.querySelector("#verticalLrRtl span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 120); + assert_equals(rects[0].top, 260); + assert_equals(rects[1].left, 100); + assert_equals(rects[1].top, 160); + assert_equals(rects[2].left, 120); + assert_equals(rects[2].top, 160); + assert_equals(rects[3].left, 100); + assert_equals(rects[3].top, 60); + }, "vertical-lr rtl"); + test(()=> { + var span = document.querySelector("#verticalRlRtl span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 100); + assert_equals(rects[0].top, 260); + assert_equals(rects[1].left, 120); + assert_equals(rects[1].top, 160); + assert_equals(rects[2].left, 100); + assert_equals(rects[2].top, 160); + assert_equals(rects[3].left, 120); + assert_equals(rects[3].top, 60); + }, "vertical-rl rtl"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/getclientrects-001.html b/testing/web-platform/tests/css/css-multicol/getclientrects-001.html new file mode 100644 index 0000000000..630e5ee0f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/getclientrects-001.html @@ -0,0 +1,148 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .multicol { + visibility: hidden; + position: absolute; + left: 100px; + top: 50px; + columns: 3; + column-gap: 10px; + inline-size: 290px; + font: 20px/1 Ahem; + orphans: 1; + widows: 1; + } + #horizontalTbLtr { + writing-mode: horizontal-tb; + } + #verticalLrLtr { + writing-mode: vertical-lr; + } + #verticalRlLtr { + writing-mode: vertical-rl; + } + #horizontalTbRtl { + writing-mode: horizontal-tb; + direction: rtl; + } + #verticalLrRtl { + writing-mode: vertical-lr; + direction: rtl; + } + #verticalRlRtl { + writing-mode: vertical-rl; + direction: rtl; + } +</style> +<div class="multicol" id="horizontalTbLtr"> + <br> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="verticalLrLtr"> + <br> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="verticalRlLtr"> + <br> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="horizontalTbRtl" > + <br> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="verticalLrRtl"> + <br> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<div class="multicol" id="verticalRlRtl"> + <br> + <span>XXXX XXXX XXXX XXXX</span> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var span = document.querySelector("#horizontalTbLtr span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 100); + assert_equals(rects[0].top, 70); + assert_equals(rects[1].left, 200); + assert_equals(rects[1].top, 50); + assert_equals(rects[2].left, 200); + assert_equals(rects[2].top, 70); + assert_equals(rects[3].left, 300); + assert_equals(rects[3].top, 50); + }, "horizontal-tb ltr"); + + test(()=> { + var span = document.querySelector("#verticalLrLtr span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 120); + assert_equals(rects[0].top, 50); + assert_equals(rects[1].left, 100); + assert_equals(rects[1].top, 150); + assert_equals(rects[2].left, 120); + assert_equals(rects[2].top, 150); + assert_equals(rects[3].left, 100); + assert_equals(rects[3].top, 250); + }, "vertical-lr ltr"); + + test(()=> { + var span = document.querySelector("#verticalRlLtr span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 100); + assert_equals(rects[0].top, 50); + assert_equals(rects[1].left, 120); + assert_equals(rects[1].top, 150); + assert_equals(rects[2].left, 100); + assert_equals(rects[2].top, 150); + assert_equals(rects[3].left, 120); + assert_equals(rects[3].top, 250); + }, "vertical-rl ltr"); + test(()=> { + var span = document.querySelector("#horizontalTbRtl span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 310); + assert_equals(rects[0].top, 70); + assert_equals(rects[1].left, 210); + assert_equals(rects[1].top, 50); + assert_equals(rects[2].left, 210); + assert_equals(rects[2].top, 70); + assert_equals(rects[3].left, 110); + assert_equals(rects[3].top, 50); + }, "horizontal-tb rtl"); + test(()=> { + var span = document.querySelector("#verticalLrRtl span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 120); + assert_equals(rects[0].top, 260); + assert_equals(rects[1].left, 100); + assert_equals(rects[1].top, 160); + assert_equals(rects[2].left, 120); + assert_equals(rects[2].top, 160); + assert_equals(rects[3].left, 100); + assert_equals(rects[3].top, 60); + }, "vertical-lr rtl"); + test(()=> { + var span = document.querySelector("#verticalRlRtl span"); + var rects = span.getClientRects(); + assert_equals(rects.length, 4); + assert_equals(rects[0].left, 100); + assert_equals(rects[0].top, 260); + assert_equals(rects[1].left, 120); + assert_equals(rects[1].top, 160); + assert_equals(rects[2].left, 100); + assert_equals(rects[2].top, 160); + assert_equals(rects[3].left, 120); + assert_equals(rects[3].top, 60); + }, "vertical-rl rtl"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/going-out-of-flow-after-spanner.html b/testing/web-platform/tests/css/css-multicol/going-out-of-flow-after-spanner.html new file mode 100644 index 0000000000..2fe0e42a75 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/going-out-of-flow-after-spanner.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>Taking the sole box after a spanner out of flow, then remove it</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model"> +<meta name="assert" content="An absolutely positioned box is still contained by the multicol container if its containing block is inside the multicol container"> +<div id="multicol" style="columns:3;"> + <div style="position:relative;"> + <div style="column-span:all;"></div> + <div id="victim" style="width:100%; height:300px;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(() => { + var multicol = document.getElementById("multicol"); + var victim = document.getElementById("victim"); + assert_equals(multicol.getBoundingClientRect().height, 100); + victim.style.position = "absolute"; + assert_equals(multicol.getBoundingClientRect().height, 100); + victim.style.display = "none"; + assert_equals(multicol.getBoundingClientRect().height, 0); +}, "Going out of flow and still fragmented"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/hit-test-child-under-perspective.html b/testing/web-platform/tests/css/css-multicol/hit-test-child-under-perspective.html new file mode 100644 index 0000000000..1a6e647537 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/hit-test-child-under-perspective.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://crbug.com/1308752"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div style="column-count: 2; width: 200px; height: 100px"> + <div style="perspective: 100px"> + <div id="child1" style="height: 100px; position: relative"></div> + <div id="child2" style="height: 100px; position: relative"></div> + </div> +</div> +<script> + test(()=> { + assert_equals(document.elementFromPoint(50, 50), child1); + assert_equals(document.elementFromPoint(150, 50), child2); + }, "test"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/hit-test-transformed-child.html b/testing/web-platform/tests/css/css-multicol/hit-test-transformed-child.html new file mode 100644 index 0000000000..ac0fd54c9f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/hit-test-transformed-child.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1146975"> +<style> + body { + margin: 8px; + } +</style> +<div style="columns:2; column-fill:auto; height:100px;"> + <div> + <div id="target" style="transform:translateX(100px) translateY(200px); width:50px; height:50px; background:blue;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(document.elementFromPoint(108, 208), target); + assert_equals(document.elementFromPoint(157, 208), target); + assert_equals(document.elementFromPoint(157, 257), target); + }, "inside"); + + test(()=> { + assert_not_equals(document.elementFromPoint(107, 208), target); + assert_not_equals(document.elementFromPoint(108, 207), target); + assert_not_equals(document.elementFromPoint(158, 257), target); + assert_not_equals(document.elementFromPoint(157, 258), target); + assert_not_equals(document.elementFromPoint(8, 8), target); + }, "outside"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/img-alt-as-multicol-crash.html b/testing/web-platform/tests/css/css-multicol/img-alt-as-multicol-crash.html new file mode 100644 index 0000000000..95b8de96e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/img-alt-as-multicol-crash.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278531"> +<img alt="BOOM" style="columns:2;"> diff --git a/testing/web-platform/tests/css/css-multicol/increase-prev-sibling-height-ref.html b/testing/web-platform/tests/css/css-multicol/increase-prev-sibling-height-ref.html new file mode 100644 index 0000000000..963f584f17 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/increase-prev-sibling-height-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below.</p> +<div style="height:2em; background:black;"></div> +PASS diff --git a/testing/web-platform/tests/css/css-multicol/increase-prev-sibling-height.html b/testing/web-platform/tests/css/css-multicol/increase-prev-sibling-height.html new file mode 100644 index 0000000000..416f811f28 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/increase-prev-sibling-height.html @@ -0,0 +1,20 @@ +<!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"> +<link rel="match" href="increase-prev-sibling-height-ref.html"> +<p>The word "PASS" should be seen below.</p> +<div id="elm" style="background:black;"></div> +<div style="columns:2;"> + PASS +</div> +<script> + requestAnimationFrame(()=>{ + requestAnimationFrame(()=>{ + elm.style.height = "2em"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/inheritance.html b/testing/web-platform/tests/css/css-multicol/inheritance.html new file mode 100644 index 0000000000..e7938d3e9f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/inheritance.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Multi-column Layout properties</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#property-index"> +<meta name="assert" content="Properties should not inherit."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="reference"></div> +<div id="container"> + <div id="target"></div> +</div> +<style> + #reference { + border-style: dotted; /* Avoid border-top-width computed style 0 */ + border-top-width: medium; + } + #container { + color: rgba(42, 53, 64, 0.75); + column-rule-style: dotted; /* Avoid column-rule-width computed style 0 */ + } + #target { + column-rule-style: dotted; + } +</style> +<script> +const mediumWidth = getComputedStyle(reference).borderTopWidth; // e.g. 3px +reference.style.display = 'none'; + +assert_not_inherited('column-count', 'auto', '2'); +assert_not_inherited('column-fill', 'balance', 'auto'); +assert_not_inherited('column-rule-color', 'rgba(42, 53, 64, 0.75)', 'rgba(2, 3, 5, 0.5)'); +assert_not_inherited('column-rule-style', 'none', 'dashed'); +assert_not_inherited('column-rule-width', mediumWidth, '10px'); +assert_not_inherited('column-span', 'none', 'all'); +assert_not_inherited('column-width', 'auto', '10px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/inline-block-and-column-span-all.html b/testing/web-platform/tests/css/css-multicol/inline-block-and-column-span-all.html new file mode 100644 index 0000000000..c968a0875c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/inline-block-and-column-span-all.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Combining column-span and inline-block on the same element</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-span" title="6.1. column-span"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="column-span:all only applies to block-level elements, i.e. not inline-blocks, for instance"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:4; column-gap:0; width:400px;"> + <div style="column-span:all; display:inline-block;"> + <div style="float:left; width:100px; height:50px; background:green;"></div> + <div style="float:left; width:100px; height:50px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/intrinsic-size-001.html b/testing/web-platform/tests/css/css-multicol/intrinsic-size-001.html new file mode 100644 index 0000000000..ce8011b17f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/intrinsic-size-001.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>Intrinsic size computation with specified padding</title> +<link rel="author" title="Googld Inc." href="https://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#pseudo-algorithm " title="3.4. Pseudo-algorithm"> +<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="float:left; columns:2; height:40px; padding:30px; column-gap:0; background:green;"> + <div style="width:20px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/intrinsic-size-002.html b/testing/web-platform/tests/css/css-multicol/intrinsic-size-002.html new file mode 100644 index 0000000000..a85f14e914 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/intrinsic-size-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/intrinsic-size-003.html b/testing/web-platform/tests/css/css-multicol/intrinsic-size-003.html new file mode 100644 index 0000000000..86f67341d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/intrinsic-size-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/intrinsic-size-004.html b/testing/web-platform/tests/css/css-multicol/intrinsic-size-004.html new file mode 100644 index 0000000000..d603ae02e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/intrinsic-size-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/intrinsic-size-005.html b/testing/web-platform/tests/css/css-multicol/intrinsic-size-005.html new file mode 100644 index 0000000000..5f12836513 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/intrinsic-size-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/intrinsic-width-change-column-count.html b/testing/web-platform/tests/css/css-multicol/intrinsic-width-change-column-count.html new file mode 100644 index 0000000000..30e7671e41 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/intrinsic-width-change-column-count.html @@ -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/#pseudo-algorithm"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1037790"> +<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; background:red;"> + <div id="container" style="columns:3; column-gap:0; column-fill:auto; width:fit-content; height:100px; background:green;"> + <div style="width:25px; height:10px;"></div> + </div> +</div> +<script> + document.body.offsetTop; + container.style.columns = "4"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/large-actual-column-count.html b/testing/web-platform/tests/css/css-multicol/large-actual-column-count.html new file mode 100644 index 0000000000..615e3f2f05 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/large-actual-column-count.html @@ -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/#pseudo-algorithm"> +<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 id="container" style="overflow:hidden; columns:1; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:300000px;"></div> + <div style="width:100px; height:100px; background:green;"></div> + <div style="height:123456px;"></div> +</div> +<script> + document.getElementById("container").scrollLeft = 300000; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/moz-multicol3-column-balancing-break-inside-avoid-1-ref.html b/testing/web-platform/tests/css/css-multicol/moz-multicol3-column-balancing-break-inside-avoid-1-ref.html new file mode 100644 index 0000000000..c39deb12f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/moz-multicol3-column-balancing-break-inside-avoid-1-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html><head> + <title>CSS Test: Balancing Overflow, page-break-inside:avoid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012"> + <meta name="flags" content="paged"> + <meta charset="utf-8"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; } + .short { height: 5px; } + .short p { } + + </style> +</head> +<body> + +<div class="colset"> +<p>one<br> </p> +<p>two three</p> +<p>four five</p> +</div> + +<div class="colset"> + <p>one two three four five</p> +</div> + +<div class="colset"> +one two three four five +</div> + +<div class="colset"> + <div class="short"><p>one two three four five</p></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/moz-multicol3-column-balancing-break-inside-avoid-1.html b/testing/web-platform/tests/css/css-multicol/moz-multicol3-column-balancing-break-inside-avoid-1.html new file mode 100644 index 0000000000..f18a9ceefa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/moz-multicol3-column-balancing-break-inside-avoid-1.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<html><head> + <title>CSS Test: Balancing Overflow, page-break-inside:avoid</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012"> + <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside"> + <link rel="match" href="moz-multicol3-column-balancing-break-inside-avoid-1-ref.html"> + <meta name="flags" content="paged"> + <meta charset="utf-8"> + <style type="text/css"> +@page { size:5in 3in; margin:0.5in; } + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + .colset { + column-count: 3; + column-gap: 0; + border: solid silver; + width: 9em; + } + p { margin: 0; page-break-inside:avoid; } + .short { height: 5px; page-break-inside:avoid; } + .short p { page-break-inside:auto; } + + </style> +</head> +<body> + +<div class="colset"> +<p>one</p> +<p>two three</p> +<p>four five</p> +</div> + +<div class="colset"> + <p>one two three four five</p> +</div> + +<div class="colset"> +<p>one two</p> +<p>three four five</p> +</div> + +<div class="colset"> + <div class="short"><p>one two three four five</p></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-basic-001.html b/testing/web-platform/tests/css/css-multicol/multicol-basic-001.html new file mode 100644 index 0000000000..702cf549b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-basic-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <meta charset="utf-8"> + <title>CSS Test: Multi-column element via columns: [integer]</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> + <link rel="match" href="reference/multicol-basic-ref.html"/> + <meta name="flags" content="ahem"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .multicol-wrapper>*{ + font: 20px/1 Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + columns: 3; + column-gap: 0; + column-rule: none; + } + + .multicol-basic-ref-item{ + background: #000; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <div class="multicol-basic-ref"> + <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-basic-002.html b/testing/web-platform/tests/css/css-multicol/multicol-basic-002.html new file mode 100644 index 0000000000..50334e96d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-basic-002.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <meta charset="utf-8"> + <title>CSS Test: Multi-column element via column-count: [integer]</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> + <link rel="match" href="reference/multicol-basic-ref.html"/> + <meta name="flags" content="ahem"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .multicol-wrapper>*{ + font: 20px/1 Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + column-count: 3; + column-gap: 0; + column-rule: none; + } + + .multicol-basic-ref-item{ + background: #000; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <div class="multicol-basic-ref"> + <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-basic-003.html b/testing/web-platform/tests/css/css-multicol/multicol-basic-003.html new file mode 100644 index 0000000000..05cc1e0fe1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-basic-003.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <meta charset="utf-8"> + <title>CSS Test: Multi-column element via columns: [width]</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> + <link rel="match" href="reference/multicol-basic-ref.html"/> + <meta name="flags" content="ahem"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .multicol-wrapper>*{ + font: 20px/1 Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + columns: 120px; + column-gap: 0; + column-rule: none; + } + + .multicol-basic-ref-item{ + background: #000; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <div class="multicol-basic-ref"> + <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-basic-004.html b/testing/web-platform/tests/css/css-multicol/multicol-basic-004.html new file mode 100644 index 0000000000..a669969261 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-basic-004.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <meta charset="utf-8"> + <title>CSS Test: Multi-column element via column-width: [width]</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> + <link rel="match" href="reference/multicol-basic-ref.html"/> + <meta name="flags" content="ahem"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .multicol-wrapper>*{ + font: 20px/1 Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + column-width: 120px; + column-gap: 0; + column-rule: none; + } + + .multicol-basic-ref-item{ + background: #000; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <div class="multicol-basic-ref"> + <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-basic-005.xht b/testing/web-platform/tests/css/css-multicol/multicol-basic-005.xht new file mode 100644 index 0000000000..a4d0e69a5a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-basic-005.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Multi-column Layout Test: columns as column-count (basic)</title> +<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/> +<link rel="match" href="reference/multicol-basic-005-ref.xht"/> +<link rel="help" href="https://www.w3.org/TR/css3-multicol/#columns"/> +<link rel="help" href="https://www.w3.org/TR/css3-multicol/#cc"/> +<style type="text/css"> +div { + margin: 1em auto; + background: yellow; + border: thin solid black; + width: 600px; + columns: 3; + column-gap: 0; + column-rule: none; +} +</style> +</head> +<body> +<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-basic-006.xht b/testing/web-platform/tests/css/css-multicol/multicol-basic-006.xht new file mode 100644 index 0000000000..cf407ed201 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-basic-006.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Multi-column Layout Test: column-count (basic)</title> +<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/> +<link rel="match" href="reference/multicol-basic-005-ref.xht"/> +<link rel="help" href="https://www.w3.org/TR/css3-multicol/#cc"/> +<style type="text/css"> +div { + margin: 1em auto; + background: yellow; + border: thin solid black; + width: 600px; + column-count: 3; + column-gap: 0; + column-rule: none; +} +</style> +</head> +<body> +<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-basic-007.xht b/testing/web-platform/tests/css/css-multicol/multicol-basic-007.xht new file mode 100644 index 0000000000..add6a0ed66 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-basic-007.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Multi-column Layout Test: columns as column-width (basic)</title> +<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/> +<link rel="match" href="reference/multicol-basic-005-ref.xht"/> +<link rel="help" href="https://www.w3.org/TR/css3-multicol/#columns"/> +<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-width"/> +<style type="text/css"> +div { + margin: 1em auto; + background: yellow; + border: thin solid black; + width: 600px; + columns: 200px; + column-gap: 0; + column-rule: none; +} +</style> +</head> +<body> +<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-basic-008.xht b/testing/web-platform/tests/css/css-multicol/multicol-basic-008.xht new file mode 100644 index 0000000000..a2f550ca52 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-basic-008.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Multi-column Layout Test: column-width (basic)</title> +<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/> +<link rel="match" href="reference/multicol-basic-005-ref.xht"/> +<link rel="help" href="https://www.w3.org/TR/css3-multicol/#column-width"/> +<style type="text/css"> +div { + margin: 1em auto; + background: yellow; + border: thin solid black; + width: 600px; + column-width: 200px; + column-gap: 0; + column-rule: none; +} +</style> +</head> +<body> +<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-001-ref.xht new file mode 100644 index 0000000000..1313948514 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-001-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td + { + padding: 0; + width: 3em; + } + + td + td {width: 8em;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="60" height="20" alt="Image download support must be enabled" /></td><td><img src="support/swatch-orange.png" width="40" height="80" alt="Image download support must be enabled" /></td> + </tr></table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-001.xht new file mode 100644 index 0000000000..239ecfe74e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-001.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: Overflowed content inside multicol element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="match" href="multicol-block-no-clip-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content in the normal flow that extends into column gaps is not clipped in the middle of the column gap." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 4; + column-gap: 1em; + } + + h4 + { + background: black; + color: black; + font: inherit; + margin: 0; + } + + #first-column {color: blue;} + + #second-column {color: orange;} + + #third-column, #fourth-column {color: white;} + ]]></style> + </head> + <body> + <div> + <span id="first-column"> ab cd ef gh </span> + <h4>123</h4> + <span id="second-column"> ij kl mn oq </span> + <span id="third-column"> ab cd ef gh </span> + <span id="fourth-column"> rs tu vw xy </span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-002-ref.xht new file mode 100644 index 0000000000..dd0461feeb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-002-ref.xht @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 serif; + border: 1em solid gray; + width: 11em; + height: 6em; + position: relative; + } + + img {position: absolute;} + + img#black {top: 4em;} + + img#first-orange {top: 5em;} + + img#second-orange {left: 4em;} + + img#first-pink + { + left: 4em; + top: 3em; + } + + img#second-pink {left: 8em;} + + img#yellow + { + left: 8em; + top: 1em; + } + ]]></style> + </head> + <body> + + <div> + <img id="blue" src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled" /> + <img id="black" src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> + <img id="first-orange" src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled" /> + <img id="second-orange" src="support/swatch-orange.png" width="40" height="60" alt="Image download support must be enabled" /> + <img id="first-pink" src="support/swatch-pink.png" width="40" height="60" alt="Image download support must be enabled" /> + <img id="second-pink" src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /> + <img id="yellow" src="support/swatch-yellow.png" width="40" height="80" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-002.xht new file mode 100644 index 0000000000..52439d2b84 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-block-no-clip-002.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: Overflowed content inside and outside multicol element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="match" href="multicol-block-no-clip-002-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content in the normal flow that extends into column gaps is not clipped in the middle of the column gap." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 3; + column-gap: 1em; + } + + h4 + { + background: black; + color: black; + font: inherit; + margin: 0; + } + + #first-column {color: blue;} + + #second-column {color: orange;} + + #third-column {color: pink;} + + #fourth-column {color: yellow;} + ]]></style> + </head> + <body> + <div> + <span id="first-column"> ab cd ef gh </span> + <h4>1234</h4> + <span id="second-column"> ij kl mn oq </span> + <span id="third-column"> ab cd ef gh </span> + <span id="fourth-column"> rs tu vw xy </span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-br-inside-avoidcolumn-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-br-inside-avoidcolumn-001.xht new file mode 100644 index 0000000000..49e28fa857 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-br-inside-avoidcolumn-001.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicol | break-inside: avoid-column</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-breaks"/> +<link rel="match" href="../reference/ref-filled-green-200px-square.html"/> +<style type="text/css"><![CDATA[ +.multicol { + column-count: 2; + column-gap: 0; + column-fill: auto; + overflow: hidden; + width: 200px; + height: 300px; +} +.multicol > div { + height: 200px; + break-inside: avoid-column; + background: green; +} +.multicol > div.red { + background:red; +} +]]></style> +</head> +<body> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div></div> + <div></div> + <div class="red"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-break-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-break-000-ref.xht new file mode 100644 index 0000000000..ae647a1998 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-break-000-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem image" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + margin-bottom: 0.5em; + font: 1.25em/1 Ahem; + height: 3em; + width: 10em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-break-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-break-000.xht new file mode 100644 index 0000000000..c4deb31ade --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-break-000.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: break-after: column (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#break-before-break-after-break-inside" title="5.1. 'break-before', 'break-after', 'break-inside'" /> + <link rel="match" href="multicol-break-000-ref.xht" /> + <meta name="flags" content="ahem image" /> + <meta name="assert" content="This test checks that basic support of 'break-after: column'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#test, div#reference + { + background-color: yellow; + margin-bottom: 0.5em; + font: 1.25em/1 Ahem; + height: 3em; + width: 10em; + } + + div#test + { + column-fill: auto; + column-gap: 0; + column-width: 2em; + + /* + + N == 5; + + W == 2em; + + */ + } + + div#test > div {break-after: column;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test"> + <div>A</div> + <div>B</div> + <div>C</div> + </div> + + <div id="reference"><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-break-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-break-001-ref.xht new file mode 100644 index 0000000000..fa02d3376e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-break-001-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-14 --> + <meta name="flags" content="ahem image" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + margin-bottom: 0.5em; + font: 1.25em/1 Ahem; + height: 3em; + width: 10em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-break-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-break-001.xht new file mode 100644 index 0000000000..432f7c5fde --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-break-001.xht @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: break-before: column (basic)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#break-before-break-after-break-inside" title="5.1. 'break-before', 'break-after', 'break-inside'" /> + <link rel="match" href="multicol-break-001-ref.xht" /> + <meta name="flags" content="ahem image" /> + <meta name="assert" content="This test checks that basic support of 'break-before: column'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#test, div#reference + { + background-color: yellow; + margin-bottom: 0.5em; + font: 1.25em/1 Ahem; + height: 3em; + width: 10em; + } + + div#test + { + column-fill: auto; + column-gap: 0; + column-width: 2em; + + /* + + N == 5; + + W == 2em; + + */ + } + + div#test > div {break-before: column;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test"> + <div>A</div> + <div>B</div> + <div>C</div> + </div> + + <div id="reference"><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-000-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-000-ref.html new file mode 100644 index 0000000000..916f7161de --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-000-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<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="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.blueborders { + position: absolute; + top: 0; + left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */ + width: 200px; /* 188px second column + (16px gap - 4px rule) */ + height: 100px; + border-right: blue solid 4px; + border-left: blue solid 4px; +} + +.innerbg { + height: 100px; + width: 188px; + background: rgba(255, 0, 255, 0.3); + position: absolute; + top: 0; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="blueborders"></div> + <div class="innerbg" style="left: 0"></div> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC + </div> + <div class="inner righthalf" style="left: 95px"> + DDDDD<br> + EEEEE + </div> + <div class="innerbg" style="left: 204px"></div> + <div class="innerbg" style="left: 408px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-000.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-000.html new file mode 100644 index 0000000000..98f808164e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-000.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<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="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> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-rule: 4px solid blue; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + background: rgba(255, 0, 255, 0.3); + font: 16px/1.25 sans-serif; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-001-ref.html new file mode 100644 index 0000000000..db2b45c4dd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-001-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<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="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.blueborders { + position: absolute; + top: 0; + left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */ + width: 200px; /* 188px second column + (16px gap - 4px rule) */ + height: 100px; + border-right: blue solid 4px; + border-left: blue solid 4px; +} + +.innerbg { + height: 100px; + width: 188px; + background: rgba(255, 0, 255, 0.3); + position: absolute; + top: 0; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="blueborders"></div> + <div class="innerbg" style="left: 0"></div> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="innerbg" style="left: 204px"></div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN + </div> + <div class="inner righthalf" style="left: 299px"> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + </div> + <div class="innerbg" style="left: 408px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-001.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-001.html new file mode 100644 index 0000000000..e1ba966923 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<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="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> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-rule: 4px solid blue; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + background: rgba(255, 0, 255, 0.3); + font: 16px/1.25 sans-serif; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-002-ref.html new file mode 100644 index 0000000000..9b6c5f860b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-002-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE HTML> +<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="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.blueborders { + position: absolute; + top: 0; + left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */ + width: 200px; /* 188px second column + (16px gap - 4px rule) */ + height: 100px; + border-right: blue solid 4px; + border-left: blue solid 4px; +} + +.innerbg { + height: 100px; + width: 188px; + background: rgba(255, 0, 255, 0.3); + position: absolute; + top: 0; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="blueborders"></div> + <div class="innerbg" style="left: 0"></div> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="innerbg" style="left: 204px"></div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO + </div> + <div class="inner righthalf" style="left: 299px"> + PPPPP<br> + QQQQQ<br> + RRRRR<br> + SSSSS<br> + TTTTT + </div> + <div class="innerbg" style="left: 408px"></div> + <div class="inner lefthalf" style="left: 408px"> + UUUUU<br> + VVVVV<br> + WWWWW<br> + XXXXX<br> + YYYYY + </div> + <div class="inner righthalf" style="left: 503px"> + ZZZZZ<br> + aaaaa<br> + bbbbb<br> + ccccc<br> + ddddd + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-002.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-002.html new file mode 100644 index 0000000000..279ed941cb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-002.html @@ -0,0 +1,64 @@ +<!DOCTYPE HTML> +<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="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="match" href="multicol-breaking-002-ref.html"> +<style> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-rule: 4px solid blue; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + background: rgba(255, 0, 255, 0.3); + font: 16px/1.25 sans-serif; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + RRRRR<br> + SSSSS<br> + TTTTT<br> + UUUUU<br> + VVVVV<br> + WWWWW<br> + XXXXX<br> + YYYYY<br> + ZZZZZ<br> + aaaaa<br> + bbbbb<br> + ccccc<br> + ddddd + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-003-ref.html new file mode 100644 index 0000000000..eb0d55d64d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-003-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<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="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.blueborders { + position: absolute; + top: 0; + left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */ + width: 200px; /* 188px second column + (16px gap - 4px rule) */ + height: 100px; + border-right: blue solid 4px; + border-left: blue solid 4px; +} + +.innerbg { + height: 100px; + width: 188px; + background: rgba(255, 0, 255, 0.3); + position: absolute; + top: 0; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="blueborders"></div> + <div class="innerbg" style="left: 0"></div> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="innerbg" style="left: 204px"></div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO + </div> + <div class="inner righthalf" style="left: 299px"> + PPPPP<br> + QQQQQ + </div> + <div class="innerbg" style="left: 408px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-003.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-003.html new file mode 100644 index 0000000000..102202dd1d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-003.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<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="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="match" href="multicol-breaking-003-ref.html"> +<style> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-rule: 4px solid blue; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + background: rgba(255, 0, 255, 0.3); + font: 16px/1.25 sans-serif; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px; column-fill: auto"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-004-ref.html new file mode 100644 index 0000000000..4b874bd3ec --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-004-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE HTML> +<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="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 125px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.blueborders { + position: absolute; + top: 0; + left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */ + width: 200px; /* 188px second column + (16px gap - 4px rule) */ + height: 125px; + border-right: blue solid 4px; + border-left: blue solid 4px; +} + +.innerbg { + height: 125px; + width: 188px; + background: rgba(255, 0, 255, 0.3); + position: absolute; + top: 0; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.border-bottom { + height: 25px; + width: 188px; + background: green; + position: absolute; + top: 100px; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="blueborders"></div> + <div class="innerbg" style="left: 0"></div> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="border-bottom" style="left: 0"></div> + <div class="innerbg" style="left: 204px"></div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN + </div> + <div class="border-bottom" style="left: 204px;"></div> + <div class="inner righthalf" style="left: 299px"> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + </div> + <div class="innerbg" style="left: 408px"></div> + <div class="border-bottom" style="left: 408px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-004.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-004.html new file mode 100644 index 0000000000..10c48c07d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-004.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<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="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"> +<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> + +.outer { + height: 125px; + column-fill: auto; + width: 800px; + column-count: 4; + column-rule: 4px solid blue; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + background: rgba(255, 0, 255, 0.3); + font: 16px/1.25 sans-serif; + border: solid green; + border-width: 0 0 25px 0; + box-decoration-break: clone; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-005-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-005-ref.html new file mode 100644 index 0000000000..4c4de66d9f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-005-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE HTML> +<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="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 200px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.blueborders { + position: absolute; + top: 0; + left: 262px; /* 256px first column + (16px gap - 4px rule) / 2 */ + width: 268px; /* 256px second column + (16px gap - 4px rule) */ + height: 200px; + border-right: blue solid 4px; + border-left: blue solid 4px; +} + +.innerbg { + height: 100px; + width: 256px; + background: rgba(255, 0, 255, 0.3); + position: absolute; + top: 0; +} + +.inner { + height: 100px; + width: 120px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="blueborders"></div> + <div class="innerbg" style="left: 0"></div> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 129px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="innerbg" style="left: 272px"></div> + <div class="inner lefthalf" style="left: 272px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO + </div> + <div class="inner righthalf" style="left: 401px"> + PPPPP<br> + QQQQQ<br> + RRRRR<br> + SSSSS<br> + TTTTT + </div> + <div class="innerbg" style="left: 544px"></div> + <div class="inner lefthalf" style="left: 544px"> + UUUUU<br> + VVVVV<br> + WWWWW<br> + XXXXX<br> + YYYYY + </div> + <div class="inner righthalf" style="left: 673px"> + ZZZZZ<br> + aaaaa<br> + bbbbb<br> + ccccc<br> + ddddd + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-005.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-005.html new file mode 100644 index 0000000000..c4ae8a46ab --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-005.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML> +<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="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"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> +<link rel="match" href="multicol-breaking-005-ref.html"> +<style> + +.outer { + height: 200px; + width: 800px; + column-fill: balance; + column-count: 3; + column-rule: 4px solid blue; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-fill: balance; + column-rule: 2px solid fuchsia; + column-gap: 16px; + background: rgba(255, 0, 255, 0.3); + font: 16px/1.25 sans-serif; +} + +</style> + +<!-- This test is similar to multicol-breaking-002.html, + but both outer and inner columns are balancing. The outer multi-column is + made explicitly taller than the inner columns' optimal balance height. --> +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + RRRRR<br> + SSSSS<br> + TTTTT<br> + UUUUU<br> + VVVVV<br> + WWWWW<br> + XXXXX<br> + YYYYY<br> + ZZZZZ<br> + aaaaa<br> + bbbbb<br> + ccccc<br> + ddddd + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-006-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-006-ref.html new file mode 100644 index 0000000000..06e92eb839 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-006-ref.html @@ -0,0 +1,90 @@ +<!DOCTYPE HTML> +<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="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.blueborders { + position: absolute; + top: 0; + left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */ + width: 200px; /* 188px second column + (16px gap - 4px rule) */ + height: 100px; + border-left: blue solid 4px; +} + +.innerbg { + height: 100px; + width: 188px; + background: rgba(255, 0, 255, 0.3); + position: absolute; + top: 0; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +.border-bottom { + height: 20px; + width: 188px; + background: green; + position: absolute; + top: 80px; +} + +</style> + +<div class="outer"> + <div class="blueborders"></div> + <div class="innerbg" style="left: 0"></div> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="innerbg" style="left: 204px"></div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN + </div> + <div class="inner righthalf" style="left: 299px"> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + </div> + <div class="border-bottom" style="left: 204px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-006.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-006.html new file mode 100644 index 0000000000..7efeee8025 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-006.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<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="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"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> +<link rel="match" href="multicol-breaking-006-ref.html"> +<style> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-rule: 4px solid blue; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + background: rgba(255, 0, 255, 0.3); + font: 16px/1.25 sans-serif; + border-bottom: 20px solid green; +} + +</style> + +<!-- This test is adapted from multicol-breaking-001.html. + The inner column is changed to have "height:auto" and border-bottom. --> +<div class="outer"> + <div class="inner" style="height: auto"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-000-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-000-ref.html new file mode 100644 index 0000000000..7a99354061 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-000-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<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="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC + </div> + <div class="inner righthalf" style="left: 95px"> + DDDDD<br> + EEEEE + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-000.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-000.html new file mode 100644 index 0000000000..768ec63298 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-000.html @@ -0,0 +1,38 @@ +<!DOCTYPE HTML> +<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="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> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + font: 16px/1.25 sans-serif; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-001-ref.html new file mode 100644 index 0000000000..ecba5cd0d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-001-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<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="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN + </div> + <div class="inner righthalf" style="left: 299px"> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-001.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-001.html new file mode 100644 index 0000000000..78eda2331f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<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="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> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + font: 16px/1.25 sans-serif; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-002-ref.html new file mode 100644 index 0000000000..5ec4c61697 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE HTML> +<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="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO + </div> + <div class="inner righthalf" style="left: 299px"> + PPPPP<br> + QQQQQ<br> + RRRRR<br> + SSSSS<br> + TTTTT + </div> + <div class="inner lefthalf" style="left: 408px"> + UUUUU<br> + VVVVV<br> + WWWWW<br> + XXXXX<br> + YYYYY + </div> + <div class="inner righthalf" style="left: 503px"> + ZZZZZ<br> + aaaaa<br> + bbbbb<br> + ccccc<br> + ddddd + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-002.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-002.html new file mode 100644 index 0000000000..e20568fd17 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-002.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<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="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="match" href="multicol-breaking-nobackground-002-ref.html"> +<style> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + font: 16px/1.25 sans-serif; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + RRRRR<br> + SSSSS<br> + TTTTT<br> + UUUUU<br> + VVVVV<br> + WWWWW<br> + XXXXX<br> + YYYYY<br> + ZZZZZ<br> + aaaaa<br> + bbbbb<br> + ccccc<br> + ddddd + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-003-ref.html new file mode 100644 index 0000000000..471df948ca --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-003-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<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="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 100px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO + </div> + <div class="inner righthalf" style="left: 299px"> + PPPPP<br> + QQQQQ + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-003.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-003.html new file mode 100644 index 0000000000..edf18f9898 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-003.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<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="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="match" href="multicol-breaking-nobackground-003-ref.html"> +<style> + +.outer { + height: 100px; + column-fill: auto; + width: 800px; + column-count: 4; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + font: 16px/1.25 sans-serif; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px; column-fill: auto"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-004-ref.html new file mode 100644 index 0000000000..8475a3daf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-004-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE HTML> +<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="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 125px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.inner { + height: 100px; + width: 86px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.border-bottom { + height: 25px; + width: 188px; + background: green; + position: absolute; + top: 100px; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 95px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="border-bottom" style="left: 0"></div> + <div class="inner lefthalf" style="left: 204px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN + </div> + <div class="inner righthalf" style="left: 299px"> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + </div> + <div class="border-bottom" style="left: 204px;"></div> + <div class="border-bottom" style="left: 408px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-004.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-004.html new file mode 100644 index 0000000000..acc200f972 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-004.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<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="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"> +<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-nobackground-004-ref.html"> +<style> + +.outer { + height: 125px; + column-fill: auto; + width: 800px; + column-count: 4; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-rule: 2px solid fuchsia; + column-gap: 16px; + font: 16px/1.25 sans-serif; + border: solid green; + border-width: 0 0 25px 0; + box-decoration-break: clone; +} + +</style> + +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-005-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-005-ref.html new file mode 100644 index 0000000000..d6c5f5fd0a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-005-ref.html @@ -0,0 +1,86 @@ +<!DOCTYPE HTML> +<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="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://mozilla.org/"> +<style> + +.outer { + height: 200px; + width: 800px; + background: rgba(0, 0, 255, 0.3); + position: relative; +} + +.innerbg { + height: 100px; + width: 256px; + background: rgba(255, 0, 255, 0.3); + position: absolute; + top: 0; +} + +.inner { + height: 100px; + width: 120px; + font: 16px/1.25 sans-serif; + position: absolute; + top: 0; +} + +.lefthalf { + border-right: 2px solid fuchsia; + padding-right: 7px; +} + +.righthalf { + padding-left: 7px; +} + +</style> + +<div class="outer"> + <div class="inner lefthalf" style="left: 0"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE + </div> + <div class="inner righthalf" style="left: 129px"> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ + </div> + <div class="inner lefthalf" style="left: 272px"> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO + </div> + <div class="inner righthalf" style="left: 401px"> + PPPPP<br> + QQQQQ<br> + RRRRR<br> + SSSSS<br> + TTTTT + </div> + <div class="inner lefthalf" style="left: 544px"> + UUUUU<br> + VVVVV<br> + WWWWW<br> + XXXXX<br> + YYYYY + </div> + <div class="inner righthalf" style="left: 673px"> + ZZZZZ<br> + aaaaa<br> + bbbbb<br> + ccccc<br> + ddddd + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-005.html b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-005.html new file mode 100644 index 0000000000..e7395d6c02 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-nobackground-005.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<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="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"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> +<link rel="match" href="multicol-breaking-nobackground-005-ref.html"> +<style> + +.outer { + height: 200px; + width: 800px; + column-fill: balance; + column-count: 3; + column-gap: 16px; + background: rgba(0, 0, 255, 0.3); +} + +.inner { + column-count: 2; + column-fill: balance; + column-rule: 2px solid fuchsia; + column-gap: 16px; + font: 16px/1.25 sans-serif; +} + +</style> + +<!-- This test is similar to multicol-breaking-nobackground-002.html, + but both outer and inner columns are balancing. The outer multi-column is + made explicitly taller than the inner columns' optimal balance height. --> +<div class="outer"> + <div class="inner" style="height: 300px"> + AAAAA<br> + BBBBB<br> + CCCCC<br> + DDDDD<br> + EEEEE<br> + FFFFF<br> + GGGGG<br> + HHHHH<br> + IIIII<br> + JJJJJ<br> + KKKKK<br> + LLLLL<br> + MMMMM<br> + NNNNN<br> + OOOOO<br> + PPPPP<br> + QQQQQ<br> + RRRRR<br> + SSSSS<br> + TTTTT<br> + UUUUU<br> + VVVVV<br> + WWWWW<br> + XXXXX<br> + YYYYY<br> + ZZZZZ<br> + aaaaa<br> + bbbbb<br> + ccccc<br> + ddddd + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-clip-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-clip-001-ref.xht new file mode 100644 index 0000000000..d742ea716d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-clip-001-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 serif; + width: 11em; + } + + img + { + position: relative; + vertical-align: top; + } + + img + img {left: 3em;} + + img + img + img {left: 6em;} + ]]></style> + </head> + <body> + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-clip-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-clip-001.xht new file mode 100644 index 0000000000..c754b98b30 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-clip-001.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: overflowed content inside and outside multicol element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="match" href="multicol-clip-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content in the normal flow can extend into column gap. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edge of the multi-column and are therefore rendered thanks to the default 'overflow: visible' declaration." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: white; + border: gray solid 1em; + color: blue; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 3; + column-gap: 4em; + } + + span {color: black;} + ]]></style> + </head> + <body> + + <div> + <span> + bl ac + bl ac + </span> + + <span> + bl ac + </span> + bl ue + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-clip-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-clip-002-ref.xht new file mode 100644 index 0000000000..681166c385 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-clip-002-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 serif; + width: 11em; + } + + img + { + position: relative; + vertical-align: top; + } + + img + img {left: 3em;} + + img + img + img {left: 6em;} + ]]></style> + </head> + <body> + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-clip-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-clip-002.xht new file mode 100644 index 0000000000..6b97ad4811 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-clip-002.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: overflowed content inside and outside multicol element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="match" href="multicol-clip-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content in the normal flow can extend into column gap before it reaches its middle. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edges of the multi-column and are therefore hidden thanks to the 'overflow: hidden' declaration." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: white; + border: gray solid 1em; + color: blue; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 11em; + + column-count: 3; + column-gap: 4em; + } + + span {color: black;} + ]]></style> + </head> + <body> + + <div> + <span> + bl ac + bl ac + </span> + + <span> + bl ac + </span> + bl ue + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-clip-scrolled-content-001.html b/testing/web-platform/tests/css/css-multicol/multicol-clip-scrolled-content-001.html new file mode 100644 index 0000000000..868e91de34 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-clip-scrolled-content-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Test: Multi-column element with scrolled content clipping</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> +<link rel="match" href="reference/multicol-clip-scrolled-content-001-ref.html"/> +<style> +#columns { + column-width: 350px; +} +.spacer { + height: 200px; + width: 10px; +} +#outer { + border: 1px solid black; + overflow: scroll; + height: 300px; + width: 300px; +} +.inner { + overflow: scroll; +} +.clipped_target { + overflow: scroll; + background: red; + width: 50px; + height: 50px; +} +</style> + +<div class=spacer></div> +<div id=columns> +<div class=spacer></div> +<div id=outer> + <div class=inner> + <pre class=clipped_target> + scrollable + content + goes + here + </pre> + </div> + <div class=spacer></div> + <div class=spacer></div> +</div> +</div> + +<script> +window.onload = () => { outer.scrollTop = 100; }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-collapsing-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-collapsing-001-ref.xht new file mode 100644 index 0000000000..b5cd90c470 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-collapsing-001-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: black solid 1px; + font: 1.25em/1 serif; + padding: 1em; + width: 8em; + } + + img + { + position: relative; + vertical-align: top; + } + + img + img + img {left: 2em;} + ]]></style> + </head> + <body> + <div><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-collapsing-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-collapsing-001.xht new file mode 100644 index 0000000000..a7d2f3717f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-collapsing-001.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: no margin collapsing with its first child block box</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-collapsing-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the top margin of the first child block box of a multicol element does not collapse with the margin top of such multicol element." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + background-color: black; + border: black solid 1px; + font: 1.25em/1 Ahem; + width: 10em; + } + + div > div + { + background-color: yellow; + color: black; + margin: 1em; + width: 8em; + orphans: 1; + widows: 1; + + column-count: 3; + column-gap: 1em; + } + + h4 + { + font: inherit; + margin: 1em 0 0; + } + ]]></style> + </head> + <body> + <div> + <div> + <h4>ab cd</h4> + ef gh + ij kl + mn oq + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-001-ref.xht new file mode 100644 index 0000000000..7bc99320c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-001-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + <div>x xx x xx x xx x xx x xx x xx xxx xxx xxx xxx xxx xxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />x xx x xx x xx x xx x xx xxx xxx xxx xxx xxx xxxx xxxx xxxx xxxx xxxx xxxxxxxxxxxxxxxxxxxxxxxxx </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-001.xht new file mode 100644 index 0000000000..ed12b0629a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-001.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'columns: 100px 6' shorthand correctly set 'column-width' and 'column-count' properties." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + columns: 100px 6; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-002.xht new file mode 100644 index 0000000000..9436ec8d90 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-002.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'columns: 6 100px' shorthand correctly set 'column-width' and 'column-count' properties." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + columns: 6 100px; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-003.xht new file mode 100644 index 0000000000..70128175e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-003.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'columns: 100px auto' shorthand correctly set 'column-width' and 'column-count' properties." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + columns: 100px auto; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-004.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-004.xht new file mode 100644 index 0000000000..0d1cf23b66 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-004.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'columns: auto 100px' shorthand correctly set 'column-width' and 'column-count' properties." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + columns: auto 100px; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-005.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-005.xht new file mode 100644 index 0000000000..deb91bf4b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-005.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'columns: 6' shorthand correctly set 'column-width' and 'column-count' properties. 'columns: 6' is equivalent to 'column-width: auto' and 'column-count: 6'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + columns: 6; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-006.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-006.xht new file mode 100644 index 0000000000..0fee6ab218 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-006.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'columns: 6 auto' shorthand correctly set 'column-width' and 'column-count' properties." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + columns: 6 auto; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-007.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-007.xht new file mode 100644 index 0000000000..25da9e8e92 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-007.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: columns shorthand (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'columns: auto 6' shorthand correctly set 'column-width' and 'column-count' properties." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + columns: auto 6; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-001-ref.xht new file mode 100644 index 0000000000..5c8470bd4a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-001-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-001.xht new file mode 100644 index 0000000000..48e2375646 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-001.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: invalid columns shorthand</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that 'columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-gap: 0; + columns: 8 normal; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-002.xht new file mode 100644 index 0000000000..eea0de53f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-invalid-002.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + + <!-- + Original, initial filename of this test was + multicol-columns-toolong-002.xht + and it should be filename-renamed + multicol-columns-invalid-002.xht + --> + + <title>CSS Multi-column Layout Test: invalid columns shorthand</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that 'columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-gap: 0; + columns: 8 auto 6em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-columns-toolong-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-columns-toolong-001.xht new file mode 100644 index 0000000000..c7330c8d54 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-columns-toolong-001.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: narrower inline content inside wider colum box</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks the rendering of inline content (2em) inside wider (3em) column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-contained-absolute-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-contained-absolute-ref.html new file mode 100644 index 0000000000..7f4cae0ad9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-contained-absolute-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div style="columns: 2"> + <div style="height: 200px; background: green"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-multicol/multicol-contained-absolute.html b/testing/web-platform/tests/css/css-multicol/multicol-contained-absolute.html new file mode 100644 index 0000000000..44f17e8a07 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-contained-absolute.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Multi-column Layout Test: multicol with contained absolute position</title> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/"> +<link rel="match" href="multicol-contained-absolute-ref.html"> +<meta name="assert" content="Absolute position contained in multicol should have correct containing block."> +<div style="columns: 2"> + <div style="position: relative; height: 200px"> + <div style="overflow: hidden"> + <div style="position: absolute; width: 100%; height: 200px; background: green"></div> + </div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-multicol/multicol-containing-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-containing-001-ref.xht new file mode 100644 index 0000000000..f7c279d119 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-containing-001-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 2em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-containing-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-containing-001.xht new file mode 100644 index 0000000000..1b83f5431e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-containing-001.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: a column box can not act as containing block for elements with 'position: absolute'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-containing-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a column box does not establish containing block for elements with 'position: absolute'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 3; + column-gap: 0; + } + + span + { + color: red; + position: absolute; + top: -1em; + } + + /* + In this test, the initial containing block establishes containing block + for such red span. Therefore, the 2 short red stripes should be + positioned out of view, just outside the top edge of viewport. + */ + + ]]></style> + </head> + <body> + <div> + bl ac + <span>re dd</span> + bl ac + bl ac + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-containing-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-containing-002-ref.xht new file mode 100644 index 0000000000..f6bf523bc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-containing-002-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#inline-block + { + color: green; + display: inline-block; + font: 1.25em/1 Ahem; + } + ]]></style> + </head> + <body> + + <div id="inline-block"> + + <div>4444 4444 4444 4444</div> + <div>1 1 1 1 1 1 </div> + <div>1 1 1 1 1 1 </div> + <div>4444 4444 4444 4444</div> + <div>1 1 1 1 1</div> + <div>1 1 1 1 1</div> + <div>1 1 1 4444 4444</div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-containing-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-containing-002.xht new file mode 100644 index 0000000000..56d42c70ae --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-containing-002.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: a multi-column can act as containing block for elements with 'position: absolute'</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-containing-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a multi-column element can establish containing block for elements with 'position: absolute'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: white; + color: green; + font: 1.25em/1 Ahem; + position: relative; + width: 19em; + + column-count: 4; + column-gap: 1em; + } + + span {color: red;} + + img#white-overlapping + { + left: 11em; + position: absolute; + top: 1em; + } + ]]></style> + </head> + <body> + + <div>4444 1 1 1 1 4444 1 1 1 4444 1 1 1 1 4444 1 1 1 1 1 1 4444 1<span>RED</span> 1<span>RED</span> 4444 1 1 4444 4444 1 1 4444 1 1 4444 <img id="white-overlapping" src="support/swatch-white.png" width="60" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-containing-003.html b/testing/web-platform/tests/css/css-multicol/multicol-containing-003.html new file mode 100644 index 0000000000..c190385751 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-containing-003.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#the-multi-column-model"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + #multicol { + columns: 2; + width: 100px; + height: 100px; + column-fill: auto; + column-gap: 0px; + } + .rel { + position: relative; + } + .abs { + position: absolute; + width: 100px; + height: 100px; + background: green; + top: 0; + left: 0; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="rel" id="multicol"> + <div style="height:200px; width: 50px; background: red;"></div> + <div class="abs"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-001.xht new file mode 100644 index 0000000000..eb3272f9a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-001.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-count (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" /> + <link rel="match" href="multicol-columns-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that setting 'column-count' should accordingly create 6 column boxes. In this test, each column box should be exactly 100px wide." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {width: 600px;} + + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + column-count: 6; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-002-ref.xht new file mode 100644 index 0000000000..977b5637d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-002-ref.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <meta name="flags" content="image" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + font: 1.25em/1 Ahem; + width: 21em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> + + <img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-002.xht new file mode 100644 index 0000000000..b8fb6b50ad --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-002.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-count (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that setting 'column-count' should accordingly create 4 column boxes. In this test, each column box should be exactly 5em wide." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: black; + font: 1.25em/1 Ahem; + padding-right: 1em; + width: 20em; + } + + div + { + background-color: yellow; + color: black; + + column-count: 4; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div>55555 1 1 22 1 22 1 1 333 1 333 1 333 55555 55555 1 1 22 1 22 1 1 22 1 22 1 22 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-computed-003-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-003-ref.xht new file mode 100644 index 0000000000..a2182c59e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-003-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 --> + <meta name="flags" content="image ahem" /> + <link rel="stylesheet" href="/fonts/ahem.css" /> + + <style type="text/css"><![CDATA[ + body {font: 1.25em/1 Ahem;} + img {vertical-align: top;} + ]]></style> + </head> + + <body> + + <div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="5" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled" /><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="5" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-computed-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-003.xht new file mode 100644 index 0000000000..96a1e477d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-003.xht @@ -0,0 +1,86 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule and overflow inside (complex test)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-count-computed-003-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be clipped and should overlappe partially the 1st column-rule." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 13em; + + column-count: 3; + column-gap: 5em; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 1.5em; + } + + /* + (11) if (column-width = auto) and (column-count != auto) then + (12) N := column-count; + (13) W := max(0, (available-width - ((N - 1) * column-gap)) / N); + (14) exit; + + So, the used column-count in this test is 3. + + W := max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (13em - ((3 - 1) * 5em)) / 3); + W == max(0, (13em - (2 * 5em)) / 3); + W == max(0, (13em - (10em)) / 3); + W == max(0, (3em) / 3); + W == max(0, 1em); + W == 1em; + + So, the used column-width in this test is 1em. + */ + + #pink {color: pink;} + #orange {color: orange;} + #purple {color: purple;} + #gray {color: gray;} + + /* + Since + " + content that extends outside column boxes visibly overflows and is not clipped to the column box. + " + https://drafts.csswg.org/css-multicol-1/#overflow-inside-multicol-elements + this causes the right-half (0.5em) of the 'K' glyph to + overlap the right-half (0.75em) of the 1st blue column-rule. + Same thing should happen to the 'N' glyph of 'ORAN'. + + Because no inline content should be rendered into the + 3rd column box, this causes the 2nd column rule not + been rendered because + " + Column rules are only drawn between two columns that + both have content. + " + http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules + */ + ]]></style> + </head> + + <body> + + <div> + <span id="pink">PINK</span> + <span id="orange">ORAN</span> + <span id="purple">PURP</span> + <span id="gray">GRAY</span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-computed-004-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-004-ref.xht new file mode 100644 index 0000000000..f9eaa67172 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-004-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 --> + <meta name="flags" content="image ahem" /> + <link rel="stylesheet" href="/fonts/ahem.css" /> + + <style type="text/css"><![CDATA[ + body {font: 1.25em/1 Ahem;} + img {vertical-align: top;} + ]]></style> + </head> + + <body> + + <div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-computed-004.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-004.xht new file mode 100644 index 0000000000..90f4ac0ebb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-004.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: both 'column-width' and 'column-count' are 'auto'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-count-computed-004-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if 'column-width' is 'auto' and if 'column-count' is 'auto', then such element will not behave like a multi-column element and column-gap and column-rule declarations will be ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: auto; + column-gap: 7em; + column-rule-color: red; + column-rule-width: 1.5em; + column-rule-style: solid; + } + + #pink {color: pink;} + #orange {color: orange;} + #purple {color: purple;} + #gray {color: gray;} + ]]></style> + </head> + + <body> + + <div> + <span id="pink">Pink</span> + <span id="orange">oran</span> + <span id="purple">PurP</span> + <span id="gray">gray</span> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-computed-005.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-005.xht new file mode 100644 index 0000000000..ed89dc8ddb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-computed-005.xht @@ -0,0 +1,90 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule and overflow inside (complex test)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-03 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-count-computed-003-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be partially clipped and should overlap partially with the 1st column-rule." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 13em; + + column-gap: 5em; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 1.5em; + column-width: 1em; + } + + /* + (15) if (column-width != auto) and (column-count = auto) then + (16) N := max(1, floor((available-width + column-gap) / (column-width + column-gap))); + (17) W := ((available-width + column-gap) / N) - column-gap; + (18) exit; + + N := max(1, floor((available-width + column-gap) / (column-width + column-gap))); + N == max(1, floor((13em + 5em) / (1em + 5em))); + N == max(1, floor(18em / 6em)); + N == max(1, floor(3)); + N == 3; + + So, the used column-count in this test is 3. + + W := ((available-width + column-gap) / N) - column-gap; + W == ((13em + 5em) / 3) - 5em; + W == ((18em) / 3) - 5em; + W == (6em) - 5em; + W == 1em; + + So, the used column-width in this test is 1em. + */ + + #pink {color: pink;} + #orange {color: orange;} + #purple {color: purple;} + #gray {color: gray;} + + /* + Since + " + content that extends outside column boxes visibly overflows and is not clipped to the column box + " + http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements + this causes the right-half (0.5em) of the 'K' glyph to + overlap with the right-half (0.75em) of the 1st blue column-rule. + Same thing should happen to the 'N' glyph of 'ORAN'. + + Because no inline content should be rendered into the + 3rd column box, this causes the 2nd column rule not + been rendered because + " + Column rules are only drawn between two columns that + both have content. + " + http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules + */ + ]]></style> + </head> + + <body> + + <div> + <span id="pink">PINK</span> + <span id="orange">ORAN</span> + <span id="purple">PURP</span> + <span id="gray">GRAY</span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-negative-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-negative-001.xht new file mode 100644 index 0000000000..98bfd027e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-negative-001.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: negative 'column-count' value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified negative 'column-count' value is invalid and ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-count: -1; + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-negative-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-negative-002.xht new file mode 100644 index 0000000000..17911b5095 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-negative-002.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: zero 'column-count' value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified 0 'column-count' value is invalid and ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-count: 0; /* invalid; must be a greater-than-zero integer */ + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-001.xht new file mode 100644 index 0000000000..cfa54f312f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-001.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: non-integer 'column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-count: 2.1; /* invalid; must be an integer */ + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-002.xht new file mode 100644 index 0000000000..9368011993 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-002.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: non-integer 'column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-count: 1.9; /* invalid; must be an integer */ + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-003.xht new file mode 100644 index 0000000000..6c94be9877 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-count-non-integer-003.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: non-integer 'column-count' value</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '<integer>' type" /> + <link rel="match" href="multicol-columns-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a specified real 'column-count' value is invalid and ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-count: 4; + column-count: 2.0; /* invalid; must be an integer */ + column-gap: 0; + } + + span {color: blue;} + ]]></style> + </head> + + <body> + + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-001-ref.html new file mode 100644 index 0000000000..8c614a2e19 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + div { + height: 300px; + background-color: yellow; + } + </style> + <body> + <article id="column"> + <span id="span"><div>block</div></span> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-001.html b/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-001.html new file mode 100644 index 0000000000..8575626ace --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<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="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"> + <link rel="match" href="multicol-dynamic-add-001-ref.html"> + <meta name="assert" content="This test checks that the block appended into an inline element should perform correct block-in-inline splitting, and balance the block's height into three columns."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Append a block to the inline element. */ + var block = document.createElement("div"); + var text = document.createTextNode("block"); + block.appendChild(text); + + var span = document.getElementById("span"); + span.appendChild(block); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + div { + height: 300px; + background-color: yellow; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <span id="span"><!-- block will be added here. --></span> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001-ref.html new file mode 100644 index 0000000000..201213944c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001.html b/testing/web-platform/tests/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001.html new file mode 100644 index 0000000000..11063288c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-000-ref.xht new file mode 100644 index 0000000000..c68a7a61d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-000-ref.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0em; + color: lime; + margin: 1em 0em; + font: 1.25em/1 Ahem; + table-layout: fixed; + width: 18em; + } + + td {padding: 0em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p> + + <table> + <tr> + <td>G</td> + <td>H</td> + <td>I</td> + </tr> + </table> + + <table> + <tr> + <td>G</td> + <td>H</td> + <td>I</td> + </tr> + </table> + + <table> + <tr> + <td>G</td> + <td>H</td> + <td>I</td> + </tr> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-000.xht new file mode 100644 index 0000000000..79af1cbbf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-000.xht @@ -0,0 +1,72 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-fill: balance (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" /> + <link rel="match" href="multicol-fill-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content is balanced into all columns thanks to 'column-fill: balance'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.test, table#reference + { + background-color: yellow; + color: lime; + margin: 1em 0em; + font: 1.25em/1 Ahem; + width: 18em; + } + + div.test + { + columns: 3; + column-fill: balance; + column-gap: 0em; + + /* + + N == 3; + + W == 6em; + + */ + + orphans: 1; + widows: 1; + } + + div.test > p {margin: 0em;} + + table + { + border-spacing: 0em; + table-layout: fixed; + } + + td {padding: 0em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p> + + <div class="test"> + <p>A</p> + <p>B</p> + <p>C</p> + </div> + + <div class="test">D<br />E<br />F</div> + + <table id="reference"> + <tr> + <td>G</td> + <td>H</td> + <td>I</td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-001-ref.xht new file mode 100644 index 0000000000..9dea7ef075 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-001-ref.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0em; + color: lime; + font: 1.25em/1 Ahem; + height: 5em; + margin: 1em 0em; + table-layout: fixed; + width: 20em; + } + + td + { + padding: 0em; + vertical-align: top; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 rectangles are <strong>identical</strong>.</p> + + <table> + <tr> + <td>G<br />H<br />I</td> + <td>J<br />K<br />L</td> + </tr> + </table> + + <table> + <tr> + <td>G<br />H<br />I</td> + <td>J<br />K<br />L</td> + </tr> + </table> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-001.xht new file mode 100644 index 0000000000..3cd79ccbee --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-001.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-fill: balance with set height (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" /> + <link rel="match" href="multicol-fill-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that content is balanced into all columns of a multi-column element with a set height thanks to 'column-fill: balance'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#test, table#reference + { + background-color: yellow; + color: lime; + font: 1.25em/1 Ahem; + height: 5em; + margin: 1em 0em; + width: 20em; + } + + div#test + { + columns: 2; + column-fill: balance; + column-gap: 0em; + + /* + + N == 2; + + W == 10em; + + */ + } + + table + { + border-spacing: 0em; + table-layout: fixed; + } + + td + { + padding: 0em; + vertical-align: top; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 rectangles are <strong>identical</strong>.</p> + + <div id="test">A<br />B<br />C<br />D<br />E<br />F</div> + + <table id="reference"> + <tr> + <td>G<br />H<br />I</td> + <td>J<br />K<br />L</td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-001-ref.xht new file mode 100644 index 0000000000..820fe01bfe --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-001-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: black; + font: 1.25em/1 Ahem; + float: left; + width: 10em; + margin-right: 1em; + } + ]]></style> + </head> + <body> + + <div>1 22 333 + 4444 55555 + 666666 + 7777777 + 999999999 + 1 22 333 + 4444 55555 + 666666 + 7777777 + 999999999</div> + + <div>1 22 333 + 4444 55555 + 666666 + 7777777 + 999999999</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-001.xht new file mode 100644 index 0000000000..d5990a3ffc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-001.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-fill: auto' (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" /> + <link rel="match" href="multicol-fill-auto-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-fill: auto' fills the column boxes of a multi-colum element sequentially with inline content and does not bother about balancing content of column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: black; + font: 1.25em/1 Ahem; + height: 10em; + orphans: 1; + widows: 1; + width: 32em; + + column-count: 3; + column-fill: auto; + column-gap: 1em; + } + ]]></style> + </head> + + <body> + + <div>1 22 333 4444 55555 666666 7777777 999999999 1 22 333 4444 55555 666666 7777777 999999999 1 22 333 4444 55555 666666 7777777 999999999</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-002-ref.xht new file mode 100644 index 0000000000..e1e10f68f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-002-ref.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-fill-auto</title> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<meta name="flags" content="ahem"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body>div { + font-family: Ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + column-count: 2; + column-fill: auto; + column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='ref'> +oo<br/>t<br/>o +</div> + +<div class='ref'> +oo<br/>t<br/>o +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-002.xht new file mode 100644 index 0000000000..98c14f9ac5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-002.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-fill-auto</title> +<meta name="assert" content="This test checks that columns are not balanced when 'column-fill: auto' is set"/> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/> +<link rel="match" href="multicol-fill-auto-002-ref.xht"/> +<meta name="flags" content="ahem"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body>div { + font-family: Ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + column-count: 2; + column-fill: auto; + column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='col'> +<div class='red' style="top: 0; left: 0; height: 3em; width: 1em;"></div> +<div class='red' style="top: 0; left: 0; height: 1em; width: 2em;"></div> +o<br/>t<br/> +o<br/>t<br/> +</div> + +<div class='ref'> +oo<br/>t<br/>o +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-003-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-003-ref.xht new file mode 100644 index 0000000000..66ad45d4a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-003-ref.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 --> + <meta name="flags" content="ahem image" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div {font: 1.25em/1 Ahem;} + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="220" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-003.xht new file mode 100644 index 0000000000..df9e82f9c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-003.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-fill: auto' (basic)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'" /> + <link rel="match" href="multicol-fill-auto-003-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks if inline content fills column boxes sequentially when 'column-fill' is set to 'auto'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-image: url("support/red20x20.png"); + background-repeat: no-repeat; + background-position: 2em 4em; + border: green solid 1em; + color: green; + font: 1.25em/1 Ahem; + height: 6em; + width: 21em; + + column-count: 2; + column-fill: auto; + column-gap: 1em; + column-rule: yellow solid 1em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div>1234567890 12 4567 90 123 56 890 123 56789 1 34567 90 12 4567 90 +123 56 890 123 56</div> + + <!-- + + Expected result: + + ************ ************ + |1234567890| |123 56 890| + |12 4567 90| |123 56 | + |123 56 890| | | + |123 56789 | | | + |1 34567 90| | | + |12 4567 90| | | + ************ ************ + + The digits are the green squares, the white squares + are the blank white spaces. The yellow vertical stripe + represent both the column-gap and the column-rule. + The "3" glyph at line 5 of 1st column box should be + overlapping the red square. + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-001.xht new file mode 100644 index 0000000000..864080a02a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-001.xht @@ -0,0 +1,93 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicol | column-span: all | column-fill: auto</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/> +<link rel="match" href="multicol-fill-auto-block-children-ref.xht"/> +<style type="text/css"><![CDATA[ +html { + background: white; +} +body { + background: blue; + width: 1200px; + height: 492px; + column-count: 3; + column-gap: 2em; + column-fill: auto; +} +h1 { + column-span: all; + font-size: 2em; + height: 70px; +} +dl { + font-size: 70%; + color: blue; + padding: 5px 10px 3px; + margin: 0 0 15px; + border: 2px solid blue; + height: 72px; +} +dt { + font-weight: bold; + font-style: normal; + width: 47%; + height: 100%; + float: left; +} +dd { + line-height: 120%; + padding: 0; + margin: 0 0 5px 47%; + width: 50%; +} +]]></style> +</head> + +<body> +<h1>you should not see the word fail</h1> + +<dl> + <dt>block1</dt> + <dd>block1 block1</dd> + <dd>block1 block1</dd> + <dd>block1 block1 block1</dd> + <dd>filler block1 block1</dd> +</dl> + +<dl> + <dt>block2</dt> + <dd>block2 block2</dd> + <dd>block2 block2</dd> + <dd>block2 block2 block2</dd> + <dd>filler block2 block2</dd> +</dl> + +<dl> + <dt>block3</dt> + <dd>block3 block3</dd> + <dd>block3 block3</dd> + <dd>block3 block3 block3</dd> + <dd>filler block3 block3</dd> +</dl> + +<dl> + <dt>block4</dt> + <dd>block4 block4</dd> + <dd>block4 block4</dd> + <dd>block4 block4 block4</dd> + <dd>filler block4 block4</dd> +</dl> + +<dl> + <dt>fail</dt> + <dd>fail fail</dd> + <dd>fail fail</dd> + <dd>fail fail fail</dd> + <dd>fail fail fail</dd> +</dl> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-002-ref.xht new file mode 100644 index 0000000000..63015a4687 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-002-ref.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <style type="text/css"><![CDATA[ + body {margin:0; margin-top:8px;} + + div + { + float: left; + background-color: blue; + height: 200px; + width: 60%; + margin-left: 8px; + } + + h1 + { + color: white; + font-size: 2em; + line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */ + margin: 21px 0em; + } + + span#pass + { + float: left; + margin-left: 10px; + color: blue; + font-size: 1.5em; + font-weight: bolder; + + line-height: 1; + margin-top: 122px; + } + ]]></style> + </head> + <body> + + <div> + <h1>Test passes if "PASS!" is<br />on the right ↘</h1> + </div> + <span id="pass">PASS!</span> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-002.xht new file mode 100644 index 0000000000..2399da2e7b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-002.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-fill: auto' and 'column-span: all' (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" /> + <link rel="match" href="multicol-fill-auto-block-children-002-ref.xht" /> + + <meta name="assert" content="This test checks that if 'column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a 'column-span: all' element will occupy more space in a multi-column element than a 'column-span: none' element, therefore reducing available space for content in column boxes." /> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: blue; + height: 200px; + margin: 8px; + width: 60%; + + column-count: 3; + column-fill: auto; + column-gap: 10px; + } + + h1 + { + color: white; + column-span: all; + font-size: 2em; + line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */ + margin: 21px 0em; + /* + 21px : margin-top of h1 element which must not collapse with body's margin-top + 80px : content height: 2 line boxes required to render the "Test passes if ..." sentence + 21px : margin-bottom of h1 element + ==================================== + 122px : margin box height of h1 element + */ + } + + h2 + { + color: blue; + font-size: 1.5em; + line-height: 1; + margin: 0 0 2.25em; + /* + 0px : margin-top of h2 element + 24px : content height: 1 line box required to render all the nbsp; and PASS! word + 54px : margin-bottom of h2 element + ==================================== + 78px : margin box height of h2 element + */ + } + ]]></style> + </head> + + <body> + + <h1>Test passes if "PASS!" is<br />on the right ↘</h1> + + <h2> </h2> + + <h2> </h2> + + <h2> </h2> + + <h2>PASS!</h2> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-003-ref.html new file mode 100644 index 0000000000..075b1b3ea8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-003-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + article { + column-fill: auto; + column-count: 2; + width: 200px; + height: 200px; + } + div { + height: 400px; + background-color: lightgreen; + } + </style> + + <p>This test passes if you see two green strips with equal height.</p> + <article> + <div></div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-003.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-003.html new file mode 100644 index 0000000000..7bc29898c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<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="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"> + <meta name="assert" content="This test verifies that 'max-height' on multi-column container imposes constraint on column boxes' height."> + + <style> + article { + column-fill: auto; + column-count: 2; + width: 200px; + /* Test max-height imposes constraint on column boxes' height. */ + max-height: 200px; + } + div { + height: 400px; + background-color: lightgreen; + } + </style> + + <p>This test passes if you see two green strips with equal height.</p> + <article> + <div></div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-ref.xht new file mode 100644 index 0000000000..149292bf71 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-auto-block-children-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicol | column-span: all | column-fill: auto</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +html { + background: white; +} +body { + background: blue; + width: 1200px; + height: 492px; +} +h1 { + font-size: 2em; + margin: 0; + padding-top: 0.67em; +} +]]></style> +</head> + +<body> +<h1>you should not see the word fail</h1> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-001-ref.xht new file mode 100644 index 0000000000..48b4dd46f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-001-ref.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-fill</title> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<meta name="flags" content="ahem"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body>div { + font-family: Ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + column-count: 2; + column-fill: balance; + column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='ref'> +oo<br/>tt +</div> + +<div class='ref'> +oo<br/>tt +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-001.xht new file mode 100644 index 0000000000..3c6825a364 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-001.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-fill</title> +<meta name="assert" content="This test checks that columns are properly balanced when 'column-fill: balance' is set"/> +<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/> +<link rel="match" href="multicol-fill-balance-001-ref.xht"/> +<meta name="flags" content="ahem"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body>div { + font-family: Ahem; + font-size: 1.25em; + line-height: 1em; + color: green; + height: 3em; + width: 2em; + orphans: 1; + widows: 1; + position: relative; + margin: 1em; +} +div.col { + column-count: 2; + column-fill: balance; + column-gap: 0; +} +div.red { + background: red; position: absolute; z-index: -1; +} +]]></style> +</head> + +<body> + +<div class='col'> +<div class='red' style="top: 0; left: 0; height: 2em; width: 2em;"></div> +o<br/>t<br/> +o<br/>t<br/> +</div> + +<div class='ref'> +oo<br/>tt +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-002.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-002.html new file mode 100644 index 0000000000..fb6004d47b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-002.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Multi-column Layout Test: Balancing with more forced breaks than columns</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1. column-fill"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="This multicol container will create overflowing columns, no matter what, due to forced break. Don't overstretch."> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-gap:0; width:100px; background:green;"> + <div style="height:100px;"></div> + <div style="break-before:column; height:90px;"></div> + <div style="break-before:column; height:10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-003.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-003.html new file mode 100644 index 0000000000..5f8db6336b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1. column-fill"> +<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-fill:auto; column-gap:0; height:200px; width:100px;"> + <div style="columns:2; column-gap:0; background:red;"> + <div style="height:600px;"> + <div style="height:100px; background:green;"></div> + <div style="height:100px; background:white;"></div> + <div style="height:100px; background:green;"></div> + <div style="height:100px; background:white;"></div> + <div style="height:200px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-004.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-004.html new file mode 100644 index 0000000000..1d90cc45f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1. column-fill"> +<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="writing-mode:vertical-rl; columns:2; column-gap:0; inline-size:100px; background:red;"> + <div style="block-size:20px;"> + <div style="block-size:200px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-005.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-005.html new file mode 100644 index 0000000000..ad9a592ec9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-005.html @@ -0,0 +1,8 @@ +<!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/#filling-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="columns:2; column-gap:0; width:100px; height:20px; max-height:40px; min-height:100px; background:red;"> + <div style="height:200px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-006.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-006.html new file mode 100644 index 0000000000..3dc2022a3d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-006.html @@ -0,0 +1,11 @@ +<!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/#filling-columns"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="float:left; width:50px; height:100px; background:green;"></div> +<div style="float:left; width:50px; background:green;"> + <div style="columns:2; width:0;"> + <div style="height:200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-007.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-007.html new file mode 100644 index 0000000000..bf971cfd6c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-007.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-008.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-008.html new file mode 100644 index 0000000000..b930e71a76 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-008.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-009.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-009.html new file mode 100644 index 0000000000..e8b53bfb79 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-009.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-010.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-010.html new file mode 100644 index 0000000000..c90c7baeaf --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-010.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-011.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-011.html new file mode 100644 index 0000000000..73233cea6d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-011.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-012.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-012.html new file mode 100644 index 0000000000..877cdc94b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-012.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-013.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-013.html new file mode 100644 index 0000000000..7a443b3ae7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-013.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-014.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-014.html new file mode 100644 index 0000000000..4ed80eb8d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-014.html @@ -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/#cf"> +<p>Test passes if there is a filled green square below.</p> +<div id="mc" style="columns:4; width:100px; background:green;"> + <div style="margin-top:30px; height:70px; break-inside:avoid;"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(mc.offsetHeight, 100); + }); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-015.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-015.html new file mode 100644 index 0000000000..80d452678c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-015.html @@ -0,0 +1,16 @@ +<!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://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#deprecated_attributes"> +<p>Test passes if there is a filled green square below.</p> +<div id="mc" style="columns:4; width:100px; background:green;"> + <div style="float:left; width:10px; height:400px;"></div> + <br clear="all"> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(mc.offsetHeight, 100); + }); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-016.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-016.html new file mode 100644 index 0000000000..3b2bdc68e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-016.html @@ -0,0 +1,17 @@ +<!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"> +<p>Test passes if there is a filled green square.</p> +<div id="mc" style="columns:10; background:green;"> + <div> + <div style="height:100px; contain:size;"></div> + <div style="break-before:column;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(mc.offsetHeight, 100); + }); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-018.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-018.html new file mode 100644 index 0000000000..fd4f47c591 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-018.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1285795"> + <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:4; column-gap:0;"> + <div id="elm" style="display:none; height:200px; background:green;"></div> + <div style="height:200px; background:green;"></div> + </div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + elm.style.display = 'block'; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-019.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-019.html new file mode 100644 index 0000000000..ea8b1a5e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-019.html @@ -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/#cf"> +<div id="mc" style="columns:2; column-gap:0; width:100px; orphans:1; widows:1; line-height:20px;"> + <span> + <div style="height:200px;"></div> + </span> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(mc.offsetHeight, 100); + }, "Breakable block inside inline"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-020.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-020.html new file mode 100644 index 0000000000..86d229fdde --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-020.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289800"> +<div id="mc" style="overflow-x:scroll; columns:2; width:100px; column-fill:auto; height:20000000px;"> + <div style="columns:1;"> + <div style="height:100px;"></div> + <div style="height:1234567890px;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + // There should be two columns, i.e. no overflow. + assert_equals(mc.scrollWidth, 100); + }, "Nested balanced multicol with very tall content"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-021.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-021.html new file mode 100644 index 0000000000..d366e0f602 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-021.html @@ -0,0 +1,18 @@ +<!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"> +<div id="mc" style="columns:4; line-height:0;"> + <ruby> + <div style="display:inline-block; width:10px; height:50px;"></div> + <rt> + <div style="display:inline-block; width:10px; height:50px;"></div> + </rt> + </ruby> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(mc.offsetHeight, 100); + }, "Ruby text should affect column height"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-022.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-022.html new file mode 100644 index 0000000000..3dd530c7e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-022.html @@ -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/#cf"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308024"> +<div id="outer" style="columns:2;"> + <div id="inner" style="columns:2; border-top:solid 3px;"> + <div style="height:97px; contain:size;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(outer.offsetHeight, 100); + }, "Nested balancing outer height"); + test(()=> { + assert_equals(inner.offsetHeight, 100); + }, "Nested balancing inner height"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-023.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-023.html new file mode 100644 index 0000000000..fbada1b6d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-023.html @@ -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/#cf"> +<div id="multicol" style="columns:4;"> + <div style="height:0;"> + <div style="height:20px;"></div> + <div style="break-before:column; height:10px;"></div> + <div style="break-before:column; height:10px;"></div> + <div style="column-span:all; height:10px;"></div> + </div> + <div style="height:320px;"></div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(multicol.offsetHeight, 100); + }, "Spanner in overflowed parent with forced breaks"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-024.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-024.html new file mode 100644 index 0000000000..900dca8636 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-024.html @@ -0,0 +1,31 @@ +<!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/#cf"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336291"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <style> + .hidden { display:none; } + #mc > div { height:25px; contain:size; background:green;} + </style> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="mc" style="columns:2; gap:0; width:100px; background:red;"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="hidden"></div> + <div class="hidden"></div> + <div class="hidden"></div> + <div class="hidden"></div> + </div> + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + for (let e of document.getElementsByClassName('hidden')) + e.style.display = "block"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-025.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-025.html new file mode 100644 index 0000000000..614d60bf9b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-025.html @@ -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/#cf"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1372653"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1376486"> +<div id="multicol" style="columns:3;"> + <div style="float:left; width:100px;"> + <div style="height:20px;"></div> + <div style="break-before:column; height:50px;"></div> + </div> + <div style="clear:both; height:150px;"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(multicol.offsetHeight, 100); + }, "Clearance after float with forced break inside"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-nested-000.html b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-nested-000.html new file mode 100644 index 0000000000..5e466df807 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-fill-balance-nested-000.html @@ -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/#the-multi-column-model"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#filling-columns"> +<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"> +<style> + #outer, #outer div { background: green; } + #inner * { break-inside: avoid; } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="outer" style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px;"> + <div id="inner" style="columns:2; column-gap:0;"> + <div style="height:50px;"></div> + <div style="height:100px;"> + <div style="margin-left:100%; width:100%; height:50px; background:red;"></div> + </div> + <div style="height:50px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-000-ref.xht new file mode 100644 index 0000000000..81df271de7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-000-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + margin: 1em 0; + width: 30em; + } + + span {color: yellow;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div>1234567890<span>1234567890</span>1234567890</div> + + <div>1234567890<span>1234567890</span>1234567890</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-000.xht new file mode 100644 index 0000000000..88aa17e8b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-000.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-gap (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap'" /> + <link rel="match" href="multicol-gap-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that column gap appears between two columns." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + margin: 1em 0; + width: 30em; + } + + div#test + { + background-color: yellow; + orphans: 1; + widows: 1; + + column-width: 10em; + column-gap: 10em; + } + + span {color: yellow;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test">1234567890<br />1234567890</div> + + <div id="reference">1234567890<span>1234567890</span>1234567890</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-001-ref.xht new file mode 100644 index 0000000000..adbb689de4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-001-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div {margin: 1.25em; line-height: 1;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + <p>Test passes if the 2 stripes are <strong>identical</strong>.</p> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + <div><img src="support/black20x20.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-001.xht new file mode 100644 index 0000000000..7a105b7f19 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-001.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-gap: normal'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" /> + <link rel="match" href="multicol-gap-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the 'normal' column gap is 1em." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: black; + font: 1.25em/1 Ahem; + margin: 1em; + orphans: 1; + widows: 1; + width: 3em; + } + + div.multicol + { + column-gap: normal; + column-width: 1em; + } + + span {padding-right: 1em;} + ]]></style> + </head> + <body> + <p>Test passes if the 2 stripes are <strong>identical</strong>.</p> + + <div class="multicol">x<br />x</div> + <div><span>x</span>x</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-002-ref.xht new file mode 100644 index 0000000000..afecc0cda5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-002-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + + td#last-cell {padding-right: 0;} + ]]></style> + </head> + <body> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td><td id="last-cell"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-002.xht new file mode 100644 index 0000000000..1ad5334043 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-002.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-gap (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" /> + <link rel="match" href="multicol-gap-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 4; + column-gap: 1em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-003.xht new file mode 100644 index 0000000000..39b7bc4f0e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-003.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-gap: normal'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" /> + <link rel="match" href="multicol-gap-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 4; + column-gap: normal; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-001.html b/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-001.html new file mode 100644 index 0000000000..6a3a8d3378 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Layout Test: column-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-gap"> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> +<meta name="assert" content="Test checks that column-gap is an animatable property, and that the computed values during the animation are the expected ones."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #multicol { + column-gap: 0px; + } +</style> +<body> + <div id="multicol"></div> + <div id="log"></div> + + <script> + test( + function(){ + var multicol = document.getElementById("multicol"); + assert_equals(getComputedStyle(multicol).columnGap, "0px"); + + var keyframes = [ + { columnGap: "100px" }, + { columnGap: "200px" } + ]; + var options = { + duration: 10, + fill: "forwards", + easing: "linear" + }; + + var player = multicol.animate(keyframes, options); + player.pause(); + player.currentTime = 0; + assert_equals(getComputedStyle(multicol).columnGap, "100px"); + player.currentTime = 5; + assert_equals(getComputedStyle(multicol).columnGap, "150px"); + player.currentTime = 10; + assert_equals(getComputedStyle(multicol).columnGap, "200px"); + }, "column-gap property is animatable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-002.html b/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-002.html new file mode 100644 index 0000000000..de3756c67b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Layout Test: column-gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-gap"> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> +<meta name="assert" content="Test checks that 'normal' value for column-gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-normal-to-100 { + from { column-gap: normal; } + to { column-gap: 100px; } + } + + #multicol { + animation-name: column-gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="multicol"></div> + <div id="log"></div> + + <script> + test( + function(){ + var multicol = document.getElementById("multicol"); + assert_equals(getComputedStyle(multicol).columnGap, "100px"); + }, "column-gap: normal is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-003.html b/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-003.html new file mode 100644 index 0000000000..71182fafbe --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-animation-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Layout Test: Default column-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-gap"> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> +<meta name="assert" content="Test checks that the default value for column-gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-to-100 { + to { column-gap: 100px; } + } + + #multicol { + animation-name: column-gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="multicol"></div> + <div id="log"></div> + + <script> + test( + function(){ + var multicol = document.getElementById("multicol"); + assert_equals(getComputedStyle(multicol).columnGap, "100px"); + }, "Default column-gap is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-001-ref.xht new file mode 100644 index 0000000000..b668f4ddaa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-001-ref.xht @@ -0,0 +1,68 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + background-color: gray; + font: 1.25em/1 Ahem; + height: 4em; + position: relative; + width: 14.5em; + } + + p, div > div + { + background-color: blue; + height: 1em; + left: 0; + margin: 0; + position: absolute; + top: 0; + width: 4em; + } + + div > div + { + background-color: black; + height: 4em; + } + + p {left: 7.5em;} + + p + p + { + left: 8.5em; + top: 1em; + } + + p + p + p + { + left: 9.5em; + top: 2em; + } + + p + p + p + p + { + left: 10.5em; + top: 3em; + } + ]]></style> + </head> + <body> + + <div> + <div></div> + <p></p> + <p></p> + <p></p> + <p></p> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-001.xht new file mode 100644 index 0000000000..a1614ec2b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-001.xht @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-gap' with increasing values</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" /> + <link rel="match" href="multicol-gap-fraction-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test checks that increasing column gaps display consistently" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: gray; + font: 1.25em/1 Ahem; + width: 14.5em; + orphans: 1; + widows: 1; + + column-count: 2; + column-gap: 0.5em; + } + + #two {column-gap: 2.5em;} + + #three {column-gap: 4.5em;} + + #four {column-gap: 6.5em;} + + span {color: blue;} + ]]></style> + </head> + <body> + + <div id="one"> + blac + <span>blue</span> + </div> + + <div id="two"> + blac + <span>blue</span> + </div> + + <div id="three"> + blac + <span>blue</span> + </div> + + <div id="four"> + blac + <span>blue</span> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-002.html b/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-002.html new file mode 100644 index 0000000000..ae1aaaad77 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-fraction-002.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS Multi-column Layout Test: 'column-gap' with sub-pixel values</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'"> +<link rel="match" href="../reference/nothing.html" /> +<meta name="assert" content="Specified column-gap should never be rounded up to the nearest integer, or the second column in the tests might overflow the multicol container in the inline direction."> +<style> + .multicol { margin:10px; float:left; columns:2; width:50px; column-gap:10.9px; column-fill:auto; height:50px; background:white; } + .filler { height:50px; } + .below-everything { position:relative; z-index:-1; float:right; width:20px; height:20px; background:red; } +</style> + +<p>There should be nothing below.</p> + +<div class="multicol" style="column-gap:10px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.1px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.2px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.3px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.4px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.5px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.6px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.7px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.8px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:10.9px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> + +<div class="multicol" style="column-gap:11px;"> + <div class="filler"></div> + <div class="below-everything"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-large-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-large-001-ref.xht new file mode 100644 index 0000000000..3802c3653b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-large-001-ref.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <meta name="flags" content="image ahem" /> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {font: 1.25em/1 Ahem;} + img {vertical-align: top;} + ]]></style> + </head> + <body> + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" +alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-large-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-large-001.xht new file mode 100644 index 0000000000..5dd1a90691 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-large-001.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-gap' with large value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap" /> + <link rel="match" href="multicol-gap-large-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that when 'column-gap' is large and when used 'column-width' is narrow, then content extends into column-gap and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 4; + column-gap: 4em; + + /* + N == 4; + W == 0em; + */ + + /* + In this test, the content of first 3 column + boxes extend into middle of column-gap and + content of the 4th column box extend outside the + right edge of multi-column. The gray border-right of + multi-column elemen overlaps partially the 3rd + column-gap. + */ + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-large-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-large-002-ref.xht new file mode 100644 index 0000000000..ce17abb717 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-large-002-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div {font: 1.25em/1 serif;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-large-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-large-002.xht new file mode 100644 index 0000000000..8e3be322ef --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-large-002.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-gap' with large value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 'column-gap" /> + <link rel="match" href="multicol-gap-large-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a large column-gap is supported. We should have two 3.5em columns with a 4em gap between them." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 2; + column-gap: 4em; + + /* + N == 2; + W == 3.5em; + */ + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-negative-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-gap-negative-001.xht new file mode 100644 index 0000000000..b250106788 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-negative-001.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-gap with negative value</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" /> + <link rel="match" href="multicol-gap-002-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="asset" content="Test checks that a negative value is not allowed for column-gap" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 4; + column-gap: 1em; + column-gap: -1em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-gap-percentage-001.html b/testing/web-platform/tests/css/css-multicol/multicol-gap-percentage-001.html new file mode 100644 index 0000000000..4cd0f42bca --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-gap-percentage-001.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Layout Test: column-gap supports percentages</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#column-gap"> +<meta name="assert" content="This test checks the behavior of precentage column-gap in different situations depending on the multicol container size."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.multicol { + position: relative; + font: 20px/1 Ahem; + margin: 10px; + column-count: 2; + column-gap: 25%; + background: yellow; +} + +.fixed200 { + width: 200px; +} + +.inlineBlock { + display: inline-block; +} + +.wrapper200 { + width: 200px; +} + +.wrapper8 { + width: 8px; +} + +.marginTopBottom { + margin: 10px 0; +} + +.multicol > :nth-child(1) { background: magenta; } +.multicol > :nth-child(2) { background: cyan; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.multicol')"> + +<div id="log"></div> + +<h3>Multicol container: fixed width</h3> + +<div class="multicol fixed200" data-expected-width="200" data-expected-height="20"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">X</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">X</div> +</div> + +<div class="multicol fixed200" + data-expected-width="200" data-expected-height="40"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="40">XX X X</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="40">XX X X</div> +</div> + +<div class="multicol fixed200" + data-expected-width="200" data-expected-height="20"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div> +</div> + +<h3>Multicol container: intrinsic width</h3> + +<div class="multicol inlineBlock" + data-expected-width="40" data-expected-height="20"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="20">X</div> + <div data-offset-x="25" data-offset-y="0" data-expected-width="15" data-expected-height="20">X</div> +</div> + +<div class="multicol inlineBlock" + data-expected-width="240" data-expected-height="40"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="40">XX X X</div> + <div data-offset-x="150" data-offset-y="0" data-expected-width="90" data-expected-height="40">XX X X</div> +</div> + +<div class="multicol inlineBlock" + data-expected-width="200" data-expected-height="20"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div> +</div> + +<h3>Multicol container: auto width</h3> + +<div class="wrapper200"> + + <div class="multicol marginTopBottom" + data-expected-width="200" data-expected-height="20"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">X</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">X</div> + </div> + + <div class="multicol marginTopBottom" + data-expected-width="200" data-expected-height="40"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="40">XX X X</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="40">XX X X</div> + </div> + + <div class="multicol marginTopBottom" + data-expected-width="200" data-expected-height="20"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div> + <div data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="20">XXXXX</div> + </div> + +</div> + +<div class="wrapper8"> + + <div class="multicol marginTopBottom" + data-expected-width="8" data-expected-height="20"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="3" data-expected-height="20">X</div> + <div data-offset-x="5" data-offset-y="0" data-expected-width="3" data-expected-height="20">X</div> + </div> + + <div class="multicol marginTopBottom" + data-expected-width="8" data-expected-height="60"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="3" data-expected-height="60">XX X X</div> + <div data-offset-x="5" data-offset-y="0" data-expected-width="3" data-expected-height="60">XX X X</div> + </div> + + <div class="multicol marginTopBottom" + data-expected-width="8" data-expected-height="20"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="3" data-expected-height="20">XXXXX</div> + <div data-offset-x="5" data-offset-y="0" data-expected-width="3" data-expected-height="20">XXXXX</div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-height-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-height-001-ref.xht new file mode 100644 index 0000000000..d55aa7aa94 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-height-001-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + img + { + left: 135px; + /* 6em + (2em/2) - (10px/2) == 135px */ + position: relative; + vertical-align: top; + } + + img + img {left: 285px;} + /* 6em + 2em + 6em + (2em/2) - (10px/2) - 10px == 285px */ + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 blue vertical stripes of equal height.</p> + + <div><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-height-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-height-001.xht new file mode 100644 index 0000000000..821cfd6ca9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-height-001.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-count and height</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'" /> + <link rel="match" href="multicol-height-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that length of column rules is equal to the length of the columns and if a nth column box overflows outside the available width of a multi-column element, then an (n-1)th column rule should be drawn. In this test, a 3rd column box is created outside the content edge of the multi-column element: therefore, a 2nd blue column rule should be drawn accordingly." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: white; + font: 1.25em/1 Ahem; + height: 8em; + width: 14em; + + column-count: 2; + column-fill: auto; + column-gap: 2em; + column-rule: blue solid 10px; + } + ]]></style> + </head> + <body> + <p>Test passes if there are 2 blue vertical stripes of equal height.</p> + + <div> + 1st col 1st col 1st col + 1st col 2nd col 2nd col + 2nd col 2nd col 3rd col + 3rd col 3rd col 3rd col + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-height-002-print-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-height-002-print-ref.xht new file mode 100644 index 0000000000..24943560c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-height-002-print-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> + <style type="text/css"><![CDATA[ + html, body { height: 100%; } + * { margin: 0; } + div { + border: double blue 12px; + height: 150%; + padding: 0 12px; + } + div > p { + border-right: solid orange 12px; + border-left: solid orange 12px; + width: 50%; + margin: 0 auto; + height: 100%; + } + blockquote { + border: solid thick yellow; + } ]]></style> + </head> + <body> + <p>Test passes if even when printed:</p> + <ul> + <li>Two vertical orange stripes stretch exactly + from the inner top edge to the inner bottom edge of the blue box below.</li> + <li>There is a yellow stripe immediately below the blue box.</li> + </ul> + <div> + <p></p> + </div> + <blockquote></blockquote> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-height-002-print.xht b/testing/web-platform/tests/css/css-multicol/multicol-height-002-print.xht new file mode 100644 index 0000000000..03e0b22eae --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-height-002-print.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Percentage Computed Height on Multicol Child (Definite Multicol Height)</title> + <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/> + <meta name="assert" content="Percentage heights with a multi-column element are relative to the computed height of the multicolumn box, and this works even when the multi-column element is paginated." /> + <link rel="match" href="multicol-height-002-print-ref.xht" /> + <style type="text/css"><![CDATA[ + html, body { height: 100%; } + * { margin: 0; } + div { + border: double blue 12px; + column-count:2; + column-gap:0; + column-fill: balance; + height: 150%; + } + div > p { + border-right: solid orange 12px; + width: 0; + margin: 0 auto; + height: 200%; + } + blockquote { + border: solid thick yellow; + } + ]]></style> + </head> + <body> + <p>Test passes if even when printed:</p> + <ul> + <li>Two vertical orange stripes stretch exactly + from the inner top edge to the inner bottom edge of the blue box below.</li> + <li>There is a yellow stripe immediately below the blue box.</li> + </ul> + <div> + <p></p> + </div> + <blockquote></blockquote> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-height-block-child-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-height-block-child-001-ref.xht new file mode 100644 index 0000000000..6b36896981 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-height-block-child-001-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <meta name="flags" content="image" /> + </head> + <body> + <div style="font:20px/1 Ahem; width:22em; height:5em; background:blue;"> + <div style="width:3em; height:5em; background:black;"></div> + </div> + <div style="font:20px/1 Ahem; width:14em; height:3em; background:blue;"> + <div style="float:left; width:3em; height:3em; margin-right:5em; background:orange;"></div> + <div style="float:left; width:3em; height:3em; background:orange;"></div> + </div> + + <!-- + + Expected results: + + 0em 7em 14em 22em + v v v v +0 ********************************************* + * bla | | * + * bla | | * + * bla | | * + * bla | | * +5 * bla | | * +6 * orn | zzz |**************** +7 * orn | zzz | +8 * orn | zzz | + ***************************** + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-height-block-child-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-height-block-child-001.xht new file mode 100644 index 0000000000..3d62176ec3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-height-block-child-001.xht @@ -0,0 +1,92 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multi-column element with child block (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0091.html" title="[css3-multicol] Nested multicolumn elements rendering" /> + <link rel="match" href="multicol-height-block-child-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a nested multi-column element's inline content could be clipped horizontally." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + font: 20px/1 Ahem; + height: 8em; + width: 14em; + + column-count: 2; + column-gap: 2em; + + /* + + N == 2; + + W == 6em; + + H == 8em; + + */ + } + + div#outer + { + color: black; + column-fill: auto; + } + + div#inner + { + color: orange; + column-fill: balance; + } + ]]></style> + </head> + <body> + + <div id="outer"> + bla bla bla bla bla + + <div id="inner">orn orn orn zzz zzz zzz</div> + + </div> + + <!-- + Both column boxes of div#inner start in the 1st column box of + div#outer multi-column element. All the 6 lines of div#inner will + be rendered inside the 1st column box of div#outer. The first three + lines in the first inner column, and the last three in the second + inner column, which will overflow the first outer column, and + actually appear as if they were part of the second outer column. No + clipping should occur, unless explicitly requested. + + All the 6 lines of #inner fit in a column row that resides in the + first outer column. #inner has a fixed height, and is taller than + what can fit in the first outer column, so it needs to continue in + the second outer column, with no inner column content left to + fragment. #inner is a 14em wide block that is put into a 6em wide + outer column, so it will overflow the outer column all the way to + 22em, relatively to the left edge of the outer multicol container. + + Expected results: + + 0em 7em 14em 22em + v v v v +0 ********************************************* + * bla | | * + * bla | | * + * bla | | * + * bla | | * +5 * bla | | * +6 * orn | zzz |**************** +7 * orn | zzz | +8 * orn | zzz | + ***************************** + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-inherit-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-inherit-001-ref.xht new file mode 100644 index 0000000000..20510d0a9a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-inherit-001-ref.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + font: 1.25em/1 serif; + margin: 0em 1em; + padding: 0em 1em 1em; + width: 30em; + } + + img + { + padding-right: 1em; + vertical-align: top; + } + + img.column-gap {margin-right: 2em;} + + img#last {padding-right: 0em;} + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" +width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-inherit-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-inherit-001.xht new file mode 100644 index 0000000000..3d778b9fce --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-inherit-001.xht @@ -0,0 +1,76 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multicolumn and inheritance</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" /> + <link rel="match" href="multicol-inherit-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 Ahem; + width: 34em; + } + + body > div + { + column-count: 3; + column-gap: 1em; + + /* + N == 3; + + 34em : available width + - 2em : horizontal margin of external div + - 2em : 2 column gaps + ========== + 30em + + So, W == 10em; + + 30em + - 6em : 3 mult by 2em: horizontal margin of 3 internal divs + ========== + 24em : 8em for each of the 3 column boxes without their horizontal margins + + */ + } + + div + { + background-color: yellow; + color: black; + margin: 0 1em 1em; + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-inherit-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-inherit-002-ref.xht new file mode 100644 index 0000000000..2be3fd9e32 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-inherit-002-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + font: 1.25em/1 serif; + margin: 1em; + padding: 0em 1em 1em; + width: 30em; + } + + img {vertical-align: top;} + + img.column-gap + { + margin-left: -2em; + margin-right: 3em; + vertical-align: bottom; + } + + img#last + { + margin-left: -2em; + vertical-align: bottom; + } + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img class="column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-inherit-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-inherit-002.xht new file mode 100644 index 0000000000..cd3ccc6106 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-inherit-002.xht @@ -0,0 +1,83 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-count' and inherit</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 'column-count'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="match" href="multicol-inherit-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + background-color: blue; + column-count: 3; + column-gap: 1em; + font: 1.25em/1 Ahem; + width: 32em; + + /* + N == 3; + + 32em + - 2em : 2 column gaps + ========== + 30em : available width of the 3 inner multi-column elements + + So, W == 10em; + + 30em + - 6em : 3 mult by 2em: horizontal margin of 3 inner multi-column elements + - 6em : 3 mult by 2em: horizontal column-gaps of all 3 inner multi-column elements + ========== + 18em : 6em for each of the 3 column boxes without their own horizontal margins + So, each column boxes of inner multi-column elements is 2em wide. + */ + } + + div + { + color: black; + margin: 1em; + orphans: 1; + widows: 1; + } + + div > div + { + background-color: yellow; + column-count: inherit; + column-gap: 1em; + } + + div > div:first-child {margin-top: 0;} + ]]></style> + </head> + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-inherit-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-inherit-003.xht new file mode 100644 index 0000000000..4fead557ce --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-inherit-003.xht @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | inheritance</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="match" href="multicol-inherit-3-ref.xht"/> +<meta name="flags" content="ahem"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + width: 75em; +} +body>div { + height: 2em; + column-width: 8em; +} +div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + orphans: 1; + widows: 1; +} +div>div { + margin: 0 1em 1em; +} +div+div { + color: blue; +} +div+div+div { + color: pink; +} +]]></style> +</head> + +<body> + +<div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-inherit-3-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-inherit-3-ref.xht new file mode 100644 index 0000000000..58ec1c8d89 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-inherit-3-ref.xht @@ -0,0 +1,67 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | inheritance</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + width: 75em; +} +body>div { + color: black; + background: yellow; + height: 2em; + position: relative; +} +div div { + position: absolute; + top: 0; + left: 0; +} +#two {left: 19em;} +#three {left: 38em;} +div div div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + width: 2em; + height: 2em; + color: black; + position: absolute; + left: 1em; +} +.a2 {left: 4em;} +.a3 {left: 10.5em;} +.a4 {left: 13.5em;} +#two div {color: blue;} +#three div {color: pink;} +]]></style> +</head> + +<body> + +<div> + <div> + <div>xx xx</div> + <div class="a2">xx xx</div> + <div class="a3">xx xx</div> + <div class="a4">xx xx</div> + </div> + <div id="two"> + <div>xx xx</div> + <div class="a2">xx xx</div> + <div class="a3">xx xx</div> + <div class="a4">xx xx</div> + </div> + <div id="three"> + <div>xx xx</div> + <div class="a2">xx xx</div> + <div class="a3">xx xx</div> + <div class="a4">xx xx</div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-list-item-001-ref.xht new file mode 100644 index 0000000000..582b735988 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-001-ref.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + height: 100px; + width: 200px; + } + ]]></style> + </head> + <body> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-list-item-001.xht new file mode 100644 index 0000000000..bcf3fa2613 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-001.xht @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multi-column and list-item</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-list-item-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that an unordered list of list items can be set to display its list-items in column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + ul + { + background-color: black; + font: 1.25em/1 Ahem; + margin: 0em; + padding: 0em; + width: 10em; + + column-gap: 0em; + column-width: 5em; + } + + li, span {font-size: 1em;} + + li + { + margin-left: 1em; + padding: 0em; + list-style-type: "X"; + } + + span {display: block;} + ]]></style> + </head> + + <body> + + <ul> + <li>1sli</li> + <li>2nli</li> + <li>3rli</li> + <li>4tli</li> + <li>5tli</li> + <li><span>6tli</span></li> + <li>7tli</li> + <li>8tli</li> + <li>9tli</li> + <li>10tl</li> + </ul> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-002-ref.html new file mode 100644 index 0000000000..66fee5b5b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: multi-column and list-item</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +pre { + font: 25px/1 Ahem; +} +</style> +<pre> +1. X XXpXX +pXXXX XXXXp + +2. X XXpXX +pXXXX XXXXp + +3. X XXpXX +pXXXX XXXXp +</pre> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-002.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-002.html new file mode 100644 index 0000000000..6d788a87f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-002.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Layout Test: multi-column and list-item</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="multicol-list-item-002-ref.html"> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> +<meta name="assert" content="Checks that a list item can be dynamically converted into a multicol container."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#self, +#before::before, +#after::after { + display: list-item; + list-style-type: decimal; + list-style-position: inside; + font: 25px/1 Ahem; + width: 12ch; + margin-top: 1ch; +} +#before::before, +#after::after { + content: "X pXXXX XXpXX XXXXp"; +} +.multicol #self, +.multicol #before::before, +.multicol #after::after { + column-count: 2; + column-gap: 2ch; +} +</style> +<div id="self">X pXXXX XXpXX XXXXp</div> +<div id="before"></div> +<div id="after"></div> +<script> +"use strict"; +document.body.offsetLeft; +document.body.classList.add("multicol"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-003-ref.html new file mode 100644 index 0000000000..966715ae1f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-003-ref.html @@ -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> + ← Marker here +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-003.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-003.html new file mode 100644 index 0000000000..1ae7c91237 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-003.html @@ -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> + ← Marker here +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-004-ref.html new file mode 100644 index 0000000000..a1a373c297 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-004-ref.html @@ -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;">← Marker here</div> + Marker NOT here +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-004.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-004.html new file mode 100644 index 0000000000..e235aa26b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-004.html @@ -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;">← Marker here</div> + Marker NOT here +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-005-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-005-ref.html new file mode 100644 index 0000000000..3a9fbc7eb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-005-ref.html @@ -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;">← Marker here.</div> + Marker NOT here +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-005.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-005.html new file mode 100644 index 0000000000..4f158dfde4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-005.html @@ -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;">← Marker here.</div> + Marker NOT here +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-006-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-006-ref.html new file mode 100644 index 0000000000..30e55658f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-006-ref.html @@ -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;">↓ Marker here.</div> +<div style="display:list-item; margin:50px;"></div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-006.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-006.html new file mode 100644 index 0000000000..1cf609adf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-006.html @@ -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;">↓ 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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-007-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-007-ref.html new file mode 100644 index 0000000000..54435d7191 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-007-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-007.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-007.html new file mode 100644 index 0000000000..acb21d1cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-007.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-008-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-008-ref.html new file mode 100644 index 0000000000..c0abd5164c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-008-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-list-item-008.html b/testing/web-platform/tests/css/css-multicol/multicol-list-item-008.html new file mode 100644 index 0000000000..c77c2c2497 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-list-item-008.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-margin-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-margin-001.xht new file mode 100644 index 0000000000..dccf78f43d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-margin-001.xht @@ -0,0 +1,71 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multi-column and margin collapsing of first child (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the margin-top of the first child of a multi-column element (with column-fill: auto) does not collapse with its parent." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#test-multi-column-red + { + background-color: red; + color: white; + font: 3.125em/1 Ahem; /* equivalent to 50px/50px Ahem */ + height: 4em; + margin-top: 0em; + width: 4em; + + column-count: 2; + column-fill: auto; + column-gap: 0em; + } + + div#first-child {margin-top: 2em;} + + div#reference-overlapping-green + { + background-color: green; + bottom: 200px; + height: 100px; + position: relative; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test-multi-column-red"> + <div id="first-child">ab cd</div> + ef gh ij kl + </div> + + <div id="reference-overlapping-green"></div> + + <!-- + + Expected result (before the overlapping): + + ********************* + | margin- | ef | + | top red | | + | back | gh | + | ground | | + ********************* + | ab | ij | + | | | + | cd | kl | + | | | + ********************* + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-margin-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-margin-002.xht new file mode 100644 index 0000000000..94c065d8f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-margin-002.xht @@ -0,0 +1,75 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multi-column and margin collapsing of first child (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the margin-top of the first child (an inline-block) of a multi-column element (with column-fill: balance) does not collapse with its parent." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#test-multi-column-red + { + background-color: red; + color: white; + font: 3.125em/1 Ahem; /* equivalent to 50px/50px Ahem */ + height: 4em; + margin-top: 0em; + width: 4em; + + column-count: 2; + column-fill: balance; + column-gap: 0em; + } + + span + { + display: inline-block; + margin-top: 2em; + } + + div#reference-overlapping-green + { + background-color: green; + bottom: 200px; + height: 100px; + position: relative; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="test-multi-column-red"> + <span>ab cd</span> + ef gh ij kl + </div> + + <div id="reference-overlapping-green"></div> + + <!-- + + Expected result (before the overlapping): + + ********************* + | margin- | ef | + | top red | | + | back | gh | + | ground | | + ********************* + | ab | ij | + | | | + | cd | kl | + | | | + ********************* + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-margin-003.html b/testing/web-platform/tests/css/css-multicol/multicol-margin-003.html new file mode 100644 index 0000000000..2b29474306 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-margin-003.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: multi-column and margin bottom of last child</title> + <link rel="author" title="Ting-Yu Lin" href="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"> + <meta name="assert" content="This test checks the margin-bottom of the last child of a multi-column should not affect its parent's margin-bottom."> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + article { + font: 25px/25px Ahem; + color: green; + background-color: green; + width: 100px; + column-count: 2; + column-gap: 0; + margin-bottom: 0; + orphans: 1; + widows: 1; + } + + article div:last-child { + margin-bottom: 13px; + } + </style> + + <body> + <p>Test passes if there is a filled green square.</p> + <article> + <div>a1 a2 a3 a4</div> + <div>a5</div> + </article> + <article>b1 b2</article> + + <!-- + Expected result: + + |------+------| + | a1 | a4 | + | a2 | a5 | + | a3 |margin| + |------+------| + | b1 | b2 | + |------+------| + --> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-margin-child-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-margin-child-001-ref.xht new file mode 100644 index 0000000000..49f93d6306 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-margin-child-001-ref.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <style type="text/css"><![CDATA[ + body > div + { + background-color: blue; + border: gray solid 1em; + font-size: 1.25em; + height: 8em; + position: relative; + width: 10em; + } + + div > div + { + background-color: yellow; + height: 1em; + left: 0; + position: absolute; + top: 3em; + width: 5em; + } + + #second-stripe {top: 5em;} + + #third-stripe {top: 7em;} + ]]></style> + + </head> + + <body> + + <div> + <div></div> + <div id="second-stripe"></div> + <div id="third-stripe"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-margin-child-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-margin-child-001.xht new file mode 100644 index 0000000000..919faec6b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-margin-child-001.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multi-column and margin collapsing of block children (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-margin-child-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the margin-bottom of a block child in a multi-column element will collapse with the margin-top of a following block child of that same multi-column element if those children are vertically adjacent and if no line boxes, no clearance, no padding and no border separate them." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: blue; + font: 1.25em/1 Ahem; + width: 10em; + + column-count: 2; + column-fill: balance; + column-gap: 0em; + } + + h4 + { + font: inherit; + margin: 1em 0; + } + ]]></style> + + </head> + + <body> + + <div> + 1scol 1scol + 1scol + <h4> h4h41 </h4> + <h4> h4h42 </h4> + 2ncol 2ncol + 2ncol 2ncol + 2ncol 2ncol + 2ncol 2ncol + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-002-ref.xht new file mode 100644 index 0000000000..5aaa30521e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-002-ref.xht @@ -0,0 +1,105 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 --> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 4em; + position: relative; + width: 32em; + } + + div > div + { + font-size: 1em; + height: 3em; + position: absolute; + top: 0; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + } + + div#black2 + { + background-color: black; + left: 4em; + } + + div#black3 + { + background-color: black; + height: 2em; + left: 7em; + } + + div#blue1 + { + background-color: blue; + left: 12em; + } + + div#blue2 + { + background-color: blue; + left: 15em; + } + + div#blue3 + { + background-color: blue; + height: 2em; + left: 18em; + } + + div#pink1 + { + background-color: pink; + left: 23em; + } + + div#pink2 + { + background-color: pink; + left: 26em; + } + + div#pink3 + { + background-color: pink; + height: 2em; + left: 29em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + + <div id="pink1"></div> + <div id="pink2"></div> + <div id="pink3"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-002.xht new file mode 100644 index 0000000000..d125ef6e44 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-002.xht @@ -0,0 +1,81 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multicolumn and margin-bottom collapsing</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-002-ref.xht" /> + <meta name="assert" content="This test checks that a block container element's margin-bottom can collapse with its multi-column parent's margin-bottom if no line boxes, no clearance, no padding and no border separate them." /> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + body > div + { + font: 1.25em/1 Ahem; + width: 32em; + + column-gap: 1em; + column-width: 8em; + } + + /* + + N == max(1, floor((available-width + column-gap) / (column-width + column-gap))); + N == max(1, floor((32em + 1em) / (8em + 1em))); + N == max(1, floor(33em / 9em)); + N == max(1, floor(3.6)); + N == max(1, 3); + N == 3; + + W == ((available-width + column-gap) / N) - column-gap; + W == ((32em + 1em) / 3) - 1em; + W == (33em / 3) - 1em; + W == (11em) - 1em; + W == 10em; + + */ + + div + { + background: yellow; + color: black; + orphans: 1; + widows: 1; + } + + div > div {margin: 0 1em 1em;} + + div + div {color: blue;} + + div + div + div {color: pink;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-005-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-005-ref.xht new file mode 100644 index 0000000000..39d7f537c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-005-ref.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + font: 1.25em/1 serif; + margin: 1em; + padding: 0em 1em 1em; + width: 39em; + } + + img + { + padding-right: 2em; + vertical-align: top; + } + + img.column-gap {margin-right: 2em;} + + img#last {padding-right: 0em;} + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" +width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-005.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-005.xht new file mode 100644 index 0000000000..943162e0ec --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-005.xht @@ -0,0 +1,107 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: nested multi-columns and constrained dimensions</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-nested-005-ref.xht" /> + <!-- + The original filename of this test was + multicol-inherit-005.xht + This test also serves as a conversion of + multicol-nested-001.xht + --> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks how the height of column boxes conditions the height of nested column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + column-gap: 1em; + font: 1.25em/1 Ahem; + width: 41em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. So: + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + So, each duo of 'a', 'm' and 'x' should fill one and only 1 line + box. There are 8 duos; therefore, the first 2 inner + column boxes should use 3 line boxes and the 3rd inner + column box should be using 2 line boxes. + + So, the height of the 2 blue column rules should be 60px. + + */ + + div + { + background-color: yellow; + color: black; + font-size: 1em; + margin: 1em; + orphans: 1; + widows: 1; + + column-count: 3; + } + + div > div:first-child {margin-top: 0;} + ]]></style> + </head> + + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-006.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-006.html new file mode 100644 index 0000000000..c20ad03a34 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-006.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#filling-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#widows-orphans"> +<meta name="assert" content="Make sure that orphans and widows handling inside an inner balanced multicol container doesn't get messed up by the constraining height of an outer multicol container"> +<p>There should be three columns below. The text in each column should match the + column number that the text actually ends up in.</p> +<div style="columns:2; height:250px; line-height:50px; column-fill:auto;"> + <div style="columns:3; column-rule:solid;" id="inner"> + 1<br>1<br>2<br>2<br>3<br>3<br> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(inner.offsetHeight, 100); + }, "Check that orphans and widows don't make a multicol container taller than necessary"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-007.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-007.html new file mode 100644 index 0000000000..92dc7a49ef --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-007.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-008.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-008.html new file mode 100644 index 0000000000..95c8ab3b92 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-008.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-009.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-009.html new file mode 100644 index 0000000000..4d978a7752 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-009.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-010.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-010.html new file mode 100644 index 0000000000..6ed41139f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-010.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-011.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-011.html new file mode 100644 index 0000000000..925fecf99f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-011.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-012.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-012.html new file mode 100644 index 0000000000..0d5867b48e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-012.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-013.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-013.html new file mode 100644 index 0000000000..2014988193 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-013.html @@ -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="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="columns:2; column-fill:auto; column-gap:0;"> + <div style="width:200%; height:50px; background:green;"></div> + <div style="width:200%; height:100px; break-inside:avoid; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-014.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-014.html new file mode 100644 index 0000000000..27bb511756 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-014.html @@ -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/#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="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="columns:5; column-fill:auto; column-gap:0;"> + <!-- Fill the first inner column: --> + <div style="height:50px; background:green;"></div> + <!-- Take up all the space in the next two columns, but paint a background + in all four remaining columns, using a large width: --> + <div style="float:left; width:300%; height:100px; background:green;"></div> + <!-- Skip the remaining columns in the first row and jump to the next outer + fragmentainer and start a taller row there, since the content is + monolithic and too tall to fit in the first one: --> + <div style="contain:size; height:100px; background:green;"></div> + <!-- Take up the remaining four columns in the second row in the second + outer fragmentainer: --> + <div style="float:left; width:100%; height:400px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-015.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-015.html new file mode 100644 index 0000000000..18ae3392e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-015.html @@ -0,0 +1,28 @@ +<!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"> +<style> + .ib { + display: inline-block; + width: 100%; + height: 30px; + vertical-align: top; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; orphans:2; widows:2; background:red;"> + <div style="contain:size; height:70px; background:green;"></div> + <div style="break-before:avoid; columns:5; column-fill:auto; column-gap:0;"> + <div style="break-inside:avoid; height:60px; background:green;"></div> + <!-- Violate orphans and widows here (only room for one line in each + column), because we already have a break violation with higher severity + (break-inside:avoid): --> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + </div> + <div style="height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-016.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-016.html new file mode 100644 index 0000000000..ad4b6a5aaa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-016.html @@ -0,0 +1,31 @@ +<!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"> +<style> + .ib { + display: inline-block; + width: 500%; + height: 30px; + vertical-align: top; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; orphans:2; widows:2; background:red;"> + <div style="contain:size; height:70px; background:green;"></div> + <div style="break-before:avoid; columns:5; column-fill:auto; column-gap:0;"> + <div style="background:green;"> + <div style="height:60px;"></div> + <!-- These lines should be pushed to a column in the the next outer + fragmentainer, or we'd violate orphans and widows settings (which + would otherwise be the only (and unnecessary) violation inside the + inner multicol container). --> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div style="width:500%; height:10px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-017.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-017.html new file mode 100644 index 0000000000..79952189d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-017.html @@ -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/#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-gap:0; column-fill:auto; height:110px; line-height:50px;"> + <div style="height:60px; background:green;"></div> + <div style="columns:2; column-gap:0; column-fill:auto;"> + <div style="height:40px; background:green;"></div> + <div style="height:100px; background:red;"> + <div style="column-span:all; height:20px; background:green;"></div> + <!-- Outer column break should be here. --> + <div style="width:200%; background:green;"><br></div> + <div style="width:200%; height:50px; background:green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-018.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-018.html new file mode 100644 index 0000000000..3e19ec0f8c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-018.html @@ -0,0 +1,29 @@ +<!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"> +<style> + .mc { + columns: 2; + column-gap: 0; + column-fill: auto; + } + .ib { + display: inline-block; + vertical-align: top; + width: 200%; + height: 50px; + background: green; + } +</style> +<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 class="mc" style="height:190px; line-height:50px; orphans:2; widows:2;"> + <div style="height:100px; background:green;"></div> + <div class="mc"> + <div class="ib"></div><br> + <div class="ib"></div><br> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-019.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-019.html new file mode 100644 index 0000000000..13242ff19b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-019.html @@ -0,0 +1,31 @@ +<!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"> +<meta name="assert" content="Prefer ignoring the orphans request inside the inner multicol over ignoring the break-before:avoid and earlier orphans requests, as specified in https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .mc { + columns: 2; + column-gap: 0; + column-fill: auto; + } + .ib { + display: inline-block; + vertical-align: top; + width: 100%; + height: 25px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="mc" style="width:100px; height:100px; line-height:25px; orphans:3; widows:3; background:red;"> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="ib"></div><br> + <div class="mc" style="break-before:avoid;"> + <div class="ib"></div><br> + <div class="ib"></div><br> + </div> + <div style="height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-020.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-020.html new file mode 100644 index 0000000000..f191fa5f31 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-020.html @@ -0,0 +1,31 @@ +<!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"> +<meta name="assert" content="Prefer ignoring the orphans request inside the inner multicol over ignoring the break-before:avoid, as specified in https://www.w3.org/TR/css-break-3/#unforced-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .mc { + columns: 2; + column-gap: 0; + column-fill: auto; + } + .ib { + display: inline-block; + vertical-align: top; + width: 100%; + height: 50px; + background: green; + } +</style> +<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 class="mc" style="height:140px; line-height:50px; orphans:2; widows:2;"> + <div style="height:50px; background:green;"></div> + <div class="mc" style="break-before:avoid;"> + <div class="ib"></div><br> + <div class="ib"></div><br> + </div> + <div style="height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-021.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-021.html new file mode 100644 index 0000000000..2e82d93ec2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-021.html @@ -0,0 +1,22 @@ +<!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="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <!-- First outer column --> + <div style="height:50px; background:green;"></div> + <div style="columns:2; column-fill:auto; column-gap:0;"> + <!-- First and second inner column in the first row --> + <div style="width:200%; height:100px; background:green;"></div> + <!-- Second outer column, first column in the second row. --> + <div style="height:50px; background:green;"></div> + <!-- Second column in the second row. Pushing this to a third outer column + (and third inner row) wouldn't be ideal, since we'd overflow just as + much in the block direction by doing that. --> + <div style="contain:size; height:150px;"> + <div style="height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-022.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-022.html new file mode 100644 index 0000000000..24ec705202 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-022.html @@ -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/#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:150px;"> + <div style="height:100px; background:green;"></div> + <div style="columns:2; column-gap:0; column-fill:auto;"> + <div style="width:200%; height:100px; break-inside:avoid; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-023.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-023.html new file mode 100644 index 0000000000..df52e88036 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-023.html @@ -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/#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:150px;"> + <div style="height:100px; background:green;"></div> + <div style="columns:2; column-gap:0;"> + <div style="width:200%; height:100px; break-inside:avoid; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-024.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-024.html new file mode 100644 index 0000000000..e11b27c682 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-024.html @@ -0,0 +1,16 @@ +<!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/#possible-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:150px;"> + <div style="height:100px; background:green;"></div> + <div style="columns:2; column-gap:0;"> + <div style="contain:size; height:100px; background:green;"></div> + <div style="contain:size; height:100px; background:green;"></div> + <div style="contain:size; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-025.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-025.html new file mode 100644 index 0000000000..badc91e03f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-025.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1339963"> +<link rel="match" href="../reference/nothing.html"> +<p>There should be nothing below.</p> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="columns:2; column-fill:auto; background:red;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-026.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-026.html new file mode 100644 index 0000000000..25371b7078 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-026.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1339963"> +<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; gap:0; column-fill:auto; width:100px; height:100px;"> + <div style="columns:2; gap:0; column-fill:auto; background:red;"> + <div style="height:150px;"> + <div style="height:150px; background:green;"></div> + <div style="width:200%; height:100px; background:green;"></div> + </div> + </div> + <div style="height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-027.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-027.html new file mode 100644 index 0000000000..02590d394a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-027.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1339963"> +<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; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; min-height:75px; background:green;"> + <div style="height:50px;"></div> + </div> + <div style="height:25px; background:green;"></div> + <div style="break-inside:avoid; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-028.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-028.html new file mode 100644 index 0000000000..cfd164f14e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-028.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1339963"> +<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:4; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="columns:2; gap:0; column-fill:auto; min-height:125px; background:green;"> + <div style="height:205px;"></div> + </div> + <div style="break-inside:avoid; height:75px; background:green;"></div> + <div style="break-inside:avoid; height:200px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-001-ref.xht new file mode 100644 index 0000000000..b6c77b4b84 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-001-ref.xht @@ -0,0 +1,12 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + </head> + <body> + <div style="font: 1.25em/1 Ahem; width:8em; height:3em; margin-left:9em; border-left:1em solid blue; border-right:1em solid blue;"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-001.xht new file mode 100644 index 0000000000..8fa8fdb728 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-001.xht @@ -0,0 +1,123 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <!-- + This test's original filename was multicol-inherit-004.xht + and it has been modified and is now + multicol-nested-column-rule-001.xht + --> + <title>CSS Multi-column Layout Test: nested multi-columns and column-rule position</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> + <link rel="match" href="multicol-nested-column-rule-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks how the height of column boxes conditions the height of column rule." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + column-rule: blue solid 1em; + font: 1.25em/1 Ahem; + width: 26em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (26em - ((3 - 1) * 1em)) / 3); + W == max(0, (26em - (2 * 1em)) / 3); + W == max(0, (26em - 2em) / 3); + W == max(0, 24em / 3); + W == max(0, 8em); + W == 8em; + + So, the first column-rule should be at: + + 1.0em : margin-left of outer div + 8.0em : width of 1st column box + 0.0em : (1.0em / 2) - (1.0em / 2) : left edge of 1st column-rule + ========= + 9.0em + + The 2nd column-rule should be at: + + 1.0em : margin-left of outer div + 8.0em : width of 1st column box + 1.0em : first column-gap + 8.0em : width of 2nd column box + 0.0em : (1.0em / 2) - (1.0em / 2) : left edge of 2nd column-rule + ========= + 18.0em + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. So: + + 8em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 6em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * -column-gap)) / N); + W == max(0, (6em - ((3 - 1) * 1em)) / 3); + W == max(0, (6em - (2 * 1em)) / 3); + W == max(0, (6em - 2em) / 3); + W == max(0, 4em / 3); + W == max(0, 1.33333em); + W == 1.33333em; + + So, each duo of 'a', 'm' and 'x' should fill one and only 1 line + box. There are 8 duos; therefore, the first 2 inner + column boxes should use 3 line boxes and the 3rd inner + column box should be using 2 line boxes. + + So, the height of the 2 blue column rules should be 60px. + + */ + + div + { + background-color: white; + color: white; + font-size: 1em; + margin: 0em 1em; + orphans: 1; + widows: 1; + + column-count: 3; + column-gap: 1em; + } + ]]></style> + </head> + + <body> + + <div> + <div> + aa aa + aa aa + aa aa + aa aa + </div> + <div> + mm mm + mm mm + mm mm + mm mm + </div> + <div> + xx xx + xx xx + xx xx + xx xx + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-002.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-002.html new file mode 100644 index 0000000000..dafb2e9f68 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-003.html b/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-003.html new file mode 100644 index 0000000000..ee13391275 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-column-rule-003.html @@ -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/#column-gaps-and-rules"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .mc { + columns: 2; + column-gap: 20px; + column-rule: 20px solid green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="mc" style="column-fill:auto; width:100px; height:100px; background:red;"> + <div class="mc"> + <div style="background:green;"> + <div style="height:10px; break-after:column;"></div> + <div style="height:10px; break-after:column;"></div> + <div style="height:200px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-001-ref.xht new file mode 100644 index 0000000000..83b832ab04 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-001-ref.xht @@ -0,0 +1,106 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 --> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 3em; + margin: 1em; + position: relative; + width: 32em; + } + + div > div + { + font-size: 1em; + height: 3em; + position: absolute; + top: 0em; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + } + + div#black2 + { + background-color: black; + left: 4em; + } + + div#black3 + { + background-color: black; + height: 2em; + left: 7em; + } + + div#pink1 + { + background-color: pink; + left: 12em; + } + + div#pink2 + { + background-color: pink; + left: 15em; + } + + div#pink3 + { + background-color: pink; + height: 2em; + left: 18em; + } + + div#blue1 + { + background-color: blue; + left: 23em; + } + + div#blue2 + { + background-color: blue; + left: 26em; + } + + div#blue3 + { + background-color: blue; + height: 2em; + left: 29em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + + <div id="pink1"></div> + <div id="pink2"></div> + <div id="pink3"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-001.xht new file mode 100644 index 0000000000..52097c7f91 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-001.xht @@ -0,0 +1,77 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multicolumn and nested margins</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" /> + <link rel="match" href="multicol-nested-margin-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that non-zero vertical margins can be applied on a multi-column element while the vertical margins of its own block containers can be set to zero." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + body > div + { + font: 1.25em/1 Ahem; + width: 32em; + + column-count: 3; + column-gap: 1em; + } + + /* + + N == 3; + + W == ((available-width + column-gap) / N) - column-gap; + W == ((32em + 1em) / 3) - 1em; + W == (33em / 3) - 1em; + W == (11em) - 1em; + W == 10em; + + */ + + div + { + background: yellow; + color: black; + margin: 1em; + orphans: 1; + widows: 1; + } + + div > div {margin: 0em 1em;} + + div div:nth-child(2) {color: pink;} + + div div:nth-child(3) {color: blue;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-002-ref.xht new file mode 100644 index 0000000000..2818de04a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-002-ref.xht @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <style type="text/css"><![CDATA[ + body {margin: 0em;} + + div + { + background-color: yellow; + font: 1.25em/1 serif; + height: 5em; + position: relative; + width: 41em; + } + + div > div + { + background-color: blue; + font: inherit; + height: 3em; + position: absolute; + top: 0em; + width: 2em + } + + div#first-blue + { + background-color: blue; + left: 29em; + } + + div#second-blue + { + background-color: blue; + left: 33em; + } + + div#third-blue + { + background-color: blue; + height: 2em; + left: 37em; + } + ]]></style> + </head> + <body> + + <div> + <div id="first-blue"></div> + <div id="second-blue"></div> + <div id="third-blue"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-002.xht new file mode 100644 index 0000000000..02dbb5331e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-002.xht @@ -0,0 +1,114 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: nested multicolumns and vertical margin (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-margin-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that when an inner nested multi-column element is preceded by a soft column break (caused by an unforced column-break), then the used margin-top of such inner nested multi-column element is '0'." /> + + <!-- + More info: + Re: [css3-multicol] vertical margins rendering in nested multi-columns + http://lists.w3.org/Archives/Public/www-style/2013Aug/0146.html + --> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 0;} + + body > div + { + background-color: yellow; + font: 1.25em/1 Ahem; + width: 41em; + /* + This test requires a viewport width of 820px + */ + } + + div + { + color: yellow; + font: inherit; + orphans: 1; + widows: 1; + + column-count: 3; + column-gap: 1em; + } + + div div {margin: 0em 1em;} + + div div:last-child + { + color: blue; + margin: 1em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. So: + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + So, each duo of 'a', 'm' and 'x' should fill one and only 1 + line box. There are 15 'a' duos and 15 'm' duos; therefore, + the 3 inner column boxes of each first 2 inner + multi-column elements should use 5 line boxes. + + The 1st column box of last inner multi-column + (the blue one with 'x' duos) should have 'x1', + 'x2' and 'x3' duos filling 3 line boxes. + + The 2nd column box of last inner multi-column should + have 'x4', 'x5' and 'x6' duos filling 3 line boxes. + + The 3rd column box of the last inner multi-column should + have 'x7' and 'x8' duos filling 2 line boxes. + */ + + ]]></style> + </head> + <body> + + <div> + + <div> a1 a2 a3 a4 a5 a6 a7 a8 a9 a0 a1 a2 a3 a4 a5 </div> + + <div> m1 m2 m3 m4 m5 m6 m7 m8 m9 m0 m1 m2 m3 m4 m5 </div> + + <div> x1 x2 x3 x4 x5 x6 x7 x8 </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-003-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-003-ref.xht new file mode 100644 index 0000000000..b9e80644a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-003-ref.xht @@ -0,0 +1,107 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 4em; + margin: 1em; + position: relative; + width: 41em; + } + + div > div + { + font-size: 1em; + height: 3em; + position: absolute; + top: 0em; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + top: 1em; + } + + div#black2 + { + background-color: black; + left: 5em; + top: 1em; + } + + div#black3 + { + background-color: black; + height: 2em; + left: 9em; + top: 1em; + } + + div#pink1 + { + background-color: pink; + left: 15em; + } + + div#pink2 + { + background-color: pink; + left: 19em; + } + + div#pink3 + { + background-color: pink; + height: 2em; + left: 23em; + } + + div#blue1 + { + background-color: blue; + left: 29em; + } + + div#blue2 + { + background-color: blue; + left: 33em; + } + + div#blue3 + { + background-color: blue; + height: 2em; + left: 37em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + + <div id="pink1"></div> + <div id="pink2"></div> + <div id="pink3"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-003.xht new file mode 100644 index 0000000000..73c8e5112d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-003.xht @@ -0,0 +1,97 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: nested multicolumn and nested margin-top</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-margin-003-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a top margin set on the first child element of a nested multicol element will not collapse with the margins of the multicol element." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + font: 1.25em/1 Ahem; + margin: 1em; + width: 41em; + /* + This test requires a viewport width of 860px + */ + } + + div + { + background-color: yellow; + color: black; + margin: 1em 1em 0; + orphans: 1; + widows: 1; + + column-count: 3; + column-gap: 1em; + } + + /* + + N == 3; + + 43em - 2em (horizontal margins) == available-width + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + */ + + div div:nth-child(2) {color: pink;} + + div div:nth-child(3) {color: blue;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-004-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-004-ref.xht new file mode 100644 index 0000000000..9162656fb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-004-ref.xht @@ -0,0 +1,136 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 4em; + margin: 1em; + position: relative; + width: 41em; + } + + div > div + { + font-size: 1em; + height: 3em; + position: absolute; + top: 0em; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + top: 1em; + } + + div#black2 + { + background-color: black; + left: 5em; + top: 1em; + } + + div#black3 + { + background-color: black; + height: 2em; + left: 9em; + top: 1em; + } + + div#pink1 + { + background-color: pink; + left: 15em; + } + + div#blue-bottom1 + { + background-color: blue; + height: 1em; + left: 15em; + top: 3em; + } + + div#pink2 + { + background-color: pink; + left: 19em; + } + + div#blue-bottom2 + { + background-color: blue; + height: 1em; + left: 19em; + top: 3em; + } + + div#pink3 + { + background-color: pink; + height: 2em; + left: 23em; + } + + div#blue-bottom3 + { + background-color: blue; + height: 1em; + left: 23em; + top: 3em; + } + + div#blue1 + { + background-color: blue; + height: 2em; + left: 29em; + } + + div#blue2 + { + background-color: blue; + height: 2em; + left: 33em; + } + + div#blue3 + { + background-color: blue; + height: 1em; + left: 37em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + + <div id="pink1"></div> + <div id="blue-bottom1"></div> + <div id="pink2"></div> + <div id="blue-bottom2"></div> + <div id="pink3"></div> + <div id="blue-bottom3"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-004.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-004.xht new file mode 100644 index 0000000000..bd8dc51acd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-004.xht @@ -0,0 +1,101 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: nested multicolumn and nested margin-top</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-margin-004-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that due to a top margin only set on the first child element of a nested multicol element that will not collapse with the margins of the multicol element, then the height of an multi-column element can make its other inner multi-column (with a zero margin-top) element break into its own column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + font: 1.25em/1 Ahem; + margin: 1em; + width: 41em; + /* + This test requires a viewport width of 860px + */ + } + + div + { + background: yellow; + color: black; + margin: 1em; + orphans: 1; + widows: 1; + + column-count: 3; + column-gap: 1em; + } + + div div {margin: 0 1em;} + + div div:first-child {margin: 1em 1em 0;} + + /* + + N == 3; + + 43em - 2em (horizontal margins) == available-width + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + */ + + div div:nth-child(2) {color: pink;} + + div div:nth-child(3) {color: blue;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-005.xht b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-005.xht new file mode 100644 index 0000000000..b32a3efcdd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-nested-margin-005.xht @@ -0,0 +1,99 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: nested multicolumn and nested margin-top</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> + <link rel="match" href="multicol-nested-margin-004-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that due to a top margin only set on the first child element of a nested multicol element that will not collapse with the margins of the multicol element, then the height of an multi-column element can make its other inner multi-column (with a zero margin-top) element break into its own column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + font: 1.25em/1 Ahem; + margin: 1em; + width: 41em; + /* + This test requires a viewport width of 860px + */ + } + + div + { + background: yellow; + color: black; + margin: 1em 1em 0em; + orphans: 1; + widows: 1; + + column-count: 3; + column-gap: 1em; + } + + div div {margin: 0 1em;} + + div div:first-child {margin: 1em 1em 0;} + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (41em - ((3 - 1) * 1em)) / 3); + W == max(0, (41em - (2 * 1em)) / 3); + W == max(0, (41em - 2em) / 3); + W == max(0, 39em / 3); + W == max(0, 13em); + W == 13em; + + 13em : width of each outer column box + - + 2em : horizontal margin of each div inside + ======= + 11em : width of each inner multi-column elements + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (11em - ((3 - 1) * 1em)) / 3); + W == max(0, (11em - (2 * 1em)) / 3); + W == max(0, (11em - 2em) / 3); + W == max(0, 9em / 3); + W == max(0, 3em); + W == 3em; + + */ + + div div:nth-child(2) {color: pink;} + + div div:nth-child(3) {color: blue;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-001-ref.html new file mode 100644 index 0000000000..a7c8e4be8a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-001-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<style> +section { + width: 300px; + height: 100px; + border: blue 1px solid; +} +.cb { + position: relative; +} +abs { + position: absolute; + background: purple; + width: 100px; + height: 50px; +} +abs.p0 { + top: 0; left: 0; + background: blue; +} +</style> +<body> + <section> + 123 + <span class="cb"> + 456<br> + 7 + <abs></abs> + <abs class="p0"></abs> + </span> + </section> + + <!-- Same --> + <section> + 123 + <span class="cb"> + 456<br> + 7 + <abs></abs> + <abs class="p0"></abs> + </span> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-001.html b/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-001.html new file mode 100644 index 0000000000..76c48e8059 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-001.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model"> +<link rel="match" href="multicol-oof-inline-cb-001-ref.html"/> +<meta name="assert" content="Out-of-flow in inline containing block across inline-block"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org" /> +<style> +section { + width: 300px; + height: 100px; + border: blue 1px solid; +} +.columns { + column-width: 100px; + column-fill: auto; + height: 100px; +} +inline-block { + display: inline-block; +} +.cb { + position: relative; +} +abs { + position: absolute; + background: purple; + width: 100px; + height: 50px; +} +abs.p0 { + top: 0; left: 0; + background: blue; +} +</style> +<body> + <!-- OOF with inline-CB across inline-block. --> + <section> + 123 + <span class="cb"> + 456<br> + <inline-block> + 7 + <abs></abs> + <abs class="p0"></abs> + </inline-block> + </span> + </section> + + <!-- Same in multicol. --> + <section class="columns"> + 123 + <span class="cb"> + 456<br> + <inline-block> + 7 + <abs></abs> + <abs class="p0"></abs> + </inline-block> + </span> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-002.html b/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-002.html new file mode 100644 index 0000000000..505c01652d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-oof-inline-cb-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model"> +<link rel="match" href="multicol-oof-inline-cb-001-ref.html"/> +<meta name="assert" content="Out-of-flow in inline containing block across block-in-inline"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org" /> +<style> +section { + width: 300px; + height: 100px; + border: blue 1px solid; +} +.columns { + column-width: 100px; + column-fill: auto; + height: 100px; +} +.cb { + position: relative; +} +abs { + position: absolute; + background: purple; + width: 100px; + height: 50px; +} +abs.p0 { + top: 0; left: 0; + background: blue; +} +</style> +<body> + <!-- OOF with inline-CB across block-in-inline. --> + <section> + 123 + <span class="cb"> + 456<br> + <div> + 7 + <abs></abs> + <abs class="p0"></abs> + </div> + </span> + </section> + + <!-- Same in multicol. --> + <section class="columns"> + 123 + <span class="cb"> + 456<br> + <div> + 7 + <abs></abs> + <abs class="p0"></abs> + </div> + </span> + </section> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-overflow-000-ref.xht new file mode 100644 index 0000000000..29aa736cfd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-000-ref.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-right: lime solid 1em; + border-spacing: 0px; + color: lime; + font: 1.25em/1 Ahem; + margin: 1em 0; + table-layout: fixed; + width: 21em; + } + + td {padding: 0em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <table><tr><td>G<br />H</td><td>I<br />J</td></tr></table> + + <table><tr><td>G<br />H</td><td>I<br />J</td></tr></table> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-overflow-000.xht new file mode 100644 index 0000000000..1d9080b44e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-000.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multi-column with set height causing overflow outside (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" /> + <link rel="match" href="multicol-overflow-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that column gap appears between two columns." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div, table + { + background-color: yellow; + color: lime; + font: 1.25em/1 Ahem; + margin: 1em 0; + } + + div + { + columns: 2; + column-fill: balance; + column-gap: 0px; + height: 2em; + width: 20em; + } + + table + { + border-right: lime solid 1em; + border-spacing: 0px; + table-layout: fixed; + width: 21em; + } + + td {padding: 0em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test">A<br />B<br />C<br />D<br />E<br />F</div> + + <table id="reference"><tr><td>G<br />H</td><td>I<br />J</td></tr></table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-auto-sized-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-auto-sized-ref.html new file mode 100644 index 0000000000..95a6e0cb2c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-auto-sized-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div style="columns: 2"> + <div>Column1</div> + <div style="break-inside: avoid; padding: 2px">Column2<br>Column2 line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-auto-sized.html b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-auto-sized.html new file mode 100644 index 0000000000..f48d55c318 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-auto-sized.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS Multi-column Layout Test: multicol with overflow-clipped content</title> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/"> +<link rel="help" href="https://drafts.csswg.org/css-break/#possible-breaks"> +<link rel="match" href="multicol-overflow-clip-auto-sized-ref.html"> +<meta name="assert" content="Overflow clip sized to content should not clip even under multicol."> +<div style="columns: 2"> + <div>Column1</div> + <div style="overflow: hidden; padding: 2px">Column2<br>Column2 line2</div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-positioned-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-positioned-ref.html new file mode 100644 index 0000000000..58f1d57bc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-positioned-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<div style="columns: 2"> + <div style="height: 200px; background: blue"></div> + <div style="height: 200px"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-positioned.html b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-positioned.html new file mode 100644 index 0000000000..184bfc7f18 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-positioned.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Multi-column Layout Test: multicol with overflow-clipped positioned content</title> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/"> +<link rel="match" href="multicol-overflow-clip-positioned-ref.html"> +<meta name="assert" content="Overflow clip for positioned content should work under multicol."> +<div style="columns: 2"> + <div style="height: 200px; overflow: hidden"> + <div style="height: 800px; background: blue; position: relative"></div> + </div> + <div style="height: 200px"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-ref.html new file mode 100644 index 0000000000..c061a1d611 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +.multicol { + column-count: 3; +} +.parent { + background: green; + height: 50px; +} +</style> +<div class="multicol"> + <div class="parent"></div> + <div class="parent"></div> + <div class="parent"></div> +</div> + diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip.html b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip.html new file mode 100644 index 0000000000..af59ff92d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-clip.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>CSS Multi-column Layout Test: multicol with overflow-clipped content</title> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/"> +<link rel="match" href="multicol-overflow-clip-ref.html"> +<meta name="assert" content="Overflow clip should work under multicol."> +<style> +.multicol { + column-count: 3; +} +.parent { + background: green; + height: 50px; + overflow: hidden; +} +.child2 { + margin-top: 50px; + background: darkred; + color: red; + height: 100px; +} +</style> +<div class="multicol"> + <div class="parent"> + <div class="child2">This should be hidden.</div> + </div> + <div class="parent"> + <div class="child2">This should be hidden.</div> + </div> + <div class="parent"> + <div class="child2">This should be hidden.</div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-positioned-transform-001.html b/testing/web-platform/tests/css/css-multicol/multicol-overflow-positioned-transform-001.html new file mode 100644 index 0000000000..f0a22b974a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-positioned-transform-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflow-transform-001.html b/testing/web-platform/tests/css/css-multicol/multicol-overflow-transform-001.html new file mode 100644 index 0000000000..97608a2807 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflow-transform-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflowing-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-overflowing-001-ref.xht new file mode 100644 index 0000000000..c1dc76f3c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflowing-001-ref.xht @@ -0,0 +1,208 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> + <style type="text/css"><![CDATA[ + div#rel-pos-wrapper + { + background-color: yellow; + font: 1.25em/1 serif; + height: 2em; + position: relative; + width: 32em; + } + + div > div + { + font-size: 1em; + height: 2em; + position: absolute; + top: 0; + width: 2em; + } + + div#black1 + { + background-color: black; + left: 1em; + } + + div#black2 + { + background-color: black; + left: 4em; + } + + div#black3 + { + background-color: black; + left: 7em; + } + + div#black4 + { + background-color: black; + height: 1em; + left: 12em; + } + + div#black5 + { + background-color: black; + height: 1em; + left: 15em; + } + + div#blue1 + { + background-color: blue; + left: 23em; + } + + div#blue2 + { + background-color: blue; + left: 26em; + } + + div#blue3 + { + background-color: blue; + left: 29em; + } + + div#blue4 + { + background-color: blue; + height: 1em; + left: 34em; + } + + div#yellow1 + { + background-color: yellow; + height: 1em; + left: 36em; + width: 1em; + } + + div#blue5 + { + background-color: blue; + height: 1em; + left: 37em; + } + + div#yellow2 + { + background-color: yellow; + height: 1em; + left: 39em; + width: 3em; + } + + div#pink1 + { + background-color: pink; + left: 45em; + } + + div#yellow3 + { + background-color: yellow; + left: 47em; + width: 1em; + } + + div#pink2 + { + background-color: pink; + left: 48em; + } + + div#yellow4 + { + background-color: yellow; + left: 50em; + width: 1em; + } + + div#pink3 + { + background-color: pink; + left: 51em; + } + + div#pink4 + { + background-color: pink; + height: 1em; + left: 56em; + } + + div#yellow5 + { + background-color: yellow; + height: 1em; + left: 58em; + width: 1em; + } + + div#pink5 + { + background-color: pink; + height: 1em; + left: 59em; + } + + div#yellow6 + { + background-color: yellow; + height: 1em; + left: 61em; + width: 3em; + } + + div#margin-right + { + background-color: transparent; + height: 1em; + left: 64em; + width: 1em; + } + ]]></style> + </head> + <body> + + <div id="rel-pos-wrapper"> + <div id="black1"></div> + <div id="black2"></div> + <div id="black3"></div> + <div id="black4"></div> + <div id="black5"></div> + + <div id="blue1"></div> + <div id="blue2"></div> + <div id="blue3"></div> + <div id="blue4"></div> + <div id="yellow1"></div> + <div id="blue5"></div> + <div id="yellow2"></div> + + <div id="pink1"></div> + <div id="yellow3"></div> + <div id="pink2"></div> + <div id="yellow4"></div> + <div id="pink3"></div> + <div id="pink4"></div> + <div id="yellow5"></div> + <div id="pink5"></div> + <div id="yellow6"></div> + <div id="margin-right"></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-overflowing-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-overflowing-001.xht new file mode 100644 index 0000000000..c4130df729 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-overflowing-001.xht @@ -0,0 +1,87 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <!-- + This test's original filename was multicol-inherit-003.xht + and it has been modified and is now + multicol-overflowing-001.xht + --> + <title>CSS Multi-column Layout Test: multicolumn and overflowing constrained dimensions</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" /> + <link rel="match" href="multicol-overflowing-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that the content of a multi-column element with a fixed height can overflow outside its fixed width according to the computed overflow value. In this test, the inline content of a multi-column element exceeds the available fixed height and fixed width for the multi-column element; therefore, it overflows outside of it and creates a 4th, 5th and 6th extra column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + font: 1.25em/1 Ahem; + height: 2em; + width: 32em; + + column-gap: 1em; + column-width: 8em; + } + + /* + + N == max(1, floor((available-width + column-gap) / (column-width + column-gap))); + N == max(1, floor((32em + 1em) / (8em + 1em))); + N == max(1, floor(33em / 9em)); + N == max(1, floor(3.6)); + N == max(1, 3); + N == 3; + + W == ((available-width + column-gap) / N) - column-gap; + W == ((32em + 1em) / 3) - 1em; + W == (33em / 3) - 1em; + W == (11em) - 1em; + W == 10em; + + H == 2em; + + */ + + div + { + background: yellow; + color: black; + orphans: 1; + widows: 1; + } + + div > div {margin: 0 1em 1em;} + + div + div {color: blue;} + + div + div + div {color: pink;} + ]]></style> + </head> + + <body> + + <div> + <div> + bl ac + bl ac + bl ac + bl ac + </div> + <div> + bl ue + bl ue + bl ue + bl ue + </div> + <div> + Pi nk + Pi nk + Pi nk + Pi nk + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-red.png b/testing/web-platform/tests/css/css-multicol/multicol-red.png Binary files differnew file mode 100644 index 0000000000..2d79f2b295 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-red.png diff --git a/testing/web-platform/tests/css/css-multicol/multicol-reduce-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-reduce-000-ref.xht new file mode 100644 index 0000000000..6999ffaa3e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-reduce-000-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: black solid thin; + color: orange; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 30em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 rectangles with orange and blue vertical stripes are <strong>identical</strong>.</p> + + <div> + 1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br /> + 9 0 1 2 3 4 5 6<span>I J K L M N O P </span> + </div> + + <div> + 1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br /> + 9 0 1 2 3 4 5 6<span>I J K L M N O P </span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-reduce-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-reduce-000.xht new file mode 100644 index 0000000000..b979b22246 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-reduce-000.xht @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column width becomes wider to fill available space</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1 'column-width'" /> + <link rel="match" href="multicol-reduce-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that column width is increased to fill the available space: in this test, there are only 2 column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#test, div#reference + { + background-color: yellow; + border: black solid thin; + color: orange; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 30em; + } + + div#test + { + column-gap: 0; + column-width: 201px; + + /* + + N == max(1, floor((U + column-gap)/(column-width + column-gap))) + N == max(1, floor((600px + 0px)/(201px + 0))) + N == max(1, floor(600px/201px)) + N == max(1, floor(2.985)) + N == max(1, 2) + N == 2; + + W == max(0, ((U + column-gap)/N - column-gap)) + W == max(0, ((600px + 0px)/2 - 0px)) + W == max(0, ((600px)/2 - 0px)) + W == max(0, (300px - 0px)) + W == max(0, 300px) + W == 300px; + + */ + } + + span {color: blue;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 rectangles with orange and blue vertical stripes are <strong>identical</strong>.</p> + + <div id="test"> + 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 <span>A B C D E F G H I J K L M N O P</span> + </div> + + <div id="reference"> + 1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br /> + 9 0 1 2 3 4 5 6<span>I J K L M N O P </span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-000-ref.xht new file mode 100644 index 0000000000..a1c8d2e4fb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-000-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: black; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 602px; + } + + span + { + border-left: lime solid 1px; + border-right: lime solid 1px; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div> + 1234567890<span>ABCDEFGHIJ</span>1234567890 + </div> + + <div> + 1234567890<span>ABCDEFGHIJ</span>1234567890 + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-000.xht new file mode 100644 index 0000000000..8c45279f19 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-000.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-000-ref.xht" /> + <meta name="assert" content="This test checks that the shorthand column-rule property draws the rule correctly." /> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: black; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 602px; + } + + div#test + { + columns: 3; + column-gap: 1px; + column-rule: lime solid 1px; + + /* + + N == 3; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span + { + border-left: lime solid 1px; + border-right: lime solid 1px; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p> + + <div id="test"> + 1234567890<br />ABCDEFGHIJ<br />1234567890 + </div> + + <div id="reference"> + 1234567890<span>ABCDEFGHIJ</span>1234567890 + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-001-ref.xht new file mode 100644 index 0000000000..7913378611 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-001-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: green; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 20em; + } + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 green bars and <strong>no red</strong>.</p> + + <div>12345678901234567890</div> + + <div>12345678901234567890</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-001.xht new file mode 100644 index 0000000000..45c35dde36 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-001.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule exceeding column-gap</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" /> + <link rel="match" href="multicol-rule-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="If a column rule is wider than its gap, then the adjacent column boxes overlap the rule. This test checks that if inline content of column boxes uses only 1 twentieth (1/20) of each of the adjacent column box width, then the column rule must shine through 19 twentieths (19/20) of each of the adjacent column boxes (and above their respective backgrounds)." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + color: green; + font: 1.25em/1 Ahem; + margin-bottom: 0.5em; + width: 20em; + } + + div#test + { + columns: 2; + column-gap: 0em; + column-rule: green solid 20em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 green bars and <strong>no red</strong>.</p> + + <div id="test">1<br />2</div> + + <div id="reference">12345678901234567890</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-002.xht new file mode 100644 index 0000000000..19d3cbde8a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-002.xht @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-rule-ref.xht"/> +<meta name="flags" content="ahem"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 15em; + position: relative; + orphans: 1; + widows: 1; + + column-count: 4; + column-gap: 1em; +} +span { + background: blue; + position: absolute; + top: 0; + left: 3em; + height: 2em; + width: 1em; +} +span+span { + left: 7em; +} +span+span+span { + left: 11em; +} +]]></style> +</head> + +<body> + +<div> + xx xx +<span> +</span> + xx xx +<span> +</span> + xx xx +<span> +</span> + xx xx +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-003-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-003-ref.xht new file mode 100644 index 0000000000..3474589ddd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-003-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: gray solid 1em; + font: 1.25em/1 serif; + width: 15em; + } + + img {vertical-align: top;} + + img.yellow {padding-left: 2em;} + ]]></style> + </head> + <body> + + <div><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-003.xht new file mode 100644 index 0000000000..3037333ea8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-003.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" /> + <link rel="match" href="multicol-rule-003-ref.xht" /> + <meta name="assert" content="Tests that the three column-rule-* longhand properties are correctly applied." /> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 15em; + + column-count: 4; + column-gap: 1em; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 1em; + } + ]]></style> + </head> + + <body> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-004-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-004-ref.xht new file mode 100644 index 0000000000..15558fe0e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-004-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-02 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div + { + background-color: green; + height: 100px; + left: 8px; + position: absolute; + top: 52px; + width: 100px; + } + ]]></style> + </head> + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-004.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-004.xht new file mode 100644 index 0000000000..d06496881e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-004.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-fill: balance' and column-rule</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-02 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" /> + <link rel="match" href="multicol-rule-004-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that when 'column-fill: balance' distributes equally inline content into column boxes in a way that does not completely fill column boxes, then column-rule must nevertheless still be painted entirely, that is for the whole length of column boxes, even though the whole inline content may not fill the whole length of the column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div#red-overlapped-reference + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + bottom: 100px; + color: transparent; + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + height: 5em; + position: relative; + right: 80px; + width: 13em; + + column-count: 2; + column-fill: balance; + column-gap: 5em; + column-rule: green solid 5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="red-overlapped-reference"></div> + + <div id="test-overlapping-green">LEFT Colm RIGH Colm</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-color-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-001-ref.xht new file mode 100644 index 0000000000..aac462164a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-001-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: gray solid 1em; + font: 1.25em/1 serif; + width: 14em; + } + + img {vertical-align: top;} + + img.white {padding-left: 2em;} + ]]></style> + </head> + <body> + + <div><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-color-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-001.xht new file mode 100644 index 0000000000..fa49c88556 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-001.xht @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule-color (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-color-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Basic test that the column-rule-color property is applied." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + color: lime; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 14em; + + column-count: 4; + column-gap: 1em; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 1em; + } + + /* + + N == 4; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (14em - ((4 - 1) * 1em)) / 4); + W == max(0, (14em - (3 * 1em)) / 4); + W == max(0, (14em - (3em)) / 4); + W == max(0, (11em) / 4); + W == max(0, 2.75em); + W == 2.75em; + + */ + + span {color: black;} + ]]></style> + </head> + + <body> + + <div> + <span>1s cl</span> + <span>2n cl</span> + <span>3r cl</span> + <span>4t cl</span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-001-ref.xht new file mode 100644 index 0000000000..8bf2d7d2da --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-001-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div {font-size: 1.25em;} + img {padding-left: 1em;} + ]]></style> + </head> + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div> + <img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-001.xht new file mode 100644 index 0000000000..a675b799b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-001.xht @@ -0,0 +1,138 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule-color: inherit</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-02 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="match" href="multicol-rule-color-inherit-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that, by default, column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case column-rule-color will be inherited from the parent's column-rule-color value." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#parent + { + column-rule-color: green; + column-rule-style: none; + font: 1.25em/1 Ahem; + width: 17em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (17em - ((3 - 1) * 1em)) / 3); + W == max(0, (17em - (2 * 1em)) / 3); + W == max(0, (17em - 2em) / 3); + W == max(0, 15em / 3); + W == max(0, 5em); + W == 5em; + + The height of column rule depends on number of line boxes in + each outer column box which depends on number of line boxes + in each inner column box. + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (5em - ((3 - 1) * 1em)) / 3); + W == max(0, (5em - (2 * 1em)) / 3); + W == max(0, (5em - 2em) / 3); + W == max(0, 3em / 3); + W == max(0, 1em); + W == 1em; + + */ + + div + { + color: red; /* both div#parent and div.child have and use 'color: red' */ + orphans: 1; + widows: 1; + + column-count: 3; + column-gap: 1em; + column-rule-width: 1em; + } + + div.child + { + column-rule-color: inherit; + column-rule-style: solid; + font-size: 1em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div id="parent"> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-002.xht new file mode 100644 index 0000000000..988bbbc8ca --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-color-inherit-002.xht @@ -0,0 +1,122 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule-color: inherit (complex)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 and 2016-10-02 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'" /> + <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color" title="5.2. The 'currentcolor' keyword" /> + <link rel="match" href="multicol-rule-color-inherit-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="In this test, div#parent's computed 'column-rule-color' is given by div#parent's 'currentcolor' (a reserved keyword) and not 'red'. Then div.child's 'column-rule-color' take such specified value ('currentcolor') from its parent (due to 'inherit' keyword) and not 'red'. And then, it is applied to div.child's 'column-rule-color'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#parent + { + color: red; + font: 20px/1 Ahem; + } + + div.child + { + color: green; + display: inline-block; + font-size: 1em; + width: 5em; + + column-count: 3; + column-gap: 1em; + column-rule-color: inherit; + column-rule-style: solid; + column-rule-width: 1em; + } + + /* + + N == 3; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (5em - ((3 - 1) * 1em)) / 3); + W == max(0, (5em - (2 * 1em)) / 3); + W == max(0, (5em - 2em) / 3); + W == max(0, 3em / 3); + W == max(0, 1em); + W == 1em; + + */ + + ]]></style> + </head> + + <body> + + <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p> + + <div id="parent"> + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + <div class="child"> + + + + + + + + + + + + + + + + + + + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-dashed-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-dashed-000-ref.xht new file mode 100644 index 0000000000..6a4d01266c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-dashed-000-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime dashed 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-dashed-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-dashed-000.xht new file mode 100644 index 0000000000..8564aea1fc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-dashed-000.xht @@ -0,0 +1,53 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'dashed' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-dashed-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Tests that the dashed value of column-rule-style is correctly rendered when used in the shorthand column-rule property." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <meta name="fuzzy" content="maxDifference=0-85; totalPixels=0-20" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: lime dashed 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime dashed 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-dotted-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-dotted-000-ref.xht new file mode 100644 index 0000000000..c393a02d61 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-dotted-000-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime dotted 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with green dots in their center are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-dotted-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-dotted-000.xht new file mode 100644 index 0000000000..a669b60b6e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-dotted-000.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'dotted' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-dotted-000-ref.xht" /> + <meta name="assert" content="Tests that the dotted value of column-rule-style is correctly rendered when used in the shorthand column-rule property." /> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: lime dotted 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime dotted 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with green dots in their center are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-double-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-double-000-ref.xht new file mode 100644 index 0000000000..23ecc6dec3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-double-000-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime double 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-double-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-double-000.xht new file mode 100644 index 0000000000..ef97ce12d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-double-000.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'double' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-double-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Tests that the double value of column-rule-style is correctly rendered when used in the shorthand column-rule property." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: lime double 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime double 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-001-ref.xht new file mode 100644 index 0000000000..29ab6de4af --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-001-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: gray solid 1em; + font: 1.25em/1 serif; + width: 14em; + } + + img {vertical-align: top;} + + img.yellow {padding-left: 2em;} + ]]></style> + </head> + <body> + + <div><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" +width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="15" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-001.xht new file mode 100644 index 0000000000..fbbc9fc00e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-001.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" /> + <link rel="match" href="multicol-rule-fraction-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Basic test for the column-rule-width property, checking that values above 0 but below 1 are allowed." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 14em; + + column-count: 4; + column-gap: 1em; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 0.9em; + } + + /* + + N == 4; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (14em - ((4 - 1) * 1em)) / 4); + W == max(0, (14em - (3 * 1em)) / 4); + W == max(0, (14em - (3em)) / 4); + W == max(0, (11em) / 4); + W == max(0, 2.75em); + W == 2.75em; + + */ + ]]></style> + </head> + + <body> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-002-ref.xht new file mode 100644 index 0000000000..ca395f2a37 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-002-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 serif; + width: 14em; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="15" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-002.xht new file mode 100644 index 0000000000..8645f0e32b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-002.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: wide column-rule-width painted above background-color</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" /> + <link rel="match" href="multicol-rule-fraction-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes above the background of the multi-column element but below the inline content inside the multicol element. In this test, the blue column-rule is painted above the yellow background-color but below (under) the black Ahem glyphs." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 14em; + + column-count: 4; + column-gap: 1em; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 1.9em; + } + + /* + + N == 4; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (14em - ((4 - 1) * 1em)) / 4); + W == max(0, (14em - (3 * 1em)) / 4); + W == max(0, (14em - (3em)) / 4); + W == max(0, (11em) / 4); + W == max(0, 2.75em); + W == 2.75em; + + */ + ]]></style> + </head> + + <body> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-003.xht new file mode 100644 index 0000000000..2d2ad7b744 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-003.xht @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-rule-fraction-3-ref.xht"/> +<meta name="flags" content="ahem"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 14em; + position: relative; + orphans: 1; + widows: 1; + + column-count: 4; + column-gap: 1em; +} +span { + background: blue; + position: absolute; + top: 0; + left: 2.4em; + height: 2em; + width: 1em; +} +span+span { + left: 6.15em; +} +span+span+span { + left: 9.9em; +} +]]></style> +</head> + +<body> + +<div> + xx xx +<span> +</span> + xx xx +<span> +</span> + xx xx +<span> +</span> + xx xx +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-3-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-3-ref.xht new file mode 100644 index 0000000000..94f2b7c5c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-fraction-3-ref.xht @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 14em; + height: 2em; + position: relative; +} +div div { + width: 2em; + height: 2em; + background: black; + position: absolute; + left: 0; + top: 0; +} +.a { + background: blue; + width: 1em; +} +#a1 {left: 2.4em;} +#a2 {left: 3.75em;} +#a3 {left: 6.15em;} +#a4 {left: 7.5em;} +#a5 {left: 9.9em;} +#a6 {left: 11.25em;} +]]></style> +</head> + +<body> + +<div> + <div></div> + <div id="a1" class="a"></div> + <div id="a2"></div> + <div id="a3" class="a"></div> + <div id="a4"></div> + <div id="a5" class="a"></div> + <div id="a6"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-groove-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-groove-000-ref.xht new file mode 100644 index 0000000000..8bdfe0a31d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-groove-000-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime groove 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-groove-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-groove-000.xht new file mode 100644 index 0000000000..5f985f90dc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-groove-000.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'groove' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-groove-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test checks that the value of 'groove' for 'column-rule-style' is drawn correctly." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: lime groove 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime groove 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-hidden-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-hidden-000-ref.xht new file mode 100644 index 0000000000..ae97353882 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-hidden-000-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + font: 3.125em/1 serif; + height: 1em; + margin-bottom: 0.2em; + width: 8.2em; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p> + + <div></div> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-hidden-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-hidden-000.xht new file mode 100644 index 0000000000..e0a4e6ee97 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-hidden-000.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'hidden' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-hidden-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test checks that a column-rule-width value of hidden results in no rule being drawn." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: red hidden 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">A</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-inset-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-inset-000.xht new file mode 100644 index 0000000000..474ad1986f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-inset-000.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'inset' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-ridge-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="'border-style' values of column-rule are interpreted as in the collapsing border model in which case 'inset' value is drawn the same as 'ridge'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: lime inset 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime ridge 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-large-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-large-001-ref.xht new file mode 100644 index 0000000000..d478fe264f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-large-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 serif; + margin-left: 0em; + } + + div:first-child, div + div + div {margin-left: 1em;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="120" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-large-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-large-001.xht new file mode 100644 index 0000000000..eb74b4e1ab --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-large-001.xht @@ -0,0 +1,68 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: excessively wide column-rule-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Sep/0006.html" title="[css3-multicol] z-order of column-rule: below or above border?" /> + <link rel="match" href="multicol-rule-large-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes; its painting will be above background of multi-column element but below the inline content inside the multicol element." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body + { + font: 1.25em/1 Ahem; + margin-left: 1em; + } + + div + { + background-color: red; + border: gray solid 1em; + color: lime; + font-size: 1em; + orphans: 1; + widows: 1; + width: 15em; + + column-count: 4; + column-gap: 1em; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 17em; + } + + /* + + N == 4; + + W == max(0, (available-width - ((N - 1) * column-gap)) / N); + W == max(0, (15em - ((4 - 1) * 1em)) / 4); + W == max(0, (15em - (3 * 1em)) / 4); + W == max(0, (15em - (3em)) / 4); + W == max(0, (12em) / 4); + W == max(0, 3em); + W == 3em; + + */ + + /* + Since column rules do not take up space, then the test + should not generate an horizontal scrollbar. + */ + ]]></style> + </head> + + <body> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-large-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-large-002.xht new file mode 100644 index 0000000000..055a015d77 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-large-002.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: over-excessively wide column-rule-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Sep/0006.html" title="[css3-multicol] z-order of column-rule: below or above border?" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that if a column rule is over-excessively wide, even wider than window viewport, then the column rule will exceed the window viewport width but will not generate an horizontal scrollbar since column rules do not take up space." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + border: gray solid 1em; + color: lime; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 15em; + + column-count: 4; + column-gap: 1em; + column-rule-color: blue; + column-rule-style: solid; + column-rule-width: 4000px; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is no horizontal scrollbar.</p> + + <div> + 1s cl + 2n cl + 3r cl + 4t cl + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-001-ref.html new file mode 100644 index 0000000000..aa00e51415 --- /dev/null +++ b/testing/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="mailto: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/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-001.html b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-001.html new file mode 100644 index 0000000000..53a783ef5b --- /dev/null +++ b/testing/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="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"> + <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/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-002-ref.html new file mode 100644 index 0000000000..a176989f6b --- /dev/null +++ b/testing/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="mailto: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/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-002.html b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-002.html new file mode 100644 index 0000000000..7829301c53 --- /dev/null +++ b/testing/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="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"> + <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/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-003-ref.html new file mode 100644 index 0000000000..5fe1df5b35 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-003-ref.html @@ -0,0 +1,41 @@ +<!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="mailto: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; + } + .inner-block { + background-color: lightblue; + height: 400px; + } + .space { + height: 50px; + } + </style> + + <article class="outer"> + <article class="inner"> + <div class="inner-block"></div> + </article> + <div class="space"></div> + <article class="inner"> + <div class="inner-block"></div> + </article> + <div class="space"></div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-003.html b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-003.html new file mode 100644 index 0000000000..6809c3c598 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-003.html @@ -0,0 +1,36 @@ +<!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="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"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> + <link rel="match" href="multicol-rule-nested-balancing-003-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: 400px; + } + .inner-block { + background-color: lightblue; + height: 800px; + } + </style> + + <article class="outer"> + <article class="inner"> + <div class="inner-block"></div> + </article> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-004-ref.html new file mode 100644 index 0000000000..3bbc65ff64 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-004-ref.html @@ -0,0 +1,41 @@ +<!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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + .outer { + column-count: 1; + column-rule: 6px solid black; + column-fill: auto; + background-color: rgba(0, 0, 255, 0.3); + width: 200px; + height: 300px; + } + .inner { + column-count: 1; + column-rule: 3px solid gray; + column-fill: auto; + background-color: rgba(255, 0, 255, 0.3); + } + .inner-block { + background-color: rgba(0, 255, 0, 0.3); + } + .space { + height: 100px; + } + </style> + + <article class="outer"> + <article class="inner"> + <div class="inner-block" style="height: 300px;"></div> + </article> + <article class="inner" style="height: 200px;"> + <div class="inner-block" style="height: 200px;"></div> + <div class="inner-block" style="height: 100px;"></div> + <div class="space"></div> + </article> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-004.html b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-004.html new file mode 100644 index 0000000000..d6f6c030b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-nested-balancing-004.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="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"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309"> + <link rel="match" href="multicol-rule-nested-balancing-004-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: 1; + column-rule: 6px solid black; + background-color: rgba(0, 0, 255, 0.3); + width: 200px; + height: 300px; + } + .inner { + column-count: 1; + column-rule: 3px solid gray; + background-color: rgba(255, 0, 255, 0.3); + height: 500px; + } + .inner-block { + background-color: rgba(0, 255, 0, 0.3); + height: 600px; + } + </style> + + <!-- It is deliberate that the inner column's block-size is greater than + outer column's, and the inner-block's block-size is also greater than + inner column's. --> + <article class="outer"> + <article class="inner"> + <div class="inner-block"></div> + </article> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-none-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-none-000.xht new file mode 100644 index 0000000000..32ca043957 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-none-000.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'none' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-hidden-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test checks that a column-rule-width value of none results in no rule being drawn." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: red none 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">A</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-outset-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-outset-000.xht new file mode 100644 index 0000000000..5aaafc09f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-outset-000.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'outset' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-groove-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="'border-style' values of column-rule are interpreted as in the collapsing border model in which case 'outset' value is drawn the same as 'groove'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: lime outset 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime groove 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-percent-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-percent-001.xht new file mode 100644 index 0000000000..bd54a9f4ef --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-percent-001.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule-width and percentage unit (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" /> + <link rel="match" href="multicol-containing-002-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that the column-rule-width property does not accept percentage unit in its values." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + color: green; + font: 1.25em/1 Ahem; + width: 19em; + + column-count: 4; + column-gap: 1em; + column-rule-color: red; + column-rule-style: solid; + column-rule-width: 0; + column-rule-width: 200%; + } + ]]></style> + </head> + + <body> + + <div>4444 1 1 1 1 4444 1 1 1 4444 1 1 1 1 4444 1 1 1 1 1 1 4444 1 1 4444 1 1 4444 4444 1 1 4444 1 1 4444</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-px-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-px-001.xht new file mode 100644 index 0000000000..bdca6c7ca4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-px-001.xht @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-rule-ref.xht"/> +<meta name="flags" content="ahem"/> +<meta name="assert" content="Test checks that a column-rule-width value set in pixels is rendered correctly. The width of the rule should be 16px." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 15em; + orphans: 1; + widows: 1; + + column-count: 4; + column-gap: 1em; + column-rule-color: blue; + column-rule-width: 16px; + column-rule-style: solid; +} +span { + background: blue; + position: absolute; + top: 0; + left: 3em; + height: 2em; + width: 16px; +} +span+span { + left: 7em; +} +span+span+span { + left: 11em; +} +]]></style> +</head> + +<body> + +<div id="one"> + xx xx + xx xx + xx xx + xx xx +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-ref.xht new file mode 100644 index 0000000000..beb5f1e747 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-ref.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 15em; + height: 2em; +} +div div { + width: 2em; + height: 2em; + float: left; +} +.a { + color: blue; + width: 1em; + margin-left: 1em; +} +div+div+div { + left: 11em; +} +]]></style> +</head> + +<body> + +<div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-ridge-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-ridge-000-ref.xht new file mode 100644 index 0000000000..db825363ae --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-ridge-000-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime ridge 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-ridge-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-ridge-000.xht new file mode 100644 index 0000000000..805cf9da9a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-ridge-000.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'ridge' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-ridge-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test checks that the value of 'ridge' for 'column-rule-style' is drawn correctly." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: lime ridge 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime ridge 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-samelength-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-samelength-001-ref.xht new file mode 100644 index 0000000000..4955db421f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-samelength-001-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div + { + background-color: green; + height: 100px; + width: 100px; + } + ]]></style> + </head> + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-samelength-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-samelength-001.xht new file mode 100644 index 0000000000..f127a99475 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-samelength-001.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-rule-width' has same length as 'column-gap'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" /> + <link rel="match" href="multicol-rule-samelength-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test that a gap of 5em and a column-rule-width of 5em both take up the same space." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div#red-overlapped-reference + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + bottom: 100px; + color: transparent; + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + position: relative; + right: 40px; + width: 9em; + + column-count: 2; + column-gap: 5em; + column-rule-color: green; + column-rule-style: solid; + column-rule-width: 5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="red-overlapped-reference"></div> + + <div id="test-overlapping-green">Le ft Co lu mn Ri gh Co lu mn</div> + + <!-- + + Expected results + column-gap + column-rule + v=====v + ************* + |Le| |Ri| + |ft| |gh| + |Co| |Co| + |lu| |lu| + |mn| |mn| + ************* + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-001.xht new file mode 100644 index 0000000000..6979cd7472 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-001.xht @@ -0,0 +1,83 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-rule' shorthand</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. 'column-rule-width'" /> + <link rel="match" href="multicol-rule-samelength-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="Tests that column rules are not displayed for invalid properties and values."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25em; + margin: 1em 0em; + } + + strong {line-height: 1;} + + div#red-overlapped-reference + { + background-color: red; + height: 100px; + width: 100px; + } + + div#test-overlapping-green + { + bottom: 100px; + color: transparent; + font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */ + position: relative; + right: 40px; + width: 9em; + + column-count: 2; + column-gap: 5em; + column-rule: green solid 5em; + column-rule: normal red 5em; + column-rule: normal 5em red; + column-rule: red normal 5em; + column-rule: red 5em normal; + column-rule: 5em normal red; + column-rule: 5em red normal; + column-rule: red 5em red solid; + column-rule: red 5em solid red; + column-rule: red solid 5em red; + column-rule: red solid red 5em; + column-rule: 5em red solid red; + column-rule: solid red 5em red; + } + ]]></style> + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="red-overlapped-reference"></div> + + <div id="test-overlapping-green">Le ft Co lu mn Ri gh Co lu mn</div> + + <!-- + + Expected results + column-gap + column-rule + v=====v + ************* + |Le| |Ri| + |ft| |gh| + |Co| |Co| + |lu| |lu| + |mn| |mn| + ************* + + --> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-2-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-2-ref.xht new file mode 100644 index 0000000000..d01b44a1e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-2-ref.xht @@ -0,0 +1,50 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style><![CDATA[ +body { + margin: 1em; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em 0; + border: 1em solid gray; + width: 15em; + height: 2em; +} +div div { + width: 2em; + height: 2em; + float: left; +} +.a { + color: blue; + width: 1em; + margin-left: 1em; +} +div+div+div { + left: 11em; +} +]]></style> +</head> + +<body> +<p>Pass if there is no red visible.</p> +<div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> + <div class="a">x x</div> + <div>xx xx</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-2.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-2.xht new file mode 100644 index 0000000000..848dc60e0f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-shorthand-2.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Multi-column Layout Test: 'column-rule' shorthand</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href=""/> +<link rel="match" href="multicol-rule-shorthand-2-ref.xht"/> +<meta name="assert" content="Tests that column rules are not displayed for invalid properties and values."/> +<meta name="flags" content="ahem invalid"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 1em; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em 0; + border: 1em solid gray; + width: 15em; + + column-count: 4; + column-gap: 1em; + column-rule: solid blue 1em; + column-rule: normal red 1em; /* invalid: 'normal' is not a 'border-style' */ + column: normal red 1em; /* invalid: 'column' is not a valid property name; 'normal' can only apply to 'column-gap' */ +} + +]]></style> +</head> + +<body> +<p>Pass if there is no red visible.</p> + +<div> + xx xx + xx xx + xx xx + xx xx +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-solid-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-solid-000-ref.xht new file mode 100644 index 0000000000..9b8ff2ebca --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-solid-000-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + span {border-left: lime solid 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div>1234<span>5678</span></div> + + <div>1234<span>5678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-solid-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-solid-000.xht new file mode 100644 index 0000000000..77cfa24b70 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-solid-000.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-rule shorthand with 'solid' border style</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-rule-solid-000-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test checks that a column-rule-style value set as 'solid' is rendered correctly." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + color: black; + font: 3.125em/1 Ahem; + margin-bottom: 0.2em; + width: 8.2em; + } + + div#test + { + columns: 2; + column-gap: 0.2em; + column-rule: lime solid 0.2em; + + /* + + N == 2; + + W == 200px; + + */ + + orphans: 1; + widows: 1; + } + + span {border-left: lime solid 0.2em;} + ]]></style> + </head> + <body> + + <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p> + + <div id="test">1 <br />2 </div> + + <div id="reference">1234<span>5678</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-stacking-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-stacking-001.xht new file mode 100644 index 0000000000..8a9cca8735 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-stacking-001.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-count, stacking</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/> +<link rel="match" href="multicol-rule-stacking-ref.xht"/> +<meta name="flags" content="ahem"/> +<meta name="assert" content="The test checks that the span element, which has a higher 'z-index' stacks on top of the other elements in the multicol container." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: blue; + background: red; + margin: 1em; + border: 1em solid gray; + width: 14em; + + column-count: 4; + column-gap: 1em; + column-rule: 28em solid blue; +} +span { + color: black; + position: relative; + z-index: 1; +} +]]></style> +</head> + +<body> + +<div> + xx xx + xx xx + <span>xx xx</span> + xx xx +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-rule-stacking-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-rule-stacking-ref.xht new file mode 100644 index 0000000000..b1ad88eb3b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-rule-stacking-ref.xht @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-rule</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: blue; + margin: 1em; + border: 1em solid gray; + width: 14em; + height: 2em; + position: relative; +} +span { + margin-left: 7.5em; + width: 2em; + height: 2em; + display: inline-block; +} +div div { + background: blue; + position: absolute; + height: 2em; + width: 2em; + top: 0; + left: -2em; +} +div div+div { + left: 13em; + width: 11.75em; +} +]]></style> +</head> + +<body> + +<div> + <span>xx xx</span> + <div></div> + <div></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-scroll-content-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-scroll-content-ref.html new file mode 100644 index 0000000000..320e425dbd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-scroll-content-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-scroll-content.html b/testing/web-platform/tests/css/css-multicol/multicol-scroll-content.html new file mode 100644 index 0000000000..9fdaf1a880 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-scroll-content.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-shorthand-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-shorthand-001.xht new file mode 100644 index 0000000000..650a324a80 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-shorthand-001.xht @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | invalid</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/> +<link rel="match" href="multicol-rule-ref.xht"/> +<meta name="flags" content="ahem invalid"/> +<meta name="assert" content="Testing that invalid property names used as a shorthand do not result in column-rules being displayed." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: black; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 15em; + orphans: 1; + widows: 1; + + column-count: 4; + column-gap: 1em; + column-rule: solid blue 1em; + column: normal red 1em; /* column is not a valid property */ + columns: normal red 1em; /* columns is a shorthand for colun-width and column-count */ +} +span { + background: blue; + position: absolute; + top: 0; + left: 3em; + height: 2em; + width: 1em; +} +span+span { + left: 7em; +} +span+span+span { + left: 11em; +} +]]></style> +</head> + +<body> + +<div> + xx xx + xx xx + xx xx + xx xx +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-000-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-000-ref.xht new file mode 100644 index 0000000000..7c076f4e30 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-000-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + font-size: 1.25em; + line-height: 1; + margin-bottom: 0.5em; + width: 10em; + } + + img + { + padding-right: 4em; + vertical-align: top; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 3 rectangles are <strong>identical</strong>.</p> + + <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-000.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-000.xht new file mode 100644 index 0000000000..d9870714c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-000.xht @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-span (basic)</title> + <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'" /> + <link rel="match" href="multicol-span-000-ref.xht" /> + <meta name="flags" content="ahem image" /> + <meta name="assert" content="Tests that the element with an id of 'column-span' spans across all columns." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: lime; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 10em; + } + + div#test, div.test2 + { + columns: 2; + column-fill: balance; + column-gap: 0em; + + /* + + N == 2; + + W == 5em; + + */ + } + + div#test, div#reference {margin-bottom: 0.5em;} + + div#column-span + { + column-span: all; + font: inherit; + } + + img + { + padding-right: 4em; + vertical-align: top; + } + ]]></style> + </head> + <body> + + <p>Test passes if the 3 rectangles are <strong>identical</strong>.</p> + + <div id="test">A<br />B<div id="column-span">123456</div>C<br />D</div> + + <div id="reference"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div class="test2">A<br />B</div> + <div>123456</div> + <div class="test2">C<br />D</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-001-ref.xht new file mode 100644 index 0000000000..f00eb944e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-001-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div#inline-block + { + background-color: yellow; + border: gray solid 1em; + display: inline-block; + font-size: 1.25em; + } + + div + div {line-height: 1;} + + img {vertical-align: top;} + + img.padding-left {padding-left: 1em;} + + img.padding-left-right {padding: 0em 1em;} + ]]></style> + </head> + <body> + + <div id="inline-block"> + + <div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left-right" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/black20x20.png" width="220" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left" src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left-right" src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-001.xht new file mode 100644 index 0000000000..5525e7b786 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-001.xht @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-span' element (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-all-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Tests that the h4 set to 'column-span: all' spans across all columns resulting in a black bar across the multicol container." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 4; + column-gap: 1em; + + /* + + N == 4; + + W == 2em; + + */ + + } + + span {color: blue;} + + span + span {color: pink;} + + h4 + { + background-color: black; + color: black; + font: inherit; + margin: 0; + + column-span: all; + } + ]]></style> + </head> + + <body> + + <div> + <span id="top-first-and-second-columns"> bl ue bl ue </span> + <span id="top-third-and-fourth-columns"> Pi nk Pi nk </span> + <h4> sPana </h4> + ab cd ef gh + ij kl mn oq + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-002-ref.xht new file mode 100644 index 0000000000..b046cfaf49 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-002-ref.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div#inline-block + { + background-color: yellow; + border: gray solid 1em; + display: inline-block; + font-size: 1.25em; + } + + div + div {line-height: 1;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div id="inline-block"> + + <div><img src="support/swatch-blue.png" width="80" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-yellow.png" width="160" height="60" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /></div> + + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-002.xht new file mode 100644 index 0000000000..ad3dc5ccd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-002.xht @@ -0,0 +1,71 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-span' element - large margin-left and 'overflow: hidden'</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-all-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test of the situation where there is not sufficient space for the spanning element, UA may treat the element as 'column-span: none'; in which case, 'overflow: hidden' will take care of overflowed content out of multi-column box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 8em; + + column-count: 4; + column-gap: 0em; + + /* + + N == 4; + + W == 2em; + + */ + + } + + span {color: blue;} + + span + span {color: pink;} + + h4 + { + background-color: black; + color: black; + font: inherit; + margin: 1em 0 1em 8em; + + column-span: all; + /* + Since there is not sufficient space for the + spanning element, UA may treat the element as + 'column-span: none'; in which case, + 'overflow: hidden' will take care of + overflowed content out of multi-column box. + */ + } + ]]></style> + </head> + + <body> + + <div> + <span id="top-first-and-second-columns"> bl ue bl ue </span> + <span id="top-third-and-fourth-columns"> Pi nk Pi nk </span> + <h4> sPana </h4> + ab cd ef gh + ij kl mn oq + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-003.xht new file mode 100644 index 0000000000..6facec9df1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-003.xht @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-span: all' (basic)</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-03 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-count-002-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-span: all' spans across all column boxes and that content in the normal flow (in this test, the '55555 55555 55555 55555') that appears before the element is automatically balanced across all columns before the element appears." /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: black; + font: 1.25em/1 Ahem; + padding-right: 1em; + width: 20em; + } + + div + { + background-color: yellow; + color: black; + + column-count: 4; + column-gap: 0; + orphans: 1; + widows: 1; + } + + h4 + { + background-color: black; + column-span: all; + color: yellow; + font: 1em/1 Ahem; + margin: 0em; + } + ]]></style> + </head> + <body> + <div> + 55555 55555 55555 55555 + <h4> 4444 4444 4444 4444</h4> + 1 22 1 22 1 1 333 1 333 1 333 55555 1 22 1 22 1 1 22 1 22 1 22 55555 1 333 1 333 1 4444 4444 1 55555 1 333 1 333 1 4444 4444 1 55555 + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-004-ref.html new file mode 100644 index 0000000000..0d936efb5d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-004-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 500px; + outline: 1px solid black; + } + h3 { + column-span: none; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1</div> + <div style="display: inline-block;"> + <h3>non-spanner</h3> + </div> + <div style="overflow: hidden;"> + <h3>non-spanner</h3> + </div> + <table> + <caption> + <h3>non-spanner in caption</h3> + </caption> + </table> + <div style="display: grid;"> + <div> + <h3>non-spanner in grid</h3> + </div> + </div> + <div style="display: flex;"> + <div> + <h3>non-spanner in flex</h3> + </div> + </div> + <div style="column-span: all; outline: 1px solid green;"> + Spanner + <h3>non-spanner in a spanner</h3> + </div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-004.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-004.html new file mode 100644 index 0000000000..987f07fd0a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-004.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<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="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"> + <meta name="assert" content="This test checks a column-span:all element should act like column-span: none if it's under different block formatting context."> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 500px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1</div> + <div style="display: inline-block;"> + <h3>non-spanner</h3> + </div> + <div style="overflow: hidden;"> + <h3>non-spanner</h3> + </div> + <table> + <caption> + <h3>non-spanner in caption</h3> + </caption> + </table> + <div style="display: grid;"> + <div> + <h3>non-spanner in grid</h3> + </div> + </div> + <div style="display: flex;"> + <div> + <h3>non-spanner in flex</h3> + </div> + </div> + <div style="column-span: all; outline: 1px solid green;"> + Spanner + <h3>non-spanner in a spanner</h3> + </div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-005-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-005-ref.html new file mode 100644 index 0000000000..d2507b943f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-005-ref.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + .column { + column-count: 1; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + .spanner { + /* column-count: 1 makes this behave like a real spanner. */ + outline: 1px solid blue; + } + fieldset { + margin: 0; + padding: 0; + border: 0; + } + </style> + + <body> + <article class="column"> + <div>block1</div> + <table class="spanner"> + <tr> + <td>table as a spanner</td> + </tr> + </table> + <div>block2</div> + </article> + <br> + + <article class="column"> + <div>block1</div> + <div class="spanner" style="display: grid;">grid as a spanner</div> + <div>block2</div> + </article> + <br> + + <article class="column"> + <div>block1</div> + <div class="spanner" style="display: flex;">flex as a spanner</div> + <div>block2</div> + </article> + <br> + + <article class="column"> + <div>block1</div> + <fieldset class="spanner">fieldset as a spanner</fieldset> + <div>block2</div> + </article> + <br> + + <article class="column"> + <div>block1</div> + <details open class="spanner">details as a spanner</details> + <div>block2</div> + </article> + <br> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-005.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-005.html new file mode 100644 index 0000000000..226ed17f08 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-005.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<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="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"> + <meta name="assert" content="This test checks a column-span:all element should act like column-span: none if it's under different block formatting context."> + + <style> + .column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + .spanner { + column-span: all; + outline: 1px solid blue; + } + fieldset { + margin: 0; + padding: 0; + border: 0; + } + </style> + + <body> + <article class="column"> + <div>block1</div> + <table class="spanner"> + <tr> + <td>table as a spanner</td> + </tr> + </table> + <div>block2</div> + </article> + <br> + + <article class="column"> + <div>block1</div> + <div class="spanner" style="display: grid;">grid as a spanner</div> + <div>block2</div> + </article> + <br> + + <article class="column"> + <div>block1</div> + <div class="spanner" style="display: flex;">flex as a spanner</div> + <div>block2</div> + </article> + <br> + + <article class="column"> + <div>block1</div> + <fieldset class="spanner">fieldset as a spanner</fieldset> + <div>block2</div> + </article> + <br> + + <article class="column"> + <div>block1</div> + <details open class="spanner">details as a spanner</details> + <div>block2</div> + </article> + <br> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-006-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-006-ref.html new file mode 100644 index 0000000000..bf077d4f1c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-006-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + details { + 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> + + <body> + <details open> + <summary>Columns</summary> + <h3>spanner</h3> + <div>block</div> + </details> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-006.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-006.html new file mode 100644 index 0000000000..422e4cde70 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-006.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<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="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"> + <meta name="assert" content="This test checks a column-span:all element is working under HTML details tag."> + + <style> + details { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <details open> + <summary>Columns</summary> + <h3>spanner</h3> + <div>block</div> + </details> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-007-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-007-ref.html new file mode 100644 index 0000000000..f74a3be0e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-007-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + body { + 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> + + <body> + <div>block1</div> + <div> + <h3>spanner</h3> + </div> + <div>block2</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-007.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-007.html new file mode 100644 index 0000000000..a931777d17 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-007.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<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="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"> + <meta name="assert" content="This test checks a column-span:all element is working if the body tag is the multi-column container."> + + <style> + body { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <div>block1</div> + <div> + <h3>spanner</h3> <!-- Put spanner in a subtree deliberately --> + </div> + <div>block2</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-008-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-008-ref.html new file mode 100644 index 0000000000..efd26b73e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-008-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + body { + 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> + + <body> + <div>block1</div> + <h3 dir="rtl">spanner</h3> + <div>block2</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-008.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-008.html new file mode 100644 index 0000000000..972132c14b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-008.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<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="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"> + <meta name="assert" content="This test checks the page is rendered correctly for a bidi-override multi-column container with a dir=rtl column-span:all child."> + + <style> + article { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + unicode-bidi: bidi-override; /* Needed to trigger bidi resolution. */ + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <article> + <div>block1</div> + <h3 dir="rtl">spanner</h3> + <div>block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-009-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-009-ref.html new file mode 100644 index 0000000000..d58ed3bd5b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-009-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + body { + column-count: 1; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + transform: scale(1); + } + h3 { + /* "column-count: 1" makes this behave like a real spanner. */ + outline: 1px solid blue; + } + .out-of-flow { + position: absolute; + top: 0; + right: 0; + } + </style> + + <body> + <article id="column"> + <h3>spanner</h3> + <div class="out-of-flow">out-of-flow</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-009.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-009.html new file mode 100644 index 0000000000..698771b0f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-009.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<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="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"> + <link rel="match" href="multicol-span-all-009-ref.html"> + <meta name="assert" content="This test checks the multicol element, not the column boxes divided by column-span, is the containing block of absolute elements."> + + <style> + article { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + transform: scale(1); + } + h3 { + column-span: all; + outline: 1px solid blue; + } + .out-of-flow { + position: absolute; + top: 0; + right: 0; + } + </style> + + <body> + <article id="column"> + <h3>spanner</h3> + <div class="out-of-flow">out-of-flow</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-010-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-010-ref.html new file mode 100644 index 0000000000..5a1f1d5653 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-010-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: column-span:all does not create a spanner, inside an element establishing a containing block for fixed-position descendants</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + article { + column-count: 3; + column-rule: 6px solid; + width: 500px; + border: 1px solid black; + margin-bottom: 3px; + } + h3 { + outline: 1px solid blue; + } + </style> + + <body> + <article> + <div style="transform: scale(1)"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="filter: contrast(100%)"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="contain: paint"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="contain: layout"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="contain: content"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="contain: strict; width: 50px; height: 50px;"> + <h3>n</h3> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-010.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-010.html new file mode 100644 index 0000000000..6bab00467a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-010.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: column-span:all does not create a spanner, inside an element establishing a containing block for fixed-position descendants</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="David Shin" href="mailto:dshin@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"> + <link rel="match" href="multicol-span-all-010-ref.html"> + <meta name="assert" content="This test checks that column-span:all does not create a spanner, inside an element establishing a containing block for fixed-position descendants."> + + <style> + article { + column-count: 3; + column-rule: 6px solid; + width: 500px; + border: 1px solid black; + margin-bottom: 3px; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article> + <div style="transform: scale(1)"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="filter: contrast(100%)"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="contain: paint"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="contain: layout"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="contain: content"> + <h3>non-spanner</h3> + </div> + </article> + <article> + <div style="contain: strict; width: 50px; height: 50px;"> + <h3>n</h3> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-011-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-011-ref.html new file mode 100644 index 0000000000..1ada13bfa1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-011-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <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> + <div>before</div><h3 dir="rtl">spanner</h3><div>after</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-011.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-011.html new file mode 100644 index 0000000000..57647d7483 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<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="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"> + <meta name="assert" content="This test checks that the text is correctly split by 'dir=rtl' column-span:all child in a bidi-override multi-column container."> + + <style> + article { + column-count: 2; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + unicode-bidi: bidi-override; /* Needed to trigger bidi resolution. */ + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <article> + <div>before<h3 dir="rtl">spanner</h3>after</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-012.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-012.html new file mode 100644 index 0000000000..7f1f9ae1ac --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-012.html @@ -0,0 +1,11 @@ +<!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/#filling-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="columns:3; width:75px; height:100px; column-gap:0;"> + <div style="column-span:all; width:100px; height:70px; background:green;"></div> + <div style="height:120px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-013.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-013.html new file mode 100644 index 0000000000..38bd05f0b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-013.html @@ -0,0 +1,11 @@ +<!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="columns:2; column-gap:0; width:100px; background:red;"> + <div style="height:40px; background:green;"></div> + <div style="padding-top:20px; background:green;"> + <div style="column-span:all; height:70px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-014.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-014.html new file mode 100644 index 0000000000..ec835686cf --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-014.html @@ -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/#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="columns:2; column-gap:0; width:100px; background:red;"> + <div style="height:100px;"></div> + <div> + <div style="column-span:all; height:50px;"></div> + </div> + <div style="display:flow-root; height:0;"> + <div style="width:100px; height:100px; margin-top:-100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-015.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-015.html new file mode 100644 index 0000000000..041c211b85 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-015.html @@ -0,0 +1,16 @@ +<!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="help" href="https://www.w3.org/TR/css-break-3/#break-margins"> +<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; width:100px; background:red;"> + <div style="height:30px;"></div> + <div style="height:30px; background:green;"></div> + <div> + <div style="column-span:all; height:40px; background:green;"> + <div style="width:50px; height:40px; background:red;"></div> + </div> + </div> + <div style="margin-top:-70px; height:130px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-016.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-016.html new file mode 100644 index 0000000000..87c4b5812e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-016.html @@ -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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-017.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-017.html new file mode 100644 index 0000000000..00764ccdb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-017.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6805"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test that column-span all inside a transform doesn't create a spanner"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="transform:scale(1);"> + <div style="column-span:all; width:50px; height:200px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-block-sibling-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-block-sibling-003.xht new file mode 100644 index 0000000000..abaa45f0a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-block-sibling-003.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicol | column-span: all | block-level child</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns"/> +<link rel="match" href="multicol-span-all-block-sibling-3-ref.xht"/> +<meta name="flags" content="ahem"/> +<meta name="assert" content="Test that a block element which is a sibling of content in the multicol element acts correctly as a spanner." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1; + color: black; + background: black; + + column-count: 2; +} +h1 { + column-span: all; +} +]]></style> +</head> + +<body> + +<div> + <div> + <h1>foo</h1> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-block-sibling-3-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-block-sibling-3-ref.xht new file mode 100644 index 0000000000..53b58c6d2b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-block-sibling-3-ref.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicol | column-span: all | block-level child</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1; + color: black; + background: black; +} +h1 { + margin-top: 0; + padding-top: 0.66em; +} +]]></style> +</head> + +<body> + +<div> + <div> + <h1>FAIL</h1> + FAIL<br/> + FAIL<br/> + FAIL<br/> + FAIL<br/> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-001-ref.html new file mode 100644 index 0000000000..bfa26a818e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + button { + width: 400px; + } + .inner { + column-count: 3; + column-rule: 6px solid; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <button> + <div class="inner"> + <div>block1</div><div>block2</div> + <h3>spanner</h3> + <div>block3</div><div>block4</div> + </div> + </button> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-001.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-001.html new file mode 100644 index 0000000000..4319b166b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<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="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"> + <meta name="assert" content="This test checks the page is rendered correctly for a multi-column container on button with a column-span:all child."> + + <style> + button { + column-count: 3; + column-rule: 6px solid; + width: 400px; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <button> + <div>block1</div><div>block2</div> + <h3>spanner</h3> + <div>block3</div><div>block4</div> + </button> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-002-ref.html new file mode 100644 index 0000000000..a231ad5413 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-002-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on button works with a column-span:all child and position:absolute boxes</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + button { + width: 400px; + padding: 1em; + overflow: hidden; + position: absolute; + } + .inner { + column-count: 3; + column-rule: 6px solid; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + a { + position: absolute; + width: 1em; + height: 1em; + background-color: blue; + } + </style> + + <button> + <div class="inner"> + <div>block1</div><div>block2</div><a></a> + <h3>spanner<a></a></h3> + <div>block3</div><div>block4</div><a></a> + </div> + </button> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-002.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-002.html new file mode 100644 index 0000000000..419e9a2e66 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on button works with a column-span:all child and position:absolute boxes</title> + <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-002-ref.html"> + <meta name="assert" content="This test checks the page is rendered correctly for a overflow:hidden and position:absolute button multi-column container with a column-span:all child and position:absolute boxes."> + + <style> + button { + column-count: 3; + column-rule: 6px solid; + width: 400px; + padding: 1em; + overflow: hidden; + position: absolute; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + a { + position: absolute; + width: 1em; + height: 1em; + background-color: blue; + } + </style> + + <button> + <div>block1</div><div>block2</div><a></a> + <h3>spanner<a></a></h3> + <div>block3</div><div>block4</div><a></a> + </button> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-003-ref.html new file mode 100644 index 0000000000..7020b6b85b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-003-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on button works with a column-span:all child and position:fixed boxes</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + button { + width: 400px; + padding: 1em; + overflow: hidden; + position: absolute; + } + .inner { + column-count: 3; + column-rule: 6px solid; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + a { + position: fixed; + width: 1em; + height: 1em; + background-color: blue; + } + </style> + + <button> + <div class="inner"> + <div>block1</div><div>block2</div><a></a> + <h3>spanner<a></a></h3> + <div>block3</div><div>block4</div><a></a> + </div> + </button> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-003.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-003.html new file mode 100644 index 0000000000..8c98ca3fa3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-button-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on button works with a column-span:all child and position:fixed boxes</title> + <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-003-ref.html"> + <meta name="assert" content="This test checks the page is rendered correctly for a overflow:hidden and position:absolute button multi-column container with a column-span:all child and position:absolute boxes."> + + <style> + button { + column-count: 3; + column-rule: 6px solid; + width: 400px; + padding: 1em; + overflow: hidden; + position: absolute; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + a { + position: fixed; + width: 1em; + height: 1em; + background-color: blue; + } + </style> + + <button> + <div>block1</div><div>block2</div><a></a> + <h3>spanner<a></a></h3> + <div>block3</div><div>block4</div><a></a> + </button> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-001-ref.html new file mode 100644 index 0000000000..4d20361efa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Test a multi-column container with percentage height children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + article { + width: 400px; + height: 200px; + outline: 1px solid black; + } + div { + height: 25%; + } + div.spanner { + outline: 1px solid blue; + height: 50%; + } + </style> + + <article> + <div>block1</div> + <div class="spanner">spanner</div> + <div>block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-001.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-001.html new file mode 100644 index 0000000000..3226e81c32 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a multi-column container with percentage height children</title> + <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-children-height-001-ref.html"> + <meta name="assert" content="This test checks the the percentage height children under multicol container is rendered correctly."> + + <style> + article { + column-count: 2; + width: 400px; + height: 200px; + outline: 1px solid black; + } + div { + height: 50%; /* Spread evenly into two colums, each 25%. */ + } + div.spanner { + column-span: all; + outline: 1px solid blue; + height: 50%; + } + </style> + + <article> + <div>block1</div> + <div class="spanner">spanner</div> + <div>block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-002-ref.html new file mode 100644 index 0000000000..3785f947d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-002-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Test a multi-column container with percentage height children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + article { + width: 400px; + height: 200px; + background-color: lightgreen; + border: 5px solid purple; + } + div.columns { + column-count: 2; + } + div.block1 { + background-color: yellow; + height: 200px; + } + div.spanner { + height: 50px; + background-color: lightblue; + } + div.block2 { + background-color: yellow; + height: 200px; + } + </style> + + <article> + <div class="columns" style="height: 100px;"> + <div class="block1">block1</div> + </div> + <div class="spanner">spanner</div> + <div class="columns" style="height: 50px;"> + <div class="block2">block2</div> + </div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-002.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-002.html new file mode 100644 index 0000000000..91f4112c2f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a multi-column container with percentage height children</title> + <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-children-height-002-ref.html"> + <meta name="assert" content="This test checks the percentage height children under multicol container compute the percentage relative to the entire multicol, not just the part after the column-span."> + + <style> + article { + column-count: 2; + width: 400px; + height: 200px; + background-color: lightgreen; + border: 5px solid purple; + } + div.block1 { + background-color: yellow; + height: 100%; /* Spread evenly into two columns, each 100px. */ + } + div.spanner { + column-span: all; + height: 25%; + background-color: lightblue; + } + div.block2 { + background-color: yellow; + /* Column container has only 25% height left, so two extra overflow columns + are created. Total 4 columns, each 50px. */ + height: 100%; + } + </style> + + <article> + <div class="block1">block1</div> + <div class="spanner">spanner</div> + <div class="block2">block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-003-ref.html new file mode 100644 index 0000000000..407ded1a74 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-003-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Test a multi-column container with percentage height children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + article { + width: 400px; + height: 200px; + background-color: lightgreen; + border: 5px solid purple; + } + div.columns { + column-count: 2; + } + div.block1 { + background-color: yellow; + height: 600px; + } + div.spanner { + height: 50px; + background-color: lightblue; + } + div.block2 { + background-color: yellow; + height: 200px; + } + </style> + + <article> + <div class="columns" style="height: 200px;"> + <div class="block1">block1</div> + </div> + <div class="spanner">spanner</div> + <div class="columns" style="height: 1px;"> + <div class="block2">block2</div> + </div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-003.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-003.html new file mode 100644 index 0000000000..296bf7568f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a multi-column container with percentage height children</title> + <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"> + <link rel="match" href="multicol-span-all-children-height-003-ref.html"> + <meta name="assert" content="This test checks the percentage height children under multicol container compute the percentage relative to the entire multicol, not just the part after the column-span."> + + <style> + article { + column-count: 2; + width: 400px; + height: 200px; + background-color: lightgreen; + border: 5px solid purple; + } + div.block1 { + background-color: yellow; + /* This overflows the column container, so one extra column is created. */ + height: 300%; + } + div.spanner { + column-span: all; + height: 25%; + background-color: lightblue; + } + div.block2 { + background-color: yellow; + /* No height left for this block. According to the breaking rules, the + column container creates 1px column boxes for it. */ + height: 100%; + } + </style> + + <article> + <div class="block1">block1</div> + <div class="spanner">spanner</div> + <div class="block2">block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-004a-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-004a-ref.html new file mode 100644 index 0000000000..fec41b65aa --- /dev/null +++ b/testing/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="mailto: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/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-004a.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-004a.html new file mode 100644 index 0000000000..1ee8b5e7c4 --- /dev/null +++ b/testing/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="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/#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/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-004b-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-004b-ref.html new file mode 100644 index 0000000000..0d41686cfb --- /dev/null +++ b/testing/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="mailto: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/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-004b.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-004b.html new file mode 100644 index 0000000000..df9b687842 --- /dev/null +++ b/testing/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="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/#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/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-005-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-005-ref.html new file mode 100644 index 0000000000..86f119804d --- /dev/null +++ b/testing/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="mailto: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/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-005.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-005.html new file mode 100644 index 0000000000..6e9a4c299f --- /dev/null +++ b/testing/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="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/#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/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-006-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-006-ref.html new file mode 100644 index 0000000000..4280ccf1c7 --- /dev/null +++ b/testing/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="mailto: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; margin-top: 1em;"> + <div class="block">block1</div> + </div> + </article> + <div class="column-span">column-span1</div> + <article> + <div class="container" style="border-top: none; height: 50px; margin-bottom: 1em;"> + <div class="block">block2</div> + </div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-006.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-006.html new file mode 100644 index 0000000000..4dad04f34a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-006.html @@ -0,0 +1,43 @@ +<!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="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/#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; + margin-top: 1em; + margin-bottom: 1em; + } + 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/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-007-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-007-ref.html new file mode 100644 index 0000000000..058115daed --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-007-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Test fragmentation for a nested multi-column container with column-span</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + .outer { + column-count: 2; + column-fill: auto; + column-rule: 6px solid black; + width: 400px; + height: 110px; + } + .inner { + column-count: 2; + column-rule: 3px solid green; + box-sizing: border-box; + height: 110px; + background-color: lightgreen; + border: solid purple; + } + .block1 { + background-color: yellow; + height: 200px; + } + .spanner { + column-span: all; + height: 50px; + background-color: lightblue; + } + .block2 { + background-color: yellow; + height: 120px; + } + </style> + + <article class="outer"> + <article class="inner" style="border-width: 10px 10px 0;"> + <div class="block1">block1</div> + </article> + <article class="inner" style="border-width: 0 10px;"> + <div class="spanner">spanner</div> + <div class="block2">block2</div> + </article> + <article class="inner" style="border-width: 0 10px 10px; height:auto;"> + <div class="block2"></div> + </article> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-007.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-007.html new file mode 100644 index 0000000000..71aa69a175 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-007.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test fragmentation for a nested multi-column container with column-span</title> + <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"> + <link rel="match" href="multicol-span-all-children-height-007-ref.html"> + <meta name="assert" content="This test verifies a nested multi-column container with non-auto height and column-span child can be fragmented."> + + <style> + .outer { + column-count: 2; + column-rule: 6px solid black; + width: 400px; + height: 110px; + } + .inner { + column-count: 2; + column-rule: 3px solid green; + height: 270px; + background-color: lightgreen; + border: 10px solid purple; + } + .block1 { + background-color: yellow; + height: 200px; + } + .spanner { + column-span: all; + height: 50px; + background-color: lightblue; + } + .block2 { + background-color: yellow; + height: 240px; + } + </style> + + <article class="outer"> + <article class="inner"> + <div class="block1">block1</div> + <div class="spanner">spanner</div> + <div class="block2">block2</div> + </article> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-008-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-008-ref.html new file mode 100644 index 0000000000..7228e620b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-008-ref.html @@ -0,0 +1,49 @@ +<!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="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + + <style> + article { + column-count: 1; + column-fill: auto; + width: 200px; + background-color: lightgreen; + } + div.container { + height: auto; + background-color: pink; + border: 20px solid purple; + } + div.block { + width: 100px; + height: 100px; + background-color: yellow; + } + div.column-span { + width: 200px; + height: 50px; + background-color: lightblue; + } + </style> + + <article> + <div class="container" style="border-bottom: 0;"> + <div class="block">block1</div> + </div> + </article> + <div class="column-span">column-span1</div> + <article> + <div class="container" style="border-top: 0; border-bottom: 0;"> + <div class="block">block2</div> + </div> + </article> + <div class="column-span">column-span2</div> + <article> + <div class="container" style="border-top: 0;"> + <div class="block">block3</div> + </div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-008.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-008.html new file mode 100644 index 0000000000..6b9804898d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-008.html @@ -0,0 +1,46 @@ +<!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="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/#column-span"> + <link rel="match" href="multicol-span-all-children-height-008-ref.html"> + <meta name="assert" content="This test verifies that the borders of block container with an auto block-size, split by column-span, are skipped on the sides adjacent to column-span."> + + <!-- This test is adapted from multicol-span-all-children-height-005. --> + + <style> + article { + column-count: 1; + column-fill: auto; + width: 200px; + background-color: lightgreen; + } + div.container { + height: auto; + border: 20px solid purple; + 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> + <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/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-009.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-009.html new file mode 100644 index 0000000000..49b06b5ed4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-009.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .ib { + display: inline-block; + vertical-align: top; + width: 100%; + height: 50px; + background: green; + } +</style> +<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:10; width:100px; gap:0; orphans:1; widows:1;"> + <div style="height:250px;"> + <div style="height:1000px;"></div> + <div style="column-span:all; margin-top:-100px; height:50px; background:green;"></div> + </div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-010.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-010.html new file mode 100644 index 0000000000..0bcbf4da3c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-010.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> + .ib { + display: inline-block; + vertical-align: top; + width: 100%; + height: 50px; + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:10; width:100px; gap:0; orphans:1; widows:1; background:red;"> + <span> + <div style="height:150px;"> + <div style="height:1000px;"></div> + <div style="column-span:all; margin-top:-100px; height:50px; background:green;"></div> + </div> + </span> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> + <div class="ib"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-011.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-011.html new file mode 100644 index 0000000000..a85c7c59e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-011.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> +<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:4; gap:0; width:100px; background:red;"> + <div style="height:40px; background:green;"> + <div style="height:140px;"></div> + <div style="height:60px; background:green;"></div> + </div> + <div style="height:100px; background:green;"></div> + <div style="height:60px;"></div> + <div style="column-span:all; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-012.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-012.html new file mode 100644 index 0000000000..49437f027c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-012.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> +<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; gap:0;"> + <div style="height:0;"> + <div style="height:60px; background:green;"></div> + <div style="column-span:all; height:50px; background:green;"></div> + </div> + <div style="position:relative; height:40px;"> + <div style="position:absolute; left:0; top:0; width:100%; height:40px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-013.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-013.html new file mode 100644 index 0000000000..6889c076b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-children-height-013.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span"> +<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:4; gap:0;"> + <div style="height:20px; background:green;"> + <div style="height:40px;"></div> + <div style="height:160px; background:green;"></div> + </div> + <div style="height:20px; background:green;"></div> + <div style="column-span:all; height:50px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-001-ref.html new file mode 100644 index 0000000000..5f2c28e79e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Add the spanner as the first child of the columns</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <h3>spanner</h3> + <div>block1</div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-001.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-001.html new file mode 100644 index 0000000000..d9bf40889f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Add the spanner as the first child of the columns</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-add-001-ref.html"> + <meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Add the spanner as the first child of the columns. */ + var spanner = document.createElement("h3"); + var text = document.createTextNode("spanner"); + spanner.appendChild(text); + + var column = document.getElementById("column"); + column.insertBefore(spanner, column.children[0]); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block1</div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-002-ref.html new file mode 100644 index 0000000000..f0c66a609d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Add the spanner as the second child of the columns</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1</div> + <h3>spanner</h3> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-002.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-002.html new file mode 100644 index 0000000000..665a168083 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Add the spanner as the second child of the columns</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-add-002-ref.html"> + <meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Add the spanner as the second child of the columns. */ + var spanner = document.createElement("h3"); + var text = document.createTextNode("spanner"); + spanner.appendChild(text); + + var column = document.getElementById("column"); + column.insertBefore(spanner, column.children[1]); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block1</div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-003-ref.html new file mode 100644 index 0000000000..c87e2372ff --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-003-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Add the spanner in block1. It should correctly span across all columns</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1<h3>spanner</h3></div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-003.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-003.html new file mode 100644 index 0000000000..4538733ec4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-003.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Add the spanner in block1. It should correctly span across all columns</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-add-003-ref.html"> + <meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Add the spanner in block1. It should correctly span across all columns. */ + var spanner = document.createElement("h3"); + var text = document.createTextNode("spanner"); + spanner.appendChild(text); + + var block1 = document.getElementById("block1"); + block1.appendChild(spanner); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div id="block1">block1</div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-004-ref.html new file mode 100644 index 0000000000..be0fa59bf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-004-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Add the spanner to the inner column</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + body { + width: 400px; + } + article { + column-count: 2; + column-rule: 6px solid; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article> + <article> + <div>inner block1</div> + <h3>spanner</h3> + <div>inner block2</div> + </article> + <article> + <div>inner block3</div> + <h3>static spanner</h3> + <div>inner block4</div> + </article> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-004.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-004.html new file mode 100644 index 0000000000..0b2ecbcc2f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-004.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Add the spanner to the inner column</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-add-004-ref.html"> + <meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Add the spanner to the inner column. */ + var spanner = document.createElement("h3"); + var text = document.createTextNode("spanner"); + spanner.appendChild(text); + + var innerColumn = document.getElementById("inner-column"); + innerColumn.insertBefore(spanner, innerColumn.children[1]); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + body { + width: 400px; + } + article { + column-count: 2; + column-rule: 6px solid; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <article id="inner-column"> + <div>inner block1</div> + <div>inner block2</div> + </article> + <article> + <div>inner block3</div> + <h3>static spanner</h3> + <div>inner block4</div> + </article> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-005.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-005.html new file mode 100644 index 0000000000..4453cae566 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-005.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Add block1 before block2. It should join the column content box with + block2, not with the spanner</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-add-001-ref.html"> + <meta name="assert" content="This test checks a dynamically added block element should be rendered correctly in a column hierarchy containing a column-span."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Add block1 before block2. It should join the column content box with + block2, not with the spanner. */ + var block = document.createElement("div"); + var text = document.createTextNode("block1"); + block.appendChild(text); + + var column = document.getElementById("column"); + column.insertBefore(block, column.children[1]); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <h3>spanner</h3> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-006.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-006.html new file mode 100644 index 0000000000..1e16e9dfd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-006.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Append a text in column-span</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-add-002-ref.html"> + <meta name="assert" content="This test checks adding a text in column-span should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Append a text in column-span */ + var text = document.createTextNode("spanner"); + var spanner = document.getElementById("spanner"); + spanner.appendChild(text) + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block1</div> + <h3 id="spanner"></h3> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-007-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-007-ref.html new file mode 100644 index 0000000000..91b1cd89c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-007-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Append the block to the inline element which contains "column-span"</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <span id="span"> + inline1 + <h3>spanner</h3> + <div>block1</div> + inline2 + <div>block2</div> + </span> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-007.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-007.html new file mode 100644 index 0000000000..b54e38a32b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-007.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Append the block to the inline element which contains "column-span"</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-add-007-ref.html"> + <meta name="assert" content="This test checks a dynamically added block element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Append the block to the inline element which contains "column-span". */ + var block = document.createElement("div"); + var text = document.createTextNode("block2"); + block.appendChild(text); + + var span = document.getElementById("span"); + span.appendChild(block); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <span id="span"> + inline1 + <h3>spanner</h3> + <div>block1</div> + inline2 + </span> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-008-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-008-ref.html new file mode 100644 index 0000000000..4c13d64edf --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-008-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Add a nested multi-column spanner to the outer column</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-count: 2; + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1</div> + <h3>multi-column spanner</h3> + <h3>spanner</h3> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-008.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-008.html new file mode 100644 index 0000000000..f6340a40b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-008.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Add a nested multi-column spanner to the outer column</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-add-008-ref.html"> + <meta name="assert" content="This test checks a dynamically added 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Add a nested multi-column spanner to the outer column. */ + var spanner = document.createElement("h3"); + var text = document.createTextNode("multi-column spanner"); + spanner.appendChild(text); + + var column = document.getElementById("column"); + column.insertBefore(spanner, column.children[1]); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-count: 2; + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block1</div> + <h3>spanner</h3> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-009.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-009.html new file mode 100644 index 0000000000..f07c51c630 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-009.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Add a simple block to columns which already contains a column-span</title> + <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-dynamic-add-002-ref.html"> + <meta name="assert" content="This test checks a dynamically added block element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + /* Add a simple block to columns which already contains a column-span. */ + var block2 = document.createElement("div"); + var text = document.createTextNode("block2"); + block2.appendChild(text); + + var column = document.getElementById("column"); + column.appendChild(block2); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block1</div> + <h3>spanner</h3> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-010-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-010-ref.html new file mode 100644 index 0000000000..c12e11c3fd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-010-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Append a block containing a spanner kid. The spanner kid should correctly span across all columns.</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1</div> + <div><h3>spanner</h3>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-010.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-010.html new file mode 100644 index 0000000000..d431e82304 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-010.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Append a block containing a spanner kid. The spanner kid should correctly span across all columns.</title> + <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-dynamic-add-010-ref.html"> + <meta name="assert" content="This test checks appending a block containing 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + // Create a subtree like the following, and append it to columns. + // <div> + // <h3>spanner</h3> + // block2 + // </div> + var spanner = document.createElement("h3"); + var spannerText = document.createTextNode("spanner"); + spanner.appendChild(spannerText); + + var block2 = document.createElement("div"); + var block2Text = document.createTextNode("block2"); + block2.appendChild(spanner); + block2.appendChild(block2Text) + + var column = document.getElementById("column"); + column.appendChild(block2); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block1</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-011.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-011.html new file mode 100644 index 0000000000..6b96a9afe8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-011.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Insert a block containing a spanner kid. The spanner kid should correctly span across all columns</title> + <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-dynamic-add-003-ref.html"> + <meta name="assert" content="This test checks that an inserted block containing 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + // Create a subtree like the following, and insert it into column as the + // first child. + // <div> + // block1 + // <h3>spanner</h3> + // </div> + var spanner = document.createElement("h3"); + var spannerText = document.createTextNode("spanner"); + spanner.appendChild(spannerText); + + var block1 = document.createElement("div"); + var block1Text = document.createTextNode("block1"); + block1.appendChild(block1Text) + block1.appendChild(spanner); + + var column = document.getElementById("column"); + column.insertBefore(block1, column.children[0]); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-012-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-012-ref.html new file mode 100644 index 0000000000..6abf0195ef --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-012-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Append a block containing a spanner kid. The spanner kid should correctly span across all columns</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1 + <div> + <h3>spanner</h3> + block2 + </div> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-012.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-012.html new file mode 100644 index 0000000000..fa3a4677ff --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-012.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Append a block containing a spanner kid. The spanner kid should correctly span across all columns</title> + <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-dynamic-add-012-ref.html"> + <meta name="assert" content="This test checks that an appended block containing 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + // Create a subtree like the following, and append it to block1. + // <div> + // <h3>spanner</h3> + // block2 + // </div> + var spanner = document.createElement("h3"); + var spannerText = document.createTextNode("spanner"); + spanner.appendChild(spannerText); + + var block2 = document.createElement("div"); + var block2Text = document.createTextNode("block2"); + block2.appendChild(spanner); + block2.appendChild(block2Text) + + var block1 = document.getElementById("block1"); + block1.appendChild(block2); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div id="block1">block1</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-013-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-013-ref.html new file mode 100644 index 0000000000..e92ad47481 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-013-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Insert a block into a multicol details containing column-span:all</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #details { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <details open id="details"> + <div>block1</div> + <summary>Summary</summary> + <h3>spanner</h3> + <div>block2</div> + </details> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-013.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-013.html new file mode 100644 index 0000000000..ae275386e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-add-013.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Insert a block into a multicol details containing column-span:all</title> + <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-dynamic-add-013-ref.html"> + <meta name="assert" content="This test checks that <summary> is still rendered as the first element after inserting a block into multicol <details>, at the place before <summary>."> + + <script> + function runTest() { + document.body.offsetHeight; + + // Create a div, and insert it as the first child of <details>, + // just before <summary>. + var block1 = document.createElement("div"); + var block1Text = document.createTextNode("block1"); + block1.appendChild(block1Text); + + var details = document.getElementById("details"); + details.insertBefore(block1, details.children[0]); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #details { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <details open id="details"> + <summary>Summary</summary> + <h3>spanner</h3> + <div>block2</div> + </details> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-001-ref.html new file mode 100644 index 0000000000..a68fe7ea71 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-001-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Remove the spanner as the first child</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1</div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-001.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-001.html new file mode 100644 index 0000000000..0c5523ad12 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Remove the spanner as the first child</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-remove-001-ref.html"> + <meta name="assert" content="This test checks removing a 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + document.getElementById("spanner").remove(); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <h3 id="spanner">spanner</h3> + <div>block1</div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-002-ref.html new file mode 100644 index 0000000000..dcebfd2143 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Remove the spanner in nested blocks</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <div>block1</div> + <div><div></div></div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-002.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-002.html new file mode 100644 index 0000000000..2b4ab81d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Remove the spanner in nested blocks</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-remove-002-ref.html"> + <meta name="assert" content="This test checks removing a 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + document.getElementById("spanner").remove(); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block1</div> + <div><div><h3 id="spanner">spanner</h3></div></div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-003.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-003.html new file mode 100644 index 0000000000..30de099d5e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-003.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Remove the spanner in a block</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-remove-001-ref.html"> + <meta name="assert" content="This test checks removing a 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + document.getElementById("spanner").remove(); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div id="block1">block1<h3 id="spanner">spanner</h3></div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-004-ref.html new file mode 100644 index 0000000000..e77b4fa1f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-004-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Remove the spanner with block siblings in an inline element</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <span> + inline1 + <div>block1</div> + inline2 + <div>block2</div> + </span> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-004.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-004.html new file mode 100644 index 0000000000..c362a1c787 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Remove the spanner with a block sibling in an inline element</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-remove-004-ref.html"> + <meta name="assert" content="This test checks removing a 'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + document.getElementById("spanner").remove(); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <span> + inline1 + <h3 id="spanner">spanner</h3> + <div>block1</div> + inline2 + <div>block2</div> + </span> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-005-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-005-ref.html new file mode 100644 index 0000000000..b1b69189e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-005-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Remove a block with spanner siblings</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body> + <article id="column"> + <h3>spanner1</h3> + <h3>spanner2</h3> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-005.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-005.html new file mode 100644 index 0000000000..21a8b0b590 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-005.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Remove a tall block (spliting across the three columns) with spanner siblings</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-remove-005-ref.html"> + <meta name="assert" content="This test checks removing a non-'column-span' element should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + document.getElementById("block").remove(); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + #block { + height: 400px; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <h3>spanner1</h3> + <div id="block">block</div> + <h3>spanner2</h3> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-006.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-006.html new file mode 100644 index 0000000000..406cb0aaf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-006.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Remove the parent of a column-spanner</title> + <link rel="author" title="Ting-Yu Lin" href="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-dynamic-remove-001-ref.html"> + <meta name="assert" content="This test checks removing the parent of a column-spanner should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + document.getElementById("block").remove(); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div>block1</div> + <div id="block"> + <h3>inner spanner</h3> + <div>inner block</div> + </div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-007.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-007.html new file mode 100644 index 0000000000..2e9e49420e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-dynamic-remove-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Remove the position:fixed spanner as the first child</title> + <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-dynamic-remove-001-ref.html"> + <meta name="assert" content="This test checks removing a position:fixed 'column-span:all' element (which doesn't actually span columns) should be rendered correctly."> + + <script> + function runTest() { + document.body.offsetHeight; + + document.getElementById("spanner").remove(); + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 3; + column-rule: 6px solid; + width: 400px; + outline: 1px solid black; + } + h3 { + position: fixed; + column-span: all; + outline: 1px solid blue; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <h3 id="spanner">spanner</h3> + <div>block1</div> + <div>block2</div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-001-ref.html new file mode 100644 index 0000000000..5dfdce5d1d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-001-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a multi-column container on fieldset works with a column-span:all child</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + fieldset { + width: 400px; + } + .inner { + column-count: 3; + column-rule: 6px solid; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <fieldset> + <legend>Legend</legend> + <div class="inner"> + <div>block1</div><div>block2</div> + <h3>spanner</h3> + <div>block3</div><div>block4</div> + </div> + </fieldset> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-001.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-001.html new file mode 100644 index 0000000000..7e741134ec --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a multi-column container on fieldset works with a column-span:all child</title> + <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-fieldset-001-ref.html"> + <meta name="assert" content="This test checks the page is rendered correctly for a simple fieldset multi-column container with a column-span:all child."> + + <style> + fieldset { + column-count: 3; + column-rule: 6px solid; + width: 400px; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + </style> + + <fieldset> + <legend>Legend</legend> + <div>block1</div><div>block2</div> + <h3>spanner</h3> + <div>block3</div><div>block4</div> + </fieldset> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-002-ref.html new file mode 100644 index 0000000000..523adfd2f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-002-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on fieldset works with a column-span:all child and position:absolute boxes</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + fieldset { + width: 400px; + overflow: hidden; + position: absolute; + } + .inner { + column-count: 3; + column-rule: 6px solid; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + a { + position: absolute; + width: 1em; + height: 1em; + background-color: blue; + } + </style> + + <fieldset> + <legend>Legend<a></a></legend> + <div class="inner"> + <div>block1</div><div>block2</div><a></a> + <h3>spanner<a></a></h3> + <div>block3</div><div>block4</div><a></a> + </div> + </fieldset> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-002.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-002.html new file mode 100644 index 0000000000..f7c9a842cd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on fieldset works with a column-span:all child and position:absolute boxes</title> + <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-fieldset-002-ref.html"> + <meta name="assert" content="This test checks the page is rendered correctly for a overflow:hidden and position:absolute fieldset multi-column container with a column-span:all child and position:absolute boxes."> + + <style> + fieldset { + column-count: 3; + column-rule: 6px solid; + width: 400px; + overflow: hidden; + position: absolute; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + a { + position: absolute; + width: 1em; + height: 1em; + background-color: blue; + } + </style> + + <fieldset> + <legend>Legend<a></a></legend> + <div>block1</div><div>block2</div><a></a> + <h3>spanner<a></a></h3> + <div>block3</div><div>block4</div><a></a> + </fieldset> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-003-ref.html new file mode 100644 index 0000000000..bf0d6c5b69 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-003-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on fieldset works with a column-span:all child and position:fixed boxes</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + fieldset { + width: 400px; + overflow: hidden; + position: absolute; + } + .inner { + column-count: 3; + column-rule: 6px solid; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + a { + position: fixed; + width: 1em; + height: 1em; + background-color: blue; + } + </style> + + <fieldset> + <legend>Legend<a></a></legend> + <div class="inner"> + <div>block1</div><div>block2</div><a></a> + <h3>spanner<a></a></h3> + <div>block3</div><div>block4</div><a></a> + </div> + </fieldset> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-003.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-003.html new file mode 100644 index 0000000000..02df35cb8a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-fieldset-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test a overflow:hidden and position:absolute multi-column container on fieldset works with a column-span:all child and position:fixed boxes</title> + <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-fieldset-003-ref.html"> + <meta name="assert" content="This test checks the page is rendered correctly for a overflow:hidden and position:absolute fieldset multi-column container with a column-span:all child and position:absolute boxes."> + + <style> + fieldset { + column-count: 3; + column-rule: 6px solid; + width: 400px; + overflow: hidden; + position: absolute; + } + h3 { + column-span: all; + outline: 1px solid blue; + } + a { + position: fixed; + width: 1em; + height: 1em; + background-color: blue; + } + </style> + + <fieldset> + <legend>Legend<a></a></legend> + <div>block1</div><div>block2</div><a></a> + <h3>spanner<a></a></h3> + <div>block3</div><div>block4</div><a></a> + </fieldset> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-001-ref.html new file mode 100644 index 0000000000..d26f58f442 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-001-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: columns with list-item and column-span</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + li { + width: 300px; + outline: 1px solid black; + margin-bottom: 1em; + } + h3 { + outline: 1px solid blue; + margin: 0; + } + </style> + + <body> + <ul> + <li style="list-style-position: outside;"> + <div>bullet outside</div> + <h3>spanner</h3> + </li> + <li style="list-style-position: inside;"> + bullet inside + <h3>spanner</h3> + </li> + <li style="list-style-position: outside;"> + <h3>spanner (bullet outside)</h3> + </li> + <li style="list-style-position: inside;"> + <h3>spanner (bullet inside)</h3> + </li> + <li style="list-style-position: outside;"> + <div> + <h3>nested spanner (bullet outside)</h3> + </div> + </li> + <li style="list-style-position: inside;"> + <div> + <h3>nested spanner (bullet inside)</h3> + </div> + </li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-001.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-001.html new file mode 100644 index 0000000000..2cbf740751 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: columns with list-item and column-span</title> + <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-list-item-001-ref.html"> + <meta name="assert" content="This test checks the columns with list-item are renederd correctly."> + + <style> + li { + column-count: 1; + width: 300px; + outline: 1px solid black; + margin-bottom: 1em; + } + h3 { + column-span: all; + outline: 1px solid blue; + margin: 0; + } + </style> + + <body> + <ul> + <li style="list-style-position: outside;"> + bullet outside + <h3>spanner</h3> + </li> + <li style="list-style-position: inside;"> + bullet inside + <h3>spanner</h3> + </li> + <li style="list-style-position: outside;"> + <h3>spanner (bullet outside)</h3> + </li> + <li style="list-style-position: inside;"> + <h3>spanner (bullet inside)</h3> + </li> + <li style="list-style-position: outside;"> + <div> + <h3>nested spanner (bullet outside)</h3> + </div> + </li> + <li style="list-style-position: inside;"> + <div> + <h3>nested spanner (bullet inside)</h3> + </div> + </li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-002-ref.html new file mode 100644 index 0000000000..1c64a8e26e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-002-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: columns with list-item, column-span, and overflow</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + li { + width: 300px; + outline: 1px solid black; + margin-bottom: 1em; + overflow: hidden; + } + h3 { + outline: 1px solid blue; + margin: 0; + } + </style> + + <body> + <ul> + <li style="list-style-position: outside;"> + <div>bullet outside</div> + <h3>spanner</h3> + </li> + <li style="list-style-position: inside;"> + bullet inside + <h3>spanner</h3> + </li> + <li style="list-style-position: outside;"> + <h3>spanner (bullet outside)</h3> + </li> + <li style="list-style-position: inside;"> + <h3>spanner (bullet inside)</h3> + </li> + <li style="list-style-position: outside;"> + <div> + <h3>nested spanner (bullet outside)</h3> + </div> + </li> + <li style="list-style-position: inside;"> + <div> + <h3>nested spanner (bullet inside)</h3> + </div> + </li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-002.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-002.html new file mode 100644 index 0000000000..2644fe920f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-list-item-002.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: columns with list-item, column-span, and overflow</title> + <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-list-item-002-ref.html"> + <meta name="assert" content="This test checks the columns with list-item are renederd correctly."> + + <style> + li { + column-count: 1; + width: 300px; + outline: 1px solid black; + margin-bottom: 1em; + overflow: hidden; + } + h3 { + column-span: all; + outline: 1px solid blue; + margin: 0; + } + </style> + + <body> + <ul> + <li style="list-style-position: outside;"> + bullet outside + <h3>spanner</h3> + </li> + <li style="list-style-position: inside;"> + bullet inside + <h3>spanner</h3> + </li> + <li style="list-style-position: outside;"> + <h3>spanner (bullet outside)</h3> + </li> + <li style="list-style-position: inside;"> + <h3>spanner (bullet inside)</h3> + </li> + <li style="list-style-position: outside;"> + <div> + <h3>nested spanner (bullet outside)</h3> + </div> + </li> + <li style="list-style-position: inside;"> + <div> + <h3>nested spanner (bullet inside)</h3> + </div> + </li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-001-ref.xht new file mode 100644 index 0000000000..30319f3554 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-001-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-18 --> + <meta name="flags" content="image ahem" /> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + border: gray solid 1em; + width: 160px; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div><img src="support/swatch-blue.png" width="80" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="40" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-001.xht new file mode 100644 index 0000000000..a7d25ab56c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-001.xht @@ -0,0 +1,72 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-span: all' element and width exceeding available multi-column width (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-18 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-all-margin-001-ref.xht" /> + <meta name="flags" content="ahem may" /> + <meta name="assert" content="This test checks that when 'overflow' is set to 'hidden' on a multi-column element, then any spanning ('column-span: all') element exceeding the available width of the multi-column should be clipped accordingly." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 8em; + + column-count: 4; + column-gap: 0em; + + /* + + N == 4; + + W == 2; + + */ + } + + h4 + { + background: black; + color: black; + font: inherit; + margin: 1em 0; + width: 11em; + + column-span: all; + + /* + This is the target of the test: the spanning element's + width (11em) exceeds the available width of the + multi-column element. The 3em exceeding such + width is first clipped at column box boundary. + */ + } + + span {color: blue;} + + span + span {color: pink;} + ]]></style> + </head> + + <body> + + <div> + <span> bl ue bl ue </span> + <span> Pi nk Pi nk </span> + <h4> black </h4> + <h4> black </h4> + na vy na vy + na vy na vy + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-002-ref.xht new file mode 100644 index 0000000000..48b80d12fb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-002-ref.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <meta name="flags" content="image ahem" /> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body {font: 1.25em/1 Ahem;} + + div {width: 240px;} + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div> + <img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="100" height="20" alt="Image download support must be enabled" /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" +alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><br /> + + <img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled" /> + +</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-002.xht new file mode 100644 index 0000000000..2fb05ab502 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-002.xht @@ -0,0 +1,77 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-span: all' element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-all-margin-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The spanning element extends only to the width of the multicol element, despite an item in the fourth column extending into the overflow area." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 8em; + + column-count: 4; + column-gap: 0em; + + /* + + N == 4; + + W == 2; + + */ + } + + h4 + { + font: inherit; + margin: 1em 0; + } + + h4#orange + { + background: orange; + color: orange; + /* + In this test, the glyphs "or" are painted into 4th column box + and the glyphs "ang" are painted in the overflow area. + */ + } + + h4#black + { + background: black; + color: black; + + column-span: all; + } + + span {color: blue;} + + span + span {color: pink;} + ]]></style> + </head> + + <body> + + <div> + <span> bl ue bl ue </span> + <span> Pi nk Pi nk </span> + <h4 id="orange"> orang </h4> + <h4 id="black"> black </h4> + na vy na vy + na vy na vy + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-003.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-003.html new file mode 100644 index 0000000000..06c1bea3ab --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-003.html @@ -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/#column-span"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1052834"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns:3; width:100px; background:green;"> + <div> + <div style="column-span:all; height:10px; margin-bottom:50px;"></div> + <div style="column-span:all; height:10px; margin-top:80px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-bottom-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-bottom-001-ref.xht new file mode 100644 index 0000000000..b3ec5201c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-bottom-001-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <meta name="flags" content="image ahem" /> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + border: gray solid 1em; + width: 160px; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div> + <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-bottom-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-bottom-001.xht new file mode 100644 index 0000000000..eabb519e67 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-bottom-001.xht @@ -0,0 +1,80 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: 'column-span: all' element with vertical margins and width exceeding available multi-colum width (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-all-margin-bottom-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="In this test, the glyphs 'or' are painted into 1st column box, the glyphs 'ang' extend outside the box, and should not be clipped. In this test they are overwritten by spans so are not visible." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 8em; + + column-count: 4; + column-gap: 0em; + + /* + + N == 4; + + W == 2em; + + */ + } + + h4 + { + font: inherit; + margin: 1em 0; + } + + h4#black + { + background: black; + color: black; + + column-span: all; + } + + h4#orange + { + background: orange; + color: orange; + /* + In this test, the glyphs "or" are painted into 1st column box. + Per spec, content in the normal flow that extends into column + gaps (e.g., long words or images) is not clipped to the column + box. However, the glyphs "ang" are overwritten by <span>s, so + they're not visible. + */ + } + + span {color: blue;} + + span + span {color: pink;} + ]]></style> + </head> + + <body> + + <div> + na vy na vy + na vy na vy + <h4 id="black"> black </h4> + <h4 id="orange"> orang </h4> + <span> bl ue bl ue </span> + <span> Pi nk Pi nk </span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-001-ref.xht new file mode 100644 index 0000000000..44f1198df8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-001-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <meta name="flags" content="image ahem" /> + <link rel="stylesheet" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + border: gray solid 1em; + width: 160px; + } + + img {vertical-align: top;} + ]]></style> + </head> + <body> + + <div> + <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="40" alt="Image download support must be enabled" /> + <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> + <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-001.xht new file mode 100644 index 0000000000..6bd22df89f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-001.xht @@ -0,0 +1,70 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: vertically adjacent spanning elements with nested margins (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-all-margin-nested-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="In this test, the first h4 element would collapse its margin bottom with the top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#multi-column + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 8em; + + column-count: 4; + column-gap: 0em; + + /* + + N == 4; + + W == 2em; + + */ + } + + h4, div#child + { + background-color: black; + color: black; + font: inherit; + margin: 0; + } + + h4 + { + margin: 1em 0; + width: 11em; + + column-span: all; + } + ]]></style> + </head> + <body> + + <div id="multi-column"> + na vy na vy + na vy na vy + + <h4 id="first">black</h4> + + <div id="child"> + <h4 id="nested">black</h4> + </div> + + na vy na vy + na vy na vy + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-002.xht new file mode 100644 index 0000000000..5e05e8697a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-002.xht @@ -0,0 +1,71 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: vertically adjacent spanning elements with nested margins (complex)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-all-margin-nested-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="In this test, the first h4 element would collapse its margin bottom with the resulting (from a margin collapsing with its nested h4 element) of top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#multi-column + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + orphans: 1; + overflow: hidden; + widows: 1; + width: 8em; + + column-count: 4; + column-gap: 0em; + + /* + + N == 4; + + W == 2em; + + */ + } + + h4, div#child + { + background-color: black; + color: black; + font: inherit; + margin: 1em 0; + } + + div#child {margin: 1em 0 0;} + + h4 + { + width: 11em; + + column-span: all; + } + ]]></style> + </head> + <body> + + <div id="multi-column"> + na vy na vy + na vy na vy + + <h4 id="first">black</h4> + + <div id="child"> + <h4 id="nested">black</h4> + </div> + + na vy na vy + na vy na vy + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-firstchild-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-firstchild-001.xht new file mode 100644 index 0000000000..cfb5853627 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-firstchild-001.xht @@ -0,0 +1,80 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-span</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns"/> +<link rel="match" href="multicol-span-all-margin-nested-firstchild-ref.xht"/> +<meta name="flags" content="ahem"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: navy; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 8em; + float: left; + orphans: 1; + widows: 1; + overflow: hidden; + + column-count: 4; + column-gap: 0; +} +span, h6 { + font-family: Ahem; + font-size: 1em; + font-weight: normal; + line-height: 1em; + color: black; + background: black; + padding: 0; + margin: 0; + display: block; +} +h6 { + margin: 1em 0; + width: 11em; + column-span: all; +} +span { + color: pink; + background: pink; + margin: 2em 0; +} +h6~h6 { + color: black; + background: black; + height: 1em; +} +h6~h6>span { + background: pink; + color: pink; + margin: -2em 0 0; +} +]]></style> +</head> + +<body> + +<div> + xx xx xx xx + xx xx xx xx + + <h6><span>xxxxx</span></h6> + <h6><span>xxxxx</span></h6> + + xx xx xx xx + xx xx xx xx +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-firstchild-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-firstchild-ref.xht new file mode 100644 index 0000000000..7da5237dac --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-margin-nested-firstchild-ref.xht @@ -0,0 +1,77 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-span</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +body { + margin: 0; +} +body>div { + font-family: Ahem; + font-size: 1em; + line-height: 1em; + color: navy; + background: yellow; + margin: 1em; + border: 1em solid gray; + width: 8em; + height: 13em; + position: relative; + float: left; + overflow: hidden; +} +div div { + position: absolute; + top: 0; + left: 0; + width: 8em; + height: 2em; + background: navy; +} +#s2 { + top: 11em; +} +#s3 { + background: black; + top: 3em; +} +#s4 { + background: pink; + top: 5em; + height: 1em; +} +#s5 { + background: black; + top: 6em; + height: 1em; +} +#s6 { + background: pink; + top: 7em; + height: 1em; +} +#s7 { + background: black; + top: 9em; + height: 1em; +} +]]></style> +</head> + +<body> + +<div> + <div></div> + <div id="s2"></div> + <div id="s3"></div> + <div id="s4"></div> + <div id="s5"></div> + <div id="s6"></div> + <div id="s7"></div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-001-ref.html new file mode 100644 index 0000000000..ae1adcd30d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Restyle column-span's parent that is a block</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 1; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + } + #div { + background-color: yellow; + } + </style> + + <body> + <article id="column"> + <div id="div"> + <div>yellow block1</div> + <h3>spanner (no background-color)</h3> + <div>yellow block2</div> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-001.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-001.html new file mode 100644 index 0000000000..0f05c9cc5a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Restyle column-span's parent that is a block</title> + <link rel="author" title="Ting-Yu Lin" href="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://github.com/w3c/csswg-drafts/issues/1072"> + <link rel="match" href="multicol-span-all-restyle-001-ref.html"> + <meta name="assert" content="This test checks change the style of the spanner's parent should not affect the spanner."> + + <script> + function runTest() { + document.body.offsetHeight; // flush layout + + var div = document.getElementById("div"); + div.style.backgroundColor = "yellow"; + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 1; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div id="div"> + <div>yellow block1</div> + <h3>spanner (no background-color)</h3> + <div>yellow block2</div> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-002-ref.html new file mode 100644 index 0000000000..e3a8c65d74 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-002-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Restyle column-span's parent that is an inline</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + html { + overflow: hidden; + } + #column { + column-count: 1; + } + #span { + position: relative; + left: 200px; + } + h3 { + column-span: all; + } + </style> + + <body> + <article id="column"> + <span id="span"> + All text should be offset 200px, except the spanner + <h3>Spanner</h3> + <div>Some more text</div> + </span> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-002.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-002.html new file mode 100644 index 0000000000..bfc8f4b7b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-002.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Restyle column-span's parent that is an inline</title> + <link rel="author" title="Ting-Yu Lin" href="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://github.com/w3c/csswg-drafts/issues/1072"> + <link rel="match" href="multicol-span-all-restyle-002-ref.html"> + <meta name="assert" content="This test checks change the style of the spanner's parent should not affect the spanner."> + + <script> + function runTest() { + document.body.offsetHeight; // flush layout + + var span = document.getElementById("span"); + span.offsetWidth; + span.style.left = "200px"; + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + html { + overflow: hidden; + } + #column { + column-count: 1; + } + #span { + position: relative; + left: 100px; + } + h3 { + column-span: all; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <span id="span"> + All text should be offset 200px, except the spanner + <h3>Spanner</h3> + <div>Some more text</div> + </span> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-003-ref.html new file mode 100644 index 0000000000..94870b1ee9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-003-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Restyle column-span's multi-column container</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 1; + width: 400px; + outline: 1px solid black; + background-color: yellow; + } + h3 { + column-span: all; + } + #div { + background-color: yellow; + } + </style> + + <body> + <article id="column"> + <div> + <div>block1</div> + <h3>spanner</h3> + <div>block2</div> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-003.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-003.html new file mode 100644 index 0000000000..a0904770e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Restyle column-span's multi-column container</title> + <link rel="author" title="Ting-Yu Lin" href="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://github.com/w3c/csswg-drafts/issues/1072"> + <link rel="match" href="multicol-span-all-restyle-003-ref.html"> + <meta name="assert" content="This test checks change the style of the spanner's multi-column container should not affect the spanner."> + + <script> + function runTest() { + document.body.offsetHeight; // flush layout + + var column = document.getElementById("column"); + column.style.backgroundColor = "yellow"; + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 1; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div> + <div>block1</div> + <h3>spanner</h3> + <div>block2</div> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-004-ref.html new file mode 100644 index 0000000000..bba78ba082 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-004-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Reference: Restyle the column-span itself</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + #column { + column-count: 1; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + background-color: yellow; + } + </style> + + <body> + <article id="column"> + <div> + <div>block1</div> + <h3>yellow spanner</h3> + <div>block2</div> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-004.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-004.html new file mode 100644 index 0000000000..b005913baf --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-all-restyle-004.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Restyle the column-span itself</title> + <link rel="author" title="Ting-Yu Lin" href="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://github.com/w3c/csswg-drafts/issues/1072"> + <link rel="match" href="multicol-span-all-restyle-004-ref.html"> + <meta name="assert" content="This test checks change the style of the spanner itself."> + + <script> + function runTest() { + document.body.offsetHeight; // flush layout + + var spanner = document.getElementById("spanner"); + spanner.style.backgroundColor = "yellow"; + + document.documentElement.removeAttribute("class"); + } + </script> + + <style> + #column { + column-count: 1; + width: 400px; + outline: 1px solid black; + } + h3 { + column-span: all; + } + </style> + + <body onload="runTest();"> + <article id="column"> + <div> + <div>block1</div> + <h3 id="spanner">yellow spanner</h3> + <div>block2</div> + </div> + </article> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-all-rule-001-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-rule-001-ref.html new file mode 100644 index 0000000000..56a49fcc28 --- /dev/null +++ b/testing/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="mailto: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/testing/web-platform/tests/css/css-multicol/multicol-span-all-rule-001.html b/testing/web-platform/tests/css/css-multicol/multicol-span-all-rule-001.html new file mode 100644 index 0000000000..c29cd69b22 --- /dev/null +++ b/testing/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="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/#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> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-float-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-float-001-ref.xht new file mode 100644 index 0000000000..50addc3779 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-float-001-ref.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + font-size: 1.25em; + line-height: 1; + } + + img {vertical-align: top;} + + img:first-child {padding-left: 5em;} + + img#no-padding {padding-left: 0em;} + ]]></style> + </head> + <body> + + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + <div><img id="no-padding" src="support/swatch-pink.png" width="220" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="120" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="120" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-float-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-float-001.xht new file mode 100644 index 0000000000..8d123c8565 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-float-001.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: floating a column-spanning element</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-float-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-span' does not apply to floating element." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: navy; + font: 1.25em/1 Ahem; + margin-left: 5em; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 2; + column-gap: 1em; + + /* + + N == 2; + + W == 5em; + + */ + } + + span + { + display: block; + font: inherit; + margin: 0; + width: 11em; + + column-span: all; + } + + span:first-child + { + background-color: pink; + color: pink; + float: right; + } + + span + span {color: black;} + ]]></style> + </head> + <body> + + <div> + <span>Pinkk</span> + <span>black</span> + navyy navyy + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-float-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-span-float-002-ref.html new file mode 100644 index 0000000000..5a5ccc6b94 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-float-002-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Reference: Test floats in a multi-column container with column-span</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="stylesheet" href="/fonts/ahem.css"> + + <style> + article { + width: 300px; + font: 1.25em/1 Ahem; + } + .float-left { + float: left; + color: black; + } + .float-right { + float: right; + color: navy; + } + .column-span { + clear: both; + color: pink; + } + </style> + + <article> + <div class="float-left">black</div> + <div class="float-right">navvy</div> + + <div class="column-span">Pink</div> + + <div class="float-left">black</div> + <div class="float-right">navyy</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-float-002.html b/testing/web-platform/tests/css/css-multicol/multicol-span-float-002.html new file mode 100644 index 0000000000..ae461a8e6a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-float-002.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test floats in a multi-column container with column-span</title> + <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"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <link rel="match" href="multicol-span-float-002-ref.html"> + <meta name="assert" content="This test verifies the floats, which are inside the mulitcol layout with column-span, are positioned with regard to the column box where the float appears."> + + <style> + article { + column-count: 1; + width: 300px; + font: 1.25em/1 Ahem; + } + .float-left { + float: left; + color: black; + } + .float-right { + float: right; + color: navy; + } + .column-span { + column-span: all; + color: pink; + } + </style> + + <article> + <div class="float-left">black</div> + <div class="float-right">navyy</div> + + <div class="column-span">Pink</div> + + <div class="float-left">black</div> + <div class="float-right">navyy</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-float-003.html b/testing/web-platform/tests/css/css-multicol/multicol-span-float-003.html new file mode 100644 index 0000000000..854db9897d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-float-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test floats in a multi-column container with column-span</title> + <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"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <link rel="match" href="multicol-span-float-002-ref.html"> + <meta name="assert" content="This test verifies the floats, which are inside the mulitcol layout with column-span, are positioned with regard to the column box where the float appears."> + + <style> + article { + column-count: 1; + width: 300px; + font: 1.25em/1 Ahem; + } + .float-left { + float: left; + color: black; + } + .float-right { + float: right; + color: navy; + } + .column-span { + column-span: all; + color: pink; + } + </style> + + <article> + <span> + <div class="float-left">black</div> + <div class="float-right">navyy</div> + + <div class="column-span">Pink</div> + + <div class="float-left">black</div> + <div class="float-right">navyy</div> + </span> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-none-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-none-001-ref.xht new file mode 100644 index 0000000000..4fcc57a658 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-none-001-ref.xht @@ -0,0 +1,54 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 serif; + border: 1em solid gray; + width: 11em; + height: 5em; + position: relative; + } + + img {position: absolute;} + + img#first-blue {left: 0em; top: 0em;} + + img#second-blue {left: 3em; top: 0em;} + + img#first-pink {left: 6em; top: 0em;} + + img#second-pink {left: 9em; top: 0em;} + + img#black {left: 0em; top: 2em;} + + img#first-yellow {left: 6em; top: 2em;} + + img#second-yellow {left: 9em; top: 2em;} + + img#first-orange {left: 0em; top: 3em;} + + img#second-orange {left: 3em; top: 3em;} + ]]></style> + </head> + <body> + + <div> + <img id="first-blue" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="second-blue" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="first-pink" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="second-pink" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /> + + <img id="black" src="support/black20x20.png" width="260" height="20" alt="Image download support must be enabled" /> + + <img id="first-yellow" src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /> + <img id="second-yellow" src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /> + + <img id="first-orange" src="support/swatch-orange.png" width="40" height="40" alt="Image download support must be enabled" /> + <img id="second-orange" src="support/swatch-orange.png" width="40" height="40" alt="Image download support must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-span-none-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-span-none-001.xht new file mode 100644 index 0000000000..a2be00b0cc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-span-none-001.xht @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-span: none (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns" title="6.1. 'column-span'" /> + <link rel="match" href="multicol-span-none-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks how a 'column-span: none' element is rendered: it should not span across all column boxes." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + border: gray solid 1em; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 11em; + + column-count: 2; + column-gap: 1em; + + /* + + N == 2; + + W == 5em; + + */ + } + + h4 + { + background: black; + color: black; + font: inherit; + margin: 0; + width: 11em; + + column-span: none; + } + + #column1-top {color: blue;} + + #column1-bottom {color: orange;} + + #column2-top {color: pink;} + + #column2-bottom {color: yellow;} + ]]></style> + </head> + <body> + <div> + <span id="column1-top"> ab cd ef gh </span> + <h4> 1234567890123 </h4> + <span id="column1-bottom"> ij kl mn oq </span> + <span id="column2-top"> ab cd ef gh </span> + <span id="column2-bottom"> rs tu vw xy </span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-under-vertical-rl-scroll-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-under-vertical-rl-scroll-ref.html new file mode 100644 index 0000000000..1a7cfb6e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-under-vertical-rl-scroll-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Multicol under vertical-rl scrolling container</title> +<p>Passes if there are two green squares</p> +<div id="scroller" style="width: 200px; height: 200px; overflow: scroll; border: 1px solid black"> + <div style="width: 580px; height: 500px; position: relative"> + <div style="position: absolute; right: 0"> + <div style="width: 80px; height: 80px; background: green"></div> + <div style="height: 20px"></div> + <div style="width: 80px; height: 80px; background: green"></div> + </div> + </div> +</div> +<script> +// Scroll all the way to the right. +scroller.scrollLeft = 800; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-under-vertical-rl-scroll.html b/testing/web-platform/tests/css/css-multicol/multicol-under-vertical-rl-scroll.html new file mode 100644 index 0000000000..61754e7d29 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-under-vertical-rl-scroll.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Multicol under vertical-rl scrolling container</title> +<link rel="match" href="multicol-under-vertical-rl-scroll-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-multicol"> +<meta name="assert" content="Test that multicol works as expected when overflow is scrolling in vertical-rl" /> +<p>Passes if there are two green squares</p> +<div style="width: 200px; height: 200px; overflow: scroll; writing-mode: vertical-rl; border: 1px solid black"> + <div style="columns: 2; column-gap: 20px; width: 80px; height: 180px"> + <div style="width: 160px; background: green"></div> + </div> + <div style="width: 500px; height: 500px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-001-ref.xht new file mode 100644 index 0000000000..e13855df5a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-001-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + width: 30em; + background-color: yellow; + color: black; + } + ]]></style> + </head> + <body> + <p>Test passes if it is identical to the reference.</p> + <div>x xx x xx x xx x xx x xx <br /> + + xxx xxx xxx xxx xxx <br /> + + xxxx xxxx xxxx xxxx xxxx <br /> + + xxxxx xxxxx xxxxx xxxxx xxxxx <br /> + + x xx x xx x xx x xx <br /> + + xxx xxx xxx xxx <br /> + + xxxx xxxx xxxx xxxx <br /> + + xxxxx xxxxx xxxxx xxxxx + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-001.xht new file mode 100644 index 0000000000..07140f8e02 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-001.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-number-and-width-of-columns" title="The number and width of columns" /> + <link rel="match" href="multicol-width-001-ref.xht" /> + <meta name="assert" content="Tests that column-width is calculated correctly."/> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + width: 30em; + background-color: yellow; + color: black; + + column-gap: 0; + column-width: 6em; + } + ]]></style> + </head> + <body> + <p>Test passes if it is identical to the reference.</p> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-002-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-002-ref.xht new file mode 100644 index 0000000000..68e10339a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-002-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <p>Test passes if there are two black bars and two blue bars with a yellow stripe to the right of each bar, matching reference.</p> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-002.xht new file mode 100644 index 0000000000..7f016f4837 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-002.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-number-and-width-of-columns" title="The number and width of columns" /> + <link rel="match" href="multicol-width-002-ref.xht" /> + <meta name="assert" content="Tests that column-width is calculated correctly."/> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + width: 12em; + + column-gap: 0; + column-width: 6em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <p>Test passes if there are two black bars and two blue bars with a yellow stripe to the right of each bar, matching reference.</p> + <div> + bl ac bl ac + <span> + bl ue bl ue + </span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-003.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-003.xht new file mode 100644 index 0000000000..8158deafbe --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-003.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model" title="The Multi-column Model" /> + <link rel="match" href="multicol-width-002-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="Test to check that the multicol container and not the column box becomes the containing box"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#multi-column + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + height: 2em; + position: relative; + width: 12em; + column-width: 6em; + column-gap: 0; + } + + div > div + { + background-color: black; + height: 2em; + position: absolute; + top: 0; + width: 2em; + } + + div#s2 {right: 7em;} + + div#s3 + { + background-color: blue; + right: 4em; + } + + div#s4 + { + background-color: blue; + right: 1em; + } + ]]></style> + </head> + <body> + <p>Test passes if there are two black bars and two blue bars with a yellow stripe to the right of each bar, matching reference.</p> + <div id="multi-column"> + <div></div> + <div id="s2"></div> + <div id="s3"></div> + <div id="s4"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-004-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-width-004-ref.html new file mode 100644 index 0000000000..9c4cda036e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-004-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Ref: Test width:min-content for a multi-column container with column-span:all children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + article { + border: 1px solid black; + } + .block { + width: 100px; + background-color: yellow; + } + .spanner { + column-span: all; + background-color: lime; + } + </style> + + <!-- Case 1 --> + <article style="width: 80px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 50px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 2 --> + <article style="width: 150px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 150px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 3 --> + <article style="width: 210px;"> + <div class="block">block1</div> + <div class="spanner">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 4 --> + <article style="width: 250px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 250px;">spanner</div> + <div class="block">block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-004.html b/testing/web-platform/tests/css/css-multicol/multicol-width-004.html new file mode 100644 index 0000000000..230a1d2d29 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-004.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test width:min-content for a multi-column container with column-span:all children</title> + <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-sizing-3/#sizing-properties"> + <link rel="match" href="multicol-width-004-ref.html"> + <meta name="assert" content="This test checks the width:min-content for a multi-column container is calculated correctly."> + + <style> + article { + width: min-content; + border: 1px solid black; + column-gap: 10px; + } + .block { + width: 100px; + background-color: yellow; + } + .spanner { + column-span: all; + background-color: lime; + } + </style> + + <!-- Case 1: column-width is specified, and spanner's width is less than + column-width, so <article>'s expected width is 80px. --> + <article style="column-width: 80px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 50px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 2: like case 1, but spanner's width is larger than column-width. + Thus <article>'s expected width is 150px; --> + <article style="column-width: 80px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 150px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 3: column-count is specified. Thus <article>'s expected width is two + column boxes wide plus the column-gap, i.e. 100px*2 + 10px = 210px. --> + <article style="column-count: 2;"> + <div class="block">block1</div> + <div class="spanner">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 4: like case 3, but the spanner's width is larger. Thus <article>'s + expected width is 250px. --> + <article style="column-count: 2;"> + <div class="block">block1</div> + <div class="spanner" style="width: 250px;">spanner</div> + <div class="block">block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-005-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-width-005-ref.html new file mode 100644 index 0000000000..1ef69a4a99 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-005-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test Ref: Test width:max-content for a multi-column container with column-span:all children</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + + <style> + article { + border: 1px solid black; + } + .block { + width: 100px; + background-color: yellow; + } + .spanner { + column-span: all; + background-color: lime; + } + </style> + + <!-- Case 1 --> + <article style="width: 80px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 50px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 2 --> + <article style="width: 120px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 50px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 3 --> + <article style="width: 150px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 150px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 4 --> + <article style="width: 210px;"> + <div class="block">block1</div> + <div class="spanner">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 4 --> + <article style="width: 230px;"> + <div class="block">block1</div> + <div class="spanner">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 6 --> + <article style="width: 250px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 250px;">spanner</div> + <div class="block">block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-005.html b/testing/web-platform/tests/css/css-multicol/multicol-width-005.html new file mode 100644 index 0000000000..2a87b03e2b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-005.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Multi-column Layout Test: Test width:max-content for a multi-column container with column-span:all children</title> + <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-sizing-3/#sizing-properties"> + <link rel="match" href="multicol-width-005-ref.html"> + <meta name="assert" content="This test checks the width:max-content for a multi-column container is calculated correctly."> + + <style> + article { + width: max-content; + border: 1px solid black; + column-gap: 10px; + } + .block { + width: 100px; + background-color: yellow; + } + .spanner { + column-span: all; + background-color: lime; + } + </style> + + <!-- Case 1: column-width is specified, and "column-count:auto" is considered + one column, so <article>'s expected width is 80px. --> + <article style="column-width: 80px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 50px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 2: column-width is specified, and no other children are wider than + the column-width. Thus <article>'s expected width is 120px. --> + <article style="column-width: 120px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 50px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 3: like case 2, but the spanner's width is larger than column-width. + Thus <article>'s expected width is 150px; --> + <article style="column-width: 120px;"> + <div class="block">block1</div> + <div class="spanner" style="width: 150px;">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 4: column-count is specified. <article>'s expected width is two + column boxes wide plus the column-gap, i.e. 100px*2 + 10px = 210px. --> + <article style="column-count: 2;"> + <div class="block">block1</div> + <div class="spanner">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 5: column-count is specified, and column-width is larger than the + column-box's width. Thus <article>'s expected width is column-width plus + the column-gap, i.e. 110px*2 + 10px = 230px. --> + <article style="column-count: 2; column-width: 110px;"> + <div class="block">block1</div> + <div class="spanner">spanner</div> + <div class="block">block2</div> + </article> + <br> + + <!-- Case 6: like case 4, but the spanner's width is larger. Thus <article>'s + expected width is 250px. --> + <article style="column-count: 2;"> + <div class="block">block1</div> + <div class="spanner" style="width: 250px;">spanner</div> + <div class="block">block2</div> + </article> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-ch-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-ch-001.xht new file mode 100644 index 0000000000..5774d353e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-ch-001.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Multi-column Layout Test: column-width (ch units)</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-number-and-width-of-columns"/> +<link rel="match" href="multicol-width-ch-ref.xht"/> +<meta name="assert" value="Test that the ch unit can be used as a value for column-width."/> +<style type="text/css"><![CDATA[ +.multicol { + font: 1em monospace; + width: 69ch; + column-width: 13ch; + column-gap: 1ch; + background: yellow; +} +]]></style> +</head> + +<body> + <p>Test passes if we have five columns with four lines in each. The final column should contain the words: million, billion, trillion.</p> + <div class="multicol"> + one two three four + five six seven eight + nineten eleven twelve + thirtn fourtnfiftn sixtn + seventn eightn ninetn twenty + hundred thousand million billion + trillion + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-ch-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-ch-ref.xht new file mode 100644 index 0000000000..8adefc11e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-ch-ref.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | column-width</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<style type="text/css"><![CDATA[ +.multicol-ref { + display: flow-root; + width: 69ch; + font: 1em monospace; + background: yellow; +} +.multicol-ref > span { + float: left; + width: 13ch; + margin-right: 1ch; +} +.multicol-ref > span:last-child { + margin: 0; +} +]]></style> +</head> + +<body> + <p>Test passes if we have five columns with four lines in each. The final column should contain the words: million, billion, trillion.</p> + <div class="multicol-ref"> + <span> + one two three four + five six seven eight + </span> + <span> + nineten eleven twelve + thirtn + </span> + <span> + fourtnfiftn sixtn + seventn eightn ninetn + </span> + <span> + twenty + hundred thousand + </span> + <span> + million billion + trillion + </span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-count-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-count-001.xht new file mode 100644 index 0000000000..5cbaba2147 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-count-001.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-count and column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-width-001-ref.xht" /> + <meta name="asset" content="Test that column-count and column-width are valid in combination"/> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + font: 1.25em/1 Ahem; + width: 30em; + background-color: yellow; + color: black; + column-count: 5; + column-gap: 0; + column-width: 5em; + } + ]]></style> + </head> + <body> + <p>Test passes if it is identical to the reference.</p> + <div> + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + x xx xxx xxxx xxxxx + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-count-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-count-002.xht new file mode 100644 index 0000000000..7f56e60445 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-count-002.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-count and column-width (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cc" title="3.2 'column-count'" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + <meta name="asset" content="Test that column-count acts as a max when combined with column-width."/> + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + html {background-color: white;} + + body + { + background-color: black; + font: 1.25em/1 Ahem; + padding-right: 1em; + width: 20em; + } + + div + { + background-color: yellow; + color: black; + column-count: 4; + column-gap: 0; + column-width: 4em; /* would create 5 columns if column-count was not acting as a max */ + } + ]]></style> + </head> + <body> + <div>55555 1 1 22 1 22 1 1 333 1 333 1 333 55555 55555 1 1 22 1 22 1 1 22 1 22 1 22 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 55555 1 1 333 1 333 1 4444 4444 1 55555 + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-invalid-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-invalid-001-ref.xht new file mode 100644 index 0000000000..8664fc3825 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-invalid-001-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 1em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <p>This test passes is it is idential to the reference.</p> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td> + </tr> + + <tr> + <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-invalid-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-invalid-001.xht new file mode 100644 index 0000000000..931d553453 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-invalid-001.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: invalid column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cw" title="3.1. 'column-width'" /> + <link rel="match" href="multicol-width-invalid-001-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that 'column-width: bzzt' is invalid (generating a parsing error) and therefore will be ignored." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + width: 12em; + + column-gap: 0; + column-width: bzzt; /* this value is invalid */ + } + + span {color: blue;} + ]]></style> + </head> + <body> + <p>This test passes is it is idential to the reference.</p> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-large-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-large-001.xht new file mode 100644 index 0000000000..c34b8b4bcf --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-large-001.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: large column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cw" title="3.1. 'column-width'" /> + <link rel="match" href="multicol-width-invalid-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a set 'column-width' may be wider (to fill the available space). In this test, the actual column-width will be increased to 12em." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + width: 12em; + + column-gap: 0; + column-width: 9em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <p>This test passes is it is idential to the reference.</p> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-large-002.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-large-002.xht new file mode 100644 index 0000000000..bec00cc2dd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-large-002.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: large column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cw" title="3.1. 'column-width'" /> + <link rel="match" href="multicol-width-invalid-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a set 'column-width' equal in width to the whole available space of the multi-column will use it all for its column box." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + width: 12em; + + column-gap: 0; + column-width: 12em; + } + + span {color: blue;} + ]]></style> + </head> + <body> + <p>This test passes is it is idential to the reference.</p> + <div> + bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + bl ac + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-negative-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-negative-001.xht new file mode 100644 index 0000000000..ea0ed9ab76 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-negative-001.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: negative column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cw" title="3.1. 'column-width'" /> + <link rel="match" href="multicol-count-002-ref.xht" /> + <meta name="flags" content="ahem invalid" /> + <meta name="assert" content="This test checks that a set 'column-width' can not be negative." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: black; + border: black solid 1em; + color: yellow; + font: 1.25em/1 Ahem; + width: 19em; + + column-width: -100px; + column-gap: 0; + } + ]]></style> + </head> + <body> + <div>4444 4444 4444 4444 1 1 1 1 1 1 1 1 1 1 1 1 4444 4444 4444 4444 1 1 1 1 1 1 1 1 1 1 1 1 1 4444 4444</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-small-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-small-001-ref.xht new file mode 100644 index 0000000000..a862607a6b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-small-001-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + table + { + background-color: yellow; + border-spacing: 0px; + border: gray solid 1em; + font: 1.25em/1 serif; + } + + td {padding: 0 4em 0 0;} + + img, td {vertical-align: top;} + ]]></style> + </head> + <body> + <p>This test passes is it is idential to the reference.</p> + <table> + <tr> + <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td> + </tr> + </table> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/multicol-width-small-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-width-small-001.xht new file mode 100644 index 0000000000..c786be09ec --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-width-small-001.xht @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: narrow column-width</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" /> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. 'column-width'" /> + <link rel="match" href="multicol-width-small-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that a set 'column-width' which is small with regards to width of multi-column element." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + body > div + { + background-color: yellow; + border: gray solid 1em; + color: black; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + width: 12em; + + column-gap: 0; + column-width: 1em; + } + div > div { overflow: clip; } + + span {color: blue;} + ]]></style> + </head> + <body> + <p>This test passes is it is idential to the reference.</p> + <div> + <div> + Bl ac + <span> + bl ue + </span> + <span> + bl ue + </span> + Bl ac + </div> + </div> + + <!-- + + Expected results + + ************************* + *B|a|b|u|b|u|B|a| | | | * + ************************* + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-zero-height-001-ref.xht b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-001-ref.xht new file mode 100644 index 0000000000..389ff0ad8d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-001-ref.xht @@ -0,0 +1,11 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + </head> + <body> + <div style="width:200px; height:1px; background-color:lime;"/> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-zero-height-001.xht b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-001.xht new file mode 100644 index 0000000000..57bfca96e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-001.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: multi-column element with zero height</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. 'column-width'" /> + <link rel="help" href="https://www.w3.org/TR/css-break-3/#breaking-rules" title="4. Rules for Breaking" /> + <link rel="match" href="multicol-zero-height-001-ref.xht" /> + <style type="text/css"><![CDATA[ + div#multi-column + { + height: 0; + orphans: 1; + widows: 1; + width: 200px; + border-bottom:1px solid red; + + column-count: 10; + column-gap: 0; + } + + div > div + { + background-color: lime; + float: left; + height: 10px; + width: 100%; + } + ]]></style> + </head> + <body> + <div id="multi-column"> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-zero-height-002-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-002-ref.html new file mode 100644 index 0000000000..b5dd9c44b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-002-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Reference: Test an unbreakble block element in a zero height multi-column container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +.child { + font: 100px/1 Ahem; + color: green; + inline-size: 100px; + outline: 3px solid green; +} +</style> + +<p>There shouldn't be a green strip in the second column.</p> +<div class="child">X</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-zero-height-002.html b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-002.html new file mode 100644 index 0000000000..c5f432d9ae --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-002.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Test: Test an unbreakble block element in a zero height multi-column container</title> +<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://bugzilla.mozilla.org/show_bug.cgi?id=1754598"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="multicol-zero-height-002-ref.html"> +<meta name="assert" content="This test verifies that the unbreakable block element with definite block-size doesn't ask for an extra continuation in the second column."> + +<style> +.multicol { + column-width: 100px; + inline-size: 300px; + block-size: 0; +} + +.child { + font: 100px/1 Ahem; + color: green; + inline-size: 100px; + block-size: 100px; /* The define block-size is required to reproduce the bug.*/ + outline: 3px solid green; +} +</style> + +<p>There shouldn't be a green strip in the second column.</p> +<div class="multicol"> + <div class="child">X</div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-zero-height-003-ref.html b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-003-ref.html new file mode 100644 index 0000000000..ac3dcf046d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-003-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Reference: Test a block element with box-decoration-break:clone in a zero height multi-column container</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + +<style> +.multicol { + column-width: 100px; + inline-size: 300px; + block-size: 30px; +} + +.child { + color: green; + inline-size: 100px; + block-size: 1px; + border: 5px solid green; +} +</style> + +<p>There shouldn't be a green strip in the third column.</p> +<div class="multicol"> + <div class="child"></div><div class="child"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/multicol-zero-height-003.html b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-003.html new file mode 100644 index 0000000000..d685d49bf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/multicol-zero-height-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Multi-column Test: Test a block element with box-decoration-break:clone in a zero height multi-column container</title> +<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-break/#breaking-rules"> +<link rel="help" href="https://drafts.csswg.org/css-break/#break-decoration"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1693616"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1754598"> +<link rel="match" href="multicol-zero-height-003-ref.html"> +<meta name="assert" content="This test verifies that a block element with box-decoration-break:clone can make progress when fragmenting in a zero height multi-column container. Also, it should expend 1px of its content-box per fragment, and therefore should only need to create 2 fragments."> + +<style> +.multicol { + column-width: 100px; + inline-size: 300px; + block-size: 0; +} + +.child { + color: green; + inline-size: 100px; + block-size: 2px; + border: 5px solid green; + box-decoration-break: clone; +} +</style> + +<!-- WARNING: This test hangs Firefox version < 99 without the fix in bug 1754598. --> + +<p>There shouldn't be a green strip in the third column.</p> +<div class="multicol"> + <div class="child"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/named-page.html b/testing/web-platform/tests/css/css-multicol/named-page.html new file mode 100644 index 0000000000..c8b486f280 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/named-page.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1100308"> +<meta name="assert" content="The 'page' property should only have an effect if we're paginated, i.e. not inside multicol containers (unless we're also paginated)"> +<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:1; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="page:bogus; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-after-float-clearance.html b/testing/web-platform/tests/css/css-multicol/nested-after-float-clearance.html new file mode 100644 index 0000000000..78ae2b23b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-after-float-clearance.html @@ -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/#the-multi-column-model"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#propdef-clear"> +<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:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="float:left; width:100%; height:200px; background:green;"></div> + <div style="clear:left; columns:2; column-fill:auto; height:200px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-fieldset.html b/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-fieldset.html new file mode 100644 index 0000000000..2c64b59a77 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-fieldset.html @@ -0,0 +1,11 @@ +<!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="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="margin-left:-100px; columns:2; height:100px; width:200px; column-gap:0; column-fill:auto; background:red;"> + <div style="height:100px; background:white;"></div> + <fieldset style="columns:2; column-gap:0; border:none; margin:0; padding:0; background:red;"> + <div style="height:200px; background:green;"></div> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-float.html b/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-float.html new file mode 100644 index 0000000000..940d394080 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-float.html @@ -0,0 +1,11 @@ +<!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="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="margin-left:-100px; columns:2; height:200px; width:200px; column-gap:0; column-fill:auto;"> + <div style="height:200px;"></div> + <div style="float:left; columns:2; width:100%; column-gap:0; background:red;"> + <div style="height:200px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-legend.html b/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-legend.html new file mode 100644 index 0000000000..8bf04490f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-at-outer-boundary-as-legend.html @@ -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="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="margin-left:-100px; columns:2; height:100px; width:200px; column-gap:0; column-fill:auto; background:red;"> + <div style="height:100px; background:white;"></div> + <fieldset style="border:none; margin:0; padding:0; background:red;"> + <legend style="columns:2; column-gap:0; margin:0; padding:0; width:100%;"> + <div style="height:200px; background:green;"></div> + </legend> + </fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-balanced-monolithic-multicol-crash.html b/testing/web-platform/tests/css/css-multicol/nested-balanced-monolithic-multicol-crash.html new file mode 100644 index 0000000000..082bf70691 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-balanced-monolithic-multicol-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1281049"> +<div style="columns:2;"> + <div style="columns:3; height:300px; contain:size;"> + <div style="height:400px;"></div> + <div style="height:307px; contain:size;"></div> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-balanced-very-tall-content-crash.html b/testing/web-platform/tests/css/css-multicol/nested-balanced-very-tall-content-crash.html new file mode 100644 index 0000000000..00b1bf2c42 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-balanced-very-tall-content-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289800"> +<div style="columns:1; column-fill:auto; height:12000000px;"> + <span style="vertical-align:1234567890px;"> + <div style="columns:1;"> + <div style="height:100px;"></div> + <div style="height:1234567890px;"></div> + </div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-floated-multicol-with-monolithic-child.html b/testing/web-platform/tests/css/css-multicol/nested-floated-multicol-with-monolithic-child.html new file mode 100644 index 0000000000..48eb633e01 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-floated-multicol-with-monolithic-child.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1280624"> +<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="position:absolute; width:100px; height:10px; background:green;"></div> +<div style="columns:1; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="margin-top:10px; float:right; columns:1; column-fill:auto; width:100%; background:red;"> + <div style="height:100px; contain:size;"> + <div style="height:90px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-floated-shape-outside-multicol-with-monolithic-child-crash.html b/testing/web-platform/tests/css/css-multicol/nested-floated-shape-outside-multicol-with-monolithic-child-crash.html new file mode 100644 index 0000000000..d618035265 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-floated-shape-outside-multicol-with-monolithic-child-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278880"> +<div style="columns:2; column-fill:auto; height:100px;"> + <div style="height:50px;"></div> + <div style="shape-outside:margin-box circle(10px); float:right; columns:2; column-fill:auto; width:100%;"> + <div style="contain:size; height:80px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-non-auto-inline-size-offset-top.html b/testing/web-platform/tests/css/css-multicol/nested-non-auto-inline-size-offset-top.html new file mode 100644 index 0000000000..ff2935dbbd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-non-auto-inline-size-offset-top.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1349884"> +<div style="position:relative; columns:2; gap:0; width:600px; column-fill:auto; height:100px;"> + <div style="height:70px; contain:size;"></div> + <div style="width:40px; column-width:20px; gap:0; column-fill:auto;"> + <div style="height:20px;"></div> + <div id="secondouter" style="height:50px; contain:size;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(secondouter.offsetTop, 0); + }, "offsetTop on element in second outer column"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/nested-oofs-in-relative-multicol.html b/testing/web-platform/tests/css/css-multicol/nested-oofs-in-relative-multicol.html new file mode 100644 index 0000000000..2130e72e6f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-oofs-in-relative-multicol.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="match" href="reference/nested-oofs-in-relative-multicol-ref.html"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#propdef-column-count"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +.outer { + position: relative; + margin-left: 100px; + width: 400px; + height: 400px; + column-count: 2; + overflow: hidden; + background: yellow; +} +.cb { + position: absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background: red; +} +.img { + position: absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background: green; +} +</style> +<body> + <div class="outer"> + <div class="cb"> + <div class="img"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/nested-past-fragmentation-line.html b/testing/web-platform/tests/css/css-multicol/nested-past-fragmentation-line.html new file mode 100644 index 0000000000..77f91f4a23 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-past-fragmentation-line.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<ling rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1287411"> +<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:150px; contain:size;"> + <div style="height:100px; background:green;"></div> + </div> + <div style="columns:2; column-gap:0; column-fill:auto; border-top:5px solid green; height:95px;"> + <div style="height:190px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-with-overflowing-padding-crash.html b/testing/web-platform/tests/css/css-multicol/nested-with-overflowing-padding-crash.html new file mode 100644 index 0000000000..de29a71374 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-with-overflowing-padding-crash.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278310"> +<div style="columns:2; column-fill:auto; height:8px;"> + <div style="columns:2; column-fill:auto; height:0; padding-top:10px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-with-padding-and-spanner.html b/testing/web-platform/tests/css/css-multicol/nested-with-padding-and-spanner.html new file mode 100644 index 0000000000..bea27a9578 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-with-padding-and-spanner.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1006249"> +<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-fill:auto; width:500px; height:500px; margin-top:-1px;"> + <div style="columns:2; column-fill:auto; height:400px; padding-top:1px;"> + <div></div> + <div style="width:100px; column-span:all; background:red;"> + <div style="height:50px; break-inside:avoid; background:green;"></div> + <div style="height:50px; break-inside:avoid; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-with-too-tall-line-ref.html b/testing/web-platform/tests/css/css-multicol/nested-with-too-tall-line-ref.html new file mode 100644 index 0000000000..16be12ca91 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-with-too-tall-line-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below, and there should be no red.</p> +<div style="line-height:200px;"> + PASS +</div> diff --git a/testing/web-platform/tests/css/css-multicol/nested-with-too-tall-line.html b/testing/web-platform/tests/css/css-multicol/nested-with-too-tall-line.html new file mode 100644 index 0000000000..67a289ca55 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/nested-with-too-tall-line.html @@ -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://drafts.csswg.org/css-break/#unforced-breaks"> +<link rel="match" href="nested-with-too-tall-line-ref.html"> +<style> + .multicol { columns:2; column-fill:auto; } +</style> +<p>The word "PASS" should be seen below, and there should be no red.</p> +<div class="multicol" style="width:100px; height:100px; line-height:200px;"> + <div class="multicol" style="height:200px; column-rule:solid red;"> + PASS + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/no-balancing-after-column-span.html b/testing/web-platform/tests/css/css-multicol/no-balancing-after-column-span.html new file mode 100644 index 0000000000..8c05ffdd27 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/no-balancing-after-column-span.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <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://github.com/w3c/csswg-drafts/issues/4689"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <meta name="assert" content="This test verifies columns are not balancing after a column-spanning element in a fixed height and column-fill:auto column container."> + + <style> + .columns { + column-fill: auto; + column-count: 2; + column-gap: 0; + width: 200px; + height: 100px; + } + .colspan { + column-span: all; + } + .content { + height: 100px; + background: green; + } + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="columns"> + <div class="colspan"></div> + <div class="content"></div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/non-adjacent-spanners-000.html b/testing/web-platform/tests/css/css-multicol/non-adjacent-spanners-000.html new file mode 100644 index 0000000000..7e6ec67e29 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/non-adjacent-spanners-000.html @@ -0,0 +1,11 @@ +<!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-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; background:green;"> + <div style="height:80px;"> + <div style="column-span:all; height:10px; margin-bottom:20px;"></div> + </div> + <div style="column-span:all; height:10px; margin-top:20px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/non-adjacent-spanners-001.html b/testing/web-platform/tests/css/css-multicol/non-adjacent-spanners-001.html new file mode 100644 index 0000000000..5371f2acc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/non-adjacent-spanners-001.html @@ -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="columns:2; column-gap:0; width:100px; background:red;"> + <div style="height:200px; background:green;"> + <div style="column-span:all;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/oof-nested-in-single-column.html b/testing/web-platform/tests/css/css-multicol/oof-nested-in-single-column.html new file mode 100644 index 0000000000..d888a0692f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/oof-nested-in-single-column.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1329877"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1329424"> +<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="column-count:1; column-fill:auto;"> + <div style="width:100px; height:50px; background:green;"></div> + <div> + <div style="position:relative; width:100px; height:50px; background:red;"> + <div style="width:100px; height:50px; position:absolute; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/orthogonal-writing-mode-shrink-to-fit.html b/testing/web-platform/tests/css/css-multicol/orthogonal-writing-mode-shrink-to-fit.html new file mode 100644 index 0000000000..b087f56ac6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/orthogonal-writing-mode-shrink-to-fit.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Orthogonal writing mode root inside shrink-to-fit multicol container</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="4.1. Intrinsic Sizes"> +<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="float:left; columns:1; column-gap:0; height:100px; background:green;"> + <div style="writing-mode:vertical-rl;"> + <div style="width:100px; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/orthogonal-writing-mode-spanner.html b/testing/web-platform/tests/css/css-multicol/orthogonal-writing-mode-spanner.html new file mode 100644 index 0000000000..a0f175141d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/orthogonal-writing-mode-spanner.html @@ -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/#spanning-columns"> +<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows"> +<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:4; column-gap:0;"> + <div style="writing-mode:vertical-rl; column-span:all; background:green;"> + <div style="width:100px; height:50px;"></div> + </div> + <div style="height:200px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/overflow-scroll-in-multicol-crash.html b/testing/web-platform/tests/css/css-multicol/overflow-scroll-in-multicol-crash.html new file mode 100644 index 0000000000..ed1f5b6da9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/overflow-scroll-in-multicol-crash.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1240384"> +<style> + #multicol { + column-count: 2; + column-fill: auto; + column-gap: 5px; + width: 200px; + height: 100px; + } + #container { + position: relative; + box-sizing: border-box; + width: 100px; + overflow: scroll; + } +</style> +<p>PASS if no crash.</p> +<div id="multicol"> + <div id="container"> + <div style="width: 100px; height: 200px;"></div> + <div style="height: 100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-001-ref.html b/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-001-ref.html new file mode 100644 index 0000000000..d245912be8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="overflow:scroll; width:50px; background:green;"> + <div style="height:200px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-001.html b/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-001.html new file mode 100644 index 0000000000..2baaaaedf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title> + Test that a scrollable container isn't split across multiple columns. +</title> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="overflow-unsplittable-001-ref.html"> +<div style="columns:2; column-gap:0; width:100px; height:100px;"> + <div style="overflow:scroll; width:50px; background:green;"> + <div style="height:200px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-002.html b/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-002.html new file mode 100644 index 0000000000..d8fafafe2c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-002.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title> + Test that a scrollable container isn't split across multiple columns. +</title> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-gap:0; width:200px; height:50px;"> + <div style="overflow:auto; width:100px; background:green;"> + <div style="height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-003.html b/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-003.html new file mode 100644 index 0000000000..af9c722868 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/overflow-unsplittable-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title> + Test that a scrollable container isn't split across multiple columns. +</title> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="columns:2; column-gap:0; width:200px; height:50px;"> + <div style="overflow:hidden; width:100px; background:green;"> + <div style="height:100px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/page-property-ignored.html b/testing/web-platform/tests/css/css-multicol/page-property-ignored.html new file mode 100644 index 0000000000..7e77b846d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/page-property-ignored.html @@ -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-page-3/#using-named-pages"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'page' property affects breaking, but only for pagination, and not for multicol. Test that it has no effect inside multicol."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; background:red;"> + <div style="columns:3; column-fill:auto; gap:0; width:300px; height:100px;"> + <div style="height:50px; background:green;"></div> + <div style="page:foo; height:25px; background:green;"></div> + <div style="page:bar; height:25px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-count-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-count-computed.html new file mode 100644 index 0000000000..702632d2dd --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-count-computed.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: getComputedStyle().columnCount</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count"> +<meta name="assert" content="column-count computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("column-count", "auto"); + +test_computed_value("column-count", "1"); +test_computed_value("column-count", "234"); +test_computed_value("column-count", "calc(1 + 234)", "235"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-count-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-count-invalid.html new file mode 100644 index 0000000000..4d76cdd85a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-count-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-count with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count"> +<meta name="assert" content="column-count supports only the grammar 'auto | <integer>'."> +<meta name="assert" content="column-count rejects non-positive integers."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-count", "none"); +test_invalid_value("column-count", "2.5"); +test_invalid_value("column-count", "-1"); +test_invalid_value("column-count", "0"); + +test_invalid_value("column-count", "auto 1"); +test_invalid_value("column-count", "1 234"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-count-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-count-valid.html new file mode 100644 index 0000000000..f1d00e75d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-count-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-count with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-count"> +<meta name="assert" content="column-count supports the full grammar 'auto | <integer>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-count", "auto"); + +test_valid_value("column-count", "1"); +test_valid_value("column-count", "234"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-fill-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-computed.html new file mode 100644 index 0000000000..6a27f105c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: getComputedStyle().columnFill</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill"> +<meta name="assert" content="column-fill computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("column-fill", "auto"); +test_computed_value("column-fill", "balance"); +test_computed_value("column-fill", "balance-all"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-fill-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-invalid.html new file mode 100644 index 0000000000..f055e9958b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-fill with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill"> +<meta name="assert" content="column-fill supports only the grammar 'auto | balance | balance-all'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-fill", "none"); +test_invalid_value("column-fill", "auto balance"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-fill-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-valid.html new file mode 100644 index 0000000000..ad5913d0bc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-fill-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-fill with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-fill"> +<meta name="assert" content="column-fill supports the full grammar 'auto | balance | balance-all'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-fill", "auto"); +test_valid_value("column-fill", "balance"); +test_valid_value("column-fill", "balance-all"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-computed.html new file mode 100644 index 0000000000..d5cc240751 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-computed.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: getComputedStyle().columnRuleColor</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color"> +<meta name="assert" content="column-rule-color computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + color: lime; + } +</style> +<script> +test_computed_value("column-rule-color", "currentcolor", "rgb(0, 255, 0)"); + +test_computed_value("column-rule-color", "red", "rgb(255, 0, 0)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-invalid.html new file mode 100644 index 0000000000..015defb756 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-rule-color with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color"> +<meta name="assert" content="column-rule-color supports only the grammar '<color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-rule-color", "auto"); + +test_invalid_value("column-rule-color", "green blue"); +test_invalid_value("column-rule-color", "green, blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-valid.html new file mode 100644 index 0000000000..99ad7adbdc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-color-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-rule-color with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color"> +<meta name="assert" content="column-rule-color supports the full grammar '<color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-rule-color", "currentcolor"); + +test_valid_value("column-rule-color", "red"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-computed.html new file mode 100644 index 0000000000..96ba734d89 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-computed.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: getComputedStyle().columnRule</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule"> +<meta name="assert" content="column-rule computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #reference { + column-rule-style: dotted; /* Avoid column-rule-width computed style 0px */ + column-rule-width: medium; + } + #target { + color: lime; + } +</style> +</head> +<body> +<div id="reference"></div> +<div id="target"></div> +<script> +const currentColor = 'rgb(0, 255, 0)'; +const mediumWidth = getComputedStyle(document.getElementById('reference')).columnRuleWidth; // e.g. 3px + +test_computed_value("column-rule", "10px", "0px none " + currentColor); +test_computed_value("column-rule", "dotted", mediumWidth + " dotted " + currentColor); +test_computed_value("column-rule", "0px none rgb(255, 0, 255)"); +test_computed_value("column-rule", "10px dotted rgb(255, 0, 255)"); + +test_computed_value("column-rule", "medium hidden currentcolor", "0px hidden " + currentColor); +test_computed_value("column-rule", "medium solid currentcolor", mediumWidth + " solid " + currentColor); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-invalid.html new file mode 100644 index 0000000000..e9945ec774 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-rule with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule"> +<meta name="assert" content="column-rule supports only the grammar '<column-rule-width> || <column-rule-style> || <column-rule-color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-rule", "reverse"); +test_invalid_value("column-rule", "10"); + +test_invalid_value("column-rule", "red medium green"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-shorthand.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-shorthand.html new file mode 100644 index 0000000000..68e7582fcc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-shorthand.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: column-rule sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule"> +<meta name="assert" content="column-rule supports the full grammar '<column-rule-width> || <column-rule-style> || <column-rule-color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('column-rule', 'medium dotted green', { + 'column-rule-width': 'medium', + 'column-rule-style': 'dotted', + 'column-rule-color': 'green' +}); + +test_shorthand_value('column-rule', '100px', { + 'column-rule-width': '100px', + 'column-rule-style': 'none', + 'column-rule-color': 'currentcolor' +}); + +test_shorthand_value('column-rule', 'blue', { + 'column-rule-width': 'medium', + 'column-rule-style': 'none', + 'column-rule-color': 'blue' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-computed.html new file mode 100644 index 0000000000..277750ef36 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: getComputedStyle().columnRuleStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style"> +<meta name="assert" content="column-rule-style computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("column-rule-style", "none"); +test_computed_value("column-rule-style", "hidden"); +test_computed_value("column-rule-style", "dotted"); +test_computed_value("column-rule-style", "dashed"); +test_computed_value("column-rule-style", "solid"); +test_computed_value("column-rule-style", "double"); +test_computed_value("column-rule-style", "groove"); +test_computed_value("column-rule-style", "ridge"); +test_computed_value("column-rule-style", "inset"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-invalid.html new file mode 100644 index 0000000000..db367c273f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-rule-style with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style"> +<meta name="assert" content="column-rule-style supports only the <line-style> grammar 'none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-rule-style", "auto"); +test_invalid_value("column-rule-style", "double dashed"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-valid.html new file mode 100644 index 0000000000..6f79c0a168 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-style-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-rule-style with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style"> +<meta name="assert" content="column-rule-style supports the full <line-style> grammar 'none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-rule-style", "none"); +test_valid_value("column-rule-style", "hidden"); +test_valid_value("column-rule-style", "dotted"); +test_valid_value("column-rule-style", "dashed"); +test_valid_value("column-rule-style", "solid"); +test_valid_value("column-rule-style", "double"); +test_valid_value("column-rule-style", "groove"); +test_valid_value("column-rule-style", "ridge"); +test_valid_value("column-rule-style", "inset"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html new file mode 100644 index 0000000000..473d8f075c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-rule with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule"> +<meta name="assert" content="column-rule supports the full grammar '<column-rule-width> || <column-rule-style> || <column-rule-color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-rule", "10px"); +test_valid_value("column-rule", "dotted"); +test_valid_value("column-rule", "red"); + +test_valid_value("column-rule", "currentcolor hidden medium", "medium hidden currentcolor"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-computed.html new file mode 100644 index 0000000000..3061f59e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-computed.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: getComputedStyle().columnRuleWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width"> +<meta name="assert" content="column-rule-width computed value is absolute length."> +<meta name="assert" content="column-rule-width computed value is 0 if the column rule style is none or hidden."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + column-rule-style: dotted; + } +</style> +<script> +test_computed_value("column-rule-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("column-rule-width", "calc(10px - 0.5em)", "0px"); + +// thin, medium, thick computed values not yet tested + +test(() => { + target.style.columnRuleWidth = '10px'; + assert_equals(getComputedStyle(target).columnRuleWidth, '10px'); + + target.style.columnRuleStyle = 'none'; + assert_equals(getComputedStyle(target).columnRuleWidth, '0px'); + + target.style.columnRuleStyle = 'outset'; + assert_equals(getComputedStyle(target).columnRuleWidth, '10px'); + + target.style.columnRuleStyle = 'hidden'; + assert_equals(getComputedStyle(target).columnRuleWidth, '0px'); + + target.style.columnRuleStyle = ''; +}, 'column-rule-width is 0 when column-rule-style is none or hidden'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-invalid.html new file mode 100644 index 0000000000..0bdbbecb8c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-rule-width with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width"> +<meta name="assert" content="column-rule-width supports only the <line-width> grammar '<length> | thin | medium | thick'."> +<meta name="assert" content="column-rule-width rejects negative lengths."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-rule-width", "auto"); + +test_invalid_value("column-rule-width", "10"); +test_invalid_value("column-rule-width", "-20px"); +test_invalid_value("column-rule-width", "30%"); + +test_invalid_value("column-rule-width", "medium 40px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-valid.html new file mode 100644 index 0000000000..1be37fc757 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-rule-width-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-rule-width with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width"> +<meta name="assert" content="column-rule-width supports the full <line-width> grammar '<length> | thin | medium | thick'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-rule-width", "thin"); +test_valid_value("column-rule-width", "medium"); +test_valid_value("column-rule-width", "thick"); + +test_valid_value("column-rule-width", "0", "0px"); +test_valid_value("column-rule-width", "10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-span-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-span-computed.html new file mode 100644 index 0000000000..3b6bcf15cc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-span-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: getComputedStyle().columnSpan</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span"> +<meta name="assert" content="column-span computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("column-span", "none"); +test_computed_value("column-span", "all"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-span-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-span-invalid.html new file mode 100644 index 0000000000..c412922f05 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-span-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-span with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span"> +<meta name="assert" content="column-span supports only the grammar 'none | all'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-span", "auto"); +test_invalid_value("column-span", "none all"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-span-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-span-valid.html new file mode 100644 index 0000000000..005b8c31b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-span-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-span with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-span"> +<meta name="assert" content="column-span supports the full grammar 'none | all'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-span", "none"); +test_valid_value("column-span", "all"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-width-computed.html b/testing/web-platform/tests/css/css-multicol/parsing/column-width-computed.html new file mode 100644 index 0000000000..328d47f8a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-width-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: getComputedStyle().columnWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width"> +<meta name="assert" content="column-width computed value is the keyword auto or an absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("column-width", "auto"); + +test_computed_value("column-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("column-width", "calc(10px - 0.5em)", "0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-width-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-width-invalid.html new file mode 100644 index 0000000000..207a78e8cc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-width-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-width with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width"> +<meta name="assert" content="column-width supports only the grammar 'auto | <length>'."> +<meta name="assert" content="column-width rejects negative lengths."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("column-width", "none"); +test_invalid_value("column-width", "10"); +test_invalid_value("column-width", "-20px"); +test_invalid_value("column-width", "30%"); + +test_invalid_value("column-width", "auto 40px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/column-width-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/column-width-valid.html new file mode 100644 index 0000000000..e35a6ebf32 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/column-width-valid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing column-width with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-column-width"> +<meta name="assert" content="column-width supports the full grammar 'auto | <length>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("column-width", "auto"); + +test_valid_value("column-width", "0", "0px"); +test_valid_value("column-width", "10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html b/testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html new file mode 100644 index 0000000000..dc9b27bf37 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/columns-invalid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing columns with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns"> +<meta name="assert" content="columns supports only the grammar '<column-width> || <column-count>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Invalid keyword. +test_invalid_value("columns", "none"); + +// Only column-count can be unitless. +test_invalid_value("columns", "10px 20px"); +test_invalid_value("columns", "10 20"); + +// column-count needs to be 1 or more. +test_invalid_value("columns", "0 0"); +test_invalid_value("columns", "0 7px"); + +// Excess keywords. +test_invalid_value("columns", "auto auto auto"); +test_invalid_value("columns", "10em auto auto"); +test_invalid_value("columns", "initial initial"); +test_invalid_value("columns", "inherit inherit"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html b/testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html new file mode 100644 index 0000000000..7b643e2d9a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/parsing/columns-valid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Multi-column Layout: parsing columns with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns"> +<meta name="assert" content="columns supports the full grammar '<column-width> || <column-count>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("columns", "auto 3", "3"); +test_valid_value("columns", "auto 10em", "10em"); +test_valid_value("columns", "3 auto", "3"); +test_valid_value("columns", "10em auto", "10em"); +test_valid_value("columns", "2 10px", "10px 2"); +test_valid_value("columns", "10px 2"); +test_valid_value("columns", "auto"); +test_valid_value("columns", "auto auto", "auto"); +test_valid_value("columns", "7"); +test_valid_value("columns", "7em"); + +// Unitless zero is allowed for column-width. +test_valid_value("columns", "0 1", "0px 1"); +test_valid_value("columns", "1 0", "0px 1"); +test_valid_value("columns", "0px 1"); + +// CSS-wide keywords. +test_valid_value("columns", "initial"); +test_valid_value("columns", "inherit"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/reference/column-fill-balance-orthog-block-001-ref.html b/testing/web-platform/tests/css/css-multicol/reference/column-fill-balance-orthog-block-001-ref.html new file mode 100644 index 0000000000..64e0af246d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/reference/column-fill-balance-orthog-block-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#outer + { + background-color: yellow; + height: 250px; + } + + div#inner + { + background-color: lime; + font-size: 50px; + line-height: 1.2; + writing-mode: vertical-rl; + } + </style> + + <p>Test passes if the word "TEXT" is unbroken and rotated 90 degrees clock-wise. + + <div id="outer"> + <div id="inner">TEXT</div> + </div> diff --git a/testing/web-platform/tests/css/css-multicol/reference/multicol-basic-005-ref.xht b/testing/web-platform/tests/css/css-multicol/reference/multicol-basic-005-ref.xht new file mode 100644 index 0000000000..a46863c62f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/reference/multicol-basic-005-ref.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicol-000</title> +<link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com"/> +<style type="text/css"> +div { + margin: 1em auto; + background: yellow; + border: thin solid black; + width: 600px; + columns: 3; + column-gap: 0; + column-rule: none; +} +</style> +</head> +<body> +<div>This multicol element should have a width of 600 pixels and the content should be flowed into three columns with no gap or rule between them.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/reference/multicol-basic-ref.html b/testing/web-platform/tests/css/css-multicol/reference/multicol-basic-ref.html new file mode 100644 index 0000000000..33b4469428 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/reference/multicol-basic-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Test reference</title> + <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> + <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> + <meta name="flags" content="ahem"/> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .multicol-wrapper>*{ + font: 20px/1 Ahem; + } + + div.multicol-wrapper{ + border: thin solid black; + display: inline-block; + margin: 1em auto; + width: 360px; + } + + .multicol-basic-ref{ + background: yellow; + width: 360px; + border-spacing: 0; + border-collapse: collapse; + padding: 0; + } + + .multicol-basic-ref td{ + padding: 0; + } + .multicol-basic-ref-item{ + padding: 0; + width: 120px; + background: #000; + border-spacing: 0; + border-collapse: collapse; + display: inline; + border: none; + } + + .item-1{ + background: purple; + color: purple; + } + + .item-2{ + background: orange; + color: orange; + } + + .item-3{ + background: blue; + color: blue; + } + </style> +</head> +<body> +<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> +<div class="multicol-wrapper"> + <table class="multicol-basic-ref"> + <tr> + <td><div class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td> + <td><div class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td> + <td><div class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td> + </tr> + </table> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/reference/multicol-clip-scrolled-content-001-ref.html b/testing/web-platform/tests/css/css-multicol/reference/multicol-clip-scrolled-content-001-ref.html new file mode 100644 index 0000000000..d19ec1b93a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/reference/multicol-clip-scrolled-content-001-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Test: Multi-column element with scrolled content clipping (reference)</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> +<style> +#columns { + column-width: 350px; +} +.spacer { + height: 200px; + width: 10px; +} +#outer { + border: 1px solid black; + overflow: scroll; + height: 300px; + width: 300px; +} +.inner { + overflow: scroll; + visibility: hidden; +} +.clipped_target { + width: 50px; + height: 50px; +} +</style> + +<div class=spacer></div> +<div id=columns> +<div class=spacer></div> +<div id=outer> + <div class=inner> + <pre class=clipped_target> + scrollable + content + goes + here + </pre> + </div> + <div class=spacer></div> + <div class=spacer></div> +</div> +</div> + +<script> +window.onload = () => { outer.scrollTop = 100; }; +</script> +</html> + diff --git a/testing/web-platform/tests/css/css-multicol/reference/nested-oofs-in-relative-multicol-ref.html b/testing/web-platform/tests/css/css-multicol/reference/nested-oofs-in-relative-multicol-ref.html new file mode 100644 index 0000000000..01956bf492 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/reference/nested-oofs-in-relative-multicol-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.outer { + position: relative; + margin-left: 100px; + width: 400px; + height: 400px; + background: green; +} +</style> +<body> + <div class="outer"></div> +</body> diff --git a/testing/web-platform/tests/css/css-multicol/reference/subpixel-column-rule-width-ref.tentative.html b/testing/web-platform/tests/css/css-multicol/reference/subpixel-column-rule-width-ref.tentative.html new file mode 100644 index 0000000000..47300675fb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/reference/subpixel-column-rule-width-ref.tentative.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html> + +<head> + <title> + CSS Column-Rule: width computed value + </title> + + <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> + + <style> + .columns { + column-count: 2; + column-rule: 1px solid gray; + width: 420px; + height: 50px; + } + </style> +</head> + +<body> + <h1> + Test passes if column rule widths are rounded up + when they are greater than 0 and less than 1, + and rounded down when they are greater than 1. + </h1> + + <div class="columns"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 3px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 3px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 3px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-column-gap-ref.html b/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-column-gap-ref.html new file mode 100644 index 0000000000..02a5ec0f43 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-column-gap-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>Relative child can overflow onto the column gap area</title> +<style> +body { + margin: 0px; +} + +.child { + width: 100px; + height: 50px; + background: green; +} + +.child2 { + width: 100px; + height: 50px; + background: green; + position: absolute; + left: 125px; + top: 0px; +} +</style> +<div class="child"></div> +<div class="child2"></div> diff --git a/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-column-gap.html b/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-column-gap.html new file mode 100644 index 0000000000..4359e7f7a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-column-gap.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Relative child can overflow onto the column gap area</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/"> +<link rel="match" href="relative-child-overflowing-column-gap-ref.html"> + +<style> +body { + margin: 0px; +} + +.multicol { + width: 200px; + column-count: 2; + column-gap: 50px; +} + +.relative-layer { + position: relative; +} + +.child { + width: 100px; + height: 100px; + background: green; +} +</style> +<div class="multicol"> + <div class="relative-layer"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-container.html b/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-container.html new file mode 100644 index 0000000000..6d00ac82d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/relative-child-overflowing-container.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Relative child wider than the column container should overflow the container</title> +<link rel="help" href="https://drafts.csswg.org/css-multicol/"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + +<style> +.multicol { + width: 0px; + column-count: 2; + column-gap: 0px; +} + +.relative-layer { + position: relative; +} + +.child { + width: 100px; + height: 200px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="multicol"> + <div class="relative-layer"> + <div class="child"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/remove-block-beside-spanner-in-inline-crash.html b/testing/web-platform/tests/css/css-multicol/remove-block-beside-spanner-in-inline-crash.html new file mode 100644 index 0000000000..7d9246cf53 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/remove-block-beside-spanner-in-inline-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1292004"> +<div style="columns:2;"> + <span></span> + <div id="traitor"></div> + <span> + <div style="column-span:all;"></div> + </span><div style="column-span:all;"></div> +</div> +<script> + document.body.offsetTop; + traitor.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/remove-block-sibling-of-inline-with-block-crash.html b/testing/web-platform/tests/css/css-multicol/remove-block-sibling-of-inline-with-block-crash.html new file mode 100644 index 0000000000..e752abc9f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/remove-block-sibling-of-inline-with-block-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278532"> +<div style="columns:2;"> + <span> + <div></div> + </span> + <div id="elm"></div> + x +</div> +<script> + document.body.offsetTop; + elm.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/remove-child-in-strict-containment-also-spanner.html b/testing/web-platform/tests/css/css-multicol/remove-child-in-strict-containment-also-spanner.html new file mode 100644 index 0000000000..8dfbe1ecc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/remove-child-in-strict-containment-also-spanner.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1279078"> +<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; width:100px; background:red;"> + <div style="column-span:all; height:20px; background:green;"></div> + <div style="contain:strict; height:80px; background:green;"> + <div id="elm" style="height:80px; background:red;"></div> + </div> + <div style="contain:strict; height:80px; background:green;"></div> +</div> +<script> + document.body.offsetTop; + elm.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/remove-inline-with-block-beside-spanners-crash.html b/testing/web-platform/tests/css/css-multicol/remove-inline-with-block-beside-spanners-crash.html new file mode 100644 index 0000000000..d48ff19b99 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/remove-inline-with-block-beside-spanners-crash.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1102137"> +<div style="columns:3;"> + <span id="inlineWithBlock"><div></div></span><div id="spanner1" style="column-span:all;"></div> + <div id="spanner2" style="display:none; column-span:all;"></div> + <div id="block1" style="display:none;"></div> + <div id="spanner3" style="display:none; column-span:all;"></div> + <div id="block2" style="display:none;"></div> +</div> +<script> + document.body.offsetTop; + inlineWithBlock.style.display = "none"; + document.body.offsetTop; + spanner1.style.display = "none"; + document.body.offsetTop; + spanner2.style.display = "block"; + document.body.offsetTop; + block1.style.display = "block"; + block2.style.display = "block"; + document.body.offsetTop; + spanner3.style.display = "block"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/remove-inline-with-block-beside-spanners.html b/testing/web-platform/tests/css/css-multicol/remove-inline-with-block-beside-spanners.html new file mode 100644 index 0000000000..c943e54986 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/remove-inline-with-block-beside-spanners.html @@ -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/#column-span"> +<meta name="assert" content="Margins of two adjacent spanners will collapse with each other"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> + #spanner1 { + column-span: all; + margin-bottom: 100px; + } + #spanner2 { + column-span: all; + margin-top: 100px; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div style="columns:3; width:100px; background:green;"> + <div id="spanner1"></div> + <span id="inlineWithBlock"><div></div></span><div id="spanner2"></div> +</div> +<script> + document.body.offsetTop; + inlineWithBlock.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/remove-spanner-beside-spanner-in-inline-crash.html b/testing/web-platform/tests/css/css-multicol/remove-spanner-beside-spanner-in-inline-crash.html new file mode 100644 index 0000000000..969d54a9b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/remove-spanner-beside-spanner-in-inline-crash.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1292004"> +<div style="columns:2;"> + <span></span> + <div id="removeme" style="column-span:all;"></div> + <span> + <div style="column-span:all;"></div> + </span> + <div style="column-span:all;"></div> +</div> +<script> + document.body.offsetTop; + removeme.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/replaced-content-spanner-auto-width.html b/testing/web-platform/tests/css/css-multicol/replaced-content-spanner-auto-width.html new file mode 100644 index 0000000000..90720852ca --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/replaced-content-spanner-auto-width.html @@ -0,0 +1,11 @@ +<!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="help" href="https://www.w3.org/TR/CSS22/visudet.html#block-replaced-width"> +<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-gap:0; width:50px;"> + <canvas style="display:block; column-span:all; background:green;" width="100" height="100"></canvas> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/resize-in-strict-containment-nested.html b/testing/web-platform/tests/css/css-multicol/resize-in-strict-containment-nested.html new file mode 100644 index 0000000000..73f1494a29 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/resize-in-strict-containment-nested.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1279078"> +<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:200px; height:100px; margin-left:-100px;"> + <div style="columns:1;"> + <div style="height:1px; break-after:column;"></div> + <div style="width:100px; height:100px; contain:strict; background:red;"> + <div id="target" style="width:1px; height:100px; background:green;"></div> + </div> + </div> +</div> +<script> + document.body.offsetTop; + target.style.width = "100px"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/resize-multicol-with-fixed-size-children.html b/testing/web-platform/tests/css/css-multicol/resize-multicol-with-fixed-size-children.html new file mode 100644 index 0000000000..a3963d06a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/resize-multicol-with-fixed-size-children.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1336180"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <style> + div.item { + width:50px; + height:50px; + background:green; + } + </style> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container" style="columns:2; gap:0; column-fill:auto; width:200px; height:100px; background:red;"> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + <div class="item"></div> + </div> + + <script> + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + container.style.width = "100px"; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/scroll-width-height.tentative.html b/testing/web-platform/tests/css/css-multicol/scroll-width-height.tentative.html new file mode 100644 index 0000000000..9efaf1bff8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/scroll-width-height.tentative.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +.multi { + width: 400px; + height: 400px; + columns: 3; +} +.child { + inline-size: 100px; + block-size: 100px; + outline: solid black; +} +.grandchild { + inline-size: 100px; + block-size: 300px; + background: lime; +} +</style> +<body onload="checkLayout('.child, .grandchild')"> +<div id=log></div> + +<div class="multi" style="writing-mode: horizontal-tb"> + <div class="child" data-expected-scroll-width="100" data-expected-scroll-height="300"> + <div class="grandchild" data-expected-scroll-width="100" data-expected-scroll-height="300"></div> + </div> +</div> +<div class="multi" style="writing-mode: vertical-rl"> + <div class="child" data-expected-scroll-width="300" data-expected-scroll-height="100"> + <div class="grandchild" data-expected-scroll-width="300" data-expected-scroll-height="100"></div> + </div> +</div> +<div class="multi" style="writing-mode: vertical-lr"> + <div class="child" data-expected-scroll-width="300" data-expected-scroll-height="100"> + <div class="grandchild" data-expected-scroll-width="300" data-expected-scroll-height="100"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-000.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-000.html new file mode 100644 index 0000000000..f700235621 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-000.html @@ -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/#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="columns:2; width:100px; height:100px; column-fill:auto; column-gap:0; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="height:40px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-001.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-001.html new file mode 100644 index 0000000000..2cfbd2defa --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-001.html @@ -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/#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="columns:2; width:100px; height:100px; column-fill:auto; column-gap:0; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="height:40px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-002.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-002.html new file mode 100644 index 0000000000..970a1ecbfe --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-002.html @@ -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/#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="columns:2; width:100px; height:100px; column-fill:auto; column-gap:0; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="height:20px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="height:20px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-003.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-003.html new file mode 100644 index 0000000000..857ccf92ba --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-003.html @@ -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="columns:2; width:100px; height:100px; column-fill:auto; column-gap:0; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="column-span:all; height:60px; background:green;"></div> + <div style="column-span:all; height:80px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-004.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-004.html new file mode 100644 index 0000000000..2199a9340b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-004.html @@ -0,0 +1,17 @@ +<!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="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<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-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="column-span:all; height:50px;"> + <div style="height:50px; background:green;"></div> + <div style="height:50px;"></div> + <div style="height:100px; background:green;"></div> + </div> + <div style="column-span:all; height:10px; background:green;"></div> + <div style="height:80px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-005.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-005.html new file mode 100644 index 0000000000..56e35c74da --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-005.html @@ -0,0 +1,17 @@ +<!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="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<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-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="column-span:all; height:50px;"> + <div style="height:50px; background:green;"></div> + <div style="height:70px;"></div> + <div style="height:80px; background:green;"></div> + </div> + <div style="column-span:all; height:10px; background:green;"></div> + <div style="height:120px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-006.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-006.html new file mode 100644 index 0000000000..60325b1d17 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-006.html @@ -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/#spanning-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<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:4; column-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="column-span:all; height:10px;"> + <div style="height:10px; background:green;"></div> + <div style="height:360px;"></div> + <div style="height:30px; background:green;"></div> + </div> + <div style="column-span:all; height:100px;"> + <div style="height:100px; background:green;"></div> + <div style="height:240px;"></div> + <div style="height:20px; background:green;"></div> + </div> + <div style="column-span:all; height:240px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-007.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-007.html new file mode 100644 index 0000000000..ea71c779fe --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-007.html @@ -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/#spanning-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<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-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="column-span:all; margin-bottom:-30px; height:100px;"> + <div style="height:70px; background:green;"></div> + </div> + <div style="column-span:all; height:130px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-008.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-008.html new file mode 100644 index 0000000000..d28eafe655 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-008.html @@ -0,0 +1,16 @@ +<!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="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows"> +<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-fill:auto; column-gap:0; width:100px; height:100px; background:red;"> + <div style="columns:2; column-gap:0;"> + <div style="column-span:all; margin-bottom:30px; height:50px;"> + <div style="height:80px; background:green;"></div> + <div style="height:40px;"></div> + <div style="height:80px; background:green;"></div> + </div> + <div style="column-span:all; margin-top:30px; height:40px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-009.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-009.html new file mode 100644 index 0000000000..981a42c04a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-009.html @@ -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/#spanning-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<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:300px;"> + <div style="height:100px; background:green;"></div> + <div style="columns:2; border:20px solid green;"> + <div style="column-span:all; break-before:column; height:60px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-010.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-010.html new file mode 100644 index 0000000000..e081d71d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-010.html @@ -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"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<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:300px;"> + <div style="height:50px; background:green;"></div> + <div style="columns:2; column-gap:0;"> + <div style="height:100px; background:green;"></div> + <div style="column-span:all; break-before:column; height:100px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-011.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-011.html new file mode 100644 index 0000000000..b22b2af99b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-011.html @@ -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/#spanning-columns"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<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:300px;"> + <div style="columns:2; border:20px solid green;"> + <div style="column-span:all; break-after:column; height:60px; background:green;"></div> + </div> + <div style="height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-012.html b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-012.html new file mode 100644 index 0000000000..44a2448289 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-fragmentation-012.html @@ -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"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#break-propagation"> +<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:300px;"> + <div style="height:50px; background:green;"></div> + <div style="columns:2; column-gap:0;"> + <div style="column-span:all; break-after:column; height:50px; background:green;"></div> + <div style="height:200px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-001.html b/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-001.html new file mode 100644 index 0000000000..124f011658 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-001.html @@ -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="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1383916"> +<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; width:100px; gap:0; orphans:1; widows:1; background:red;"> + <div style="float:left; width:50px; height:180px; background:green;"></div> + <div> + <div style="column-span:all; height:10px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-002.html b/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-002.html new file mode 100644 index 0000000000..3a8bac590b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-002.html @@ -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/#spanning-columns"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1383916"> +<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; width:100px; gap:0; orphans:1; widows:1; background:red;"> + <div style="float:left; width:50px; height:180px; background:green;"></div> + <div> + <div> + <div style="column-span:all; height:10px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-003.html b/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-003.html new file mode 100644 index 0000000000..8016205bee --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-003.html @@ -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="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1383916"> +<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; width:100px; gap:0; orphans:1; widows:1; background:red;"> + <div style="float:left; width:50px; height:180px; background:green;"></div> + <span> + <div style="column-span:all; height:10px; background:green;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-004.html b/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-004.html new file mode 100644 index 0000000000..00d4e0d2fb --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-in-child-after-parallel-flow-004.html @@ -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"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1383916"> +<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; width:100px; gap:0; orphans:1; widows:1; background:red;"> + <div style="height:0;"> + <div style="height:90px; background:green;"></div> + <div style="break-before:column; height:90px; background:green;"></div> + </div> + <span> + <div style="column-span:all; height:10px; background:green;"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-in-opacity-ref.html b/testing/web-platform/tests/css/css-multicol/spanner-in-opacity-ref.html new file mode 100644 index 0000000000..e981eac2f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-in-opacity-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>Test passes if there is a purple square below.</p> +<div style="width:100px; background:blue;"> + <div style="opacity:0.5;"> + <div style="height:100px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanner-in-opacity.html b/testing/web-platform/tests/css/css-multicol/spanner-in-opacity.html new file mode 100644 index 0000000000..78b1ac80e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanner-in-opacity.html @@ -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-break-3/"> +<link rel="match" href="spanner-in-opacity-ref.html"> +<p>Test passes if there is a purple square below.</p> +<div style="columns:2; column-fill:auto; column-gap:0; width:100px; background:blue;"> + <div style="opacity:0.5;"> + <div style="column-span:all; height:100px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanning-legend-000-crash.html b/testing/web-platform/tests/css/css-multicol/spanning-legend-000-crash.html new file mode 100644 index 0000000000..407697e843 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanning-legend-000-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1123710"> +<div style="columns:2;"> + <legend style="column-span:all; columns:2;"> + <div></div> + </legend> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/spanning-legend-001-crash.html b/testing/web-platform/tests/css/css-multicol/spanning-legend-001-crash.html new file mode 100644 index 0000000000..6126ec61e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/spanning-legend-001-crash.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1123792"> +<div style="columns:2;"> + <legend id="legend" style="column-span:all;"></legend> +</div> +<script> + legend.getBoundingClientRect(); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/subpixel-column-rule-width.tentative.html b/testing/web-platform/tests/css/css-multicol/subpixel-column-rule-width.tentative.html new file mode 100644 index 0000000000..5b35c2802c --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/subpixel-column-rule-width.tentative.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<head> + <title> + CSS Column-Rule: width computed value + </title> + + <link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#crw"> + <link rel="match" href="reference/subpixel-column-rule-width-ref.tentative.html"> + + <meta name="assert" content="column-rule-width computed value after rounding."> + + <style> + .columns { + column-count: 2; + column-rule: solid gray; + width: 420px; + height: 50px; + } + </style> +</head> + +<body> + <h1> + Test passes if column rule widths are rounded up + when they are greater than 0 and less than 1, + and rounded down when they are greater than 1. + </h1> + + <div class="columns" style="column-rule-width: 0.3px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 0.5px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 0.9px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 1.3px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 1.5px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 1.9px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 3.3px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 3.5px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> + + <div class="columns" style="column-rule-width: 3.9px;"> + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, + sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/subpixel-scroll-crash.html b/testing/web-platform/tests/css/css-multicol/subpixel-scroll-crash.html new file mode 100644 index 0000000000..5a42908505 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/subpixel-scroll-crash.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> + <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276319"> + <div style="columns:2; column-fill:auto; height:4000px;"> + <div style="margin-top:1000px; width:100px; height:100px; background:url(bilen.jpg) fixed;"></div> + <!-- Attempt to get legacy layout, in order to trigger the bug: --> + <div style="display:flex;"></div> + <div style="display:grid;"></div> + <div style="display:table;"></div> + </div> + <script> + var offset = 1000; + function scrollEverSoSlightly() { + if (offset > 1003) { + document.documentElement.classList.remove("reftest-wait"); + return; + } + window.scrollTo(0, offset); + offset += 1/19; + requestAnimationFrame(()=> { + requestAnimationFrame(()=> { + scrollEverSoSlightly(); + }); + }); + } + scrollEverSoSlightly(); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/support/1x1-green.png b/testing/web-platform/tests/css/css-multicol/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/1x1-green.png diff --git a/testing/web-platform/tests/css/css-multicol/support/1x1-lime.png b/testing/web-platform/tests/css/css-multicol/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/css-multicol/support/1x1-maroon.png b/testing/web-platform/tests/css/css-multicol/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/css-multicol/support/1x1-navy.png b/testing/web-platform/tests/css/css-multicol/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/css-multicol/support/1x1-red.png b/testing/web-platform/tests/css/css-multicol/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/1x1-red.png diff --git a/testing/web-platform/tests/css/css-multicol/support/1x1-white.png b/testing/web-platform/tests/css/css-multicol/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/1x1-white.png diff --git a/testing/web-platform/tests/css/css-multicol/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-multicol/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/css-multicol/support/60x60-green.png b/testing/web-platform/tests/css/css-multicol/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/60x60-green.png diff --git a/testing/web-platform/tests/css/css-multicol/support/a-green.css b/testing/web-platform/tests/css/css-multicol/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/css-multicol/support/b-green.css b/testing/web-platform/tests/css/css-multicol/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/support/black20x20.png b/testing/web-platform/tests/css/css-multicol/support/black20x20.png Binary files differnew file mode 100644 index 0000000000..ebf7027ee7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/black20x20.png diff --git a/testing/web-platform/tests/css/css-multicol/support/c-red.css b/testing/web-platform/tests/css/css-multicol/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-multicol/support/cat.png b/testing/web-platform/tests/css/css-multicol/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/cat.png diff --git a/testing/web-platform/tests/css/css-multicol/support/import-green.css b/testing/web-platform/tests/css/css-multicol/support/import-green.css new file mode 100644 index 0000000000..537104e663 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/testing/web-platform/tests/css/css-multicol/support/import-red.css b/testing/web-platform/tests/css/css-multicol/support/import-red.css new file mode 100644 index 0000000000..9945ef4711 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/testing/web-platform/tests/css/css-multicol/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-multicol/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..6fcfeb4883 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/css-multicol/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-multicol/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/css-multicol/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-multicol/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..db8ed5cf7b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/css-multicol/support/pattern-tr.png b/testing/web-platform/tests/css/css-multicol/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/css-multicol/support/red20x20.png b/testing/web-platform/tests/css/css-multicol/support/red20x20.png Binary files differnew file mode 100644 index 0000000000..5d44ef210e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/red20x20.png diff --git a/testing/web-platform/tests/css/css-multicol/support/square-purple.png b/testing/web-platform/tests/css/css-multicol/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/square-purple.png diff --git a/testing/web-platform/tests/css/css-multicol/support/square-teal.png b/testing/web-platform/tests/css/css-multicol/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/square-teal.png diff --git a/testing/web-platform/tests/css/css-multicol/support/square-white.png b/testing/web-platform/tests/css/css-multicol/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/square-white.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-blue.png b/testing/web-platform/tests/css/css-multicol/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-gray.png b/testing/web-platform/tests/css/css-multicol/support/swatch-gray.png Binary files differnew file mode 100644 index 0000000000..92c73561f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-gray.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-green.png b/testing/web-platform/tests/css/css-multicol/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-lime.png b/testing/web-platform/tests/css/css-multicol/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-navy.png b/testing/web-platform/tests/css/css-multicol/support/swatch-navy.png Binary files differnew file mode 100644 index 0000000000..28dae8a3e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-navy.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-orange.png b/testing/web-platform/tests/css/css-multicol/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-pink.png b/testing/web-platform/tests/css/css-multicol/support/swatch-pink.png Binary files differnew file mode 100644 index 0000000000..95b84499a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-pink.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-purple.png b/testing/web-platform/tests/css/css-multicol/support/swatch-purple.png Binary files differnew file mode 100644 index 0000000000..73bea77517 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-purple.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-red.png b/testing/web-platform/tests/css/css-multicol/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-white.png b/testing/web-platform/tests/css/css-multicol/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-white.png diff --git a/testing/web-platform/tests/css/css-multicol/support/swatch-yellow.png b/testing/web-platform/tests/css/css-multicol/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/css-multicol/support/test-bl.png b/testing/web-platform/tests/css/css-multicol/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/test-bl.png diff --git a/testing/web-platform/tests/css/css-multicol/support/test-br.png b/testing/web-platform/tests/css/css-multicol/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/test-br.png diff --git a/testing/web-platform/tests/css/css-multicol/support/test-outer.png b/testing/web-platform/tests/css/css-multicol/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/test-outer.png diff --git a/testing/web-platform/tests/css/css-multicol/support/test-tl.png b/testing/web-platform/tests/css/css-multicol/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/test-tl.png diff --git a/testing/web-platform/tests/css/css-multicol/support/test-tr.png b/testing/web-platform/tests/css/css-multicol/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/support/test-tr.png diff --git a/testing/web-platform/tests/css/css-multicol/table/balance-breakafter-before-table-section-crash.html b/testing/web-platform/tests/css/css-multicol/table/balance-breakafter-before-table-section-crash.html new file mode 100644 index 0000000000..119b44607e --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/balance-breakafter-before-table-section-crash.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=605902"> +<div style="columns:3;"> + <div style="margin:8px; height:20px; break-after:column;"></div> + <div style="display:table-row-group;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/balance-table-with-border-spacing.html b/testing/web-platform/tests/css/css-multicol/table/balance-table-with-border-spacing.html new file mode 100644 index 0000000000..9a55737a51 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/balance-table-with-border-spacing.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=534751"> +<div id="multicol" style="columns:2; width:200px; line-height:20px;"> + <div style="display:table; border-spacing:1px;"> + <div style="display:table-cell; width:30px;"> + <br> + <br> + <br> + <br> + <br> + </div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(() => { + var multicol = document.getElementById("multicol"); + assert_equals(multicol.offsetHeight, 61); + }, "Balanced multicol with table with border spacing"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/table/balance-table-with-fractional-height-row.html b/testing/web-platform/tests/css/css-multicol/table/balance-table-with-fractional-height-row.html new file mode 100644 index 0000000000..434dc52ea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/balance-table-with-fractional-height-row.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#filling-columns"> +<div id="multicol" style="columns:2; line-height:100px;"> + <div style="display:table-row; height:4.9999px;"></div> + <div style="display:table-row;"> + <br> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(multicol.getBoundingClientRect().height, 100); + }, "If we have room for the line, we have room for all we need"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001-ref.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001-ref.xht new file mode 100644 index 0000000000..37f172d5e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001-ref.xht @@ -0,0 +1,12 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + </head> + <body> + <div><img src="../support/black20x20.png" width="120" height="20" alt="Image download support must be enabled" /></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001.xht new file mode 100644 index 0000000000..405ace9234 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-001.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-count and table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-table-cell-001-ref.xht"/> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + orphans: 1; + widows: 1; + + column-count: 6; + column-gap: 0em; + } + ]]></style> + </head> + <body> + + <div>P<br />A<br />S<br />S<br />E<br />D</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001-ref.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001-ref.xht new file mode 100644 index 0000000000..e028d1f797 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001-ref.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <meta name="flags" content="image" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + height: 360px; + width: 300px; + } + + img + img {padding-left: 110px;} + ]]></style> + + </head> + <body> + <div><img src="../support/black20x20.png" width="60" height="360" alt="Image download support must be enabled" /><img src="../support/black20x20.png" width="60" height="360" alt="Image download support must be enabled" /></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001.xht new file mode 100644 index 0000000000..1d3e44ea5f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-001.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-count and height of table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-table-cell-height-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + height: 18em; + orphans: 1; + widows: 1; + width: 15em; + + column-count: 2; + column-gap: 2em; + + /* + + N == 2; + + W == 6.5em; + + */ + } + ]]></style> + </head> + <body> + + <div> + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-002.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-002.xht new file mode 100644 index 0000000000..c66c475f12 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-height-002.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Multi-column Layout Test: column-count and height of table-cell (basic)</title> + <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 --> + <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> + <link rel="match" href="multicol-table-cell-height-001-ref.xht" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height. A set height for a table-cell still remains the minimum height required by the content, even when its layout is influenced by, conditioned by a multi-column layout." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: yellow; + color: black; + display: table-cell; + font: 1.25em/1 Ahem; + height: 0em; + orphans: 1; + widows: 1; + width: 15em; + + column-count: 2; + column-gap: 2em; + + /* + + N == 2; + + W == 6.5em; + + */ + } + ]]></style> + </head> + <body> + + <div> + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + 111 222 333 444 555 666 777 888 999 + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-001.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-001.xht new file mode 100644 index 0000000000..b2fc3f8331 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-001.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | table-cell, vertical-align</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model"/> +<link rel="match" href="multicol-table-cell-vertical-align-ref.xht"/> +<meta name="flags" content="ahem"/> +<meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which also use 'vertical-align: middle'. The 'vertical-align' property should still apply." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +div { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + vertical-align: middle; + color: white; + background: #3366CC; + width: 6em; + height: 20em; + display: table-cell; + + column-count: 2; + column-gap: 0; +} +]]></style> +</head> + +<body> + +<div> +aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-ref.xht b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-ref.xht new file mode 100644 index 0000000000..6d20530b73 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/multicol-table-cell-vertical-align-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>multicolumn | table-cell, vertical-align</title> +<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style type="text/css"><![CDATA[ +div { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + vertical-align: middle; + color: white; + background: #3366CC; + width: 6em; + height: 5.5em; +} +div+div { + margin-top: 9em; +} +]]></style> +</head> + +<body> +<div></div> +<div></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol-ref.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol-ref.html new file mode 100644 index 0000000000..2e5a6ba460 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<p>You should see the word 'PASS' below.</p> +<div style="font-family:monospace;"> + <div style="float:left; overflow:hidden; width:1em;">P</div> + <div style="float:left; overflow:hidden; width:1em;">A</div> + <div style="float:left; overflow:hidden; width:1em;">S</div> + <div style="float:left; overflow:hidden; width:1em;">S</div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol.html new file mode 100644 index 0000000000..9df85f0192 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-as-multicol.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#propdef-column-count"> +<link rel="match" href="table-cell-as-multicol-ref.html"> +<p>You should see the word 'PASS' below.</p> +<div style="font-family:monospace;"> + <div style="display:table-cell; width:1em;">P</div> + <div style="display:table-cell; width:3em; column-count:3; column-gap:0; orphans:1; widows:1;"> + A<br> + S<br> + S<br> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000-ref.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000-ref.html new file mode 100644 index 0000000000..f8f1c9e19f --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<p>You should see the text "first column" once in the first column, and the text + "second column" twice in the second column.</p> +<div style="columns:2; orphans:1; widows:1;"> + first column<br> + <br> + second column<br> + second column +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000.html new file mode 100644 index 0000000000..27227e96a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-000.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=348064"> +<link rel="match" href="table-cell-content-change-000-ref.html"> +<p>You should see the text "first column" once in the first column, and the text + "second column" twice in the second column.</p> +<div style="columns:2; orphans:1; widows:1;"> + <div style="display:table-row;"> + first column + <div style="height:0.1em;"></div> + </div> + <div style="display:table-row;"> + second column + <div id="elm" style="display:none;">second column</div> + </div> +</div> +</body> +<script> + document.body.offsetTop; // trigger layout + document.getElementById('elm').style.display = 'block'; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001-ref.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001-ref.html new file mode 100644 index 0000000000..ad7ff706c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<p>Test changing the contents of a table cell, increasing column height</p> +<p>You should see the text "first column" once in the first column, and the text + "second column" twice in the second column.</p> +<div style="width:511px; overflow:hidden; background:yellow;"> + <div style="float:left; width:255px;"> + first column + </div> + <div style="float:left; border-left:1px solid; padding-left:5px;"> + second column<br> + second column + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001.html new file mode 100644 index 0000000000..5ecb7ec408 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-content-change-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=348064"> +<link rel="match" href="table-cell-content-change-001-ref.html"> +<p>Test changing the contents of a table cell, increasing column height</p> +<p>You should see the text "first column" once in the first column, and the text + "second column" twice in the second column.</p> +<div style="columns:2; column-rule:1px solid; column-gap:11px; width:511px; background:yellow;"> + <div style="display:table-row;"> + first column + <div style="height:0.1em;"></div> + </div> + <div style="display:table-row;"> + second column + <div id="elm" style="display:none;">second column</div> + </div> +</div> +<script> + document.body.offsetTop; // trigger layout + document.getElementById('elm').style.display = 'block'; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-001.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-001.html new file mode 100644 index 0000000000..5cb9eaf564 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-001.html @@ -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/#propdef-column-count"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test that a balanced multicol table cell inside another fragmentation context is sized and fragmented correctly"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:table-cell; columns:2; gap:0; width:50px; background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div style="height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-002.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-002.html new file mode 100644 index 0000000000..b250841f92 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-002.html @@ -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/#propdef-column-count"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test that a balanced multicol table cell inside another fragmentation context is sized and fragmented correctly - its height and max-height should be ignored, since the intrinsic size is larger"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:table-cell; columns:2; gap:0; height:10px; max-height:10px; width:50px; background:red;"> + <div style="height:200px; background:green;"></div> + </div> + <div style="height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-003.html b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-003.html new file mode 100644 index 0000000000..f4e52910f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/table/table-cell-multicol-nested-003.html @@ -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/#propdef-column-count"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test that a balanced multicol table cell inside another fragmentation context is sized and fragmented correctly, and that it gets stretched by the specified height, which is larger than the intrinsic size"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="columns:2; gap:0; column-fill:auto; width:100px; height:100px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:table-cell; columns:2; gap:0; height:100px; width:50px; background:red;"> + <div style="height:150px; background:green;"></div> + </div> + <div style="margin-top:-25px; height:75px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/toggle-spanner-float-crash.html b/testing/web-platform/tests/css/css-multicol/toggle-spanner-float-crash.html new file mode 100644 index 0000000000..d5948b2dd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/toggle-spanner-float-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1219401"> +<div style="columns:2;"> + <span> + <div id="div0" style="column-span:all; float:right;"></div> + <div id="div1" style="column-span:all;"></div> + </span> +</div> +<script> + document.body.offsetTop; + div0.style.float = "none"; + div1.style.float = "right"; +</script> diff --git a/testing/web-platform/tests/css/css-multicol/triply-nested-with-fixedpos-in-abspos-crash.html b/testing/web-platform/tests/css/css-multicol/triply-nested-with-fixedpos-in-abspos-crash.html new file mode 100644 index 0000000000..8bed96f8c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/triply-nested-with-fixedpos-in-abspos-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1278921"> +<div style="columns:2;"> + <div style="columns:2; position:absolute;"> + <div style="columns:2; position:absolute;"> + <div style="columns:2; position:fixed;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/with-custom-layout-on-same-element-crash.https.html b/testing/web-platform/tests/css/css-multicol/with-custom-layout-on-same-element-crash.https.html new file mode 100644 index 0000000000..7e1c804258 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/with-custom-layout-on-same-element-crash.https.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=997403"> +<div id="elm" style="display:layout(parent); columns:2; width:10em; height:60px; column-fill:auto; line-height:20px;"> + x + <span> + <div style="display:inline-block;"></div> + </span> + <div style="height:1px;"></div> + <br> +</div> +<script> +</script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + document.body.offsetTop; + elm.style.display = "none"; + document.body.offsetTop; + test(()=> {}, "No crash"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/with-custom-layout-on-same-element.https.html b/testing/web-platform/tests/css/css-multicol/with-custom-layout-on-same-element.https.html new file mode 100644 index 0000000000..5388b08cde --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/with-custom-layout-on-same-element.https.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=997403"> +<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cc"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="column-count and column-width should only apply to block containers, and not tables, flexboxes, grid, custom layout containers, etc."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display:layout(parent); column-count:2; width:100px; height:100px; background:red;"> + <div style="height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-multicol/zero-column-width-computed-style.html b/testing/web-platform/tests/css/css-multicol/zero-column-width-computed-style.html new file mode 100644 index 0000000000..46d876f1a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/zero-column-width-computed-style.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>column-width:0</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#cw" title="3.1. column-width"> +<div id="longhand" style="column-width:0;"></div> +<div id="shorthand" style="columns:0;"></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(() => { + assert_equals(getComputedStyle(longhand).columnWidth, "0px"); + assert_equals(getComputedStyle(shorthand).columnWidth, "0px"); +}, "column-width:0 is a valid CSS declaration"); +</script> diff --git a/testing/web-platform/tests/css/css-multicol/zero-column-width-layout.html b/testing/web-platform/tests/css/css-multicol/zero-column-width-layout.html new file mode 100644 index 0000000000..aaae421912 --- /dev/null +++ b/testing/web-platform/tests/css/css-multicol/zero-column-width-layout.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>column-width:0</title> +<meta name="assert" content="column-width:0 is valid as specified and computed value, but its used value may never be less than 1px"> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/#cw" title="3.1. column-width"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="float:left; width:50px; height:100px; column-width:0; column-gap:0;"> + <div style="height:5000px; background:green;"></div> +</div> +<div style="float:left; width:50px; height:100px; columns:0; column-gap:0;"> + <div style="height:5000px; background:green;"></div> +</div> |
