Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions

View file

@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction and Overview - 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>Introduction and Overview (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#intro">1 Introduction and Overview</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#background">1.1 Background and Motivation</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#adapting-to-available-space">1.2 Adapting Layouts to Available Space</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#source-independence">1.3 Source-Order Independence</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.4">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-layering">1.4 Grid Layering of Elements</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,81 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alignment - 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>Alignment (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s10">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#alignment">10 Alignment</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#auto-margins">10.1 Aligning with auto margins</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.1.#issue-1383de0a">
<!-- 0 tests -->
</tbody>
<tbody id="s10.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#row-align">10.2 Row-axis Alignment: the justify-self and justify-items properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.2.#issue-3a8dda12">
<!-- 0 tests -->
</tbody>
<tbody id="s10.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10.3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#column-align">10.3 Column-axis Alignment: the align-self and align-items properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10.4">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-align">10.4 Aligning the Grid: the justify-content and align-content properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10.5">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-baselines">10.5 Grid Baselines</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s10.5.#baseline-participation">
<!-- 0 tests -->
</tbody>
<tbody id="s10.5.#order_modified-grid-order">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,155 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Sizing - 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 Sizing (1 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s11">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#layout-algorithm">11 Grid Sizing</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.#fixed-sizing-function">
<!-- 0 tests -->
</tbody>
<tbody id="s11.#flexible-sizing-function">
<!-- 0 tests -->
</tbody>
<tbody id="s11.#grid-sizing-algorithm">
<!-- 0 tests -->
</tbody>
<tbody id="s11.#intrinsic-sizing-function">
<!-- 0 tests -->
</tbody>
<tbody id="s11.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#algo-overview">11.1 Grid Sizing Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#algo-terms">11.2 Track Sizing Terminology</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.2.#free-space">
<!-- 1 tests -->
<tr id="grid-layout-free-space-unit-11.2.#free-space" class="primary">
<td><strong>
<a href="grid-layout-free-space-unit.xht">grid-layout-free-space-unit</a></strong></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td></td>
<td>free space unit
<ul class="assert">
<li>the layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s11.2.#max-track-sizing-function">
<!-- 0 tests -->
</tbody>
<tbody id="s11.2.#min-track-sizing-function">
<!-- 0 tests -->
</tbody>
<tbody id="s11.2.#span-count">
<!-- 0 tests -->
</tbody>
<tbody id="s11.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#algo-track-sizing">11.3 Track Sizing Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.3.#base-size">
<!-- 0 tests -->
</tbody>
<tbody id="s11.3.#growth-limit">
<!-- 0 tests -->
</tbody>
<tbody id="s11.3.#track-sizing-algorithm">
<!-- 0 tests -->
</tbody>
<tbody id="s11.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.4">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#algo-init">11.4 Initialize Track Sizes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.5">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#algo-content">11.5 Resolve Intrinsic Track Sizes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.5.#distribute-extra-space">
<!-- 0 tests -->
</tbody>
<tbody id="s11.5.#extra-space">
<!-- 0 tests -->
</tbody>
<tbody id="s11.5.#infinitely-growable">
<!-- 0 tests -->
</tbody>
<tbody id="s11.5.#issue-b256823c">
<!-- 0 tests -->
</tbody>
<tbody id="s11.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.6">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#algo-grow-tracks">11.6 Maximize Tracks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.7">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#algo-flex-tracks">11.7 Stretch Flexible Tracks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11.7.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#algo-find-fr-size">11.7.1 Find the Size of an fr</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s11.7.1.#flex-factor-sum">
<!-- 0 tests -->
</tbody>
<tbody id="s11.7.1.#hypothetical-fr-size">
<!-- 0 tests -->
</tbody>
<tbody id="s11.7.1.#leftover-space">
<!-- 0 tests -->
</tbody>
<tbody id="s11.7.1.#space-to-fill">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,185 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fragmenting Grid Layout - 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>Fragmenting Grid Layout (1 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s12">
<tr><th colspan="4" scope="rowgroup">
<a href="#s12">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#pagination">12 Fragmenting Grid Layout</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s12.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s12.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#fragmentation-alg">12.1 Sample Fragmentation Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s12.1.#issue-69d6a1c1">
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acks">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-align-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-break-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-display-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-flexbox-1">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-multicol-1">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-overflow-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-position-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-pseudo-4">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-sizing-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-syntax-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-values-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css-writing-modes-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css21">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-align">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-flexbox">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-sizing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3val">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-mediaqueries-4">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-rfc2119">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance-classes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conventions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#experimental">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index-defined-elsewhere">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index-defined-here">
<!-- 0 tests -->
</tbody>
<tbody id="s.#issues-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#partial">
<!-- 0 tests -->
</tbody>
<tbody id="s.#property-index">
<!-- 1 tests -->
<tr id="grid-layout-properties-.#property-index" class="primary dom script">
<td><strong>
<a href="grid-layout-properties.xht">grid-layout-properties</a></strong></td>
<td></td>
<td><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 Layout - Properties exist
<ul class="assert">
<li>Test checks that css properties of grid layout exist.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#status">
<!-- 0 tests -->
</tbody>
<tbody id="s.#subtitle">
<!-- 0 tests -->
</tbody>
<tbody id="s.#testing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#title">
<!-- 0 tests -->
</tbody>
<tbody id="s.#w3c_process_revision">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,109 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Layout Concepts and Terminology - 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 Layout Concepts and Terminology (2 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-concepts">2 Grid Layout Concepts and Terminology</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.#column-axis">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#grid">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#grid-column">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#grid-layout">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#grid-row">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#row-axis">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-track-concept">2.1 Grid Tracks and Cells</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.1.#grid-cell">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1.#grid-track">
<!-- 0 tests -->
</tbody>
<tbody id="s2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-line-concept">2.2 Grid Lines</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.2.#grid-line">
<!-- 2 tests -->
<tr id="grid-layout-lines-2.2.#grid-line" class="primary">
<td><strong>
<a href="grid-layout-lines.xht">grid-layout-lines</a></strong></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td></td>
<td>grid lines
<ul class="assert">
<li>the subgrid layout should behave the same as reference.</li>
</ul>
</td>
</tr>
<tr id="grid-layout-lines-shorthands-2.2.#grid-line" class="primary">
<td><strong>
<a href="grid-layout-lines-shorthands.xht">grid-layout-lines-shorthands</a></strong></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td></td>
<td>grid lines shorthands
<ul class="assert">
<li>the subgrid layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-area-concept">2.3 Grid Areas</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.3.#grid-area">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,153 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Containers - 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 Containers (9 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-model">3 Grid Containers</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-containers">3.1 Establishing Grid Containers: the grid and inline-grid display values</a></th></tr>
<!-- 9 tests -->
<tr id="display-grid-3.1" class="primary">
<td><strong>
<a href="display-grid.xht">display-grid</a></strong></td>
<td><a href="reference/display-grid-ref.xht">=</a> </td>
<td></td>
<td>CSS Grid Layout: display: grid
<ul class="assert">
<li>'display: grid' causes an element to generate a block-level grid container box.</li>
</ul>
</td>
</tr>
<tr id="display-inline-grid-3.1" class="primary">
<td><strong>
<a href="display-inline-grid.xht">display-inline-grid</a></strong></td>
<td><a href="reference/display-inline-grid-ref.xht">=</a> </td>
<td></td>
<td>CSS Grid Layout: display: inline-grid
<ul class="assert">
<li>'display: inline-grid' causes an element to generate an inline-level grid container box.</li>
</ul>
</td>
</tr>
<tr id="grid-display-grid-001-3.1" class="primary ahem">
<td><strong>
<a href="grid-display-grid-001.xht">grid-display-grid-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'grid' value for 'display' property
<ul class="assert">
<li>This test checks that 'grid' value for 'display' property generates a block level containing box.</li>
</ul>
</td>
</tr>
<tr id="grid-display-inline-grid-001-3.1" class="primary">
<td><strong>
<a href="grid-display-inline-grid-001.xht">grid-display-inline-grid-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>'inline-grid' value for 'display' property
<ul class="assert">
<li>This test checks that 'inline-grid' value for 'display' property generates an inline level containing box.</li>
</ul>
</td>
</tr>
<tr id="grid-float-001-3.1" class="primary">
<td><strong>
<a href="grid-float-001.xht">grid-float-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>'float' has no effect on grid items
</td>
</tr>
<tr id="grid-inline-float-001-3.1" class="primary">
<td><strong>
<a href="grid-inline-float-001.xht">grid-inline-float-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>'float' has no effect on grid items within an inline grid
</td>
</tr>
<tr id="grid-inline-vertical-align-001-3.1" class="primary ahem">
<td><strong>
<a href="grid-inline-vertical-align-001.xht">grid-inline-vertical-align-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'vertical-align' has no effect on grid items within an inline grid
</td>
</tr>
<tr id="grid-support-display-001-3.1" class="primary dom script">
<td><strong>
<a href="grid-support-display-001.xht">grid-support-display-001</a></strong></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>DOM support for 'grid' and 'inline-grid' 'display' values
<ul class="assert">
<li>This test checks that 'grid' and 'inline-grid' values for 'display' property are supported so that DOM methods, specifically getComputedValue(), and its associated CSS2Properties interface, can fetch such 'display' values.</li>
</ul>
</td>
</tr>
<tr id="grid-vertical-align-001-3.1" class="primary ahem">
<td><strong>
<a href="grid-vertical-align-001.xht">grid-vertical-align-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'vertical-align' has no effect on grid items
</td>
</tr>
</tbody>
<tbody id="s3.1.#grid-container">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#grid-formatting-context">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#valdef-display-grid">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#valdef-display-inline-grid">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#intrinsic-sizes">3.2 Sizing Grid Containers</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.#issue-839d056f">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,91 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 (2 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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>
<!-- 0 tests -->
</tbody>
<tbody id="s4.#grid-item">
<!-- 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>
<!-- 0 tests -->
</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/#static-position">4.3 Static Position of Grid Container Children</a></th></tr>
<!-- 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/#z-order">4.4 Z-axis Ordering: the z-index property</a></th></tr>
<!-- 2 tests -->
<tr id="grid-layout-z-order-a-4.4" class="primary">
<td><strong>
<a href="grid-layout-z-order-a.xht">grid-layout-z-order-a</a></strong></td>
<td><a href="reference/grid-layout-z-order-ref.xht">=</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.4" class="primary">
<td><strong>
<a href="grid-layout-z-order-b.xht">grid-layout-z-order-b</a></strong></td>
<td><a href="reference/grid-layout-z-order-ref.xht">=</a> </td>
<td></td>
<td>z order
<ul class="assert">
<li>the layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,263 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 (4 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<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>
<!-- 1 tests -->
<tr id="grid-layout-basic-5.1" class="primary">
<td><strong>
<a href="grid-layout-basic.xht">grid-layout-basic</a></strong></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td></td>
<td>basic
<ul class="assert">
<li>the layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</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-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-flex-factor">
<!-- 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>
<!-- 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>
<!-- 1 tests -->
<tr id="grid-layout-repeat-notation-5.1.2" class="primary">
<td><strong>
<a href="grid-layout-repeat-notation.xht">grid-layout-repeat-notation</a></strong></td>
<td><a href="reference/grid-layout-repeat-notation-ref.xht">=</a> </td>
<td></td>
<td>repeat notation
<ul class="assert">
<li>the subgrid layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.2.#funcdef-repeat">
<!-- 0 tests -->
</tbody>
<tbody id="s5.1.2.#valdef-repeat-auto">
<!-- 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>
<!-- 2 tests -->
<tr id="fr-unit-5.1.3" class="primary">
<td><strong>
<a href="fr-unit.xht">fr-unit</a></strong></td>
<td><a href="reference/fr-unit-ref.xht">=</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.xht">fr-unit-with-percentage</a></strong></td>
<td><a href="reference/fr-unit-with-percentage-ref.xht">=</a> </td>
<td></td>
<td>CSS3 Grid Layout: Flexible Lenght
</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.#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>
<!-- 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>
<!-- 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.#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>

View file

@ -0,0 +1,89 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Implicit 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 Implicit Grid (1 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#implicit-grids">6 The Implicit Grid</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.#implicit-grid">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#auto-tracks">6.1 Sizing Auto-generated Rows and Columns: the grid-auto-rows and grid-auto-columns properties</a></th></tr>
<!-- 1 tests -->
<tr id="grid-layout-auto-tracks-6.1" class="primary">
<td><strong>
<a href="grid-layout-auto-tracks.xht">grid-layout-auto-tracks</a></strong></td>
<td><a href="reference/grid-layout-auto-tracks-ref.xht">=</a> </td>
<td></td>
<td>auto tracks
<ul class="assert">
<li>the layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.1.#implicit-grid-track">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#propdef-grid-auto-columns">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#propdef-grid-auto-rows">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-auto-flow-property">6.2 Automatic Placement: the grid-auto-flow property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#auto_placement">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#propdef-grid-auto-flow">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#valdef-grid-auto-flow-column">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#valdef-grid-auto-flow-dense">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#valdef-grid-auto-flow-row">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Definition Shorthand: the grid property - 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 Definition Shorthand: the grid property (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-shorthand">7 Grid Definition Shorthand: the grid property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.#propdef-grid">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clamping Overlarge Grids - 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>Clamping Overlarge Grids (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s8">
<tr><th colspan="4" scope="rowgroup">
<a href="#s8">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#overlarge-grids">8 Clamping Overlarge Grids</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,202 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Placing 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>Placing Grid Items (2 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s9">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#placement">9 Placing Grid Items</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.#automatic-grid-position">
<!-- 0 tests -->
</tbody>
<tbody id="s9.#automatic-grid-span">
<!-- 0 tests -->
</tbody>
<tbody id="s9.#definite-grid-position">
<!-- 0 tests -->
</tbody>
<tbody id="s9.#definite-grid-span">
<!-- 0 tests -->
</tbody>
<tbody id="s9.#grid-placement">
<!-- 0 tests -->
</tbody>
<tbody id="s9.#grid-position">
<!-- 0 tests -->
</tbody>
<tbody id="s9.#grid-span">
<!-- 1 tests -->
<tr id="grid-layout-grid-span-9.#grid-span" class="primary">
<td><strong>
<a href="grid-layout-grid-span.xht">grid-layout-grid-span</a></strong></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td></td>
<td>grid span
<ul class="assert">
<li>the layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s9.#grid_placement-property">
<!-- 0 tests -->
</tbody>
<tbody id="s9.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#common-uses">9.1 Common Patterns for Grid Placement</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.1.#grid-property-breakdown">
<!-- 0 tests -->
</tbody>
<tbody id="s9.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#common-uses-named-areas">9.1.1 Named Areas</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#common-uses-numeric">9.1.2 Numeric Indexes and Spans</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.1.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines">9.1.3 Named Lines and Spans</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.1.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.4">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#common-uses-auto-placement">9.1.4 Auto Placement</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.1.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.1.5">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#common-uses-auto-sizing">9.1.5 Auto Sizing Subgrids</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.2">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#line-placement">9.2 Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#grid-placement-auto">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#grid-placement-int">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#grid-placement-slot">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#grid-placement-span-int">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#propdef-grid-column-end">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#propdef-grid-column-start">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#propdef-grid-row-end">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#propdef-grid-row-start">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.#typedef-grid-line">
<!-- 0 tests -->
</tbody>
<tbody id="s9.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.2.1">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#grid-placement-errors">9.2.1 Grid Placement Conflict Handling</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.3">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#placement-shorthands">9.3 Placement Shorthands: the grid-column, grid-row, and grid-area properties</a></th></tr>
<!-- 1 tests -->
<tr id="grid-layout-placement-shorthands-9.3" class="primary">
<td><strong>
<a href="grid-layout-placement-shorthands.xht">grid-layout-placement-shorthands</a></strong></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td></td>
<td>placement shorthand
<ul class="assert">
<li>the layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s9.3.#propdef-grid-area">
<!-- 0 tests -->
</tbody>
<tbody id="s9.3.#propdef-grid-column">
<!-- 0 tests -->
</tbody>
<tbody id="s9.3.#propdef-grid-row">
<!-- 0 tests -->
</tbody>
<tbody id="s9.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.4">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#abspos-items">9.4 Absolutely-positioned Grid Items</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9.5">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#auto-placement-algo">9.5 Grid Item Placement Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s9.5.#auto_placement-cursor">
<!-- 0 tests -->
</tbody>
<tbody id="s9.5.#grid-item-placement-algorithm">
<!-- 0 tests -->
</tbody>
<tbody id="s9.5.#occupied">
<!-- 0 tests -->
</tbody>
<tbody id="s9.5.#unoccupied">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Translated Layout Algorithm - 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>Translated Layout Algorithm (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="sA">
<tr><th colspan="4" scope="rowgroup">
<a href="#sA">+</a>
<a href="http://www.w3.org/TR/css-grid-1/#translated-algo">A Translated Layout Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="sA.#growable-tracks">
<!-- 0 tests -->
</tbody>
<tbody id="sA.#growth-delta">
<!-- 0 tests -->
</tbody>
<tbody id="sA.#hypothetical-size">
<!-- 0 tests -->
</tbody>
<tbody id="sA.#needed-space">
<!-- 0 tests -->
</tbody>
<tbody id="sA.#overgrowable-tracks">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,107 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout: display: grid</title>
<link href="mailto:swainet@126.com" rel="author" title="swain" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-17 -->
<link href="http://www.w3.org/TR/css-grid-1/#grid-containers" rel="help" />
<link href="reference/display-grid-ref.xht" rel="match" />
<meta content="'display: grid' causes an element to generate a block-level grid container box." name="assert" />
<style type="text/css">
#container {
position:relative;
width:400px;
height:100px;
}
#grid {
display:grid;
grid-template-columns:100px 300px;
grid-template-rows:70px 30px;
height:100%;
}
#cell1 {
grid-column:1;
grid-row:1;
background-color:green;
height:70px;
}
#cell2 {
grid-column:2;
grid-row:1;
background-color:limegreen;
height:70px;
}
#cell3 {
grid-column:1;
grid-row:2;
background-color:limegreen;
height:30px;
}
#cell4 {
grid-column:2;
grid-row:2;
background-color:green;
height:30px;
}
.error {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
#table {
width:100%;
height:100%;
border-collapse:collapse;
}
#table td {
padding:0;
vertical-align:top;
}
#table td:first-child {
width:100px;
}
#table tr:last-child td {
height:30px;
}
</style>
</head>
<body>
<p>Test passes if there are 4 green rectangles and no red.</p>
<div id="container">
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
<div id="cell3">cell3</div>
<div id="cell4">cell4</div>
</div>
<div class="error">
<table id="table">
<tbody>
<tr>
<td style="background-color:#f00">cell1</td>
<td style="background-color:#e00">cell2</td>
</tr>
<tr>
<td style="background-color:#e00">cell3</td>
<td style="background-color:#f00">cell4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>

View file

@ -0,0 +1,111 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout: display: inline-grid</title>
<link href="mailto:swainet@126.com" rel="author" title="swain" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-17 -->
<link href="http://www.w3.org/TR/css-grid-1/#grid-containers" rel="help" />
<link href="reference/display-inline-grid-ref.xht" rel="match" />
<meta content="'display: inline-grid' causes an element to generate an inline-level grid container box." name="assert" />
<style type="text/css">
#container {
position:relative;
}
#grid {
display:inline-grid;
grid-template-columns:100px 300px;
grid-template-rows:70px 30px;
width:400px;
height:100px;
}
#cell1 {
grid-column:1;
grid-row:1;
background-color:green;
height:70px;
}
#cell2 {
grid-column:2;
grid-row:1;
background-color:limegreen;
height:70px;
}
#cell3 {
grid-column:1;
grid-row:2;
background-color:limegreen;
height:30px;
}
#cell4 {
grid-column:2;
grid-row:2;
background-color:green;
height:30px;
}
.error {
position:absolute;
top:0;
left:0;
height:100px;
width:400px;
z-index:-1;
}
#table {
width:100%;
height:100%;
border-collapse:collapse;
}
#table td {
padding:0;
vertical-align:top;
}
#table td:first-child {
width:100px;
}
#table tr:last-child td {
height:30px;
}
span {
vertical-align:top;
}
</style>
</head>
<body>
<p>Test passes if there are 4 green rectangles and no red.</p>
<div id="container">
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
<div id="cell3">cell3</div>
<div id="cell4">cell4</div>
</div>
<span>Inline</span>
<div class="error">
<table id="table">
<tbody>
<tr>
<td style="background-color:#f00">cell1</td>
<td style="background-color:#e00">cell2</td>
</tr>
<tr>
<td style="background-color:#e00">cell3</td>
<td style="background-color:#f00">cell4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>

View file

@ -0,0 +1,102 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS3 Grid Layout: Flexible Lenght</title>
<link href="mailto:swainet@126.com" rel="author" title="swain" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-22 -->
<link href="http://www.w3.org/TR/css-grid-1/#fr-unit" rel="help" />
<link href="reference/fr-unit-with-percentage-ref.xht" rel="match" />
<style type="text/css">
#container {
position:relative;
width:400px;
height:100px;
}
#grid {
display:grid;
grid-template-columns:1fr 75%;
grid-template-rows:1fr 70%;
width:100%;
height:100%;
}
#cell1 {
grid-column:1;
grid-row:1;
}
#cell2 {
grid-column:2;
grid-row:1;
}
#cell3 {
grid-column:1;
grid-row:2;
height:100%;
}
#cell4 {
grid-column:2;
grid-row:2;
background-color:green;
height:100%;
}
.error {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
#table {
width:100%;
height:100%;
border-collapse:collapse;
}
#table td {
padding:0;
vertical-align:top;
}
#table td:first-child {
width:100px;
}
#table tr:first-child td {
height:30px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div id="container">
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
<div id="cell3">cell3</div>
<div id="cell4">cell4</div>
</div>
<div class="error">
<table id="table">
<tbody>
<tr>
<td>&#xA0;</td>
<td>&#xA0;</td>
</tr>
<tr>
<td>&#xA0;</td>
<td style="background-color:red">&#xA0;</td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>

View file

@ -0,0 +1,105 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS3 Grid Layout: Flexible Length</title>
<link href="mailto:swainet@126.com" rel="author" title="swain" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-22 -->
<link href="http://www.w3.org/TR/css-grid-1/#fr-unit" rel="help" />
<link href="reference/fr-unit-ref.xht" rel="match" />
<meta content="'fr' unit represents a fraction of the free space in the grid container." name="assert" />
<style type="text/css">
#container {
position:relative;
width:400px;
height:100px;
}
#grid {
display:grid;
grid-template-columns:100px 1fr;
grid-template-rows:30px 1fr;
width:100%;
height:100%;
}
#cell1 {
grid-column:1;
grid-row:1;
height:30px;
}
#cell2 {
grid-column:2;
grid-row:1;
height:30px;
}
#cell3 {
grid-column:1;
grid-row:2;
height:100%;
}
#cell4 {
grid-column:2;
grid-row:2;
background-color:green;
height:100%;
}
.error {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
#table {
width:100%;
height:100%;
border-collapse:collapse;
}
#table td {
padding:0;
vertical-align:top;
}
#table td:first-child {
width:100px;
}
#table tr:first-child td {
height:30px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div id="container">
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
<div id="cell3">cell3</div>
<div id="cell4">cell4</div>
</div>
<div class="error">
<table id="table">
<tbody>
<tr>
<td>&#xA0;</td>
<td>&#xA0;</td>
</tr>
<tr>
<td>&#xA0;</td>
<td style="background-color:red">&#xA0;</td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: 'grid' value for 'display' property</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2014-11-18 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="This test checks that 'grid' value for 'display' property generates a block level containing box." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-grid-overlapping-green {
display: grid;
font: 25px/1 Ahem;
color: green;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-grid-overlapping-green">
<span>firs</span>
<span>seco</span>
</div>
<div class="test-grid-overlapping-green">
<span>firs</span>
<span>seco</span>
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: 'inline-grid' value for 'display' property</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2014-11-18 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="This test checks that 'inline-grid' value for 'display' property generates an inline level containing box." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-inline-grid-overlapping-green {
display: inline-grid;
background-color: green;
width: 50px;
height: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="test-inline-grid-overlapping-green"></div><div class="test-inline-grid-overlapping-green"></div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: 'float' has no effect on grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-01-03 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.grid {
display: grid;
}
.test-overlapping-green {
background-color: green;
width: 100px;
height: 50px;
}
.float-left {
float: left;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="grid">
<div class="test-overlapping-green float-left"></div>
<div class="test-overlapping-green"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: 'float' has no effect on grid items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-01-03 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.inline-grid {
display: inline-grid;
}
.test-overlapping-green {
background-color: green;
width: 100px;
height: 50px;
}
.float-left {
float: left;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div class="inline-grid">
<div class="test-overlapping-green float-left"></div>
<div class="test-overlapping-green"></div>
</div>
</body>
</html>

View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: 'vertical-align' has no effect on grid items within an inline grid</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2014-12-10 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" title="10.8.1 Leading and half-leading" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#test-inline-grid-overlapping-green {
display: inline-grid;
font: 50px/1 Ahem;
color: green;
}
#vertical-align {
vertical-align: 125px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="test-inline-grid-overlapping-green">
<span>1s</span>
<span id="vertical-align">2n</span>
</div>
</body>
</html>

View file

@ -0,0 +1,50 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: auto tracks</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#auto-tracks" rel="help" />
<link href="reference/grid-layout-auto-tracks-ref.xht" rel="match" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
height: auto;
width: 100px;
background: #eee;
display: grid;
grid-definition-columns: 100px;
grid-definition-rows: auto;
}
.a {
background: blue;
grid-column: 1;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 2;
grid-row: 1;
}
.c {
background: pink;
grid-column: 1;
grid-row: 2;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b"><div style="width:50px">&#xA0;</div></div>
<div class="c">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: basic</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#track-sizing" rel="help" />
<link href="reference/grid-layout-basic-ref.xht" rel="match" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 100px 50px;
}
.a {
background: blue;
grid-column: 1;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 2;
grid-row: 1;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: free space unit</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#free-space" rel="help" />
<link href="reference/grid-layout-basic-ref.xht" rel="match" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 1fr 50px;
}
.a {
background: blue;
grid-column: 1;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 2;
grid-row: 1;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: grid span</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#grid-span" rel="help" />
<link href="reference/grid-layout-basic-ref.xht" rel="match" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 50px 50px 50px;
}
.a {
background: blue;
grid-column: 1;
grid-column-span: 2;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 3;
grid-row: 1;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: grid lines shorthands</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#grid-line" rel="help" />
<link href="reference/grid-layout-basic-ref.xht" rel="match" />
<meta content="the subgrid layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: "left" 100px "center" 50px "right";
}
.a {
background: blue;
grid-column: "left" / "center";
}
.b {
background: yellow;
grid-column: "center" / "right";
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: grid lines</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#grid-line" rel="help" />
<link href="reference/grid-layout-basic-ref.xht" rel="match" />
<meta content="the subgrid layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: "left" 100px "center" 50px "right";
}
.a {
background: blue;
grid-start: "left";
grid-end: "center";
}
.b {
background: yellow;
grid-start: "center";
grid-end: "right";
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: placement shorthand</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#placement-shorthands" rel="help" />
<link href="reference/grid-layout-basic-ref.xht" rel="match" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 50px 50px 50px;
}
.a {
background: blue;
grid-column: 1 / span 2;
grid-row: 1;
}
.b {
background: yellow;
grid-column: 3;
grid-row: 1;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,162 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8" />
<title>CSS Test: Grid Layout - Properties exist</title>
<link href="mailto:johnhax@gmail.com" rel="author" title="贺师俊" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-30 -->
<link href="http://www.w3.org/TR/css-grid-1/#property-index" rel="help" />
<meta content="dom" name="flags" />
<meta content="Test checks that css properties of grid layout exist." name="assert" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="myDiv"></div>
<div id="log"></div>
<script>
var myDiv = document.getElementById('myDiv')
test(function(){
myDiv.style.display = 'grid'
assert_equals(myDiv.style.display, 'grid',
'display should be "grid"')
}, 'display: grid')
test(function(){
myDiv.style.display = 'inline-grid'
assert_equals(myDiv.style.display, 'inline-grid',
'display should be "inline-grid"')
}, 'display: inline-grid')
void function(data){
myDiv.style.display = 'grid'
Object.keys(data).forEach(function(prop){
test(function(){
assert_own_property(myDiv.style, prop)
}, prop)
if ('initial' in data[prop]) test(function(){
var initial = data[prop].initial
delete data[prop].initial
assert_equals(getComputedStyle(myDiv)[prop], initial, 'initial value of ' + prop + ' should be ' + initial)
}, prop + '.initial')
var syntaxTests = data[prop]
Object.keys(syntaxTests).forEach(function(testcase){
test(function(){
assert_own_property(myDiv.style, prop)
myDiv.style[prop] = syntaxTests[testcase]
assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase], testcase)
//assert_equals(myDiv.style[prop], syntaxTests[testcase], testcase)
}, prop + '.' + testcase)
})
})
}({
'grid-template-columns': { // named 'grid-definition-columns' in last draft
initial: 'none',
'none': 'none',
'&lt;line-names&gt;': 'a b c',
'&lt;track-size&gt;.auto': 'auto',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;length&gt;': '100px',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;percentage&gt;': '100%',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;flex&gt;': '1fr',
'&lt;track-size&gt;.&lt;track-breadth&gt;.min-content': 'min-content',
'&lt;track-size&gt;.&lt;track-breadth&gt;.max-content': 'max-content',
'&lt;track-size&gt;.&lt;track-breadth&gt;.minmax()': 'minmax(100px, 200px)',
},
'grid-template-rows': { // named 'grid-definition-rows' in last draft
initial: 'none',
'none': 'none',
'&lt;line-names&gt;': 'a b c',
'&lt;track-size&gt;.auto': 'auto',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;length&gt;': '100px',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;percentage&gt;': '100%',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;flex&gt;': '1fr',
'&lt;track-size&gt;.&lt;track-breadth&gt;.min-content': 'min-content',
'&lt;track-size&gt;.&lt;track-breadth&gt;.max-content': 'max-content',
'&lt;track-size&gt;.&lt;track-breadth&gt;.minmax()': 'minmax(100px, 200px)',
},
'grid-template-areas': {
initial: 'none',
'&lt;string&gt;+': 'a',
},
'grid-template': {
'none': 'none',
'&lt;grid-template-columns&gt; / &lt;grid-template-rows&gt;': '100px / 100px',
'&lt;line-names&gt;': 'a b c',
},
'grid-auto-columns': {
initial: 'auto',
'&lt;track-size&gt;.auto': 'auto',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;length&gt;': '100px',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;percentage&gt;': '100%',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;flex&gt;': '1fr',
'&lt;track-size&gt;.&lt;track-breadth&gt;.min-content': 'min-content',
'&lt;track-size&gt;.&lt;track-breadth&gt;.max-content': 'max-content',
'&lt;track-size&gt;.&lt;track-breadth&gt;.minmax()': 'minmax(100px, 200px)',
},
'grid-auto-rows': {
initial: 'auto',
'&lt;track-size&gt;.auto': 'auto',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;length&gt;': '100px',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;percentage&gt;': '100%',
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;flex&gt;': '1fr',
'&lt;track-size&gt;.&lt;track-breadth&gt;.min-content': 'min-content',
'&lt;track-size&gt;.&lt;track-breadth&gt;.max-content': 'max-content',
'&lt;track-size&gt;.&lt;track-breadth&gt;.minmax()': 'minmax(100px, 200px)',
},
'grid-auto-flow': {
initial: 'rows',
'rows': 'rows',
'columns': 'columns',
'dense': 'rows dense',
},
'grid-auto': {
},
'grid-row-start': {
initial: 'auto',
'auto': 'auto',
'&lt;indent&gt;': 'a',
'&lt;integer&gt;': '1',
'&lt;integer&gt; &amp;&amp; &lt;indent&gt;': '1 a',
'span': 'span 1',
},
'grid-column-start': {
initial: 'auto',
'auto': 'auto',
'&lt;indent&gt;': 'a',
'&lt;integer&gt;': '1',
'&lt;integer&gt; &amp;&amp; &lt;indent&gt;': '1 a',
'span': 'span 1',
},
'grid-row-end': {
initial: 'auto',
'auto': 'auto',
'&lt;indent&gt;': 'a',
'&lt;integer&gt;': '1',
'&lt;integer&gt; &amp;&amp; &lt;indent&gt;': '1 a',
'span': 'span 1',
},
'grid-column-end': {
initial: 'auto',
'auto': 'auto',
'&lt;indent&gt;': 'a',
'&lt;integer&gt;': '1',
'&lt;integer&gt; &amp;&amp; &lt;indent&gt;': '1 a',
'span': 'span 1',
},
'grid-column': {
},
'grid-row': {
},
'grid-area': {
},
})
</script>
</body></html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: repeat notation</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#repeat-notation" rel="help" />
<link href="reference/grid-layout-repeat-notation-ref.xht" rel="match" />
<meta content="the subgrid layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 450px;
background: #eee;
display: grid;
grid-definition-columns: repeat(4, 100px) 50px;
}
.a {
background: blue;
grid-column: 1;
}
.b {
background: yellow;
grid-column: 2;
}
.c {
background: orange;
grid-column: 3;
}
.d {
background: cyan;
grid-column: 4;
}
.e {
background: pink;
grid-column: 5;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
<div class="c">&#xA0;</div>
<div class="d">&#xA0;</div>
<div class="e">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: z order</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#z-order" rel="help" />
<link href="reference/grid-layout-z-order-ref.xht" rel="match" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 50px 50px 50px;
color:white;
}
.a {
background: blue;
grid-column: 1 / span 2;
z-index:10
}
.b {
background: yellow;
grid-column: 2 / span 2;
z-index:1
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="b">down</div>
<div class="a">up</div>
</div>
</body></html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Test: z order</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<link href="http://www.w3.org/TR/css-grid-1/#z-order" rel="help" />
<link href="reference/grid-layout-z-order-ref.xht" rel="match" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 50px 50px 50px;
color:white;
}
.a {
background: blue;
grid-column: 1;
grid-column-span: 2;
z-index:10
}
.b {
background: yellow;
grid-column: 2;
grid-column-span: 2;
z-index:1
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="b">down</div>
<div class="a">up</div>
</div>
</body></html>

View file

@ -0,0 +1,80 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: DOM support for 'grid' and 'inline-grid' 'display' values</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2014-11-18 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<meta name="flags" content="dom" />
<meta name="assert" content="This test checks that 'grid' and 'inline-grid' values for 'display' property are supported so that DOM methods, specifically getComputedValue(), and its associated CSS2Properties interface, can fetch such 'display' values." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="style-grid" style="display: grid;"></div>
<div id="style-inline-grid" style="display: inline-grid;"></div>
<div id="css-grid" class="grid"></div>
<div id="css-inline-grid" class="inline-grid"></div>
<div id="js-grid"></div>
<div id="js-inline-grid"></div>
<script type="text/javascript"><![CDATA[
function testStyleDisplay(element, value) {
assert_equals(element.style.display, value, "Style display should be '" + value + "'");
}
function testComputedStyleDisplay(element, value) {
assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
}
var styleGrid = document.getElementById("style-grid");
test(function() {
testStyleDisplay(styleGrid, "grid");
testComputedStyleDisplay(styleGrid, "grid");
}, "Test style display 'grid'");
var styleInlineGrid = document.getElementById("style-inline-grid");
test(function() {
testStyleDisplay(styleInlineGrid, "inline-grid");
testComputedStyleDisplay(styleInlineGrid, "inline-grid");
}, "Test style display 'inline-grid'");
var cssGrid = document.getElementById("css-grid");
test(function() {
testComputedStyleDisplay(cssGrid, "grid");
}, "Test CSS display 'grid'");
var cssInlineGrid = document.getElementById("css-inline-grid");
test(function() {
testComputedStyleDisplay(cssInlineGrid, "inline-grid");
}, "Test CSS display 'inline-grid'");
var jsGrid = document.getElementById("js-grid");
jsGrid.style.display = "grid";
test(function() {
testStyleDisplay(jsGrid, "grid");
testComputedStyleDisplay(jsGrid, "grid");
}, "Test JavaScript display 'grid'");
var jsInlineGrid = document.getElementById("js-inline-grid");
jsInlineGrid.style.display = "inline-grid";
test(function() {
testStyleDisplay(jsInlineGrid, "inline-grid");
testComputedStyleDisplay(jsInlineGrid, "inline-grid");
}, "Test JavaScript display 'inline-grid'");
]]></script>
</body>
</html>

View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: 'vertical-align' has no effect on grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2014-12-10 -->
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" title="10.8.1 Leading and half-leading" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#test-grid-overlapping-green {
display: grid;
font: 50px/1 Ahem;
color: green;
}
#vertical-align {
vertical-align: 125px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>
<div id="test-grid-overlapping-green">
<span>1s</span>
<span id="vertical-align">2n</span>
</div>
</body>
</html>

