mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
757 lines
No EOL
36 KiB
HTML
757 lines
No EOL
36 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<title>Grid Items - 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>Grid Items (65 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="https://www.w3.org/TR/css-grid-1/#grid-items">6 Grid Items</a></th></tr>
|
|
<!-- 10 tests -->
|
|
<tr id="grid-inline-items-001-6" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-items-001.htm">grid-inline-items-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>Regular and anonymous grid items within an inline grid
|
|
<ul class="assert">
|
|
<li>Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-items-002-6" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-items-002.htm">grid-inline-items-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>Children of grid items do not create new items within an inline grid
|
|
<ul class="assert">
|
|
<li>Checks that the grid items do not split around blocks creating extra items within an inline grid.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-items-003-6" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-items-003.htm">grid-inline-items-003</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>Grid items with 'display:none' are not rendered within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-item-containing-block-001-6" class="">
|
|
<td>
|
|
<a href="grid-item-containing-block-001.htm">grid-item-containing-block-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Grid item sizing
|
|
<ul class="assert">
|
|
<li>A grid item is sized within the containing block defined by its grid area</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-item-containing-block-002-6" class="">
|
|
<td>
|
|
<a href="grid-item-containing-block-002.htm">grid-item-containing-block-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Grid item sizing
|
|
<ul class="assert">
|
|
<li>A grid item is sized within the containing block defined by its grid area</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-item-containing-block-003-6" class="">
|
|
<td>
|
|
<a href="grid-item-containing-block-003.htm">grid-item-containing-block-003</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Grid item sizing
|
|
<ul class="assert">
|
|
<li>A grid item is sized within the containing block defined by its grid area</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-item-containing-block-004-6" class="">
|
|
<td>
|
|
<a href="grid-item-containing-block-004.htm">grid-item-containing-block-004</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Grid item sizing in a positioned grid container
|
|
<ul class="assert">
|
|
<li>A grid item is sized within the containing block defined by its grid area that intersects flexible tracks</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-items-001-6" class="ahem">
|
|
<td>
|
|
<a href="grid-items-001.htm">grid-items-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>Regular and anonymous grid items
|
|
<ul class="assert">
|
|
<li>Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-items-002-6" class="ahem">
|
|
<td>
|
|
<a href="grid-items-002.htm">grid-items-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>Children of grid items do not create new items
|
|
<ul class="assert">
|
|
<li>Checks that the grid items do not split around blocks creating extra items.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-items-003-6" class="ahem">
|
|
<td>
|
|
<a href="grid-items-003.htm">grid-items-003</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>Grid items with 'display:none' are not rendered
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.#example-d673f1f1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.#grid-item">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.#ref-for-grid-container-30">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.#ref-for-grid-container-31">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.#ref-for-grid-container-32">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.#ref-for-grid-item-24">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.#ref-for-grid-item-25">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.1">+</a>
|
|
<a href="https://www.w3.org/TR/css-grid-1/#grid-item-display">6.1 Grid Item Display</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#grid-level">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#ref-for-grid-container-33">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#ref-for-grid-formatting-context-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#ref-for-grid-item-26">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#ref-for-grid-item-27">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#ref-for-grid-item-28">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#ref-for-grid-item-29">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.1.#ref-for-grid-item-30">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.2">+</a>
|
|
<a href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">6.2 Grid Item Sizing</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2.#ref-for-grid-area-13">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2.#ref-for-grid-item-31">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.2.#ref-for-grid-item-32">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.3">+</a>
|
|
<a href="https://www.w3.org/TR/css-grid-1/#order-property">6.3 Reordered Grid Items: the order property</a></th></tr>
|
|
<!-- 20 tests -->
|
|
<tr id="grid-inline-order-property-auto-placement-001-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-001.htm">grid-inline-order-property-auto-placement-001</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-002-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-002.htm">grid-inline-order-property-auto-placement-002</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-003-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-003.htm">grid-inline-order-property-auto-placement-003</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-004-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-004.htm">grid-inline-order-property-auto-placement-004</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-auto-placement-005-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-auto-placement-005.htm">grid-inline-order-property-auto-placement-005</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-001-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-001.htm">grid-inline-order-property-painting-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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-002-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-002.htm">grid-inline-order-property-painting-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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-003-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-003.htm">grid-inline-order-property-painting-003</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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-004-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-004.htm">grid-inline-order-property-painting-004</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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-order-property-painting-005-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-order-property-painting-005.htm">grid-inline-order-property-painting-005</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>'order' property affects grid items painting order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-001-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-001.htm">grid-order-property-auto-placement-001</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-002-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-002.htm">grid-order-property-auto-placement-002</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-003-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-003.htm">grid-order-property-auto-placement-003</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-004-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-004.htm">grid-order-property-auto-placement-004</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-auto-placement-005-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-auto-placement-005.htm">grid-order-property-auto-placement-005</a></td>
|
|
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'order' property affects grid items auto-placement position
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-001-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-001.htm">grid-order-property-painting-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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-002-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-002.htm">grid-order-property-painting-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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-003-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-003.htm">grid-order-property-painting-003</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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-004-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-004.htm">grid-order-property-painting-004</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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-order-property-painting-005-6.3" class="ahem">
|
|
<td>
|
|
<a href="grid-order-property-painting-005.htm">grid-order-property-painting-005</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>'order' property affects grid items painting order
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.3.#ref-for-grid-item-33">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.4">+</a>
|
|
<a href="https://www.w3.org/TR/css-grid-1/#item-margins">6.4 Grid Item Margins and Paddings</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.4.#ref-for-grid-area-14">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.4.#ref-for-grid-item-34">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.4.#ref-for-grid-item-35">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.4.#ref-for-grid-item-36">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.5">+</a>
|
|
<a href="https://www.w3.org/TR/css-grid-1/#z-order">6.5 Z-axis Ordering: the z-index property</a></th></tr>
|
|
<!-- 26 tests -->
|
|
<tr id="grid-inline-items-inline-blocks-001-6.5" class="">
|
|
<td>
|
|
<a href="grid-inline-items-inline-blocks-001.htm">grid-inline-items-inline-blocks-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Paint order of grid items within an inline grid is the same as inline blocks
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-001-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-001.htm">grid-inline-z-axis-ordering-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>'z-index' property controls the z-axis order of grid items within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-002-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-002.htm">grid-inline-z-axis-ordering-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>'z-index' property controls the z-axis order of grid items within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-003-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-003.htm">grid-inline-z-axis-ordering-003</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>'z-index' property controls the z-axis order of grid items within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-004-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-004.htm">grid-inline-z-axis-ordering-004</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>'z-index' property controls the z-axis order of grid items within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-005-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-005.htm">grid-inline-z-axis-ordering-005</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>'z-index' property controls the z-axis order of grid items within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-overlapped-items-001-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-001.htm">grid-inline-z-axis-ordering-overlapped-items-001</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-overlapped-items-002-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-002.htm">grid-inline-z-axis-ordering-overlapped-items-002</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-overlapped-items-003-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-003.htm">grid-inline-z-axis-ordering-overlapped-items-003</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-overlapped-items-004-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-004.htm">grid-inline-z-axis-ordering-overlapped-items-004</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-overlapped-items-005-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-005.htm">grid-inline-z-axis-ordering-overlapped-items-005</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-inline-z-axis-ordering-overlapped-items-006-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-006.htm">grid-inline-z-axis-ordering-overlapped-items-006</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order within an inline grid
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-items-inline-blocks-001-6.5" class="">
|
|
<td>
|
|
<a href="grid-items-inline-blocks-001.htm">grid-items-inline-blocks-001</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Paint order of grid items is the same as inline blocks
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-layout-z-order-a-6.5" class="">
|
|
<td>
|
|
<a href="grid-layout-z-order-a.htm">grid-layout-z-order-a</a></td>
|
|
<td><a href="reference/grid-layout-z-order-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>z order
|
|
<ul class="assert">
|
|
<li>the layout should behave the same as reference.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-layout-z-order-b-6.5" class="">
|
|
<td>
|
|
<a href="grid-layout-z-order-b.htm">grid-layout-z-order-b</a></td>
|
|
<td><a href="reference/grid-layout-z-order-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>z order
|
|
<ul class="assert">
|
|
<li>the layout should behave the same as reference.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-001-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-001.htm">grid-z-axis-ordering-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>'z-index' property controls the z-axis order of grid items
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-002-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-002.htm">grid-z-axis-ordering-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>'z-index' property controls the z-axis order of grid items
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-003-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-003.htm">grid-z-axis-ordering-003</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>'z-index' property controls the z-axis order of grid items
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-004-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-004.htm">grid-z-axis-ordering-004</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>'z-index' property controls the z-axis order of grid items
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-005-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-005.htm">grid-z-axis-ordering-005</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>'z-index' property controls the z-axis order of grid items
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-overlapped-items-001-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-overlapped-items-001.htm">grid-z-axis-ordering-overlapped-items-001</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-overlapped-items-002-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-overlapped-items-002.htm">grid-z-axis-ordering-overlapped-items-002</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-overlapped-items-003-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-overlapped-items-003.htm">grid-z-axis-ordering-overlapped-items-003</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-overlapped-items-004-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-overlapped-items-004.htm">grid-z-axis-ordering-overlapped-items-004</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-overlapped-items-005-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-overlapped-items-005.htm">grid-z-axis-ordering-overlapped-items-005</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-z-axis-ordering-overlapped-items-006-6.5" class="ahem">
|
|
<td>
|
|
<a href="grid-z-axis-ordering-overlapped-items-006.htm">grid-z-axis-ordering-overlapped-items-006</a></td>
|
|
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
|
|
<td>'z-index' property controls the grid items stacking order
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.5.#example-25600ee6">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.5.#ref-for-grid-area-15">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.5.#ref-for-grid-item-37">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.5.#ref-for-grid-item-38">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s6.6">+</a>
|
|
<a href="https://www.w3.org/TR/css-grid-1/#min-size-auto">6.6 Implied Minimum Size of Grid Items</a></th></tr>
|
|
<!-- 9 tests -->
|
|
<tr id="grid-minimum-size-grid-items-001-6.6" class="ahem">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-001.htm">grid-minimum-size-grid-items-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>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the content size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-002-6.6" class="">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-002.htm">grid-minimum-size-grid-items-002</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the content size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-003-6.6" class="">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-003.htm">grid-minimum-size-grid-items-003</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the specified size regardless of the content size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-004-6.6" class="">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-004.htm">grid-minimum-size-grid-items-004</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the specified size regardless of the content size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-005-6.6" class="image">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-005.htm">grid-minimum-size-grid-items-005</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the content size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-006-6.6" class="image">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-006.htm">grid-minimum-size-grid-items-006</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size for height (as it's smaller than the content size of the image).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-007-6.6" class="image">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-007.htm">grid-minimum-size-grid-items-007</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the specified size for width (regardless the content size) and the content size for height (as it's smaller than the transferred size of the image).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-008-6.6" class="image">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-008.htm">grid-minimum-size-grid-items-008</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size for width (as it's smaller than the content size of the image).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-009-6.6" class="image">
|
|
<td>
|
|
<a href="grid-minimum-size-grid-items-009.htm">grid-minimum-size-grid-items-009</a></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Minimum size of grid items
|
|
<ul class="assert">
|
|
<li>Checks that minimum size for grid items is the specified size for height (regardless the content size) and the content size for width (as it's smaller than the transferred size of the image).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s6.6.#min-size-opt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6.#ref-for-fixed-sizing-function-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6.#ref-for-grid-area-16">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6.#ref-for-grid-item-39">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6.#ref-for-grid-item-40">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6.#ref-for-grid-item-41">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6.#ref-for-grid-track-8">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s6.6.#ref-for-max-track-sizing-function-1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |