servo/tests/wpt/css-tests/css-multicol-1_dev/html4/chapter-4.htm
Ms2ger 296fa2512b Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
2017-02-06 22:38:29 +01:00

486 lines
No EOL
24 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Column gaps and rules - 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>Column gaps and rules (45 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="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="https://www.w3.org/TR/css3-multicol/#column-gaps-and-rules">4 Column gaps and rules</a></th></tr>
<!-- 10 tests -->
<tr id="multicol-count-computed-001-4" 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-4" 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-inherit-004-4" class="ahem">
<td>
<a href="multicol-inherit-004.htm">multicol-inherit-004</a></td>
<td><a href="reference/multicol-inherit-4-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>multicolumn | inheritance
</td>
</tr>
<tr id="multicol-rule-001-4" class="ahem">
<td>
<a href="multicol-rule-001.htm">multicol-rule-001</a></td>
<td><a href="reference/multicol-rule-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule exceeding column-gap
<ul class="assert">
<li>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).</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-002-4" class="ahem">
<td>
<a href="multicol-rule-002.htm">multicol-rule-002</a></td>
<td><a href="reference/multicol-rule-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>multicolumn | column-rule
</td>
</tr>
<tr id="multicol-rule-003-4" class="ahem">
<td>
<a href="multicol-rule-003.htm">multicol-rule-003</a></td>
<td><a href="reference/multicol-rule-003-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule (basic)
</td>
</tr>
<tr id="multicol-rule-004-4" class="ahem">
<td>
<a href="multicol-rule-004.htm">multicol-rule-004</a></td>
<td><a href="reference/multicol-rule-004-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-fill: balance' and column-rule
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-fraction-003-4" class="ahem">
<td>
<a href="multicol-rule-fraction-003.htm">multicol-rule-fraction-003</a></td>
<td><a href="reference/multicol-rule-fraction-3-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>multicolumn | column-rule
</td>
</tr>
<tr id="multicol-rule-px-001-4" class="ahem">
<td>
<a href="multicol-rule-px-001.htm">multicol-rule-px-001</a></td>
<td><a href="reference/multicol-rule-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>multicolumn | column-rule
</td>
</tr>
<tr id="multicol-rule-stacking-001-4" class="ahem">
<td>
<a href="multicol-rule-stacking-001.htm">multicol-rule-stacking-001</a></td>
<td><a href="reference/multicol-rule-stacking-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>multicolumn | column-count, stacking
</td>
</tr>
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="https://www.w3.org/TR/css3-multicol/#column-gap">4.1 &#8216;column-gap&#8217;</a></th></tr>
<!-- 9 tests -->
<tr id="multicol-gap-000-4.1" class="ahem">
<td>
<a href="multicol-gap-000.htm">multicol-gap-000</a></td>
<td><a href="reference/multicol-gap-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-gap (basic)
<ul class="assert">
<li>This test checks that column gap appears between two columns.</li>
</ul>
</td>
</tr>
<tr id="multicol-gap-001-4.1" class="ahem may">
<td>
<a href="multicol-gap-001.htm">multicol-gap-001</a></td>
<td><a href="reference/multicol-gap-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-gap: normal'
<ul class="assert">
<li>This test checks that the 'normal' column gap is 1em, which is suggested -- and not prescribed -- by the specification.</li>
</ul>
</td>
</tr>
<tr id="multicol-gap-002-4.1" class="ahem">
<td>
<a href="multicol-gap-002.htm">multicol-gap-002</a></td>
<td><a href="reference/multicol-gap-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-gap (basic)
</td>
</tr>
<tr id="multicol-gap-003-4.1" class="ahem may">
<td>
<a href="multicol-gap-003.htm">multicol-gap-003</a></td>
<td><a href="reference/multicol-gap-002-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-gap: normal'
</td>
</tr>
<tr id="multicol-gap-fraction-001-4.1" class="ahem">
<td>
<a href="multicol-gap-fraction-001.htm">multicol-gap-fraction-001</a></td>
<td><a href="reference/multicol-gap-fraction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-gap' with increasing values
</td>
</tr>
<tr id="multicol-gap-large-001-4.1" class="ahem">
<td>
<a href="multicol-gap-large-001.htm">multicol-gap-large-001</a></td>
<td><a href="reference/multicol-gap-large-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-gap' with large value
<ul class="assert">
<li>This test checks that when 'column-gap' is large and when used 'column-width' is narrow, then content extends into column-gap until its middle and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'.</li>
</ul>
</td>
</tr>
<tr id="multicol-gap-large-002-4.1" class="ahem">
<td>
<a href="multicol-gap-large-002.htm">multicol-gap-large-002</a></td>
<td><a href="reference/multicol-gap-large-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-gap' with large value
</td>
</tr>
<tr id="multicol-gap-negative-001-4.1" class="ahem invalid">
<td>
<a href="multicol-gap-negative-001.htm">multicol-gap-negative-001</a></td>
<td><a href="reference/multicol-gap-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>column-gap with negative value
</td>
</tr>
<tr id="multicol-height-001-4.1" class="ahem">
<td>
<a href="multicol-height-001.htm">multicol-height-001</a></td>
<td><a href="reference/multicol-height-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-count and height
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.1.#column-gap0">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="https://www.w3.org/TR/css3-multicol/#crc">4.2 &#8216;column-rule-color&#8217;</a></th></tr>
<!-- 2 tests -->
<tr id="multicol-rule-color-inherit-001-4.2" class="ahem">
<td>
<a href="multicol-rule-color-inherit-001.htm">multicol-rule-color-inherit-001</a></td>
<td><a href="reference/multicol-rule-color-inherit-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule-color: inherit
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-color-inherit-002-4.2" class="ahem">
<td>
<a href="multicol-rule-color-inherit-002.htm">multicol-rule-color-inherit-002</a></td>
<td><a href="reference/multicol-rule-color-inherit-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule-color: inherit (complex)
<ul class="assert">
<li>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'.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.2.#column-rule-color">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="https://www.w3.org/TR/css3-multicol/#crs">4.3 &#8216;column-rule-style&#8217;</a></th></tr>
<!-- 4 tests -->
<tr id="multicol-rule-style-groove-001-4.3" class="ahem">
<td>
<a href="multicol-rule-style-groove-001.htm">multicol-rule-style-groove-001</a></td>
<td><a href="reference/multicol-rule-style-groove-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-rule-style' groove
</td>
</tr>
<tr id="multicol-rule-style-inset-001-4.3" class="ahem">
<td>
<a href="multicol-rule-style-inset-001.htm">multicol-rule-style-inset-001</a></td>
<td><a href="reference/multicol-rule-style-ridge-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-rule-style' inset
</td>
</tr>
<tr id="multicol-rule-style-outset-001-4.3" class="ahem">
<td>
<a href="multicol-rule-style-outset-001.htm">multicol-rule-style-outset-001</a></td>
<td><a href="reference/multicol-rule-style-groove-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-rule-style' outset
</td>
</tr>
<tr id="multicol-rule-style-ridge-001-4.3" class="ahem">
<td>
<a href="multicol-rule-style-ridge-001.htm">multicol-rule-style-ridge-001</a></td>
<td><a href="reference/multicol-rule-style-ridge-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-rule-style' ridge
</td>
</tr>
</tbody>
<tbody id="s4.3.#column-rule-style">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="https://www.w3.org/TR/css3-multicol/#crw">4.4 &#8216;column-rule-width&#8217;</a></th></tr>
<!-- 7 tests -->
<tr id="multicol-rule-fraction-001-4.4" class="ahem">
<td>
<a href="multicol-rule-fraction-001.htm">multicol-rule-fraction-001</a></td>
<td><a href="reference/multicol-rule-fraction-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule-width
</td>
</tr>
<tr id="multicol-rule-fraction-002-4.4" class="ahem">
<td>
<a href="multicol-rule-fraction-002.htm">multicol-rule-fraction-002</a></td>
<td><a href="reference/multicol-rule-fraction-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>wide column-rule-width painted above background-color
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-large-001-4.4" class="ahem">
<td>
<a href="multicol-rule-large-001.htm">multicol-rule-large-001</a></td>
<td><a href="reference/multicol-rule-large-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>excessively wide column-rule-width
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-large-002-4.4" class="ahem">
<td>
<a href="multicol-rule-large-002.htm">multicol-rule-large-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>over-excessively wide column-rule-width
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-percent-001-4.4" class="ahem invalid">
<td>
<a href="multicol-rule-percent-001.htm">multicol-rule-percent-001</a></td>
<td><a href="reference/multicol-containing-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>column-rule-width and percentage unit (basic)
<ul class="assert">
<li>This test checks that the column-rule-width property does not accept percentage unit in its values.</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-samelength-001-4.4" class="ahem">
<td>
<a href="multicol-rule-samelength-001.htm">multicol-rule-samelength-001</a></td>
<td><a href="reference/multicol-rule-samelength-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'column-rule-width' has same lenght as 'column-gap'
</td>
</tr>
<tr id="multicol-rule-shorthand-001-4.4" class="ahem invalid">
<td>
<a href="multicol-rule-shorthand-001.htm">multicol-rule-shorthand-001</a></td>
<td><a href="reference/multicol-rule-samelength-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>'column-rule' shorthand
</td>
</tr>
</tbody>
<tbody id="s4.4.#column-rule-width">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.5">+</a>
<a href="https://www.w3.org/TR/css3-multicol/#column-rule">4.5 &#8216;column-rule&#8217;</a></th></tr>
<!-- 13 tests -->
<tr id="multicol-rule-000-4.5" class="ahem">
<td>
<a href="multicol-rule-000.htm">multicol-rule-000</a></td>
<td><a href="reference/multicol-rule-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand (basic)
</td>
</tr>
<tr id="multicol-rule-color-001-4.5" class="ahem">
<td>
<a href="multicol-rule-color-001.htm">multicol-rule-color-001</a></td>
<td><a href="reference/multicol-rule-color-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule-color (basic)
</td>
</tr>
<tr id="multicol-rule-dashed-000-4.5" class="ahem">
<td>
<a href="multicol-rule-dashed-000.htm">multicol-rule-dashed-000</a></td>
<td><a href="reference/multicol-rule-dashed-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'dashed' border style
</td>
</tr>
<tr id="multicol-rule-dotted-000-4.5" class="ahem">
<td>
<a href="multicol-rule-dotted-000.htm">multicol-rule-dotted-000</a></td>
<td><a href="reference/multicol-rule-dotted-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'dotted' border style
</td>
</tr>
<tr id="multicol-rule-double-000-4.5" class="ahem">
<td>
<a href="multicol-rule-double-000.htm">multicol-rule-double-000</a></td>
<td><a href="reference/multicol-rule-double-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'double' border style
</td>
</tr>
<tr id="multicol-rule-groove-000-4.5" class="ahem">
<td>
<a href="multicol-rule-groove-000.htm">multicol-rule-groove-000</a></td>
<td><a href="reference/multicol-rule-groove-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'groove' border style
</td>
</tr>
<tr id="multicol-rule-hidden-000-4.5" class="ahem">
<td>
<a href="multicol-rule-hidden-000.htm">multicol-rule-hidden-000</a></td>
<td><a href="reference/multicol-rule-hidden-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'hidden' border style
</td>
</tr>
<tr id="multicol-rule-inset-000-4.5" class="ahem">
<td>
<a href="multicol-rule-inset-000.htm">multicol-rule-inset-000</a></td>
<td><a href="reference/multicol-rule-ridge-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'inset' border style
<ul class="assert">
<li>'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'.</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-none-000-4.5" class="ahem">
<td>
<a href="multicol-rule-none-000.htm">multicol-rule-none-000</a></td>
<td><a href="reference/multicol-rule-hidden-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'none' border style
</td>
</tr>
<tr id="multicol-rule-outset-000-4.5" class="ahem">
<td>
<a href="multicol-rule-outset-000.htm">multicol-rule-outset-000</a></td>
<td><a href="reference/multicol-rule-groove-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'outset' border style
<ul class="assert">
<li>'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'.</li>
</ul>
</td>
</tr>
<tr id="multicol-rule-ridge-000-4.5" class="ahem">
<td>
<a href="multicol-rule-ridge-000.htm">multicol-rule-ridge-000</a></td>
<td><a href="reference/multicol-rule-ridge-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'ridge' border style
</td>
</tr>
<tr id="multicol-rule-solid-000-4.5" class="ahem">
<td>
<a href="multicol-rule-solid-000.htm">multicol-rule-solid-000</a></td>
<td><a href="reference/multicol-rule-solid-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>column-rule shorthand with 'solid' border style
</td>
</tr>
<tr id="multicol-span-000-4.5" class="ahem image">
<td>
<a href="multicol-span-000.htm">multicol-span-000</a></td>
<td><a href="reference/multicol-span-000-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>column-span (basic)
</td>
</tr>
</tbody>
<tbody id="s4.5.#column-rule0">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>