View file

@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout: Reference File</title>
<link href="mailto:swainet@126.com" rel="author" title="swain" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-17 -->
<style type="text/css">
#container {
position:relative;
width:400px;
height:100px;
}
.error {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
#table {
width:100%;
height:100%;
border-collapse:collapse;
}
#table td {
padding:0;
vertical-align:top;
}
#table td:first-child {
width:100px;
}
#table tr:last-child td {
height:30px;
}
</style>
</head>
<body>
<p>Test passes if there are 4 green rectangles and no red.</p>
<div id="container">
<div class="error">
<table id="table">
<tbody>
<tr>
<td style="background-color:green">cell1</td>
<td style="background-color:limegreen">cell2</td>
</tr>
<tr>
<td style="background-color:limegreen">cell3</td>
<td style="background-color:green">cell4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>

View file

@ -0,0 +1,62 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout: Reference File</title>
<link href="mailto:swainet@126.com" rel="author" title="swain" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-17 -->
<style type="text/css">
#container {
position:relative;
}
#table {
width:400px;
height:100px;
border-collapse:collapse;
}
#table td {
padding:0;
vertical-align:top;
}
#table td:first-child {
width:100px;
}
#table tr:last-child td {
height:30px;
}
#table-wrapper {
display:inline-block;
clear:right;
}
span {
vertical-align:top;
}
</style>
</head>
<body>
<p>Test passes if there are 4 green rectangles and no red.</p>
<div id="container">
<div id="table-wrapper">
<table id="table">
<tbody>
<tr>
<td style="background-color:green">cell1</td>
<td style="background-color:limegreen">cell2</td>
</tr>
<tr>
<td style="background-color:limegreen">cell3</td>
<td style="background-color:green">cell4</td>
</tr>
</tbody>
</table>
</div>
<span>Inline</span>
</div>
</body></html>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS3 Grid Layout: Reference File</title>
<link href="mailto:swainet@126.com" rel="author" title="swain" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-22 -->
<style type="text/css">
#container {
position:relative;
width:400px;
height:100px;
}
.error {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
#table {
width:100%;
height:100%;
border-collapse:collapse;
}
#table td {
padding:0;
vertical-align:top;
}
#table td:first-child {
width:100px;
}
#table tr:first-child td {
height:30px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div id="container">
<div class="error">
<table id="table">
<tbody>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td style="background-color:green">cell4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS3 Grid Layout: Reference File</title>
<link href="mailto:swainet@126.com" rel="author" title="swain" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-22 -->
<style type="text/css">
#container {
position:relative;
width:400px;
height:100px;
}
.error {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
}
#table {
width:100%;
height:100%;
border-collapse:collapse;
}
#table td {
padding:0;
vertical-align:top;
}
#table td:first-child {
width:100px;
}
#table tr:first-child td {
height:30px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div id="container">
<div class="error">
<table id="table">
<tbody>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
<td style="background-color:green">cell4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body></html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Reference</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<style>
body {
margin: 0;
padding: 0;
border: 0 none;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
margin: 0;
width: 300px;
}
.a {
background: blue;
width: 100px;
float: left;
}
.b {
background: yellow;
width: 50px;
float: left;
}
.c {
background: pink;
width: 100px;
clear: both;
float: left;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
<div class="c">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Reference</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<style>
body {
margin: 0;
padding: 0;
border: 0 none;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
margin: 0;
width: 150px;
}
.a {
background: blue;
width: 100px;
float:left
}
.b {
background: yellow;
width: 50px;
float:left;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Reference</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<style>
body {
margin: 0;
padding: 0;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
width: 450px;
position: relative;
}
.a {
background: blue;
width: 100px;
float:left
}
.b {
background: yellow;
width: 100px;
float:left
}
.c {
background: orange;
width: 100px;
float:left
}
.d {
background: cyan;
width: 100px;
float:left
}
.e {
background: pink;
width: 50px;
float:left
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">&#xA0;</div>
<div class="b">&#xA0;</div>
<div class="c">&#xA0;</div>
<div class="d">&#xA0;</div>
<div class="e">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Grid Layout Reference</title>
<link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" />
<style>
body {
margin: 0;
padding: 0;
border: 0 none;
}
#caseTitle {
margin: 10px;
height: 40px;
}
#grid {
margin: 0;
width: 150px;
color:white;
}
.a {
background: blue;
width: 100px;
float:left
}
.b {
background: yellow;
width: 50px;
float:left;
}
</style>
</head>
<body>
<p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
<div id="grid">
<div class="a">up</div>
<div class="b">&#xA0;</div>
</div>
</body></html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,190 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Grid Layout Module Level 1 CR Test Suite Reftest Index</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 Reftest Index</h1>
<table width="100%">
<col id="test-column"></col>
<col id="ref-column"></col>
<col id="flags-column"></col>
<thead>
<tr>
<th>Test</th>
<th>Reference</th>
<th>Flags</th>
</tr>
</thead>
<tbody id="display-grid" class="">
<tr>
<td rowspan="1" title="CSS Grid Layout: display: grid">
<a href="display-grid.xht">display-grid</a></td>
<td><a href="reference/display-grid-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="display-inline-grid" class="">
<tr>
<td rowspan="1" title="CSS Grid Layout: display: inline-grid">
<a href="display-inline-grid.xht">display-inline-grid</a></td>
<td><a href="reference/display-inline-grid-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="fr-unit" class="">
<tr>
<td rowspan="1" title="CSS3 Grid Layout: Flexible Length">
<a href="fr-unit.xht">fr-unit</a></td>
<td><a href="reference/fr-unit-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="fr-unit-with-percentage" class="">
<tr>
<td rowspan="1" title="CSS3 Grid Layout: Flexible Lenght">
<a href="fr-unit-with-percentage.xht">fr-unit-with-percentage</a></td>
<td><a href="reference/fr-unit-with-percentage-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-display-grid-001" class="ahem">
<tr>
<td rowspan="1" title="'grid' value for 'display' property">
<a href="grid-display-grid-001.xht">grid-display-grid-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="grid-display-inline-grid-001" class="">
<tr>
<td rowspan="1" title="'inline-grid' value for 'display' property">
<a href="grid-display-inline-grid-001.xht">grid-display-inline-grid-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-float-001" class="">
<tr>
<td rowspan="1" title="'float' has no effect on grid items">
<a href="grid-float-001.xht">grid-float-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-inline-float-001" class="">
<tr>
<td rowspan="1" title="'float' has no effect on grid items within an inline grid">
<a href="grid-inline-float-001.xht">grid-inline-float-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-inline-vertical-align-001" class="ahem">
<tr>
<td rowspan="1" title="'vertical-align' has no effect on grid items within an inline grid">
<a href="grid-inline-vertical-align-001.xht">grid-inline-vertical-align-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="grid-layout-auto-tracks" class="">
<tr>
<td rowspan="1" title="auto tracks">
<a href="grid-layout-auto-tracks.xht">grid-layout-auto-tracks</a></td>
<td><a href="reference/grid-layout-auto-tracks-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-basic" class="">
<tr>
<td rowspan="1" title="basic">
<a href="grid-layout-basic.xht">grid-layout-basic</a></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-free-space-unit" class="">
<tr>
<td rowspan="1" title="free space unit">
<a href="grid-layout-free-space-unit.xht">grid-layout-free-space-unit</a></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-grid-span" class="">
<tr>
<td rowspan="1" title="grid span">
<a href="grid-layout-grid-span.xht">grid-layout-grid-span</a></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-lines" class="">
<tr>
<td rowspan="1" title="grid lines">
<a href="grid-layout-lines.xht">grid-layout-lines</a></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-lines-shorthands" class="">
<tr>
<td rowspan="1" title="grid lines shorthands">
<a href="grid-layout-lines-shorthands.xht">grid-layout-lines-shorthands</a></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-placement-shorthands" class="">
<tr>
<td rowspan="1" title="placement shorthand">
<a href="grid-layout-placement-shorthands.xht">grid-layout-placement-shorthands</a></td>
<td><a href="reference/grid-layout-basic-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-repeat-notation" class="">
<tr>
<td rowspan="1" title="repeat notation">
<a href="grid-layout-repeat-notation.xht">grid-layout-repeat-notation</a></td>
<td><a href="reference/grid-layout-repeat-notation-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-z-order-a" class="">
<tr>
<td rowspan="1" title="z order">
<a href="grid-layout-z-order-a.xht">grid-layout-z-order-a</a></td>
<td><a href="reference/grid-layout-z-order-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-layout-z-order-b" class="">
<tr>
<td rowspan="1" title="z order">
<a href="grid-layout-z-order-b.xht">grid-layout-z-order-b</a></td>
<td><a href="reference/grid-layout-z-order-ref.xht">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="grid-vertical-align-001" class="ahem">
<tr>
<td rowspan="1" title="'vertical-align' has no effect on grid items">
<a href="grid-vertical-align-001.xht">grid-vertical-align-001</a></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,21 @@
display-grid.xht == reference/display-grid-ref.xht
display-inline-grid.xht == reference/display-inline-grid-ref.xht
fr-unit.xht == reference/fr-unit-ref.xht
fr-unit-with-percentage.xht == reference/fr-unit-with-percentage-ref.xht
grid-display-grid-001.xht == reference/ref-filled-green-100px-square.xht
grid-display-inline-grid-001.xht == reference/ref-filled-green-100px-square.xht
grid-float-001.xht == reference/ref-filled-green-100px-square.xht
grid-inline-float-001.xht == reference/ref-filled-green-100px-square.xht
grid-inline-vertical-align-001.xht == reference/ref-filled-green-100px-square.xht
grid-layout-auto-tracks.xht == reference/grid-layout-auto-tracks-ref.xht
grid-layout-basic.xht == reference/grid-layout-basic-ref.xht
grid-layout-free-space-unit.xht == reference/grid-layout-basic-ref.xht
grid-layout-grid-span.xht == reference/grid-layout-basic-ref.xht
grid-layout-lines.xht == reference/grid-layout-basic-ref.xht
grid-layout-lines-shorthands.xht == reference/grid-layout-basic-ref.xht
grid-layout-placement-shorthands.xht == reference/grid-layout-basic-ref.xht
grid-layout-repeat-notation.xht == reference/grid-layout-repeat-notation-ref.xht
grid-layout-z-order-a.xht == reference/grid-layout-z-order-ref.xht
grid-layout-z-order-b.xht == reference/grid-layout-z-order-ref.xht
grid-vertical-align-001.xht == reference/ref-filled-green-100px-square.xht

View file

@ -0,0 +1,89 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>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 By Chapter</h1>
<p>This index contains both
<a href="http://wiki.csswg.org/test/selftest">self-describing tests</a>
and reftests.
A separate <a href="reftest-toc.xht">alphabetical reftest index</a>
is provided for tests in <a href="http://wiki.csswg.org/test/reftest">reftest
format</a> along with the <a href="reftest.list">reftest manifest</a>.</p>
<table>
<tbody id="s1">
<tr><th><a href="chapter-1.xht">Chapter 1 -
Introduction and Overview</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s2">
<tr><th><a href="chapter-2.xht">Chapter 2 -
Grid Layout Concepts and Terminology</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.xht">Chapter 3 -
Grid Containers</a></th>
<td>(9 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Grid Items</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.xht">Chapter 5 -
The Explicit Grid</a></th>
<td>(4 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.xht">Chapter 6 -
The Implicit Grid</a></th>
<td>(1 Tests)</td></tr>
</tbody>
<tbody id="s7">
<tr><th><a href="chapter-7.xht">Chapter 7 -
Grid Definition Shorthand: the grid property</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s8">
<tr><th><a href="chapter-8.xht">Chapter 8 -
Clamping Overlarge Grids</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s9">
<tr><th><a href="chapter-9.xht">Chapter 9 -
Placing Grid Items</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s10">
<tr><th><a href="chapter-10.xht">Chapter 10 -
Alignment</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s11">
<tr><th><a href="chapter-11.xht">Chapter 11 -
Grid Sizing</a></th>
<td>(1 Tests)</td></tr>
</tbody>
<tbody id="s12">
<tr><th><a href="chapter-12.xht">Chapter 12 -
Fragmenting Grid Layout</a></th>
<td>(1 Tests)</td></tr>
</tbody>
<tbody id="sA">
<tr><th><a href="chapter-A.xht">Appendix A -
Translated Layout Algorithm</a></th>
<td>(0 Tests)</td></tr>
</tbody>
</table>
</body>
</html>