mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
860 lines
No EOL
44 KiB
HTML
860 lines
No EOL
44 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<title>The number and width of columns - CSS Multi-column Layout Module Level 1 CR Test Suite</title>
|
|
<style type="text/css">
|
|
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
|
@import "../indices.css";
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>CSS Multi-column Layout Module Level 1 CR Test Suite</h1>
|
|
<h2>The number and width of columns (76 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column">
|
|
<col id="refs-column">
|
|
<col id="flags-column">
|
|
<col id="info-column">
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3">+</a>
|
|
<a href="https://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns">3 The number and width of columns</a></th></tr>
|
|
<!-- 33 tests -->
|
|
<tr id="grid-inline-multicol-001-3" class="">
|
|
<td>
|
|
<a href="grid-inline-multicol-001.htm">grid-inline-multicol-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>'column-*' properties from inline grid container does not apply to grid items
|
|
<ul class="assert">
|
|
<li>This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-multicol-001-3" class="">
|
|
<td>
|
|
<a href="grid-multicol-001.htm">grid-multicol-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>'column-*' properties from grid container does not apply to grid items
|
|
<ul class="assert">
|
|
<li>This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-001-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-columns-001.htm">multicol-columns-001</a></td>
|
|
<td><a href="reference/multicol-columns-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>columns shorthand (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that 'columns: 100px 6' shorthand correctly set 'column-width' and 'column-count' properties.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-002-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-columns-002.htm">multicol-columns-002</a></td>
|
|
<td><a href="reference/multicol-columns-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>columns shorthand (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that 'columns: 6 100px' shorthand correctly set 'column-width' and 'column-count' properties.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-003-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-columns-003.htm">multicol-columns-003</a></td>
|
|
<td><a href="reference/multicol-columns-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>columns shorthand (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that 'columns: 100px auto' shorthand correctly set 'column-width' and 'column-count' properties.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-004-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-columns-004.htm">multicol-columns-004</a></td>
|
|
<td><a href="reference/multicol-columns-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>columns shorthand (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that 'columns: auto 100px' shorthand correctly set 'column-width' and 'column-count' properties.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-005-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-columns-005.htm">multicol-columns-005</a></td>
|
|
<td><a href="reference/multicol-columns-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>columns shorthand (basic)
|
|
<ul class="assert">
|
|
<li>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'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-006-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-columns-006.htm">multicol-columns-006</a></td>
|
|
<td><a href="reference/multicol-columns-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>columns shorthand (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that 'columns: 6 auto' shorthand correctly set 'column-width' and 'column-count' properties.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-007-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-columns-007.htm">multicol-columns-007</a></td>
|
|
<td><a href="reference/multicol-columns-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>columns shorthand (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that 'columns: auto 6' shorthand correctly set 'column-width' and 'column-count' properties.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-invalid-001-3" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-columns-invalid-001.htm">multicol-columns-invalid-001</a></td>
|
|
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>invalid columns shorthand
|
|
<ul class="assert">
|
|
<li>This test checks that 'columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-invalid-002-3" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-columns-invalid-002.htm">multicol-columns-invalid-002</a></td>
|
|
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>invalid columns shorthand
|
|
<ul class="assert">
|
|
<li>This test checks that 'columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-columns-toolong-001-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-columns-toolong-001.htm">multicol-columns-toolong-001</a></td>
|
|
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>narrower inline content inside wider colum box
|
|
<ul class="assert">
|
|
<li>This test checks the rendering of inline content (2em) inside wider (3em) column boxes.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-computed-001-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-computed-001.htm">multicol-count-computed-001</a></td>
|
|
<td><a href="reference/multicol-count-computed-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicolumn | column-rule
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-computed-002-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-computed-002.htm">multicol-count-computed-002</a></td>
|
|
<td><a href="reference/multicol-count-computed-2-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicolumn | column-rule
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-computed-003-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-computed-003.htm">multicol-count-computed-003</a></td>
|
|
<td><a href="reference/multicol-count-computed-003-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-rule and overflow inside (complex test)
|
|
<ul class="assert">
|
|
<li>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 be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should be partially clipped and overlapped partially by 1st column-rule.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-computed-005-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-computed-005.htm">multicol-count-computed-005</a></td>
|
|
<td><a href="reference/multicol-count-computed-003-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-rule and overflow inside (complex test)
|
|
<ul class="assert">
|
|
<li>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 be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should be partially clipped and overlapped partially by 1st column-rule.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-large-001-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-large-001.htm">multicol-count-large-001</a></td>
|
|
<td><a href="reference/multicol-count-large-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicolumn | column-count
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-large-002-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-large-002.htm">multicol-count-large-002</a></td>
|
|
<td><a href="reference/multicol-count-large-2-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicolumn | column-count
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-negative-001-3" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-count-negative-001.htm">multicol-count-negative-001</a></td>
|
|
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>negative 'column-count' value
|
|
<ul class="assert">
|
|
<li>This test checks that a specified negative 'column-count' value is invalid and ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-negative-002-3" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-count-negative-002.htm">multicol-count-negative-002</a></td>
|
|
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>zero 'column-count' value
|
|
<ul class="assert">
|
|
<li>This test checks that a specified 0 'column-count' value is invalid and ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-non-integer-001-3" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-count-non-integer-001.htm">multicol-count-non-integer-001</a></td>
|
|
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>non-integer 'column-count' value
|
|
<ul class="assert">
|
|
<li>This test checks that a specified real 'column-count' value is invalid and ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-non-integer-002-3" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-count-non-integer-002.htm">multicol-count-non-integer-002</a></td>
|
|
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>non-integer 'column-count' value
|
|
<ul class="assert">
|
|
<li>This test checks that a specified real 'column-count' value is invalid and ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-non-integer-003-3" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-count-non-integer-003.htm">multicol-count-non-integer-003</a></td>
|
|
<td><a href="reference/multicol-columns-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>non-integer 'column-count' value
|
|
<ul class="assert">
|
|
<li>This test checks that a specified real 'column-count' value is invalid and ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-inherit-003-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-inherit-003.htm">multicol-inherit-003</a></td>
|
|
<td><a href="reference/multicol-inherit-3-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicolumn | inheritance
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-shorthand-001-3" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-shorthand-001.htm">multicol-shorthand-001</a></td>
|
|
<td><a href="reference/multicol-rule-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>multicolumn | invalid
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-table-cell-001-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-table-cell-001.htm">multicol-table-cell-001</a></td>
|
|
<td><a href="reference/multicol-table-cell-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-count and table-cell (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that 'column-count' applies to elements with 'display' set to 'table-cell'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-table-cell-height-001-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-table-cell-height-001.htm">multicol-table-cell-height-001</a></td>
|
|
<td><a href="reference/multicol-table-cell-height-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-count and height of table-cell (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-table-cell-height-002-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-table-cell-height-002.htm">multicol-table-cell-height-002</a></td>
|
|
<td><a href="reference/multicol-table-cell-height-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-count and height of table-cell (basic)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-001-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-width-001.htm">multicol-width-001</a></td>
|
|
<td><a href="reference/multicol-width-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-width (basic)
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-002-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-width-002.htm">multicol-width-002</a></td>
|
|
<td><a href="reference/multicol-width-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-width (basic)
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-003-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-width-003.htm">multicol-width-003</a></td>
|
|
<td><a href="reference/multicol-width-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-width (basic)
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-count-001-3" class="ahem">
|
|
<td>
|
|
<a href="multicol-width-count-001.htm">multicol-width-count-001</a></td>
|
|
<td><a href="reference/multicol-width-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-count and column-width (basic)
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-ems-001-3" class="">
|
|
<td>
|
|
<a href="multicol-width-ems-001.htm">multicol-width-ems-001</a></td>
|
|
<td><a href="reference/multicol-width-ems-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>multicolumn | column-width
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.1">+</a>
|
|
<a href="https://www.w3.org/TR/css3-multicol/#cw">3.1 ‘column-width’</a></th></tr>
|
|
<!-- 7 tests -->
|
|
<tr id="multicol-reduce-000-3.1" class="ahem">
|
|
<td>
|
|
<a href="multicol-reduce-000.htm">multicol-reduce-000</a></td>
|
|
<td><a href="reference/multicol-reduce-000-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column width becomes wider to fill available space
|
|
<ul class="assert">
|
|
<li>This test checks that column width is increased to fill the available space: in this test, there are only 2 column boxes.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-invalid-001-3.1" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-width-invalid-001.htm">multicol-width-invalid-001</a></td>
|
|
<td><a href="reference/multicol-width-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>invalid column-width
|
|
<ul class="assert">
|
|
<li>This test checks that 'column-width: bzzt' is invalid (generating a parsing error) and therefore will be ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-large-001-3.1" class="ahem">
|
|
<td>
|
|
<a href="multicol-width-large-001.htm">multicol-width-large-001</a></td>
|
|
<td><a href="reference/multicol-width-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>large column-width
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-large-002-3.1" class="ahem">
|
|
<td>
|
|
<a href="multicol-width-large-002.htm">multicol-width-large-002</a></td>
|
|
<td><a href="reference/multicol-width-invalid-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>large column-width
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-negative-001-3.1" class="ahem invalid">
|
|
<td>
|
|
<a href="multicol-width-negative-001.htm">multicol-width-negative-001</a></td>
|
|
<td><a href="reference/multicol-count-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="invalid" title="Tests invalid CSS">Invalid</abbr></td>
|
|
<td>negative column-width
|
|
<ul class="assert">
|
|
<li>This test checks that a set 'column-width' can not be negative.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-small-001-3.1" class="ahem">
|
|
<td>
|
|
<a href="multicol-width-small-001.htm">multicol-width-small-001</a></td>
|
|
<td><a href="reference/multicol-width-small-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>narrow column-width
|
|
<ul class="assert">
|
|
<li>This test checks that a set 'column-width' which is small with regards to width of multi-column element. In this test, in-flow content that extends into column gaps is clipped in the middle of the column gap.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-zero-height-001-3.1" class="">
|
|
<td>
|
|
<a href="multicol-zero-height-001.htm">multicol-zero-height-001</a></td>
|
|
<td><a href="reference/multicol-zero-height-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>multi-column element with zero height
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.1.#column-width">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.2">+</a>
|
|
<a href="https://www.w3.org/TR/css3-multicol/#cc">3.2 ‘column-count’</a></th></tr>
|
|
<!-- 4 tests -->
|
|
<tr id="multicol-count-001-3.2" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-001.htm">multicol-count-001</a></td>
|
|
<td><a href="reference/multicol-columns-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-count (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that setting 'column-count' should accordingly create 6 column boxes. In this test, each column box should be exactly 100px wide.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-count-002-3.2" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-002.htm">multicol-count-002</a></td>
|
|
<td><a href="reference/multicol-count-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-count (basic)
|
|
<ul class="assert">
|
|
<li>This test checks that setting 'column-count' should accordingly create 4 column boxes. In this test, each column box should be exactly 5em wide.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-inherit-002-3.2" class="ahem">
|
|
<td>
|
|
<a href="multicol-inherit-002.htm">multicol-inherit-002</a></td>
|
|
<td><a href="reference/multicol-inherit-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'column-count' and inherit
|
|
<ul class="assert">
|
|
<li>This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-width-count-002-3.2" class="ahem">
|
|
<td>
|
|
<a href="multicol-width-count-002.htm">multicol-width-count-002</a></td>
|
|
<td><a href="reference/multicol-count-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-count and column-width (basic)
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.2.#column-count">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.3">+</a>
|
|
<a href="https://www.w3.org/TR/css3-multicol/#columns">3.3 ‘columns’</a></th></tr>
|
|
<!-- 25 tests -->
|
|
<tr id="multicol-basic-001-3.3" class="ahem">
|
|
<td>
|
|
<a href="multicol-basic-001.htm">multicol-basic-001</a></td>
|
|
<td><a href="reference/multicol-basic-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Multi-column element via columns: [integer]
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-basic-002-3.3" class="ahem">
|
|
<td>
|
|
<a href="multicol-basic-002.htm">multicol-basic-002</a></td>
|
|
<td><a href="reference/multicol-basic-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Multi-column element via column-count: [integer]
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-basic-003-3.3" class="ahem">
|
|
<td>
|
|
<a href="multicol-basic-003.htm">multicol-basic-003</a></td>
|
|
<td><a href="reference/multicol-basic-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Multi-column element via columns: [width]
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-basic-004-3.3" class="ahem">
|
|
<td>
|
|
<a href="multicol-basic-004.htm">multicol-basic-004</a></td>
|
|
<td><a href="reference/multicol-basic-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Multi-column element via column-width: [width]
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-003-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-003.htm">regions-multicol-003</a></td>
|
|
<td><a href="reference/regions-multicol-003-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow multi-column container, text content overflowing one region
|
|
<ul class="assert">
|
|
<li>This test checks that text content flows through a region maintaining the named flow multi-column container and that it overflows visibly into a third column.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-004-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-004.htm">regions-multicol-004</a></td>
|
|
<td><a href="reference/regions-multicol-003-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow, text content flowing into one multi-column region
|
|
<ul class="assert">
|
|
<li>This test checks that text content in a named flow is laid out using columns when flowed in a multi-column region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-006-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-006.htm">regions-multicol-006</a></td>
|
|
<td><a href="reference/regions-multicol-006-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow, text content - fragmented between multicol region and non-multicol region
|
|
<ul class="assert">
|
|
<li>This test checks that the named flow text content flows through the multi-column region in the region chain then through the second non-multicol region in the chain.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-008-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-008.htm">regions-multicol-008</a></td>
|
|
<td><a href="reference/regions-multicol-008-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow, non-text fragmentable content flowing into multi-column region then into non-multicol region
|
|
<ul class="assert">
|
|
<li>This test checks that non-text named flow contentmulti-column is fragmented first through the columns in a region multi-column container, then through a second non-multi-column region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-009-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-009.htm">regions-multicol-009</a></td>
|
|
<td><a href="reference/regions-multicol-009-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow, text content flowing into a simple region then into a multi-column region
|
|
<ul class="assert">
|
|
<li>This test checks that text named flow content is fragmented first through a simple region, then through a multi-column region</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-011-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-011.htm">regions-multicol-011</a></td>
|
|
<td><a href="reference/regions-multicol-009-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow, non-text fragmentable content flowing into non-mulicol region then into a multi-column region
|
|
<ul class="assert">
|
|
<li>This test checks that non-text fragmentable named flow content is fragmented through a simple region, then through a multi-column region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-012-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-012.htm">regions-multicol-012</a></td>
|
|
<td><a href="reference/regions-multicol-012-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow multi-column container, monolithic content flowing into one region
|
|
<ul class="assert">
|
|
<li>This test checks that monolithic content in a named flow multi-column container flows through the region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-013-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-013.htm">regions-multicol-013</a></td>
|
|
<td><a href="reference/regions-multicol-013-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow, text content flowing into multiple regions fragmented across multiple columns and overflowing the last region
|
|
<ul class="assert">
|
|
<li>This test checks that the named flow text content flows through the regions in the multi-column container and that it overflows visibly into a fourth column.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-015-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-015.htm">regions-multicol-015</a></td>
|
|
<td><a href="reference/regions-multicol-013-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow muticolumn container, text content flowing into multiple regions with content overflowing last region
|
|
<ul class="assert">
|
|
<li>This test checks that text content flows through multiple regions from the named flow multi-column container and that it overflows the last region in the region chain visibly.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-016-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-016.htm">regions-multicol-016</a></td>
|
|
<td><a href="reference/regions-multicol-016-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow multi-column container, monolithic content flowing into multiple regions
|
|
<ul class="assert">
|
|
<li>This test checks that monolithic content flows through multiple regions from the named flow multi-column container and that it overflows the last region in the region chain visibly into a fifth column.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-017-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-017.htm">regions-multicol-017</a></td>
|
|
<td><a href="reference/regions-multicol-017-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Multiple named flows, text content flowing into multiple regions in a multi-column container
|
|
<ul class="assert">
|
|
<li>This test checks multiple named flows with text content flow into multiple regions in the multi-column container.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-019-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-019.htm">regions-multicol-019</a></td>
|
|
<td><a href="reference/regions-multicol-019-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>Multiple named flows multi-column containers, text content flowing into multiple visually overlapping regions
|
|
<ul class="assert">
|
|
<li>This test checks multiple named flow multi-column containers with text content flow into multiple overlapping regions.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-021-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-021.htm">regions-multicol-021</a></td>
|
|
<td><a href="reference/regions-multicol-019-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Multiple named flows multi-column containers with unspecified width, non-text content flowing into multiple overlapping regions
|
|
<ul class="assert">
|
|
<li>This test checks multiple named flow multi-column containers with unspecified width and non-text content flow into multiple overlapping regions.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-022-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-022.htm">regions-multicol-022</a></td>
|
|
<td><a href="reference/regions-multicol-003-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow multi-column container, text content flowing into one autosized region with overflowing column
|
|
<ul class="assert">
|
|
<li>This test checks that text content flows through an autosized region from a multi-column named flow and that it overflows visibly into a third column.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-023-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-023.htm">regions-multicol-023</a></td>
|
|
<td><a href="reference/regions-multicol-003-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow multi-column container, monolithic content flowing into an autosized region, overflowing column
|
|
<ul class="assert">
|
|
<li>This test checks that text content flows through an autosized region from the multi-column named flow and that it overflows visibly into a third column.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-024-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-024.htm">regions-multicol-024</a></td>
|
|
<td><a href="reference/regions-multicol-024-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow multi-column container with text content flowing into region of smaller width/height than the second region
|
|
<ul class="assert">
|
|
<li>This test checks that text content flows through a region with a smaller width + height than the multi-column named flow and than the second region and that it overflows the first region visibly as a multi-column container before flowing into the second region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-025-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-025.htm">regions-multicol-025</a></td>
|
|
<td><a href="reference/regions-multicol-024-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow multi-column container with monolithic content flowing into region of smaller width/height than the second region
|
|
<ul class="assert">
|
|
<li>This test checks that text content flows through a region with a smaller width + height than the multi-column named flow and the second region and that it overflows the first region visibly as a multi-column container before flowing into the second region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-026-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-026.htm">regions-multicol-026</a></td>
|
|
<td><a href="reference/regions-multicol-024-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow multi-column container with text content flowing into region of smaller height than the second region
|
|
<ul class="assert">
|
|
<li>This test checks that text content flows through a region with a height smaller than the second region and that it overflows the first region as a multi-column container before flowing into the second region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-027-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-027.htm">regions-multicol-027</a></td>
|
|
<td><a href="reference/regions-multicol-024-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow multi-column container with monolithic content + flowing into region of smaller height than the second region
|
|
<ul class="assert">
|
|
<li>This test checks that monolithic content flows through a region with a height smaller than the second region and that it overflows the first region as a multi-column container before flowing into the second region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-028-3.3" class="ahem">
|
|
<td>
|
|
<a href="regions-multicol-028.htm">regions-multicol-028</a></td>
|
|
<td><a href="reference/regions-multicol-028-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>One named flow multi-column container with text content flowing into first region of smaller width than the second region
|
|
<ul class="assert">
|
|
<li>This test checks that text content flows through a region with a smaller width than the multi-column named flow and the second region and that it overflows the first region visibly as a multi-column container before flowing into the second region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="regions-multicol-029-3.3" class="">
|
|
<td>
|
|
<a href="regions-multicol-029.htm">regions-multicol-029</a></td>
|
|
<td><a href="reference/regions-multicol-028-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>One named flow multi-column container with monolithic content flowing into first region of smaller width than the second region
|
|
<ul class="assert">
|
|
<li>This test checks that monolithic content flows through a region with a smaller width than the multi-column named flow and the second region and that it overflows the first region visibly as a multi-column container before flowing into the second region.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.3.#columns0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.4">+</a>
|
|
<a href="https://www.w3.org/TR/css3-multicol/#pseudo-algorithm">3.4 Pseudo-algorithm</a></th></tr>
|
|
<!-- 7 tests -->
|
|
<tr id="multicol-count-computed-004-3.4" class="ahem">
|
|
<td>
|
|
<a href="multicol-count-computed-004.htm">multicol-count-computed-004</a></td>
|
|
<td><a href="reference/multicol-count-computed-004-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>both 'column-width' and 'column-count' are 'auto'
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-inherit-001-3.4" class="ahem">
|
|
<td>
|
|
<a href="multicol-inherit-001.htm">multicol-inherit-001</a></td>
|
|
<td><a href="reference/multicol-inherit-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicolumn and inheritance
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-list-item-001-3.4" class="ahem">
|
|
<td>
|
|
<a href="multicol-list-item-001.htm">multicol-list-item-001</a></td>
|
|
<td><a href="reference/multicol-list-item-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multi-column and list-item
|
|
<ul class="assert">
|
|
<li>This test checks that an unordered list of list items can be set to display its list-items in column boxes.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-margin-001-3.4" class="ahem">
|
|
<td>
|
|
<a href="multicol-margin-001.htm">multicol-margin-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multi-column and margin collapsing of first child (basic)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-margin-002-3.4" class="ahem">
|
|
<td>
|
|
<a href="multicol-margin-002.htm">multicol-margin-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multi-column and margin collapsing of first child (basic)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-nested-005-3.4" class="ahem">
|
|
<td>
|
|
<a href="multicol-nested-005.htm">multicol-nested-005</a></td>
|
|
<td><a href="reference/multicol-nested-005-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>nested multi-columns and constrained dimensions
|
|
<ul class="assert">
|
|
<li>This test checks how the height of column boxes conditions the height of nested column boxes.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-nested-column-rule-001-3.4" class="ahem">
|
|
<td>
|
|
<a href="multicol-nested-column-rule-001.htm">multicol-nested-column-rule-001</a></td>
|
|
<td><a href="reference/multicol-nested-column-rule-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>nested multi-columns and column-rule position
|
|
<ul class="assert">
|
|
<li>This test checks how the height of column boxes conditions the height of column rule.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.5">+</a>
|
|
<a href="https://www.w3.org/TR/css3-multicol/#stacking-context">3.5 Stacking context</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |