mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
206 lines
No EOL
12 KiB
HTML
206 lines
No EOL
12 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<title>Spanning 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>Spanning columns (16 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="s6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6">+</a>
|
|
<a href="http://www.w3.org/TR/css3-multicol/#spanning-columns">6 Spanning columns</a></th></tr>
|
|
<!-- 4 tests -->
|
|
<tr id="multicol-span-all-block-sibling-003-6" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-block-sibling-003.htm">multicol-span-all-block-sibling-003</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-block-sibling-3-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicol | column-span: all | block-level child
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-margin-nested-003-6" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-margin-nested-003.htm">multicol-span-all-margin-nested-003</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-margin-nested-3-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicolomn | column-span inside block
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-margin-nested-firstchild-001-6" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-margin-nested-firstchild-001.htm">multicol-span-all-margin-nested-firstchild-001</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-margin-nested-firstchild-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>multicolumn | column-span
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-none-001-6" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-none-001.htm">multicol-span-none-001</a></strong></td>
|
|
<td><a href="reference/multicol-span-none-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>column-span: none (basic)
|
|
<ul class="assert">
|
|
<li>This test checks how a 'column-span: none' element is rendered: it should not span across all column boxes.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.1">+</a>
|
|
<a href="http://www.w3.org/TR/css3-multicol/#column-span">6.1 ‘column-span’</a></th></tr>
|
|
<!-- 12 tests -->
|
|
<tr id="multicol-fill-auto-block-children-002-6.1" class="primary">
|
|
<td><strong>
|
|
<a href="multicol-fill-auto-block-children-002.htm">multicol-fill-auto-block-children-002</a></strong></td>
|
|
<td><a href="reference/multicol-fill-auto-block-children-002-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>'column-fill: auto' and 'column-span: all' (complex)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-001-6.1" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-001.htm">multicol-span-all-001</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'column-span' element (basic)
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-002-6.1" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-002.htm">multicol-span-all-002</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'column-span' element - large margin-left and 'overflow: hidden'
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-003-6.1" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-003.htm">multicol-span-all-003</a></strong></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-span: all' (basic)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-child-001-6.1" class="primary ahem may">
|
|
<td><strong>
|
|
<a href="multicol-span-all-child-001.htm">multicol-span-all-child-001</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-child-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="may" title="Behavior tested is preferred but optional">Optional</abbr></td>
|
|
<td>'column-span: all' element with block children (complex)
|
|
<ul class="assert">
|
|
<li>This test checks how a spanning element with block children is rendered inside a multi-column element with a set height which is insufficient for rendering the entire spanning element. Since the available height (10em)is insufficient to render the spanning element (height needed: 3 times 4em) entirely inside the multi-column element, then UA may treat 'column-span: all' as 'column-span: none'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-child-002-6.1" class="primary may">
|
|
<td><strong>
|
|
<a href="multicol-span-all-child-002.htm">multicol-span-all-child-002</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-child-002-ref.htm">=</a> </td>
|
|
<td><abbr class="may" title="Behavior tested is preferred but optional">Optional</abbr></td>
|
|
<td>'column-span: all' element with block children (complex)
|
|
<ul class="assert">
|
|
<li>This test checks how spanning elements with block children is rendered inside a multi-column element with a set height which is insufficient for rendering both spanning elements entirely. Since available space (height of 8em) is insufficient to render both spanning elements (4 times 4em plus 2em) entirely inside the multi-column element, then UA may treat 'column-span: all' as 'column-span: none'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-margin-001-6.1" class="primary ahem may">
|
|
<td><strong>
|
|
<a href="multicol-span-all-margin-001.htm">multicol-span-all-margin-001</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-margin-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="may" title="Behavior tested is preferred but optional">Optional</abbr></td>
|
|
<td>'column-span: all' element and width exceeding available multi-colum width (complex)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-margin-002-6.1" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-margin-002.htm">multicol-span-all-margin-002</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-margin-002-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'column-span: all' element
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-margin-bottom-001-6.1" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-margin-bottom-001.htm">multicol-span-all-margin-bottom-001</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-margin-bottom-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'column-span: all' element with vertical margins and width exceeding available multi-colum width (complex)
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-margin-nested-001-6.1" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-margin-nested-001.htm">multicol-span-all-margin-nested-001</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-margin-nested-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>vertically adjacent spanning elements with nested margins (complex)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-all-margin-nested-002-6.1" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-all-margin-nested-002.htm">multicol-span-all-margin-nested-002</a></strong></td>
|
|
<td><a href="reference/multicol-span-all-margin-nested-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>vertically adjacent spanning elements with nested margins (complex)
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="multicol-span-float-001-6.1" class="primary ahem">
|
|
<td><strong>
|
|
<a href="multicol-span-float-001.htm">multicol-span-float-001</a></strong></td>
|
|
<td><a href="reference/multicol-span-float-001-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>floating a column-spanning element
|
|
<ul class="assert">
|
|
<li>This test checks that 'column-span' does not apply to floating element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.1.#column-span0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#spanning-element">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |