Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 2baa72daab8bf37e3e910a9fd311a1eaa5b0f4a8

Browse source
This commit is contained in:
James Graham 2015-07-27 17:47:31 +01:00
parent 662c00a810
commit df03062d62
10934 changed files with 428309 additions and 254265 deletions
Download patch file Download diff file Expand all files Collapse all files

4
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/chapter-12.xht
View file

@ -149,11 +149,11 @@
</tbody>
<tbody id="s.#property-index">
<!-- 1 tests -->
<tr id="grid-layout-properties-.#property-index" class="primary dom script">
<tr id="grid-layout-properties-.#property-index" class="primary ahem 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><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Grid Layout - Properties exist
<ul class="assert">
<li>Test checks that css properties of grid layout exist.</li>

26
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/chapter-2.xht
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
<h2>Grid Layout Concepts and Terminology (2 tests)</h2>
<h2>Grid Layout Concepts and Terminology (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -70,29 +70,7 @@
<!-- 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>
<!-- 0 tests -->
</tbody>
<tbody id="s2.3">
<tr><th colspan="4" scope="rowgroup">

204
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/chapter-3.xht
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
<h2>Grid Containers (9 tests)</h2>
<h2>Grid Containers (28 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -37,7 +37,7 @@
<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 -->
<!-- 28 tests -->
<tr id="display-grid-3.1" class="primary">
<td><strong>
<a href="display-grid.xht">display-grid</a></strong></td>
@ -60,6 +60,14 @@
</ul>
</td>
</tr>
<tr id="grid-computed-value-display-floated-items-001-3.1" class="primary dom script">
<td><strong>
<a href="grid-computed-value-display-floated-items-001.xht">grid-computed-value-display-floated-items-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>'float' affects to the computed value of 'display' on grid items
</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>
@ -82,6 +90,72 @@
</ul>
</td>
</tr>
<tr id="grid-first-letter-001-3.1" class="primary">
<td><strong>
<a href="grid-first-letter-001.xht">grid-first-letter-001</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-letter' from grid container does not apply to grid items
<ul class="assert">
<li>This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container.</li>
</ul>
</td>
</tr>
<tr id="grid-first-letter-002-3.1" class="primary">
<td><strong>
<a href="grid-first-letter-002.xht">grid-first-letter-002</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-letter' from grid container ancestors does not apply to grid items
<ul class="assert">
<li>This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container ancestors.</li>
</ul>
</td>
</tr>
<tr id="grid-first-letter-003-3.1" class="primary">
<td><strong>
<a href="grid-first-letter-003.xht">grid-first-letter-003</a></strong></td>
<td><a href="reference/grid-first-letter-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-letter' works on grid items
<ul class="assert">
<li>This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item.</li>
</ul>
</td>
</tr>
<tr id="grid-first-line-001-3.1" class="primary">
<td><strong>
<a href="grid-first-line-001.xht">grid-first-line-001</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-line' from grid container does not apply to grid items
<ul class="assert">
<li>This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container.</li>
</ul>
</td>
</tr>
<tr id="grid-first-line-002-3.1" class="primary">
<td><strong>
<a href="grid-first-line-002.xht">grid-first-line-002</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-line' from grid container ancestors does not apply to grid items
<ul class="assert">
<li>This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container ancestors.</li>
</ul>
</td>
</tr>
<tr id="grid-first-line-003-3.1" class="primary">
<td><strong>
<a href="grid-first-line-003.xht">grid-first-line-003</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-line' works on grid items
<ul class="assert">
<li>This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item.</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>
@ -90,6 +164,80 @@
<td>'float' has no effect on grid items
</td>
</tr>
<tr id="grid-floats-no-intrude-001-3.1" class="primary">
<td><strong>
<a href="grid-floats-no-intrude-001.xht">grid-floats-no-intrude-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>floats do not intrude into a grid
</td>
</tr>
<tr id="grid-inline-first-letter-001-3.1" class="primary">
<td><strong>
<a href="grid-inline-first-letter-001.xht">grid-inline-first-letter-001</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-letter' from inline grid container does not apply to grid items
<ul class="assert">
<li>This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container.</li>
</ul>
</td>
</tr>
<tr id="grid-inline-first-letter-002-3.1" class="primary">
<td><strong>
<a href="grid-inline-first-letter-002.xht">grid-inline-first-letter-002</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-letter' from inline grid container ancestors does not apply to grid items
<ul class="assert">
<li>This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container ancestors.</li>
</ul>
</td>
</tr>
<tr id="grid-inline-first-letter-003-3.1" class="primary">
<td><strong>
<a href="grid-inline-first-letter-003.xht">grid-inline-first-letter-003</a></strong></td>
<td><a href="reference/grid-first-letter-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-letter' works on grid items within an inline grid
<ul class="assert">
<li>This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.</li>
</ul>
</td>
</tr>
<tr id="grid-inline-first-line-001-3.1" class="primary">
<td><strong>
<a href="grid-inline-first-line-001.xht">grid-inline-first-line-001</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-line' from inline grid container does not apply to grid items
<ul class="assert">
<li>This test checks that '::first-line' pseudo-element is ignored in grid items when applied to an inline grid container.</li>
</ul>
</td>
</tr>
<tr id="grid-inline-first-line-002-3.1" class="primary">
<td><strong>
<a href="grid-inline-first-line-002.xht">grid-inline-first-line-002</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-line' from inline grid container ancestors does not apply to grid items
<ul class="assert">
<li>This test checks that '::first-line' pseudo-element is ignored in anonymous grid items when applied to an inline grid container ancestors.</li>
</ul>
</td>
</tr>
<tr id="grid-inline-first-line-003-3.1" class="primary">
<td><strong>
<a href="grid-inline-first-line-003.xht">grid-inline-first-line-003</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>'::first-line' works on grid items within an inline grid
<ul class="assert">
<li>This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.</li>
</ul>
</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>
@ -98,6 +246,36 @@
<td>'float' has no effect on grid items within an inline grid
</td>
</tr>
<tr id="grid-inline-floats-no-intrude-001-3.1" class="primary">
<td><strong>
<a href="grid-inline-floats-no-intrude-001.xht">grid-inline-floats-no-intrude-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>floats do not intrude into an inline grid
</td>
</tr>
<tr id="grid-inline-margins-no-collapse-001-3.1" class="primary">
<td><strong>
<a href="grid-inline-margins-no-collapse-001.xht">grid-inline-margins-no-collapse-001</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>inline grid's margins do not collapse
<ul class="assert">
<li>This test checks that inline grid's margin (body) do not collapse with the marings of the grid item (a paragraph).</li>
</ul>
</td>
</tr>
<tr id="grid-inline-multicol-001-3.1" class="primary">
<td><strong>
<a href="grid-inline-multicol-001.xht">grid-inline-multicol-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>'column-*' properties from inline grid container does not apply to grid items
<ul class="assert">
<li>This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container.</li>
</ul>
</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>
@ -106,6 +284,28 @@
<td>'vertical-align' has no effect on grid items within an inline grid
</td>
</tr>
<tr id="grid-margins-no-collapse-001-3.1" class="primary">
<td><strong>
<a href="grid-margins-no-collapse-001.xht">grid-margins-no-collapse-001</a></strong></td>
<td><a href="reference/grid-text-green-margin-no-collapse-ref.xht">=</a> </td>
<td></td>
<td>grid's margins do not collapse
<ul class="assert">
<li>This test checks that grid's margin (body) do not collapse with the marings of the grid item (a paragraph).</li>
</ul>
</td>
</tr>
<tr id="grid-multicol-001-3.1" class="primary">
<td><strong>
<a href="grid-multicol-001.xht">grid-multicol-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>'column-*' properties from grid container does not apply to grid items
<ul class="assert">
<li>This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container.</li>
</ul>
</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>

420
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/chapter-4.xht
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
<h2>Grid Items (2 tests)</h2>
<h2>Grid Items (52 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -31,7 +31,67 @@
<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 -->
<!-- 6 tests -->
<tr id="grid-inline-items-001-4" class="primary ahem">
<td><strong>
<a href="grid-inline-items-001.xht">grid-inline-items-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>Regular and anonymous grid items within an inline grid
<ul class="assert">
<li>Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item.</li>
</ul>
</td>
</tr>
<tr id="grid-inline-items-002-4" class="primary ahem">
<td><strong>
<a href="grid-inline-items-002.xht">grid-inline-items-002</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>Children of grid items do not create new items within an inline grid
<ul class="assert">
<li>Checks that the grid items do not split around blocks creating extra items within an inline grid.</li>
</ul>
</td>
</tr>
<tr id="grid-inline-items-003-4" class="primary ahem">
<td><strong>
<a href="grid-inline-items-003.xht">grid-inline-items-003</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 items with 'display:none' are not rendered within an inline grid
</td>
</tr>
<tr id="grid-items-001-4" class="primary ahem">
<td><strong>
<a href="grid-items-001.xht">grid-items-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>Regular and anonymous grid items
<ul class="assert">
<li>Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item.</li>
</ul>
</td>
</tr>
<tr id="grid-items-002-4" class="primary ahem">
<td><strong>
<a href="grid-items-002.xht">grid-items-002</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>Children of grid items do not create new items
<ul class="assert">
<li>Checks that the grid items do not split around blocks creating extra items.</li>
</ul>
</td>
</tr>
<tr id="grid-items-003-4" class="primary ahem">
<td><strong>
<a href="grid-items-003.xht">grid-items-003</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 items with 'display:none' are not rendered
</td>
</tr>
</tbody>
<tbody id="s4.#grid-item">
<!-- 0 tests -->
@ -49,7 +109,167 @@
<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 -->
<!-- 20 tests -->
<tr id="grid-inline-order-property-auto-placement-001-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-auto-placement-001.xht">grid-inline-order-property-auto-placement-001</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-auto-placement-002-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-auto-placement-002.xht">grid-inline-order-property-auto-placement-002</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-auto-placement-003-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-auto-placement-003.xht">grid-inline-order-property-auto-placement-003</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-auto-placement-004-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-auto-placement-004.xht">grid-inline-order-property-auto-placement-004</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-auto-placement-005-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-auto-placement-005.xht">grid-inline-order-property-auto-placement-005</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-painting-001-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-painting-001.xht">grid-inline-order-property-painting-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>'order' property affects grid items painting order within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-painting-002-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-painting-002.xht">grid-inline-order-property-painting-002</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>'order' property affects grid items painting order within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-painting-003-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-painting-003.xht">grid-inline-order-property-painting-003</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>'order' property affects grid items painting order within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-painting-004-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-painting-004.xht">grid-inline-order-property-painting-004</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>'order' property affects grid items painting order within an inline grid
</td>
</tr>
<tr id="grid-inline-order-property-painting-005-4.2" class="primary ahem">
<td><strong>
<a href="grid-inline-order-property-painting-005.xht">grid-inline-order-property-painting-005</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>'order' property affects grid items painting order within an inline grid
</td>
</tr>
<tr id="grid-order-property-auto-placement-001-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-auto-placement-001.xht">grid-order-property-auto-placement-001</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position
</td>
</tr>
<tr id="grid-order-property-auto-placement-002-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-auto-placement-002.xht">grid-order-property-auto-placement-002</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position
</td>
</tr>
<tr id="grid-order-property-auto-placement-003-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-auto-placement-003.xht">grid-order-property-auto-placement-003</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position
</td>
</tr>
<tr id="grid-order-property-auto-placement-004-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-auto-placement-004.xht">grid-order-property-auto-placement-004</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position
</td>
</tr>
<tr id="grid-order-property-auto-placement-005-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-auto-placement-005.xht">grid-order-property-auto-placement-005</a></strong></td>
<td><a href="reference/grid-2x2-blue-yellow-lime-magenta.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'order' property affects grid items auto-placement position
</td>
</tr>
<tr id="grid-order-property-painting-001-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-painting-001.xht">grid-order-property-painting-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>'order' property affects grid items painting order
</td>
</tr>
<tr id="grid-order-property-painting-002-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-painting-002.xht">grid-order-property-painting-002</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>'order' property affects grid items painting order
</td>
</tr>
<tr id="grid-order-property-painting-003-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-painting-003.xht">grid-order-property-painting-003</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>'order' property affects grid items painting order
</td>
</tr>
<tr id="grid-order-property-painting-004-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-painting-004.xht">grid-order-property-painting-004</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>'order' property affects grid items painting order
</td>
</tr>
<tr id="grid-order-property-painting-005-4.2" class="primary ahem">
<td><strong>
<a href="grid-order-property-painting-005.xht">grid-order-property-painting-005</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>'order' property affects grid items painting order
</td>
</tr>
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
@ -61,7 +281,111 @@
<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 -->
<!-- 26 tests -->
<tr id="grid-inline-items-inline-blocks-001-4.4" class="primary">
<td><strong>
<a href="grid-inline-items-inline-blocks-001.xht">grid-inline-items-inline-blocks-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Paint order of grid items within an inline grid is the same as inline blocks
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-001-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-001.xht">grid-inline-z-axis-ordering-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>'z-index' property controls the z-axis order of grid items within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-002-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-002.xht">grid-inline-z-axis-ordering-002</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>'z-index' property controls the z-axis order of grid items within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-003-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-003.xht">grid-inline-z-axis-ordering-003</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>'z-index' property controls the z-axis order of grid items within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-004-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-004.xht">grid-inline-z-axis-ordering-004</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>'z-index' property controls the z-axis order of grid items within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-005-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-005.xht">grid-inline-z-axis-ordering-005</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>'z-index' property controls the z-axis order of grid items within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-overlapped-items-001-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-overlapped-items-001.xht">grid-inline-z-axis-ordering-overlapped-items-001</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-overlapped-items-002-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-overlapped-items-002.xht">grid-inline-z-axis-ordering-overlapped-items-002</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-overlapped-items-003-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-overlapped-items-003.xht">grid-inline-z-axis-ordering-overlapped-items-003</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-overlapped-items-004-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-overlapped-items-004.xht">grid-inline-z-axis-ordering-overlapped-items-004</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-overlapped-items-005-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-overlapped-items-005.xht">grid-inline-z-axis-ordering-overlapped-items-005</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order within an inline grid
</td>
</tr>
<tr id="grid-inline-z-axis-ordering-overlapped-items-006-4.4" class="primary ahem">
<td><strong>
<a href="grid-inline-z-axis-ordering-overlapped-items-006.xht">grid-inline-z-axis-ordering-overlapped-items-006</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order within an inline grid
</td>
</tr>
<tr id="grid-items-inline-blocks-001-4.4" class="primary">
<td><strong>
<a href="grid-items-inline-blocks-001.xht">grid-items-inline-blocks-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>Paint order of grid items is the same as inline blocks
</td>
</tr>
<tr id="grid-layout-z-order-a-4.4" class="primary">
<td><strong>
<a href="grid-layout-z-order-a.xht">grid-layout-z-order-a</a></strong></td>
@ -84,6 +408,94 @@
</ul>
</td>
</tr>
<tr id="grid-z-axis-ordering-001-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-001.xht">grid-z-axis-ordering-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>'z-index' property controls the z-axis order of grid items
</td>
</tr>
<tr id="grid-z-axis-ordering-002-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-002.xht">grid-z-axis-ordering-002</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>'z-index' property controls the z-axis order of grid items
</td>
</tr>
<tr id="grid-z-axis-ordering-003-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-003.xht">grid-z-axis-ordering-003</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>'z-index' property controls the z-axis order of grid items
</td>
</tr>
<tr id="grid-z-axis-ordering-004-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-004.xht">grid-z-axis-ordering-004</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>'z-index' property controls the z-axis order of grid items
</td>
</tr>
<tr id="grid-z-axis-ordering-005-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-005.xht">grid-z-axis-ordering-005</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>'z-index' property controls the z-axis order of grid items
</td>
</tr>
<tr id="grid-z-axis-ordering-overlapped-items-001-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-overlapped-items-001.xht">grid-z-axis-ordering-overlapped-items-001</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order
</td>
</tr>
<tr id="grid-z-axis-ordering-overlapped-items-002-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-overlapped-items-002.xht">grid-z-axis-ordering-overlapped-items-002</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order
</td>
</tr>
<tr id="grid-z-axis-ordering-overlapped-items-003-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-overlapped-items-003.xht">grid-z-axis-ordering-overlapped-items-003</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order
</td>
</tr>
<tr id="grid-z-axis-ordering-overlapped-items-004-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-overlapped-items-004.xht">grid-z-axis-ordering-overlapped-items-004</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order
</td>
</tr>
<tr id="grid-z-axis-ordering-overlapped-items-005-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-overlapped-items-005.xht">grid-z-axis-ordering-overlapped-items-005</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order
</td>
</tr>
<tr id="grid-z-axis-ordering-overlapped-items-006-4.4" class="primary ahem">
<td><strong>
<a href="grid-z-axis-ordering-overlapped-items-006.xht">grid-z-axis-ordering-overlapped-items-006</a></strong></td>
<td><a href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>'z-index' property controls the grid items stacking order
</td>
</tr>
</tbody>
</table>

157
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/chapter-5.xht
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
<h2>The Explicit Grid (4 tests)</h2>
<h2>The Explicit Grid (17 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -40,7 +40,29 @@
<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 -->
<!-- 4 tests -->
<tr id="grid-inline-support-grid-template-columns-rows-001-5.1" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-grid-template-columns-rows-001.xht">grid-inline-support-grid-template-columns-rows-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list.</li>
</ul>
</td>
</tr>
<tr id="grid-layout-auto-tracks-5.1" class="primary">
<td><strong>
<a href="grid-layout-auto-tracks.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>
<tr id="grid-layout-basic-5.1" class="primary">
<td><strong>
<a href="grid-layout-basic.xht">grid-layout-basic</a></strong></td>
@ -52,6 +74,17 @@
</ul>
</td>
</tr>
<tr id="grid-support-grid-template-columns-rows-001-5.1" class="primary ahem dom script">
<td><strong>
<a href="grid-support-grid-template-columns-rows-001.xht">grid-support-grid-template-columns-rows-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for 'grid-template-columns' and 'grid-template-rows' properties
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.#propdef-grid-template-columns">
<!-- 0 tests -->
@ -114,7 +147,29 @@
<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 -->
<!-- 2 tests -->
<tr id="grid-inline-support-named-grid-lines-001-5.1.1" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-named-grid-lines-001.xht">grid-inline-support-named-grid-lines-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
<ul class="assert">
<li>This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid.</li>
</ul>
</td>
</tr>
<tr id="grid-support-named-grid-lines-001-5.1.1" class="primary ahem dom script">
<td><strong>
<a href="grid-support-named-grid-lines-001.xht">grid-support-named-grid-lines-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties
<ul class="assert">
<li>This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.1.#named-line">
<!-- 0 tests -->
@ -123,7 +178,18 @@
<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 -->
<!-- 3 tests -->
<tr id="grid-inline-support-repeat-001-5.1.2" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-repeat-001.xht">grid-inline-support-repeat-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list.</li>
</ul>
</td>
</tr>
<tr id="grid-layout-repeat-notation-5.1.2" class="primary">
<td><strong>
<a href="grid-layout-repeat-notation.xht">grid-layout-repeat-notation</a></strong></td>
@ -135,6 +201,17 @@
</ul>
</td>
</tr>
<tr id="grid-support-repeat-001-5.1.2" class="primary ahem dom script">
<td><strong>
<a href="grid-support-repeat-001.xht">grid-support-repeat-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.2.#funcdef-repeat">
<!-- 0 tests -->
@ -146,7 +223,7 @@
<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 -->
<!-- 4 tests -->
<tr id="fr-unit-5.1.3" class="primary">
<td><strong>
<a href="fr-unit.xht">fr-unit</a></strong></td>
@ -166,6 +243,28 @@
<td>CSS3 Grid Layout: Flexible Lenght
</td>
</tr>
<tr id="grid-inline-support-flexible-lengths-001-5.1.3" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-flexible-lengths-001.xht">grid-inline-support-flexible-lengths-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container.</li>
</ul>
</td>
</tr>
<tr id="grid-support-flexible-lengths-001-5.1.3" class="primary ahem dom script">
<td><strong>
<a href="grid-support-flexible-lengths-001.xht">grid-support-flexible-lengths-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties
<ul class="assert">
<li>This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.1.3.#flex-fraction">
<!-- 0 tests -->
@ -189,13 +288,57 @@
<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 -->
<!-- 2 tests -->
<tr id="grid-inline-template-columns-rows-resolved-values-001-5.1.5" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-template-columns-rows-resolved-values-001.xht">grid-inline-template-columns-rows-resolved-values-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid
<ul class="assert">
<li>This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid.</li>
</ul>
</td>
</tr>
<tr id="grid-template-columns-rows-resolved-values-001-5.1.5" class="primary ahem dom script">
<td><strong>
<a href="grid-template-columns-rows-resolved-values-001.xht">grid-template-columns-rows-resolved-values-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks
<ul class="assert">
<li>This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.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 -->
<!-- 2 tests -->
<tr id="grid-inline-support-grid-template-areas-001-5.2" class="primary ahem dom script">
<td><strong>
<a href="grid-inline-support-grid-template-areas-001.xht">grid-inline-support-grid-template-areas-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for 'grid-template-ares' property within an inline grid
<ul class="assert">
<li>This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure.</li>
</ul>
</td>
</tr>
<tr id="grid-support-grid-template-areas-001-5.2" class="primary ahem dom script">
<td><strong>
<a href="grid-support-grid-template-areas-001.xht">grid-support-grid-template-areas-001</a></strong></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Support for 'grid-template-ares' property
<ul class="assert">
<li>This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.2.#named-cell-token">
<!-- 0 tests -->

15
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/chapter-6.xht
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
<h2>The Implicit Grid (1 tests)</h2>
<h2>The Implicit Grid (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -40,18 +40,7 @@
<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>
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#implicit-grid-track">
<!-- 0 tests -->

26
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/chapter-9.xht
View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Grid Layout Module Level 1 CR Test Suite</h1>
<h2>Placing Grid Items (2 tests)</h2>
<h2>Placing Grid Items (4 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
@ -93,7 +93,29 @@
<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 -->
<!-- 2 tests -->
<tr id="grid-layout-lines-9.1.3" 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 layout should behave the same as reference.</li>
</ul>
</td>
</tr>
<tr id="grid-layout-lines-shorthands-9.1.3" 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 layout should behave the same as reference.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s9.1.4">
<tr><th colspan="4" scope="rowgroup">

96
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-computed-value-display-floated-items-001.xht Normal file
View file

@ -0,0 +1,96 @@
<!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' affects to the computed value of 'display' on grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-computed-value-display-floated-items-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/CSS2/visuren.html#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float'" />
<meta name="flags" content="dom" />
<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;
}
.inline-table {
display: inline-table;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.float {
float: left;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="grid">
<div id="grid-inline-table" class="float inline-table"></div>
<div id="grid-inline" class="float inline"></div>
<div id="grid-flex" class="float flex"></div>
</div>
<div id="inline-grid">
<div id="inline-grid-inline-table" class="float inline-table"></div>
<div id="inline-grid-inline" class="float inline"></div>
<div id="inline-grid-flex" class="float flex"></div>
</div>
<script type="text/javascript"><![CDATA[
function testComputedStyleDisplay(element, value) {
assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
}
var gridInlineTable = document.getElementById("grid-inline-table");
test(function() {
testComputedStyleDisplay(gridInlineTable, "table");
}, "Test display floated 'inline-table' grid item");
var gridInline = document.getElementById("grid-inline");
test(function() {
testComputedStyleDisplay(gridInline, "block");
}, "Test display floated 'inline' grid item");
var gridFlex = document.getElementById("grid-flex");
test(function() {
testComputedStyleDisplay(gridFlex, "flex");
}, "Test display floated 'flex' grid item");
var inlineGridInlineTable = document.getElementById("inline-grid-inline-table");
test(function() {
testComputedStyleDisplay(inlineGridInlineTable, "table");
}, "Test display floated 'inline-table' grid item within an inline grid");
var inlineGridInline = document.getElementById("inline-grid-inline");
test(function() {
testComputedStyleDisplay(inlineGridInline, "block");
}, "Test display floated 'inline' grid item within an inline grid");
var inlineGridFlex = document.getElementById("inline-grid-flex");
test(function() {
testComputedStyleDisplay(inlineGridFlex, "flex");
}, "Test display floated 'flex' grid item within an inline grid");
]]></script>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-first-letter-001.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-letter' from grid container does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-first-letter-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container." />
<style type="text/css"><![CDATA[
.grid {
display: grid;
color: green;
}
.grid::first-letter {
color: red;
}
]]></style>
</head>
<body>
<div class="grid">
<div>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-first-letter-002.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-letter' from grid container ancestors does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-first-letter-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container ancestors." />
<style type="text/css"><![CDATA[
.grid {
display: grid;
color: green;
}
body::first-letter {
color: red;
}
]]></style>
</head>
<body>
<div class="grid">
<div>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

39
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-first-letter-003.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: '::first-letter' works on grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-first-letter-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
<link rel="match" href="reference/grid-first-letter-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item." />
<style type="text/css"><![CDATA[
.grid {
display: grid;
}
.item::first-letter {
color: green;
}
]]></style>
</head>
<body>
<div class="grid">
<div class="item">
<p>
The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
In addition, body and paragraph margins should <strong>not collapse</strong>.
</p>
</div>
</div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-first-line-001.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-line' from grid container does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-first-line-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container." />
<style type="text/css"><![CDATA[
.grid {
display: grid;
color: green;
}
.grid::first-line {
color: red;
}
]]></style>
</head>
<body>
<div class="grid">
<div>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-first-line-002.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-line' from grid container ancestors does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-first-line-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container ancestors." />
<style type="text/css"><![CDATA[
.grid {
display: grid;
color: green;
}
body::first-line {
color: red;
}
]]></style>
</head>
<body>
<div class="grid">
<div>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-first-line-003.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-line' works on grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-first-line-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item." />
<style type="text/css"><![CDATA[
.grid {
display: grid;
color: red;
}
.item::first-line {
color: green;
}
]]></style>
</head>
<body>
<div class="grid">
<div class="item">
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-floats-no-intrude-001.xht Normal file
View file

@ -0,0 +1,49 @@
<!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: floats do not intrude into a grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-floats-no-intrude-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-overlapping-green {
background-color: green;
width: 50px;
height: 100px;
}
.float {
float: left;
}
.grid {
display: grid;
}
]]></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="float test-overlapping-green"></div>
<div class="grid test-overlapping-green"></div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-first-letter-001.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-letter' from inline grid container does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-first-letter-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container." />
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
color: green;
}
.grid::first-letter {
color: red;
}
]]></style>
</head>
<body>
<div class="inline-grid">
<div>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-first-letter-002.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-letter' from inline grid container ancestors does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-first-letter-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container ancestors." />
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
color: green;
}
body::first-letter {
color: red;
}
]]></style>
</head>
<body>
<div class="inline-grid">
<div>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

39
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-first-letter-003.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: '::first-letter' works on grid items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-first-letter-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element" />
<link rel="match" href="reference/grid-first-letter-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item within an inline grid." />
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
}
.item::first-letter {
color: green;
}
]]></style>
</head>
<body>
<div class="inline-grid">
<div class="item">
<p>
The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
In addition, body and paragraph margins should <strong>not collapse</strong>.
</p>
</div>
</div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-first-line-001.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-line' from inline grid container does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-first-line-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to an inline grid container." />
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
color: green;
}
.inline-grid::first-line {
color: red;
}
]]></style>
</head>
<body>
<div class="inline-grid">
<div>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-first-line-002.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-line' from inline grid container ancestors does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-first-line-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in anonymous grid items when applied to an inline grid container ancestors." />
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
color: green;
}
body::first-line {
color: red;
}
]]></style>
</head>
<body>
<div class="inline-grid">
<div>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

37
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-first-line-003.xht Normal file
View file

@ -0,0 +1,37 @@
<!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: '::first-line' works on grid items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-first-line-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS" />
<link rel="match" href="reference/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item within an inline grid." />
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
color: red;
}
.item::first-line {
color: green;
}
]]></style>
</head>
<body>
<div class="inline-grid">
<div class="item">
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</div>
</div>
</body>
</html>

49
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-floats-no-intrude-001.xht Normal file
View file

@ -0,0 +1,49 @@
<!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: floats do not intrude into an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-floats-no-intrude-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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" />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-overlapping-green {
background-color: green;
width: 50px;
height: 100px;
}
.float {
float: left;
}
.inline-grid {
display: inline-grid;
}
]]></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="float test-overlapping-green"></div>
<div class="inline-grid test-overlapping-green"></div>
</body>
</html>

55
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-items-001.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: Regular and anonymous grid items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-items-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item." />
<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: 25px/1 Ahem;
color: green;
grid-template-columns: auto auto;
}
]]></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>it</div>
em
<div>it</div>
em
</div>
<br />
<div class="test-inline-grid-overlapping-green">
it
<span>em</span>
it
<span>em</span>
</div>
</body>
</html>

64
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-items-002.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: Children of grid items do not create new items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-items-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items within an inline grid." />
<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: 25px/1 Ahem;
color: green;
}
.two-columns {
grid-template-columns: auto auto;
}
]]></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 two-columns">
<div>
<div>it</div>
em
</div>
<div>
it
<div>em</div>
</div>
</div>
<br />
<div class="test-inline-grid-overlapping-green">
<span>
<span>it</span>em
</span>
<span>
it<span>em</span>
</span>
</div>
</body>
</html>

50
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-items-003.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-items-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<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;
}
.display-none-red {
display: none;
color: red;
}
]]></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 two-columns">
<span>it</span>
<span class="display-none-red">hidden</span>
<span>em</span>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-items-inline-blocks-001.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: Paint order of grid items within an inline grid is the same as inline blocks</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-items-inline-blocks-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property" />
<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
}
#reference-overlapped-red {
color: red;
font: 100px/1 Ahem;
grid-row: 1;
grid-column: 1;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
grid-row: 1;
grid-column: 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="reference-overlapped-red">R</div>
<div id="test-overlapping-green"></div>
</div>
</body>
</html>

31
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-margins-no-collapse-001.xht Normal file
View file

@ -0,0 +1,31 @@
<!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's margins do not collapse</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-margins-no-collapse-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that inline grid's margin (body) do not collapse with the marings of the grid item (a paragraph)." />
<style type="text/css"><![CDATA[
body {
display: inline-grid;
}
p {
color: green;
}
]]></style>
</head>
<body>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</body>
</html>

52
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-multicol-001.xht Normal file
View file

@ -0,0 +1,52 @@
<!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: 'column-*' properties from inline grid container does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-multicol-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-overlapping-green {
background-color: green;
width: 100px;
height: 50px;
}
.inline-grid {
display: inline-grid;
-moz-column-width: 50px;
-webkit-column-width: 50px;
column-width: 50px;
}
]]></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"></div>
<div class="test-overlapping-green"></div>
</div>
</body>
</html>

66
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-auto-placement-001.xht Normal file
View file

@ -0,0 +1,66 @@
<!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: 'order' property affects grid items auto-placement position within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-auto-placement-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 10;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="magenta">M</div>
<div id="lime">L</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

66
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-auto-placement-002.xht Normal file
View file

@ -0,0 +1,66 @@
<!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: 'order' property affects grid items auto-placement position within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-auto-placement-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -10;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
order: -1;
}
#magenta {
color: magenta;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="magenta">M</div>
<div id="lime">L</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

66
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-auto-placement-003.xht Normal file
View file

@ -0,0 +1,66 @@
<!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: 'order' property affects grid items auto-placement position within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-auto-placement-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
}
#magenta {
color: magenta;
order: 1;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="lime">L</div>
<div id="magenta">M</div>
<div id="blue">B</div>
<div id="yellow">Y</div>
</div>
</body>
</html>

67
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-auto-placement-004.xht Normal file
View file

@ -0,0 +1,67 @@
<!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: 'order' property affects grid items auto-placement position within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-auto-placement-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: 1;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 5;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="blue">B</div>
<div id="lime">L</div>
<div id="magenta">M</div>
<div id="yellow">Y</div>
</div>
</body>
</html>

67
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-auto-placement-005.xht Normal file
View file

@ -0,0 +1,67 @@
<!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: 'order' property affects grid items auto-placement position within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-auto-placement-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#inline-grid {
display: inline-grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -1;
}
#lime {
color: lime;
order: 1;
}
#magenta {
color: magenta;
order: 5;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="inline-grid">
<div id="yellow">Y</div>
<div id="magenta">M</div>
<div id="blue">B</div>
<div id="lime">L</div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-painting-001.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: 'order' property affects grid items painting order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-painting-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-painting-002.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: 'order' property affects grid items painting order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-painting-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
order: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-painting-003.xht Normal file
View file

@ -0,0 +1,48 @@
<!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: 'order' property affects grid items painting order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-painting-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 10;
}
#reference-item-overlapped-red {
color: red;
order: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-painting-004.xht Normal file
View file

@ -0,0 +1,48 @@
<!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: 'order' property affects grid items painting order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-painting-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: -5;
}
#reference-item-overlapped-red {
color: red;
order: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-order-property-painting-005.xht Normal file
View file

@ -0,0 +1,48 @@
<!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: 'order' property affects grid items painting order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-order-property-painting-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 1;
}
#reference-item-overlapped-red {
color: red;
order: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

112
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-support-flexible-lengths-001.xht Normal file
View file

@ -0,0 +1,112 @@
<!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: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-support-flexible-lengths-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div>GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
]]></script>
</body>
</html>

86
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-support-grid-template-areas-001.xht Normal file
View file

@ -0,0 +1,86 @@
<!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: Support for 'grid-template-ares' property within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-support-grid-template-areas-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
#grid {
display: inline-grid;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="inline-grid"></div>
<script type="text/javascript"><![CDATA[
// Single values.
TestingUtils.testGridTemplateAreas('inline-grid', 'none', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a"', '"a"');
TestingUtils.testGridTemplateAreas('inline-grid', '"."', '"."');
TestingUtils.testGridTemplateAreas('inline-grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b"', '"a b"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b""c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\t"c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\n"c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "a b"', '"a b" "a b"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a a" "b b"', '"a a" "b b"');
TestingUtils.testGridTemplateAreas('inline-grid', '". a ." "b a c"', '". a ." "b a c"');
TestingUtils.testGridTemplateAreas('inline-grid', '".. a ..." "b a c"', '". a ." "b a c"');
TestingUtils.testGridTemplateAreas('inline-grid', '".a..." "b a c"', '". a ." "b a c"');
TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ...."', '"head head" "nav main" "foot ."');
TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot."', '"head head" "nav main" "foot ."');
TestingUtils.testGridTemplateAreas('inline-grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
TestingUtils.testGridTemplateAreas('inline-grid', '"... header header ...." "nav main main main" "nav footer footer ...."', '". header header ." "nav main main main" "nav footer footer ."');
TestingUtils.testGridTemplateAreas('inline-grid', '"...header header...." "nav main main main" "nav footer footer...."', '". header header ." "nav main main main" "nav footer footer ."');
TestingUtils.testGridTemplateAreas('inline-grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
TestingUtils.testGridTemplateAreas('inline-grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
TestingUtils.testGridTemplateAreas('inline-grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
TestingUtils.testGridTemplateAreas('inline-grid', '".. a" "b a" "... a"', '". a" "b a" ". a"');
TestingUtils.testGridTemplateAreas('inline-grid', '"..a" "b a" ".a"', '". a" "b a" ". a"');
TestingUtils.testGridTemplateAreas('inline-grid', '"a a a" "b b b"', '"a a a" "b b b"');
TestingUtils.testGridTemplateAreas('inline-grid', '". ." "a a"', '". ." "a a"');
TestingUtils.testGridTemplateAreas('inline-grid', '"... ...." "a a"', '". ." "a a"');
// Reset values.
document.getElementById('inline-grid').style.gridTemplateAreas = '';
// Wrong values.
TestingUtils.testGridTemplateAreas('inline-grid', 'a', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b c"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c" "d e"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b c" "d e"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b"-"c d"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" - "c d"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" . "c d"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b a"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b" "a"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b b"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"b a" "b b"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b a"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"a ." ". a"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '","', '","');
TestingUtils.testGridTemplateAreas('inline-grid', '"10%"', 'none');
TestingUtils.testGridTemplateAreas('inline-grid', '"USD$"', 'none');
]]></script>
</body>
</html>

96
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-support-grid-template-columns-rows-001.xht Normal file
View file

@ -0,0 +1,96 @@
<!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: Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-support-grid-template-columns-rows-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Single values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
// Multiple values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
]]></script>
</body>
</html>

130
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-support-named-grid-lines-001.xht Normal file
View file

@ -0,0 +1,130 @@
<!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: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-support-named-grid-lines-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
]]></script>
</body>
</html>

90
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-support-repeat-001.xht Normal file
View file

@ -0,0 +1,90 @@
<!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: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-support-repeat-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="inline-grid"></div>
<div id="grid" class="inline-grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
]]></script>
</body>
</html>

114
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-template-columns-rows-resolved-values-001.xht Normal file
View file

@ -0,0 +1,114 @@
<!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-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-template-columns-rows-resolved-values-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.inline-grid {
display: inline-grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
.fifthColumn {
grid-column: 5;
}
.fourthRow {
grid-row: 4;
}
.gridAutoFlowColumn {
grid-auto-flow: column;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="grid" class="inline-grid">
<div>FIRST ITEM</div>
<div>SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridItemsPositions" class="inline-grid">
<div class="fifthColumn">FIRST ITEM</div>
<div class="fourthRow">SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn">
<div>FIRST ITEM</div>
<div>SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn">
<div class="fifthColumn">FIRST ITEM</div>
<div class="fourthRow">SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
]]></script>
</body>
</html>

46
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-001.xht Normal file
View file

@ -0,0 +1,46 @@
<!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: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

46
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-002.xht Normal file
View file

@ -0,0 +1,46 @@
<!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: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-003.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 10;
}
#reference-item-overlapped-red {
color: red;
z-index: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-004.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: -5;
}
#reference-item-overlapped-red {
color: red;
z-index: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-005.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="inline-grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

56
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-overlapped-items-001.xht Normal file
View file

@ -0,0 +1,56 @@
<!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: 'z-index' property controls the grid items stacking order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-overlapped-items-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 1;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

57
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-overlapped-items-002.xht Normal file
View file

@ -0,0 +1,57 @@
<!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: 'z-index' property controls the grid items stacking order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-overlapped-items-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: 1;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 10;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

57
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-overlapped-items-003.xht Normal file
View file

@ -0,0 +1,57 @@
<!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: 'z-index' property controls the grid items stacking order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-overlapped-items-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -10;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -5;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: -1;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

56
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-overlapped-items-004.xht Normal file
View file

@ -0,0 +1,56 @@
<!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: 'z-index' property controls the grid items stacking order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-overlapped-items-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: 1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
z-index: 5;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

56
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-overlapped-items-005.xht Normal file
View file

@ -0,0 +1,56 @@
<!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: 'z-index' property controls the grid items stacking order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-overlapped-items-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -5;
grid-column: 1;
grid-row: 1;
}
#yellow {
color: yellow;
z-index: -1;
grid-column: 2;
grid-row: 2;
}
#green {
color: green;
grid-column: 3;
grid-row: 3;
}
]]></style>
</head>
<body>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

62
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-inline-z-axis-ordering-overlapped-items-006.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-inline-z-axis-ordering-overlapped-items-006"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/grid-filled-blue-yellow-green-overlapped-100px-squares.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#inline-grid {
display: inline-grid;
font: 100px/1 Ahem;
grid-template-columns: 25px 25px 25px 25px;
grid-template-rows: 25px 25px 25px 25px;
}
#blue {
color: blue;
z-index: -1;
grid-column: 2;
grid-row: 2;
margin-top: -25px;
margin-left: -25px;
}
#yellow {
color: yellow;
grid-column: 4;
grid-row: 4;
margin-top: -50px;
margin-left: -50px;
}
#green {
color: green;
z-index: 1;
grid-column: 1;
grid-row: 1;
margin-top: 50px;
margin-left: 50px;
}
]]></style>
</head>
<body>
<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
<div id="inline-grid">
<div id="green">G</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

54
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-items-001.xht Normal file
View file

@ -0,0 +1,54 @@
<!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: Regular and anonymous grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-items-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item." />
<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;
grid-template-columns: auto auto;
}
]]></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">
<div>it</div>
em
<div>it</div>
em
</div>
<div class="test-grid-overlapping-green">
it
<span>em</span>
it
<span>em</span>
</div>
</body>
</html>

63
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-items-002.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: Children of grid items do not create new items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-items-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items." />
<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;
}
.two-columns {
grid-template-columns: auto auto;
}
]]></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 two-columns">
<div>
<div>it</div>
em
</div>
<div>
it
<div>em</div>
</div>
</div>
<div class="test-grid-overlapping-green">
<span>
<span>it</span>em
</span>
<span>
it<span>em</span>
</span>
</div>
</body>
</html>

50
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-items-003.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-items-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items" />
<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;
}
.display-none-red {
display: none;
color: red;
}
]]></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 two-columns">
<span>it</span>
<span class="display-none-red">hidden</span>
<span>em</span>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-items-inline-blocks-001.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: Paint order of grid items is the same as inline blocks</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-items-inline-blocks-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property" />
<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
}
#reference-overlapped-red {
color: red;
font: 100px/1 Ahem;
grid-row: 1;
grid-column: 1;
}
#test-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
grid-row: 1;
grid-column: 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="reference-overlapped-red">R</div>
<div id="test-overlapping-green"></div>
</div>
</body>
</html>

7
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-auto-tracks.xht
View file

@ -2,7 +2,7 @@
<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="http://www.w3.org/TR/css-grid-1/#track-sizing" 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>
@ -19,8 +19,8 @@
width: 100px;
background: #eee;
display: grid;
grid-definition-columns: 100px;
grid-definition-rows: auto;
grid-template-columns: 100px;
grid-template-rows: auto;
}
.a {
background: blue;
@ -47,4 +47,5 @@
<div class="c">&#xA0;</div>
</div>
</body></html>

3
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-basic.xht
View file

@ -18,7 +18,7 @@
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 100px 50px;
grid-template-columns: 100px 50px;
}
.a {
background: blue;
@ -39,4 +39,5 @@
<div class="b">&#xA0;</div>
</div>
</body></html>

3
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-free-space-unit.xht
View file

@ -18,7 +18,7 @@
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 1fr 50px;
grid-template-columns: 1fr 50px;
}
.a {
background: blue;
@ -39,4 +39,5 @@
<div class="b">&#xA0;</div>
</div>
</body></html>

6
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-grid-span.xht
View file

@ -18,12 +18,11 @@
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
}
.a {
background: blue;
grid-column: 1;
grid-column-span: 2;
grid-column: 1 / span 2;
grid-row: 1;
}
.b {
@ -40,4 +39,5 @@
<div class="b">&#xA0;</div>
</div>
</body></html>

11
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-lines-shorthands.xht
View file

@ -2,9 +2,9 @@
<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="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines" 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" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
@ -18,15 +18,15 @@
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: "left" 100px "center" 50px "right";
grid-template-columns: [left] 100px [center] 50px [right];
}
.a {
background: blue;
grid-column: "left" / "center";
grid-column: left / center;
}
.b {
background: yellow;
grid-column: "center" / "right";
grid-column: center / right;
}
</style>
</head>
@ -37,4 +37,5 @@
<div class="b">&#xA0;</div>
</div>
</body></html>

15
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-lines.xht
View file

@ -2,9 +2,9 @@
<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="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines" 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" />
<meta content="the layout should behave the same as reference." name="assert" />
<style>
body {
margin: 0;
@ -18,17 +18,17 @@
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: "left" 100px "center" 50px "right";
grid-template-columns: [left] 100px [center] 50px [right];
}
.a {
background: blue;
grid-start: "left";
grid-end: "center";
grid-column-start: left;
grid-column-end: center;
}
.b {
background: yellow;
grid-start: "center";
grid-end: "right";
grid-column-start: center;
grid-column-end: right;
}
</style>
</head>
@ -39,4 +39,5 @@
<div class="b">&#xA0;</div>
</div>
</body></html>

3
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-placement-shorthands.xht
View file

@ -18,7 +18,7 @@
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
}
.a {
background: blue;
@ -39,4 +39,5 @@
<div class="b">&#xA0;</div>
</div>
</body></html>

207
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-properties.xht
View file

@ -3,16 +3,32 @@
<meta charset="UTF-8" />
<title>CSS Test: Grid Layout - Properties exist</title>
<link href="mailto:johnhax@gmail.com" rel="author" title="贺师俊" />
<link href="mailto:rego@igalia.com" rel="author" title="Manuel Rego Casasnovas" />
<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="ahem 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>
<style>
#container {
width: 800px;
height: 600px;
}
#myDiv {
font: 50px/1 Ahem;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<div id="log"></div>
<div id="container">
<div id="myDiv">
<div>I T</div>
<div>IT</div>
<div>I</div>
</div>
</div>
<script>
var myDiv = document.getElementById('myDiv')
@ -48,112 +64,165 @@
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)
myDiv.style[prop] = syntaxTests[testcase][0]
assert_equals(myDiv.style[prop], syntaxTests[testcase][0], testcase)
assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase][1], 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)',
initial: '150px',
'none': ['none', '150px'],
'&lt;line-names&gt;': ['[a] auto [b] auto [c]', '[a] 150px [b] 100px [c]'],
'&lt;track-size&gt;.auto': ['auto', '150px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;length&gt;': ['100px', '100px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;percentage&gt;': ['100%', '800px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;flex&gt;': ['1fr', '800px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.min-content': ['min-content', '100px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.max-content': ['max-content', '150px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.minmax()': ['minmax(100px, 200px)', '200px'],
'reset': ['none', '150px'],
},
'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)',
initial: '50px 50px 50px',
'none': ['none', '50px 50px 50px'],
'&lt;line-names&gt;': ['[a] auto [b] auto [c]', '[a] 50px [b] 50px [c] 50px'],
'&lt;track-size&gt;.auto': ['auto', '50px 50px 50px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;length&gt;': ['100px', '100px 50px 50px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;percentage&gt;': ['100%', '50px 50px 50px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;flex&gt;': ['1fr', '50px 50px 50px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.min-content': ['min-content', '50px 50px 50px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.max-content': ['max-content', '50px 50px 50px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.minmax()': ['minmax(100px, 200px)', '200px 50px 50px'],
'reset': ['none', '50px 50px 50px'],
},
'grid-template-areas': {
initial: 'none',
'&lt;string&gt;+': 'a',
'none': ['none', 'none'],
'&lt;string&gt;+': ['"a"', '"a"'],
'reset': ['none', 'none'],
},
'grid-template': {
'none': 'none',
'&lt;grid-template-columns&gt; / &lt;grid-template-rows&gt;': '100px / 100px',
'&lt;line-names&gt;': 'a b c',
initial: '150px / 50px 50px 50px',
'none': ['', '150px / 50px 50px 50px'],
'&lt;grid-template-columns&gt; / &lt;grid-template-rows&gt;': ['200px 200px / 100px 100px', '200px 200px / 100px 100px'],
'&lt;line-names&gt;': ['[a] auto [b] auto [c] / [d] auto [e] auto [f]', '[a] auto [b] auto [c] / [d] auto [e] auto [f]'],
'&lt;string&gt;+': ['"a b" "a b"', '"a b" "a b"'],
'&lt;string&gt;&lt;track-size&gt;+': ['100px / "a b" 50px', '100px / "a b" 50px'],
'reset': ['', '150px / 50px 50px 50px'],
},
'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)',
'&lt;track-size&gt;.auto': ['auto', 'auto'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;length&gt;': ['100px', '100px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;percentage&gt;': ['100%', '100%'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;flex&gt;': ['1fr', '1fr'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.min-content': ['min-content', 'min-content'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.max-content': ['max-content', 'max-content'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'],
'reset': ['auto', 'auto'],
},
'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)',
'&lt;track-size&gt;.auto': ['auto', 'auto'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;length&gt;': ['100px', '100px'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;percentage&gt;': ['100%', '100%'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.&lt;flex&gt;': ['1fr', '1fr'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.min-content': ['min-content', 'min-content'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.max-content': ['max-content', 'max-content'],
'&lt;track-size&gt;.&lt;track-breadth&gt;.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'],
'reset': ['auto', 'auto'],
},
'grid-auto-flow': {
initial: 'rows',
'rows': 'rows',
'columns': 'columns',
'dense': 'rows dense',
},
'grid-auto': {
initial: 'row',
'row': ['row', 'row'],
'column': ['column', 'column'],
'dense': ['dense', 'row dense'],
'row dense': ['row dense', 'row dense'],
'column dense': ['column dense', 'column dense'],
'reset': ['row', 'row'],
},
'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',
'auto': ['auto', 'auto'],
'&lt;custom-ident&gt;': ['a', 'a'],
'&lt;integer&gt;': ['1', '1'],
'&lt;integer&gt; &lt;ident&gt;': ['1 a', '1 a'],
'span &lt;integer&gt;': ['span 1', 'span 1'],
'span &lt;custom-ident&gt;': ['span a', 'span 1 a'],
'span &lt;integer&gt; &lt;custom-ident&gt;': ['span 2 a', 'span 2 a'],
'reset': ['auto', 'auto'],
},
'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',
'auto': ['auto', 'auto'],
'&lt;custom-ident&gt;': ['a', 'a'],
'&lt;integer&gt;': ['1', '1'],
'&lt;integer&gt; &lt;ident&gt;': ['1 a', '1 a'],
'span &lt;integer&gt;': ['span 1', 'span 1'],
'span &lt;custom-ident&gt;': ['span a', 'span 1 a'],
'span &lt;integer&gt; &lt;custom-ident&gt;': ['span 2 a', 'span 2 a'],
'reset': ['auto', 'auto'],
},
'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',
'auto': ['auto', 'auto'],
'&lt;custom-ident&gt;': ['a', 'a'],
'&lt;integer&gt;': ['1', '1'],
'&lt;integer&gt; &lt;ident&gt;': ['1 a', '1 a'],
'span &lt;integer&gt;': ['span 1', 'span 1'],
'span &lt;custom-ident&gt;': ['span a', 'span 1 a'],
'span &lt;integer&gt; &lt;custom-ident&gt;': ['span 2 a', 'span 2 a'],
'reset': ['auto', 'auto'],
},
'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',
'auto': ['auto', 'auto'],
'&lt;custom-ident&gt;': ['a', 'a'],
'&lt;integer&gt;': ['1', '1'],
'&lt;integer&gt; &lt;ident&gt;': ['1 a', '1 a'],
'span &lt;integer&gt;': ['span 1', 'span 1'],
'span &lt;custom-ident&gt;': ['span a', 'span 1 a'],
'span &lt;integer&gt; &lt;custom-ident&gt;': ['span 2 a', 'span 2 a'],
'reset': ['auto', 'auto'],
},
'grid-column': {
initial: 'auto',
'auto': ['auto', 'auto'],
'&lt;custom-ident&gt;': ['a / b', 'a / b'],
'&lt;integer&gt; start': ['1', '1'],
'&lt;integer&gt;': ['1 / 3', '1 / 3'],
'&lt;integer&gt; &lt;ident&gt;': ['1 a / 2 b', '1 a / 2 b'],
'span &lt;integer&gt;': ['span 1 / span 2', 'span 1 / span 2'],
'span &lt;custom-ident&gt;': ['span a / span b', 'span 1 a / span 1 b'],
'span &lt;integer&gt; &lt;custom-ident&gt;': ['span 2 a / span 3 b', 'span 2 a / span 3 b'],
'reset': ['auto', 'auto'],
},
'grid-row': {
initial: 'auto',
'auto': ['auto', 'auto'],
'&lt;custom-ident&gt;': ['a / b', 'a / b'],
'&lt;integer&gt; start': ['1', '1'],
'&lt;integer&gt;': ['1 / 3', '1 / 3'],
'&lt;integer&gt; &lt;ident&gt;': ['1 a / 2 b', '1 a / 2 b'],
'span &lt;integer&gt;': ['span 1 / span 2', 'span 1 / span 2'],
'span &lt;custom-ident&gt;': ['span a / span b', 'span 1 a / span 1 b'],
'span &lt;integer&gt; &lt;custom-ident&gt;': ['span 2 a / span 3 b', 'span 2 a / span 3 b'],
'reset': ['auto', 'auto'],
},
'grid-area': {
initial: 'auto',
'auto': ['auto', 'auto'],
'&lt;custom-ident&gt;': ['a / b / c / d', 'a / b / c / d'],
'&lt;integer&gt; start': ['1 / 2', '1 / 2'],
'&lt;integer&gt;': ['1 / 2 / 3 / 4', '1 / 2 / 3 / 4'],
'&lt;integer&gt; &lt;ident&gt;': ['1 a / 2 b / 3 c / 4 d', '1 a / 2 b / 3 c / 4 d'],
'span &lt;integer&gt;': ['span 1 / span 2 / span 3 / span 4', 'span 1 / span 2 / span 3 / span 4'],
'span &lt;custom-ident&gt;': ['span a / span b / span c / span d', 'span 1 a / span 1 b / span 1 c / span 1 d'],
'span &lt;integer&gt; &lt;custom-ident&gt;': ['span 2 a / span 3 b / span 4 c / span 5 d', 'span 2 a / span 3 b / span 4 c / span 5 d'],
'reset': ['auto', 'auto'],
},
})
</script>

3
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-repeat-notation.xht
View file

@ -18,7 +18,7 @@
width: 450px;
background: #eee;
display: grid;
grid-definition-columns: repeat(4, 100px) 50px;
grid-template-columns: repeat(4, 100px) 50px;
}
.a {
background: blue;
@ -52,4 +52,5 @@
<div class="e">&#xA0;</div>
</div>
</body></html>

5
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-z-order-a.xht
View file

@ -18,16 +18,18 @@
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
color:white;
}
.a {
background: blue;
grid-row: 1;
grid-column: 1 / span 2;
z-index:10
}
.b {
background: yellow;
grid-row: 1;
grid-column: 2 / span 2;
z-index:1
}
@ -40,4 +42,5 @@
<div class="a">up</div>
</div>
</body></html>

11
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-layout-z-order-b.xht
View file

@ -18,19 +18,19 @@
width: 150px;
background: #eee;
display: grid;
grid-definition-columns: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
color:white;
}
.a {
background: blue;
grid-column: 1;
grid-column-span: 2;
grid-row: 1;
grid-column: 1 / 3;
z-index:10
}
.b {
background: yellow;
grid-column: 2;
grid-column-span: 2;
grid-row: 1;
grid-column: 2 / 4;
z-index:1
}
</style>
@ -42,4 +42,5 @@
<div class="a">up</div>
</div>
</body></html>

31
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-margins-no-collapse-001.xht Normal file
View file

@ -0,0 +1,31 @@
<!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's margins do not collapse</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-margins-no-collapse-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/grid-text-green-margin-no-collapse-ref.xht" />
<meta name="assert" content="This test checks that grid's margin (body) do not collapse with the marings of the grid item (a paragraph)." />
<style type="text/css"><![CDATA[
body {
display: grid;
}
p {
color: green;
}
]]></style>
</head>
<body>
<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
</body>
</html>

49
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-001.xht Normal file
View file

@ -0,0 +1,49 @@
<!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: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<meta name="assert" content="Checks that minimun size for grid items is the min-content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
color: green;
background-color: green;
font: 50px/1 Ahem;
}
]]></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="constrained-grid">
<div id="test-grid-item-overlapping-green">IT E</div>
</div>
</body>
</html>

53
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-002.xht Normal file
View file

@ -0,0 +1,53 @@
<!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: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun size for grid items is the min-content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
}
#content-100x100 {
width: 100px;
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 id="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-100x100"></div>
</div>
</div>
</body>
</html>

55
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-003.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun size for grid items is the specified size regardless of the content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
#content-500x500 {
width: 500px;
height: 500px;
}
]]></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="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-500x500"></div>
</div>
</div>
</body>
</html>

55
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-004.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun size for grid items is the specified size regardless of the content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
background-color: green;
width: 100px;
height: 100px;
}
#content-50x50 {
width: 50px;
height: 50px;
}
]]></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="constrained-grid">
<div id="test-grid-item-overlapping-green">
<div id="content-50x50"></div>
</div>
</div>
</body>
</html>

42
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-005.xht Normal file
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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Grid Layout Test: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun size for grid items is the min-content size." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
]]></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="constrained-grid">
<img src="../support/100x100-green.png" />
</div>
</body>
</html>

46
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-006.xht Normal file
View file

@ -0,0 +1,46 @@
<!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: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-006"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun size for grid items is the specified size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
width: 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 id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="../support/200x200-green.png" />
</div>
</body>
</html>

46
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-007.xht Normal file
View file

@ -0,0 +1,46 @@
<!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: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-007"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun size for grid items is the specified size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
width: 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 id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="../support/60x60-green.png" />
</div>
</body>
</html>

46
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-008.xht Normal file
View file

@ -0,0 +1,46 @@
<!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: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-008"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun size for grid items is the transferred size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
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 id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="../support/200x200-green.png" />
</div>
</body>
</html>

46
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-minimun-size-grid-items-009.xht Normal file
View file

@ -0,0 +1,46 @@
<!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: Minimun size of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-minimun-size-grid-items-009"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="4.4. Implied Minimum Size of Grid Items" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Checks that minimun size for grid items is the transferred size, as the min-content size of the image corresponds to that." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
#constrained-grid {
display: grid;
grid: 10px / 10px;
}
#test-grid-item-overlapping-green {
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 id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="../support/60x60-green.png" />
</div>
</body>
</html>

52
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-multicol-001.xht Normal file
View file

@ -0,0 +1,52 @@
<!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: 'column-*' properties from grid container does not apply to grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-multicol-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<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/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container." />
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
.test-overlapping-green {
background-color: green;
width: 100px;
height: 50px;
}
.grid {
display: grid;
-moz-column-width: 50px;
-webkit-column-width: 50px;
column-width: 50px;
}
]]></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"></div>
<div class="test-overlapping-green"></div>
</div>
</body>
</html>

66
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-auto-placement-001.xht Normal file
View file

@ -0,0 +1,66 @@
<!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: 'order' property affects grid items auto-placement position</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-auto-placement-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 10;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="grid">
<div id="magenta">M</div>
<div id="lime">L</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

66
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-auto-placement-002.xht Normal file
View file

@ -0,0 +1,66 @@
<!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: 'order' property affects grid items auto-placement position</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-auto-placement-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -10;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
order: -1;
}
#magenta {
color: magenta;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="grid">
<div id="magenta">M</div>
<div id="lime">L</div>
<div id="yellow">Y</div>
<div id="blue">B</div>
</div>
</body>
</html>

66
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-auto-placement-003.xht Normal file
View file

@ -0,0 +1,66 @@
<!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: 'order' property affects grid items auto-placement position</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-auto-placement-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -5;
}
#lime {
color: lime;
}
#magenta {
color: magenta;
order: 1;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="grid">
<div id="lime">L</div>
<div id="magenta">M</div>
<div id="blue">B</div>
<div id="yellow">Y</div>
</div>
</body>
</html>

67
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-auto-placement-004.xht Normal file
View file

@ -0,0 +1,67 @@
<!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: 'order' property affects grid items auto-placement position</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-auto-placement-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: 1;
}
#yellow {
color: yellow;
order: 1;
}
#lime {
color: lime;
order: 5;
}
#magenta {
color: magenta;
order: 5;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="grid">
<div id="blue">B</div>
<div id="lime">L</div>
<div id="magenta">M</div>
<div id="yellow">Y</div>
</div>
</body>
</html>

67
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-auto-placement-005.xht Normal file
View file

@ -0,0 +1,67 @@
<!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: 'order' property affects grid items auto-placement position</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-auto-placement-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/grid-2x2-blue-yellow-lime-magenta.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;
}
#grid {
display: grid;
font: 50px/1 Ahem;
grid-template-columns: auto auto;
}
#blue {
color: blue;
order: -5;
}
#yellow {
color: yellow;
order: -1;
}
#lime {
color: lime;
order: 1;
}
#magenta {
color: magenta;
order: 5;
}
]]></style>
</head>
<body>
<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
<div id="reference-overlapped-red"></div>
<div id="grid">
<div id="yellow">Y</div>
<div id="magenta">M</div>
<div id="blue">B</div>
<div id="lime">L</div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-painting-001.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: 'order' property affects grid items painting order</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-painting-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-painting-002.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: 'order' property affects grid items painting order</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-painting-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
order: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-painting-003.xht Normal file
View file

@ -0,0 +1,48 @@
<!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: 'order' property affects grid items painting order</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-painting-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 10;
}
#reference-item-overlapped-red {
color: red;
order: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-painting-004.xht Normal file
View file

@ -0,0 +1,48 @@
<!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: 'order' property affects grid items painting order</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-painting-004"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: -5;
}
#reference-item-overlapped-red {
color: red;
order: -10;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

48
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-order-property-painting-005.xht Normal file
View file

@ -0,0 +1,48 @@
<!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: 'order' property affects grid items painting order</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-order-property-painting-005"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property" />
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property" title="5.4. Display Order: the order property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
order: 1;
}
#reference-item-overlapped-red {
color: red;
order: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

112
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-support-flexible-lengths-001.xht Normal file
View file

@ -0,0 +1,112 @@
<!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: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-support-flexible-lengths-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div>GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
]]></script>
</body>
</html>

86
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-support-grid-template-areas-001.xht Normal file
View file

@ -0,0 +1,86 @@
<!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: Support for 'grid-template-ares' property</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-support-grid-template-areas-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
#grid {
display: grid;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="grid"></div>
<script type="text/javascript"><![CDATA[
// Single values.
TestingUtils.testGridTemplateAreas('grid', 'none', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"');
TestingUtils.testGridTemplateAreas('grid', '"."', '"."');
TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"');
TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c d"');
TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a b"');
TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b b"');
TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a ." "b a c"');
TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', '". a ." "b a c"');
TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', '". a ." "b a c"');
TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ...."', '"head head" "nav main" "foot ."');
TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot."', '"head head" "nav main" "foot ."');
TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
TestingUtils.testGridTemplateAreas('grid', '"... header header ...." "nav main main main" "nav footer footer ...."', '". header header ." "nav main main main" "nav footer footer ."');
TestingUtils.testGridTemplateAreas('grid', '"...header header...." "nav main main main" "nav footer footer...."', '". header header ." "nav main main main" "nav footer footer ."');
TestingUtils.testGridTemplateAreas('grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
TestingUtils.testGridTemplateAreas('grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', '". a" "b a" ". a"');
TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', '". a" "b a" ". a"');
TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a a" "b b b"');
TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a a"');
TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', '". ." "a a"');
// Reset values.
document.getElementById('grid').style.gridTemplateAreas = '';
// Wrong values.
TestingUtils.testGridTemplateAreas('grid', 'a', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none');
TestingUtils.testGridTemplateAreas('grid', '","', '","');
TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none');
TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none');
]]></script>
</body>
</html>

96
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-support-grid-template-columns-rows-001.xht Normal file
View file

@ -0,0 +1,96 @@
<!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: Support for 'grid-template-columns' and 'grid-template-rows' properties</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-support-grid-template-columns-rows-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Single values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
// Multiple values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
]]></script>
</body>
</html>

130
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-support-named-grid-lines-001.xht Normal file
View file

@ -0,0 +1,130 @@
<!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: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-support-named-grid-lines-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
]]></script>
</body>
</html>

90
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-support-repeat-001.xht Normal file
View file

@ -0,0 +1,90 @@
<!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: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-support-repeat-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="emptyGrid" class="grid"></div>
<div id="grid" class="grid">
<div id="item">GRID ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
// Reset values.
document.getElementById("emptyGrid").style.gridTemplateColumns = "";
document.getElementById("emptyGrid").style.gridTemplateRows = "";
document.getElementById("grid").style.gridTemplateColumns = "";
document.getElementById("grid").style.gridTemplateRows = "";
// Wrong values.
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
]]></script>
</body>
</html>

114
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-template-columns-rows-resolved-values-001.xht Normal file
View file

@ -0,0 +1,114 @@
<!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-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-template-columns-rows-resolved-values-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values" />
<meta name="flags" content="ahem dom" />
<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created." />
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<script src="support/testing-utils.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
width: 800px;
height: 600px;
font: 10px/1 Ahem;
}
.fifthColumn {
grid-column: 5;
}
.fourthRow {
grid-row: 4;
}
.gridAutoFlowColumn {
grid-auto-flow: column;
}
]]></style>
</head>
<body>
<div id="log"></div>
<div id="grid" class="grid">
<div>FIRST ITEM</div>
<div>SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridItemsPositions" class="grid">
<div class="fifthColumn">FIRST ITEM</div>
<div class="fourthRow">SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn">
<div>FIRST ITEM</div>
<div>SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn">
<div class="fifthColumn">FIRST ITEM</div>
<div class="fourthRow">SECOND ITEM</div>
<div>THIRD<br />ITEM</div>
</div>
<script type="text/javascript"><![CDATA[
// Valid values.
TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
]]></script>
</body>
</html>

46
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-z-axis-ordering-001.xht Normal file
View file

@ -0,0 +1,46 @@
<!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: 'z-index' property controls the z-axis order of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-z-axis-ordering-001"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 1;
}
#reference-item-overlapped-red {
color: red;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

46
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-z-axis-ordering-002.xht Normal file
View file

@ -0,0 +1,46 @@
<!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: 'z-index' property controls the z-axis order of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-z-axis-ordering-002"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
}
#reference-item-overlapped-red {
color: red;
z-index: -1;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

47
tests/wpt/css-tests/css-grid-1_dev/xhtml1print/grid-z-axis-ordering-003.xht Normal file
View file

@ -0,0 +1,47 @@
<!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: 'z-index' property controls the z-axis order of grid items</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Grid Layout Module Level 1 CR Test Suite"; }
@top-right { content: "Test grid-z-axis-ordering-003"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property" />
<link rel="match" href="reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
#grid {
display: grid;
font: 100px/1 Ahem;
}
#test-item-overlapping-green {
color: green;
z-index: 10;
}
#reference-item-overlapped-red {
color: red;
z-index: 5;
}
.first-row-first-column {
grid-area: 1 / 1;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="grid">
<div id="test-item-overlapping-green" class="first-row-first-column">G</div>
<div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
</div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more