diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-multicol/reference')
6 files changed, 279 insertions, 0 deletions
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> |