servo/tests/wpt/css-tests/css-grid-1_dev/html/chapter-5.htm

472 lines
No EOL
20 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>The Explicit Grid - CSS Grid 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 Grid Layout Module Level 1 CR Test Suite</h1>
<h2>The Explicit Grid (17 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="s5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-definition">5 The Explicit Grid</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.#explicit-grid">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#track-sizing">5.1 Track Sizing: the grid-template-rows and grid-template-columns properties</a></th></tr>
<!-- 4 tests -->
<tr id="grid-inline-support-grid-template-columns-rows-001-5.1" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-grid-template-columns-rows-001.htm">grid-inline-support-grid-template-columns-rows-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list.</li>
</ul>
</td>
</tr>
<tr id="grid-layout-auto-tracks-5.1" class="primary">
<td><strong>
<a href="grid-layout-auto-tracks.htm">grid-layout-auto-tracks</a></strong></td>
<td><a href="reference/grid-layout-auto-tracks-ref.htm">=</a> </td>
<td></td>
<td>auto tracks
<ul class="assert">
<li>the layout should behave the same as reference.</li>
</ul>
</td>
</tr>
<tr id="grid-layout-basic-5.1" class="primary">
<td><strong>
<a href="grid-layout-basic.htm">grid-layout-basic</a></strong></td>
<td><a href="reference/grid-layout-basic-ref.htm">=</a> </td>
<td></td>
<td>basic
<ul class="assert">
<li>the layout should behave the same as reference.</li>
</ul>
</td>
</tr>
<tr id="grid-support-grid-template-columns-rows-001-5.1" class="primary ahem dom script">
<td><strong>
<a href="grid-support-grid-template-columns-rows-001.htm">grid-support-grid-template-columns-rows-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for 'grid-template-columns' and 'grid-template-rows' properties
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.#example-b22f59e2">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#example-cbfcc6c1">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#flex-factor">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#propdef-grid-template-columns">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#propdef-grid-template-rows">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#track-list">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#track-sizing-function">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#typedef-auto-track-list">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#typedef-fixed-breadth">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#typedef-fixed-size">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#typedef-line-name-list">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#typedef-line-names">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#typedef-track-breadth">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#typedef-track-list">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#typedef-track-size">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-columns-auto">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-columns-flex">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-columns-length">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-columns-max-content">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-columns-min-content">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-columns-minmax">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-columns-percentage">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-rows-none">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.#valdef-grid-template-rows-subgrid">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#named-lines">5.1.1 Named Grid Lines: the [<custom-ident>*] syntax</a></th></tr>
<!-- 2 tests -->
<tr id="grid-inline-support-named-grid-lines-001-5.1.1" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-named-grid-lines-001.htm">grid-inline-support-named-grid-lines-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
<ul class="assert">
<li>This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid.</li>
</ul>
</td>
</tr>
<tr id="grid-support-named-grid-lines-001-5.1.1" class="primary ahem dom script">
<td><strong>
<a href="grid-support-named-grid-lines-001.htm">grid-support-named-grid-lines-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties
<ul class="assert">
<li>This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.1.#example-6123b007">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.1.#named-line">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#repeat-notation">5.1.2 Repeating Rows and Columns: the repeat() notation</a></th></tr>
<!-- 3 tests -->
<tr id="grid-inline-support-repeat-001-5.1.2" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-repeat-001.htm">grid-inline-support-repeat-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list.</li>
</ul>
</td>
</tr>
<tr id="grid-layout-repeat-notation-5.1.2" class="primary">
<td><strong>
<a href="grid-layout-repeat-notation.htm">grid-layout-repeat-notation</a></strong></td>
<td><a href="reference/grid-layout-repeat-notation-ref.htm">=</a> </td>
<td></td>
<td>repeat notation
<ul class="assert">
<li>the subgrid layout should behave the same as reference.</li>
</ul>
</td>
</tr>
<tr id="grid-support-repeat-001-5.1.2" class="primary ahem dom script">
<td><strong>
<a href="grid-support-repeat-001.htm">grid-support-repeat-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.2.#example-bb14e892">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#funcdef-repeat">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#issue-6cc61e0b">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#typedef-auto-repeat">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#typedef-fixed-repeat">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#typedef-name-repeat">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#typedef-track-repeat">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#valdef-repeat-auto-fill">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#valdef-repeat-auto-fit">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1.3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#fr-unit">5.1.3 Flexible Lengths: the fr unit</a></th></tr>
<!-- 4 tests -->
<tr id="fr-unit-5.1.3" class="primary">
<td><strong>
<a href="fr-unit.htm">fr-unit</a></strong></td>
<td><a href="reference/fr-unit-ref.htm">=</a> </td>
<td></td>
<td>CSS3 Grid Layout: Flexible Length
<ul class="assert">
<li>'fr' unit represents a fraction of the free space in the grid container.</li>
</ul>
</td>
</tr>
<tr id="fr-unit-with-percentage-5.1.3" class="primary">
<td><strong>
<a href="fr-unit-with-percentage.htm">fr-unit-with-percentage</a></strong></td>
<td><a href="reference/fr-unit-with-percentage-ref.htm">=</a> </td>
<td></td>
<td>CSS3 Grid Layout: Flexible Lenght
</td>
</tr>
<tr id="grid-inline-support-flexible-lengths-001-5.1.3" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-flexible-lengths-001.htm">grid-inline-support-flexible-lengths-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container.</li>
</ul>
</td>
</tr>
<tr id="grid-support-flexible-lengths-001-5.1.3" class="primary ahem dom script">
<td><strong>
<a href="grid-support-flexible-lengths-001.htm">grid-support-flexible-lengths-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.3.#flex-fraction">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.3.#flexible-length">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.3.#typedef-flex">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1.4">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#subgrids">5.1.4 Subgrids: the subgrid keyword</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.4.#example-51d08e15">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.4.#example-55adf7b5">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.4.#example-6839256e">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.4.#example-b547f836">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.4.#issue-b2c6c5eb">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.4.#subgrid">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1.5">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#resolved-track-list">5.1.5 Resolved Values</a></th></tr>
<!-- 2 tests -->
<tr id="grid-inline-template-columns-rows-resolved-values-001-5.1.5" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-template-columns-rows-resolved-values-001.htm">grid-inline-template-columns-rows-resolved-values-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid
<ul class="assert">
<li>This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid.</li>
</ul>
</td>
</tr>
<tr id="grid-template-columns-rows-resolved-values-001-5.1.5" class="primary ahem dom script">
<td><strong>
<a href="grid-template-columns-rows-resolved-values-001.htm">grid-template-columns-rows-resolved-values-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks
<ul class="assert">
<li>This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.5.#example-c7bf51ed">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property">5.2 Named Areas: the grid-template-areas property</a></th></tr>
<!-- 2 tests -->
<tr id="grid-inline-support-grid-template-areas-001-5.2" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-grid-template-areas-001.htm">grid-inline-support-grid-template-areas-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for 'grid-template-ares' property within an inline grid
<ul class="assert">
<li>This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure.</li>
</ul>
</td>
</tr>
<tr id="grid-support-grid-template-areas-001-5.2" class="primary ahem dom script">
<td><strong>
<a href="grid-support-grid-template-areas-001.htm">grid-support-grid-template-areas-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for 'grid-template-ares' property
<ul class="assert">
<li>This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.2.#example-1e271cff">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#named-cell-token">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#named-grid-area">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#null-cell-token">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#propdef-grid-template-areas">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#trash-token">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#valdef-grid-template-areas-none">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.#valdef-grid-template-areas-string">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.2.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#implicit-named-lines">5.2.1 Implicit Named Lines</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.1.#implicit-named-line">
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.2.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#implicit-named-areas">5.2.2 Implicit Named Areas</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.2.2.#implicit-named-area">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#explicit-grid-shorthand">5.3 Explicit Grid Shorthand: the grid-template property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#example-7bb340db">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#example-cff2ea6e">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#grid-template-ascii">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#grid-template-rowcol">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#propdef-grid-template">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#valdef-grid-template-none">
<!-- 0 tests -->
</tbody>
<tbody id="s5.3.#valdef-grid-template-subgrid">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>