mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
617 lines
No EOL
32 KiB
HTML
617 lines
No EOL
32 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 (61 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="http://www.w3.org/TR/css-grid-1/#grid-items">4 Grid Items</a></th></tr>
|
|
<!-- 6 tests -->
|
|
<tr id="grid-inline-items-001-4" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-items-001.htm">grid-inline-items-001</a></strong></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-4" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-items-002.htm">grid-inline-items-002</a></strong></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-4" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-items-003.htm">grid-inline-items-003</a></strong></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-items-001-4" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-items-001.htm">grid-items-001</a></strong></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-4" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-items-002.htm">grid-items-002</a></strong></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-4" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-items-003.htm">grid-items-003</a></strong></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="s4.#example-565bbd9a">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.#grid-item">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.#grid-level">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.#issue-1779cb08">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.1">+</a>
|
|
<a href="http://www.w3.org/TR/css-grid-1/#visibility-collapse">4.1 Collapsed Grid Items: the visibility property</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.1.#issue-8f83c1bc">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.2">+</a>
|
|
<a href="http://www.w3.org/TR/css-grid-1/#order-property">4.2 Reordered Grid Items: the order property</a></th></tr>
|
|
<!-- 20 tests -->
|
|
<tr id="grid-inline-order-property-auto-placement-001-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-auto-placement-001.htm">grid-inline-order-property-auto-placement-001</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-auto-placement-002.htm">grid-inline-order-property-auto-placement-002</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-auto-placement-003.htm">grid-inline-order-property-auto-placement-003</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-auto-placement-004.htm">grid-inline-order-property-auto-placement-004</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-auto-placement-005.htm">grid-inline-order-property-auto-placement-005</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-painting-001.htm">grid-inline-order-property-painting-001</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-painting-002.htm">grid-inline-order-property-painting-002</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-painting-003.htm">grid-inline-order-property-painting-003</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-painting-004.htm">grid-inline-order-property-painting-004</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-order-property-painting-005.htm">grid-inline-order-property-painting-005</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-auto-placement-001.htm">grid-order-property-auto-placement-001</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-auto-placement-002.htm">grid-order-property-auto-placement-002</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-auto-placement-003.htm">grid-order-property-auto-placement-003</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-auto-placement-004.htm">grid-order-property-auto-placement-004</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-auto-placement-005.htm">grid-order-property-auto-placement-005</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-painting-001.htm">grid-order-property-painting-001</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-painting-002.htm">grid-order-property-painting-002</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-painting-003.htm">grid-order-property-painting-003</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-painting-004.htm">grid-order-property-painting-004</a></strong></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-4.2" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-order-property-painting-005.htm">grid-order-property-painting-005</a></strong></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="s4.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.3">+</a>
|
|
<a href="http://www.w3.org/TR/css-grid-1/#z-order">4.3 Z-axis Ordering: the z-index property</a></th></tr>
|
|
<!-- 26 tests -->
|
|
<tr id="grid-inline-items-inline-blocks-001-4.3" class="primary">
|
|
<td><strong>
|
|
<a href="grid-inline-items-inline-blocks-001.htm">grid-inline-items-inline-blocks-001</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-001.htm">grid-inline-z-axis-ordering-001</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-002.htm">grid-inline-z-axis-ordering-002</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-003.htm">grid-inline-z-axis-ordering-003</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-004.htm">grid-inline-z-axis-ordering-004</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-005.htm">grid-inline-z-axis-ordering-005</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-001.htm">grid-inline-z-axis-ordering-overlapped-items-001</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-002.htm">grid-inline-z-axis-ordering-overlapped-items-002</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-003.htm">grid-inline-z-axis-ordering-overlapped-items-003</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-004.htm">grid-inline-z-axis-ordering-overlapped-items-004</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-005.htm">grid-inline-z-axis-ordering-overlapped-items-005</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-inline-z-axis-ordering-overlapped-items-006.htm">grid-inline-z-axis-ordering-overlapped-items-006</a></strong></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-4.3" class="primary">
|
|
<td><strong>
|
|
<a href="grid-items-inline-blocks-001.htm">grid-items-inline-blocks-001</a></strong></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-4.3" class="primary">
|
|
<td><strong>
|
|
<a href="grid-layout-z-order-a.htm">grid-layout-z-order-a</a></strong></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-4.3" class="primary">
|
|
<td><strong>
|
|
<a href="grid-layout-z-order-b.htm">grid-layout-z-order-b</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-001.htm">grid-z-axis-ordering-001</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-002.htm">grid-z-axis-ordering-002</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-003.htm">grid-z-axis-ordering-003</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-004.htm">grid-z-axis-ordering-004</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-005.htm">grid-z-axis-ordering-005</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-overlapped-items-001.htm">grid-z-axis-ordering-overlapped-items-001</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-overlapped-items-002.htm">grid-z-axis-ordering-overlapped-items-002</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-overlapped-items-003.htm">grid-z-axis-ordering-overlapped-items-003</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-overlapped-items-004.htm">grid-z-axis-ordering-overlapped-items-004</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-overlapped-items-005.htm">grid-z-axis-ordering-overlapped-items-005</a></strong></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-4.3" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-z-axis-ordering-overlapped-items-006.htm">grid-z-axis-ordering-overlapped-items-006</a></strong></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="s4.3.#example-25600ee6">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s4.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s4.4">+</a>
|
|
<a href="http://www.w3.org/TR/css-grid-1/#min-size-auto">4.4 Implied Minimum Size of Grid Items</a></th></tr>
|
|
<!-- 9 tests -->
|
|
<tr id="grid-minimum-size-grid-items-001-4.4" class="primary ahem">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-001.htm">grid-minimum-size-grid-items-001</a></strong></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 min-content size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-002-4.4" class="primary">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-002.htm">grid-minimum-size-grid-items-002</a></strong></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 min-content size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-003-4.4" class="primary">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-003.htm">grid-minimum-size-grid-items-003</a></strong></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-4.4" class="primary">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-004.htm">grid-minimum-size-grid-items-004</a></strong></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-4.4" class="primary image">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-005.htm">grid-minimum-size-grid-items-005</a></strong></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 min-content size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-006-4.4" class="primary image">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-006.htm">grid-minimum-size-grid-items-006</a></strong></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, as the min-content size of the image corresponds to that.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-007-4.4" class="primary image">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-007.htm">grid-minimum-size-grid-items-007</a></strong></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, as the min-content size of the image corresponds to that.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-008-4.4" class="primary image">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-008.htm">grid-minimum-size-grid-items-008</a></strong></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 transferred size, as the min-content size of the image corresponds to that.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="grid-minimum-size-grid-items-009-4.4" class="primary image">
|
|
<td><strong>
|
|
<a href="grid-minimum-size-grid-items-009.htm">grid-minimum-size-grid-items-009</a></strong></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 transferred size, as the min-content size of the image corresponds to that.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s4.4.#min-size-opt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |