Update CSS tests to revision d13905941293af83ea8c3c1750dba652e0423fb0

This commit is contained in:
Ms2ger 2015-10-31 14:35:08 +01:00
parent b492a3e8b1
commit 5450053b02
842 changed files with 42936 additions and 27 deletions

View file

@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Introduction - CSS Fragmentation Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Fragmentation Module Level 3 CR Test Suite</h1>
<h2>Introduction (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1">+</a>
<a href="http://www.w3.org/TR/css3-break/#intro">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.#fragmentation">
<!-- 0 tests -->
</tbody>
<tbody id="s1.#pagination">
<!-- 0 tests -->
</tbody>
<tbody id="s1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.1">+</a>
<a href="http://www.w3.org/TR/css3-break/#placement">1.1 Module Interactions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1.2">+</a>
<a href="http://www.w3.org/TR/css3-break/#values">1.2 Values</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,131 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Fragmentation Model and Terminology - CSS Fragmentation Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Fragmentation Module Level 3 CR Test Suite</h1>
<h2>Fragmentation Model and Terminology (4 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/css3-break/#fragmentation-model">2 Fragmentation Model and Terminology</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s2.#box-fragment">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#break">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragment">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragmentainer">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragmentation-break">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragmentation-container">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragmentation-context">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragmentation-direction">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragmentation-root">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragmentation0">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#fragmented-flow">
<!-- 0 tests -->
</tbody>
<tbody id="s2.#remaining-fragmentainer-extent">
<!-- 0 tests -->
</tbody>
<tbody id="s2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.1">+</a>
<a href="http://www.w3.org/TR/css3-break/#parallel-flows">2.1 Parallel Fragmentation Flows</a></th></tr>
<!-- 4 tests -->
<tr id="floats-clear-breaks-002-2.1" class="ahem">
<td>
<a href="floats-clear-breaks-002.htm">floats-clear-breaks-002</a></td>
<td><a href="reference/floats-clear-breaks-002-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: forced region breaks and clear on floats inside named flow contents
<ul class="assert">
<li>Test checks that no regions are left empty when setting a forced region break on a cleared float.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-012-2.1" class="ahem">
<td>
<a href="floats-in-named-flow-012.htm">floats-in-named-flow-012</a></td>
<td><a href="reference/floats-in-named-flow-012-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>floats with forced region breaks inside them
<ul class="assert">
<li>Test checks that floats in named flow contents are floated relative to the region container and not their initial container, even when multiple regions are involved.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-029-2.1" class="ahem">
<td>
<a href="floats-in-named-flow-029.htm">floats-in-named-flow-029</a></td>
<td><a href="reference/floats-in-named-flow-029-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: margins around forced breaks when break is around float
<ul class="assert">
<li>Test checks that margins are correctly preserved when content has floats and is fragmented via forced breaks.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-030-2.1" class="ahem">
<td>
<a href="floats-in-named-flow-030.htm">floats-in-named-flow-030</a></td>
<td><a href="reference/floats-in-named-flow-030-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: margins around unforced breaks when break is around float
<ul class="assert">
<li>Test checks that margins are correctly preserved when content has floats and is fragmented via unforced breaks.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2.2">+</a>
<a href="http://www.w3.org/TR/css3-break/#nested-flows">2.2 Nested Fragmentation Flows</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,153 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Controlling Breaks - CSS Fragmentation Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Fragmentation Module Level 3 CR Test Suite</h1>
<h2>Controlling Breaks (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="http://www.w3.org/TR/css3-break/#breaking-controls">3 Controlling Breaks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="http://www.w3.org/TR/css3-break/#break-between">3.1 Breaks Between Boxes: the &#8216;break-before&#8217; and &#8216;break-after&#8217; properties</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#always">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#any">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#auto">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#avoid">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#avoid-break-values">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#avoid-column">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#avoid-page">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#avoid-region">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#break-after">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#break-before">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#column">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#column-break-values">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#forced-break-values">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#generic-break-values">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#left">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#page">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#page-break-values">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#recto">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#region">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#region-break-values">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#right">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#verso">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.2">+</a>
<a href="http://www.w3.org/TR/css3-break/#break-within">3.2 Breaks Within Boxes: the &#8216;break-inside&#8217; property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.#auto0">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.#avoid-column0">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.#avoid-page0">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.#avoid-region0">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.#avoid0">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.#break-inside">
<!-- 0 tests -->
</tbody>
<tbody id="s3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.3">+</a>
<a href="http://www.w3.org/TR/css3-break/#widows-orphans">3.3 Breaks Between Lines: &#8216;orphans&#8217;, &#8216;widows&#8217;</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.3.#orphans">
<!-- 0 tests -->
</tbody>
<tbody id="s3.3.#widows">
<!-- 0 tests -->
</tbody>
<tbody id="s3.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.4">+</a>
<a href="http://www.w3.org/TR/css3-break/#page-break-properties">3.4 Page Break Aliases: the &#8216;page-break-before&#8217;, &#8216;page-break-after&#8217;, and &#8216;page-break-inside&#8217; properties</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,141 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Rules for Breaking - CSS Fragmentation Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Fragmentation Module Level 3 CR Test Suite</h1>
<h2>Rules for Breaking (2 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="http://www.w3.org/TR/css3-break/#breaking-rules">4 Rules for Breaking</a></th></tr>
<!-- 2 tests -->
<tr id="regions-transforms-013-4" class="">
<td>
<a href="regions-transforms-013.htm">regions-transforms-013</a></td>
<td><a href="reference/regions-transforms-013-alt-ref.htm">=</a> <a href="reference/regions-transforms-013-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow (monolithic) content that breaks across multiple regions
<ul class="assert">
<li>This test checks that the named flow content that is monolithic is transformed when it breaks across multiple regions whether it is sliced or overflowed at the fragmentainer edge.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-020-4" class="">
<td>
<a href="regions-transforms-020.htm">regions-transforms-020</a></td>
<td><a href="reference/regions-transforms-020-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: Transformed region with named flow (fragmentable) content that breaks across multiple regions
<ul class="assert">
<li>This test checks that the named flow content that is fragmentable (has a break point) is transformed when it breaks across multiple regions.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.#monolithic">
<!-- 1 tests -->
<tr id="regions-transforms-013-4.#monolithic" class="">
<td>
<a href="regions-transforms-013.htm">regions-transforms-013</a></td>
<td><a href="reference/regions-transforms-013-alt-ref.htm">=</a> <a href="reference/regions-transforms-013-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow (monolithic) content that breaks across multiple regions
<ul class="assert">
<li>This test checks that the named flow content that is monolithic is transformed when it breaks across multiple regions whether it is sliced or overflowed at the fragmentainer edge.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.1">+</a>
<a href="http://www.w3.org/TR/css3-break/#possible-breaks">4.1 Possible Break Points</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#btw-blocks">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#btw-lines">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#end-block">
<!-- 0 tests -->
</tbody>
<tbody id="s4.1.#monolithic-breaking">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.2">+</a>
<a href="http://www.w3.org/TR/css3-break/#break-types">4.2 Types of Breaks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#column-break">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#line-break">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#page-break">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#region-break">
<!-- 0 tests -->
</tbody>
<tbody id="s4.2.#spread-break">
<!-- 0 tests -->
</tbody>
<tbody id="s4.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.3">+</a>
<a href="http://www.w3.org/TR/css3-break/#forced-breaks">4.3 Forced Breaks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.3.#forced-break">
<!-- 0 tests -->
</tbody>
<tbody id="s4.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.4">+</a>
<a href="http://www.w3.org/TR/css3-break/#unforced-breaks">4.4 Unforced Breaks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.4.#unforced-break">
<!-- 0 tests -->
</tbody>
<tbody id="s4.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4.5">+</a>
<a href="http://www.w3.org/TR/css3-break/#best-breaks">4.5 Optimizing Unforced Breaks</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.5.#widows-orphans-example">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,183 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Box Model for Breaking - CSS Fragmentation Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Fragmentation Module Level 3 CR Test Suite</h1>
<h2>Box Model for Breaking (9 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/css3-break/#breaking-boxes">5 Box Model for Breaking</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.1">+</a>
<a href="http://www.w3.org/TR/css3-break/#varying-size-boxes">5.1 Breaking into Varying-size Fragmentainers</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.2">+</a>
<a href="http://www.w3.org/TR/css3-break/#break-margins">5.2 Adjoining Margins at Breaks</a></th></tr>
<!-- 2 tests -->
<tr id="floats-in-named-flow-029-5.2" class="ahem">
<td>
<a href="floats-in-named-flow-029.htm">floats-in-named-flow-029</a></td>
<td><a href="reference/floats-in-named-flow-029-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: margins around forced breaks when break is around float
<ul class="assert">
<li>Test checks that margins are correctly preserved when content has floats and is fragmented via forced breaks.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-030-5.2" class="ahem">
<td>
<a href="floats-in-named-flow-030.htm">floats-in-named-flow-030</a></td>
<td><a href="reference/floats-in-named-flow-030-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: margins around unforced breaks when break is around float
<ul class="assert">
<li>Test checks that margins are correctly preserved when content has floats and is fragmented via unforced breaks.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s5.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.3">+</a>
<a href="http://www.w3.org/TR/css3-break/#box-splitting">5.3 Splitting Boxes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.4">+</a>
<a href="http://www.w3.org/TR/css3-break/#break-decoration">5.4 Fragmented Borders and Backgrounds: the &#8216;box-decoration-break&#8217; property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#box-decoration-break">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#clone">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.#slice">
<!-- 0 tests -->
</tbody>
<tbody id="s5.4.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.4.1">+</a>
<a href="http://www.w3.org/TR/css3-break/#joining-boxes">5.4.1 Joining Boxes for &#8216;slice&#8217;</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s5.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5.5">+</a>
<a href="http://www.w3.org/TR/css3-break/#transforms">5.5 Transforms, Positioning, and Pagination</a></th></tr>
<!-- 7 tests -->
<tr id="position-relative-001-5.5" class="ahem">
<td>
<a href="position-relative-001.htm">position-relative-001</a></td>
<td><a href="reference/position-relative-001-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: flowing content that has position: relative
<ul class="assert">
<li>Test checks that fragments of content flowed in regions are positioned independently, after the fragmentation occurs.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-008-5.5" class="ahem">
<td>
<a href="regions-transforms-008.htm">regions-transforms-008</a></td>
<td><a href="reference/regions-transforms-008-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Transformed named flow (text) content that breaks across multiple regions and overflows
<ul class="assert">
<li>This test checks that named flow text content is transformed when it breaks across multiple regions and that the overflow remains visible.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-009-5.5" class="ahem">
<td>
<a href="regions-transforms-009.htm">regions-transforms-009</a></td>
<td><a href="reference/regions-transforms-008-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Transformed region with named flow (text) content that breaks across multiple regions and overflows
<ul class="assert">
<li>This test checks that the regions are transformed when named flow text content breaks across multiple regions and that the overflow remains visible.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-013-5.5" class="">
<td>
<a href="regions-transforms-013.htm">regions-transforms-013</a></td>
<td><a href="reference/regions-transforms-013-alt-ref.htm">=</a> <a href="reference/regions-transforms-013-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow (monolithic) content that breaks across multiple regions
<ul class="assert">
<li>This test checks that the named flow content that is monolithic is transformed when it breaks across multiple regions whether it is sliced or overflowed at the fragmentainer edge.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-020-5.5" class="">
<td>
<a href="regions-transforms-020.htm">regions-transforms-020</a></td>
<td><a href="reference/regions-transforms-020-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: Transformed region with named flow (fragmentable) content that breaks across multiple regions
<ul class="assert">
<li>This test checks that the named flow content that is fragmentable (has a break point) is transformed when it breaks across multiple regions.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-021-5.5" class="">
<td>
<a href="regions-transforms-021.htm">regions-transforms-021</a></td>
<td><a href="reference/regions-transforms-020-ref.htm">=</a> </td>
<td></td>
<td>CSS Regions: Transforms on multiple named flow (non-text) content nodes that break across multiple regions
<ul class="assert">
<li>This test checks that separate transforms can be applied to each named flow content node that breaks across multiple regions and that each fragment has its own transform origin.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-022-5.5" class="ahem">
<td>
<a href="regions-transforms-022.htm">regions-transforms-022</a></td>
<td><a href="reference/regions-transforms-020-ref.htm">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Transforms on multiple named flow (text) content nodes that break across multiple regions
<ul class="assert">
<li>This test checks that separate transforms can be applied to each named flow content text node that breaks across multiple regions</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,159 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Conformance - CSS Fragmentation Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Fragmentation Module Level 3 CR Test Suite</h1>
<h2>Conformance (0 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
<col id="flags-column">
<col id="info-column">
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="http://www.w3.org/TR/css3-break/#conformance">6 Conformance</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1">+</a>
<a href="http://www.w3.org/TR/css3-break/#conventions">6.1 Document Conventions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2">+</a>
<a href="http://www.w3.org/TR/css3-break/#conformance-classes">6.2 Conformance Classes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#authoring-tool">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#renderer">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#style-sheet">
<!-- 0 tests -->
</tbody>
<tbody id="s6.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.3">+</a>
<a href="http://www.w3.org/TR/css3-break/#partial">6.3 Partial Implementations</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.4">+</a>
<a href="http://www.w3.org/TR/css3-break/#experimental">6.4 Experimental Implementations</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.5">+</a>
<a href="http://www.w3.org/TR/css3-break/#testing">6.5 Non-Experimental Implementations</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.6">+</a>
<a href="http://www.w3.org/TR/css3-break/#cr-exit-criteria">6.6 CR Exit Criteria</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#css-fragmentation-module">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative-references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#other-references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#property-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS-REGIONS-1">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS-TEXT-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS-WRITING-MODES-3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS21">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS3-FLEXBOX">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS3-SIZING">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS3-TRANSFORMS">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS3BG">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS3COL">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS3PAGE">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-CSS3VAL">
<!-- 0 tests -->
</tbody>
<tbody id="s.#ref-RFC2119">
<!-- 0 tests -->
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#status">
<!-- 0 tests -->
</tbody>
<tbody id="s.#subtitle">
<!-- 0 tests -->
</tbody>
<tbody id="s.#w3c_process_revision">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: forced region breaks and clear on floats inside named flow contents</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-break/#parallel-flows" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that no regions are left empty when setting
a forced region break on a cleared float." name="assert">
<link href="reference/floats-clear-breaks-002-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.float {
float: left;
color: blue;
}
.break {
break-before: region;
}
.clear {
clear: left;
color: green;
}
.bordered {
border: 10px solid black;
}
.region {
flow-from: f;
max-width: 100px;
margin-bottom: 10px;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see two squares separated by a small vertical space. The squares should
have a black outline, the top square should be blue and the bottom one should be green.<br>
You should see no red.
</p>
<div class="bordered region">
<p>&nbsp;</p>
</div>
<div class="bordered region">
<p>&nbsp;</p>
</div>
<!-- In case the clear + forced break lead to an empty region, the content will flow in this
third region ending up without a border. -->
<div class="region">
<p>&nbsp;</p>
</div>
<article class="flow">
<div class="float">
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
</div>
<div class="break clear">
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
</div>
</article>
</body></html>

View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: floats with forced region breaks inside them</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-break/#parallel-flows" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that floats in named flow contents are floated relative
to the region container and not their initial container, even when multiple regions
are involved." name="assert">
<link href="reference/floats-in-named-flow-012-ref.htm" rel="match">
<style>
article {
color: blue;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.float {
color: green;
float: left;
}
.break {
break-before: region;
}
.region {
flow-from: f;
margin: 10px;
width: 200px;
background: red;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see two identical rows of colored squares. Each row should have three
squares, from left to right as follows: blue, gray, green. The squares in a row should
be flush to each other, but the two rows should have some space between them.<br>
Test fails is you see any red.
</p>
<article>
<div class="flow">
<div class="float">
<div>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
<div class="break">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</div>
<div>
xxxxx xxxxx xxxxx xxxxx xxxxx
</div>
<div class="break">
xxxxx xxxxx xxxxx xxxxx xxxxx
</div>
</div>
</article>
<div class="region">
<p>&nbsp;</p>
</div>
<div class="region">
<p>&nbsp;</p>
</div>
</body></html>

View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: margins around forced breaks when break is around float</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-break/#break-margins" rel="help">
<link href="http://www.w3.org/TR/css3-break/#parallel-flows" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that margins are correctly preserved when content
has floats and is fragmented via forced breaks." name="assert">
<link href="reference/floats-in-named-flow-029-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.break {
break-before: region;
}
.spaced {
margin: 1em 2em 3em 5em;
color: green;
}
.float {
float: left;
color: blue;
}
.bordered {
border: 10px solid black;
}
.region {
flow-from: f;
float: left;
margin-left: 10px;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
the issue on www-style/css3-break -->
Test passes if you see two colored squares each inside a black-bordered rectangle:
</p><ul>
<li>The black-bordered rectangles should be separated by a small horizontal space</li>
<li>The colored squares should be positioned roughly in the top-left area of their
rectangles, but without being flush to any of its sides</li>
</ul><br>
You should see no red.
<p></p>
<div class="bordered region">
<p>&nbsp;</p>
</div><div class="bordered region">
<p>&nbsp;</p>
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<article class="flow">
<div class="spaced float">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
<div class="break spaced">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</body></html>

View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: margins around unforced breaks when break is around float</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-break/#break-margins" rel="help">
<link href="http://www.w3.org/TR/css3-break/#parallel-flows" rel="help">
<meta content="ahem" name="flags">
<meta content="Test checks that margins are correctly preserved when content
has floats and is fragmented via unforced breaks." name="assert">
<link href="reference/floats-in-named-flow-030-ref.htm" rel="match">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.spaced {
margin: 1em 2em 3em 5em;
color: green;
}
.float {
float: left;
color: blue;
}
.bordered {
border: 10px solid black;
}
.region {
flow-from: f;
/* float: left; is used to trigger shrink-to-fit sizing */
float: left;
margin-left: 10px;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
the issue on www-style/css3-break -->
Test passes if you see two colored squares each inside a black-bordered rectangle:
</p><ul>
<li>The black-bordered rectangles should be separated by a small vertical space</li>
<li>The green square should have its top edge flush with the top border of its
containing rectangle</li>
</ul>
You should see no red.
<p></p>
<div style="height: 125px;" class="bordered region">
<p>&nbsp;</p>
</div><div class="bordered region">
<p>&nbsp;</p>
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<article class="flow">
<div class="spaced float">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
<div class="spaced">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</body></html>

View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html><head>
<title>CSS Regions: flowing content that has position: relative</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
<!-- Section points to section in the ED. Eventually this should be kept in the WD, too. -->
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
<meta content="Test checks that fragments of content flowed in regions are positioned independently, after the fragmentation occurs." name="assert">
<meta content="ahem" name="flags">
<link href="reference/position-relative-001-ref.htm" rel="match">
<style>
.flow {
flow-into: f;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
position: relative;
top: 20px;
left: -20px;
}
.container {
display: inline-block;
}
.region {
flow-from: f;
margin: 0 0 0 20px;
}
.region p {
background-color: red;
height: 50%;
}
.big {
width: 100px;
height: 100px;
}
.small {
width: 60px;
height: 60px;
}
.marker {
background: red;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<p>Test passes if you see two green squares (one bigger and one smaller) and no red.</p>
<div class="flow">
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
xxx
xxx
xxx
</div>
<div class="container">
<div class="big region">
<p>&nbsp;</p>
</div>
<div class="marker"></div>
</div>
<div class="container">
<div class="small region">
<p>&nbsp;</p>
</div>
<div class="marker"></div>
</div>
</body></html>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
}
.float {
float: left;
color: blue;
}
.bordered {
border: 10px solid black;
}
.region {
overflow: hidden;
max-width: 100px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>
Test passes if you see two squares separated by a small vertical space. The squares should
have a black outline, the top square should be blue and the bottom one should be green.<br>
You should see no red.
</p>
<div class="bordered region">
<article>
<div class="float">
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
</div>
</article>
</div>
<div class="bordered region">
<article>
<div>
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
</div>
</article>
</div>
</body></html>

View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<style>
article {
color: blue;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.float {
color: green;
float: left;
}
.region {
margin: 10px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see two identical rows of colored squares. Each row should have three
squares, from left to right as follows: blue, gray, green. The squares in a row should
be flush to each other, but the two rows should have some space between them.<br>
Test fails is you see any red.
</p>
<div class="region">
<article>
<div class="flow">
<div class="float">
<div>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</div>
<div>
xxxxx xxxxx xxxxx xxxxx xxxxx
</div>
</div>
</article>
</div>
<div class="region">
<article>
<div class="flow">
<div class="float">
<div>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</div>
<div>
xxxxx xxxxx xxxxx xxxxx xxxxx
</div>
</div>
</article>
</div>
</body></html>

View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.spaced {
margin: 1em 2em 3em 5em;
color: green;
}
.float {
float: left;
color: blue;
}
.bordered {
border: 10px solid black;
}
.region {
display: inline-block;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<p>
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
the issue on www-style/css3-break -->
Test passes if you see two colored squares each inside a black-bordered rectangle:
</p><ul>
<li>The black-bordered rectangles should be separated by a small horizontal space</li>
<li>The colored squares should be positioned roughly in the top-left area of their
rectangles, but without being flush to any of its sides</li>
</ul><br>
You should see no red.
<p></p>
<div class="bordered region">
<article>
<div class="spaced float">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</div><div class="bordered region">
<article>
<div class="break spaced">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</div>
</body></html>

View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.spaced {
margin: 0 2em 3em 5em;
color: green;
}
.float {
margin-top: 1em;
float: left;
color: blue;
}
.bordered {
border: 10px solid black;
}
.region {
/* float: left; is used to trigger shrink-to-fit sizing */
float: left;;
margin-left: 10px;
}
</style>
</head>
<body>
<p>
<!-- TODO Determine what the outcome should be - currently expecting a resolution on
the issue on www-style/css3-break -->
Test passes if you see two colored squares each inside a black-bordered rectangle:
</p><ul>
<li>The black-bordered rectangles should be separated by a small vertical space</li>
<li>The green square should have its top edge flush with the top border of its
containing rectangle</li>
</ul>
You should see no red.
<p></p>
<div style="height: 125px;" class="bordered region">
<article>
<div class="spaced float">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</div><div class="bordered region">
<article>
<div class="spaced">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</div>
</body></html>

View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan">
<style>
.flow {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
position: relative;
top: 20px;
left: -20px;
}
.container {
display: inline-block;
}
.region {
margin: 0 0 0 20px;
}
.big {
width: 100px;
height: 100px;
}
.small {
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<p>Test passes if you see two green squares (one bigger and one smaller) and no red.</p>
<div class="container">
<div class="big region">
<div class="flow">
xxxxx
xxxxx
xxxxx
xxxxx
xxxxx
</div>
</div>
</div>
<div class="container">
<div class="small region">
<div class="flow">
xxx
xxx
xxx
</div>
</div>
</div>
</body></html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<style type="text/css">
.square {
float: left;
font-family: Ahem;
font-size: 10px;
line-height: 20px;
margin-left: 10px;
color: green;
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The test passes if:</p>
<ul>
<li>The two squares each contain five green horizontal stripes</li>
<li>There are two green horizontal stripes below the square on right</li>
<li>There is no red</li>
</ul>
<div class="square">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
<div class="square">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
</body></html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<style type="text/css">
.green-rect {
width: 100px;
height: 200px;
margin-left: 10px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if you see either two green squares or one vertical green rectangle. There should be no red.</p>
<div class="green-rect"></div>
</body></html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<style type="text/css">
.green-square {
width: 100px;
height: 100px;
margin-left: 10px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if you see either two green squares or one vertical green rectangle. There should be no red.</p>
<div class="green-square"></div>
<div class="green-square"></div>
</body></html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html><head>
<title>CSS Reftest Reference</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<style type="text/css">
.green-square {
width: 100px;
height: 100px;
margin-left: 10px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if you see two green squares and no red.</p>
<div class="green-square"></div>
<div class="green-square"></div>
</body></html>

View file

@ -0,0 +1,121 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Fragmentation Module Level 3 CR Test Suite Reftest Index</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Fragmentation Module Level 3 CR Test Suite Reftest Index</h1>
<table width="100%">
<col id="test-column">
<col id="ref-column">
<col id="flags-column">
<thead>
<tr>
<th>Test</th>
<th>Reference</th>
<th>Flags</th>
</tr>
</thead>
<tbody id="floats-clear-breaks-002" class="ahem">
<tr>
<td rowspan="1" title="CSS Regions: forced region breaks and clear on floats inside named flow contents">
<a href="floats-clear-breaks-002.htm">floats-clear-breaks-002</a></td>
<td><a href="reference/floats-clear-breaks-002-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="floats-in-named-flow-012" class="ahem">
<tr>
<td rowspan="1" title="floats with forced region breaks inside them">
<a href="floats-in-named-flow-012.htm">floats-in-named-flow-012</a></td>
<td><a href="reference/floats-in-named-flow-012-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="floats-in-named-flow-029" class="ahem">
<tr>
<td rowspan="1" title="CSS Regions: margins around forced breaks when break is around float">
<a href="floats-in-named-flow-029.htm">floats-in-named-flow-029</a></td>
<td><a href="reference/floats-in-named-flow-029-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="floats-in-named-flow-030" class="ahem">
<tr>
<td rowspan="1" title="CSS Regions: margins around unforced breaks when break is around float">
<a href="floats-in-named-flow-030.htm">floats-in-named-flow-030</a></td>
<td><a href="reference/floats-in-named-flow-030-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="position-relative-001" class="ahem">
<tr>
<td rowspan="1" title="CSS Regions: flowing content that has position: relative">
<a href="position-relative-001.htm">position-relative-001</a></td>
<td><a href="reference/position-relative-001-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="regions-transforms-008" class="ahem">
<tr>
<td rowspan="1" title="CSS Regions: Transformed named flow (text) content that breaks across multiple regions and overflows">
<a href="regions-transforms-008.htm">regions-transforms-008</a></td>
<td><a href="reference/regions-transforms-008-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="regions-transforms-009" class="ahem">
<tr>
<td rowspan="1" title="CSS Regions: Transformed region with named flow (text) content that breaks across multiple regions and overflows">
<a href="regions-transforms-009.htm">regions-transforms-009</a></td>
<td><a href="reference/regions-transforms-008-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
<tbody id="regions-transforms-013" class="">
<tr>
<td rowspan="2" title="CSS Regions: Transformed named flow (monolithic) content that breaks across multiple regions">
<a href="regions-transforms-013.htm">regions-transforms-013</a></td>
<td><a href="reference/regions-transforms-013-alt-ref.htm">=</a> </td>
<td rowspan="2"></td>
</tr>
<tr>
<td><a href="reference/regions-transforms-013-alt-ref.htm">=</a></td>
</tr>
</tbody>
<tbody id="regions-transforms-020" class="">
<tr>
<td rowspan="1" title="CSS Regions: Transformed region with named flow (fragmentable) content that breaks across multiple regions">
<a href="regions-transforms-020.htm">regions-transforms-020</a></td>
<td><a href="reference/regions-transforms-020-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="regions-transforms-021" class="">
<tr>
<td rowspan="1" title="CSS Regions: Transforms on multiple named flow (non-text) content nodes that break across multiple regions">
<a href="regions-transforms-021.htm">regions-transforms-021</a></td>
<td><a href="reference/regions-transforms-020-ref.htm">=</a> </td>
<td rowspan="1"></td>
</tr>
</tbody>
<tbody id="regions-transforms-022" class="ahem">
<tr>
<td rowspan="1" title="CSS Regions: Transforms on multiple named flow (text) content nodes that break across multiple regions">
<a href="regions-transforms-022.htm">regions-transforms-022</a></td>
<td><a href="reference/regions-transforms-020-ref.htm">=</a> </td>
<td rowspan="1"><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
</tr>
</tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,13 @@
floats-clear-breaks-002.htm == reference/floats-clear-breaks-002-ref.htm
floats-in-named-flow-012.htm == reference/floats-in-named-flow-012-ref.htm
floats-in-named-flow-029.htm == reference/floats-in-named-flow-029-ref.htm
floats-in-named-flow-030.htm == reference/floats-in-named-flow-030-ref.htm
position-relative-001.htm == reference/position-relative-001-ref.htm
regions-transforms-008.htm == reference/regions-transforms-008-ref.htm
regions-transforms-009.htm == reference/regions-transforms-008-ref.htm
regions-transforms-013.htm == reference/regions-transforms-013-alt-ref.htm
regions-transforms-013.htm == reference/regions-transforms-013-ref.htm
regions-transforms-020.htm == reference/regions-transforms-020-ref.htm
regions-transforms-021.htm == reference/regions-transforms-020-ref.htm
regions-transforms-022.htm == reference/regions-transforms-020-ref.htm

View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>CSS Regions: Transformed named flow (text) content that breaks across multiple regions and overflows</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<link href="mailto:mibalan@adobe.com" rel="reviewer author" title="Mihai Balan"> <!-- 2013-07-24 -->
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
<link href="reference/regions-transforms-008-ref.htm" rel="match">
<meta content="ahem" name="flags">
<meta content="This test checks that named flow text content is transformed when it breaks across
multiple regions and that the overflow remains visible." name="assert">
<style>
.ahem {
font-family: Ahem;
font-size: 10px;
line-height: 20px;
}
#named-flow {
color: green;
margin-left: -50px;
transform: translateX(50px);
flow-into: f;
}
.region {
width: 100px;
height: 100px;
margin-left: 10px;
float: left;
border: 1px solid black;
flow-from: f;
}
.failure {
position: absolute;
width: 102px;
height: 102px;
margin-top: 1px;
margin-left: 10px;
padding-left: 1px;
color: red;
z-index: -1;
}
.left {
left: 8px;
}
.right {
left: 120px;
}
</style>
</head>
<body>
<p>The test passes if:</p>
<ul>
<li>The two squares each contain five green horizontal stripes</li>
<li>There are two green horizontal stripes below the square on right</li>
<li>There is no red</li>
</ul>
<div class="ahem" id="named-flow">XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX</div>
<div class="region"></div>
<div class="region"></div>
<div class="ahem failure left">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
<div class="ahem failure right">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
</body></html>

View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>CSS Regions: Transformed region with named flow (text) content that breaks across multiple regions and overflows</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
<link href="reference/regions-transforms-008-ref.htm" rel="match">
<meta content="ahem" name="flags">
<meta content="This test checks that the regions are transformed when named flow text content breaks
across multiple regions and that the overflow remains visible." name="assert">
<style>
.ahem {
font-family: Ahem;
font-size: 10px;
line-height: 20px;
}
#named-flow {
color: green;
flow-into: f;
}
.region {
width: 100px;
height: 100px;
float: left;
margin-left: 10px;
border: 1px solid black;
flow-from: f;
transform: translateX(50px);
}
.failure-left,
.failure-right {
position: absolute;
width: 102px;
height: 102px;
margin-top: 1px;
margin-left: 10px;
padding-left: 1px;
color: red;
z-index: -1;
}
.left {
margin-left: -40px;
}
.failure-left {
left: 8px;
}
.failure-right {
left: 120px;
}
</style>
</head>
<body>
<p>The test passes if:</p>
<ul>
<li>The two squares each contain five green horizontal stripes</li>
<li>There are two green horizontal stripes below the square on right</li>
<li>There is no red</li>
</ul>
<div class="ahem" id="named-flow">XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX</div>
<div class="region left"></div>
<div class="region"></div>
<div class="ahem failure-left">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
<div class="ahem failure-right">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
</body></html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>CSS Regions: Transformed named flow (monolithic) content that breaks across multiple regions</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
<link href="http://www.w3.org/TR/css3-break/#breaking-rules" rel="help">
<link href="http://www.w3.org/TR/css3-break/#monolithic" rel="help">
<!-- This reference is for UAs that slice monolithic content -->
<link href="reference/regions-transforms-013-ref.htm" rel="match">
<!-- This reference is for UAs that overflow monolithic content -->
<link href="reference/regions-transforms-013-alt-ref.htm" rel="match">
<meta content="This test checks that the named flow content that is monolithic is transformed when it
breaks across multiple regions whether it is sliced or overflowed at the fragmentainer edge." name="assert">
<style>
#named-flow {
width: 100px;
height: 100px;
background-color: green;
transform: scaleY(2);
transform-origin: top left;
flow-into: f;
}
.region {
width: 100px;
height: 100px;
margin-left: 10px;
float: left;
flow-from: f;
}
#region1 {
background-color: red;
}
</style>
</head>
<body>
<p>The test passes if you see either two green squares or one vertical green rectangle. There should be no red.</p>
<div id="named-flow"></div>
<div class="region" id="region1"></div>
<div class="region"></div>
</body></html>

View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>CSS Regions: Transformed region with named flow (fragmentable) content that breaks across multiple regions</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
<link href="http://www.w3.org/TR/css3-break/#breaking-rules" rel="help">
<link href="reference/regions-transforms-020-ref.htm" rel="match">
<meta content="This test checks that the named flow content that is fragmentable (has a break point)
is transformed when it breaks across multiple regions." name="assert">
<style>
#named-flow {
width: 100px;
height: 100px;
flow-into: f;
}
.src-child {
height: 50px;
background-color: green;
}
.region {
width: 100px;
height: 50px;
margin-left: 10px;
float: left;
background-color: red;
flow-from: f;
transform: scaleY(2);
transform-origin: top left;
}
.failure-div {
position: absolute;
margin-left: 10px;
background-color: red;
width: 98px;
height: 98px;
}
.right {
left: 119px;
}
</style>
</head>
<body>
<p>The test passes if you see two green squares and no red.</p>
<div class="failure-div"></div>
<div class="failure-div right"></div>
<div id="named-flow">
<div class="src-child"></div>
<div class="src-child"></div>
</div>
<div class="region"></div>
<div class="region"></div>
</body></html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>CSS Regions: Transforms on multiple named flow (non-text) content nodes that break across multiple regions</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
<link href="reference/regions-transforms-020-ref.htm" rel="match">
<meta content="This test checks that separate transforms can be applied to each named flow content
node that breaks across multiple regions and that each fragment has its own transform origin." name="assert">
<style>
.named-flow {
float: left;
background-color: green;
flow-into: f;
}
#named-flow-1 {
margin-top: 25px;
margin-left: 25px;
width: 50px;
height: 50px;
transform: scale(2);
transform-origin: center center;
}
#named-flow-2 {
width: 100px;
height: 50px;
margin-top: 25px;
transform-origin: top left;
transform: scaleY(2);
}
.region {
width: 100px;
height: 100px;
margin-left: 10px;
float: left;
background-color: red;
flow-from: f;
}
</style>
</head>
<body>
<p>The test passes if you see two green squares and no red.</p>
<div id="named-flow-1" class="named-flow"></div>
<div id="named-flow-2" class="named-flow"></div>
<div class="region"></div>
<div class="region"></div>
</body></html>

View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>CSS Regions: Transforms on multiple named flow (text) content nodes that break across multiple regions</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala">
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan"> <!-- 2013-07-24 -->
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
<link href="reference/regions-transforms-020-ref.htm" rel="match">
<meta content="ahem" name="flags">
<meta content="This test checks that separate transforms can be applied to each named flow content
text node that breaks across multiple regions" name="assert">
<style>
.ahem {
font-family: Ahem;
font-size: 10px;
line-height: 20px;
}
.named-flow {
width: 100px;
color: green;
flow-into: f;
}
#named-flow-1 {
margin-left: -50px;
transform: translateX(50px);
}
#named-flow-2 {
transform: rotate(90deg);
}
.region {
width: 100px;
height: 100px;
margin-left: 10px;
float: left;
flow-from: f;
}
.failure {
width: 100px;
height: 100px;
position: absolute;
float: left;
margin-left: 10px;
background-color: green;
z-index: -1;
}
.left {
color: red;
}
.right {
left: 118px;
}
.vertical-bar {
width: 10px;
height: 100px;
float: left;
background-color: red;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<p>The test passes if you see two green squares and no red.</p>
<div id="named-flow-1" class="ahem named-flow">XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX</div>
<div id="named-flow-2" class="ahem named-flow">XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX</div>
<div class="region"></div>
<div class="region"></div>
<div class="ahem failure left">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
<div class="ahem failure right">
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
<div class="vertical-bar"></div>
</div>
</body></html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Fragmentation Module Level 3 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Fragmentation Module Level 3 CR Test Suite By Chapter</h1>
<p>This index contains both
<a href="http://wiki.csswg.org/test/selftest">self-describing tests</a>
and reftests.
A separate <a href="reftest-toc.htm">alphabetical reftest index</a>
is provided for tests in <a href="http://wiki.csswg.org/test/reftest">reftest
format</a> along with the <a href="reftest.list">reftest manifest</a>.</p>
<table>
<tbody id="s1">
<tr><th><a href="chapter-1.htm">Chapter 1 -
Introduction</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s2">
<tr><th><a href="chapter-2.htm">Chapter 2 -
Fragmentation Model and Terminology</a></th>
<td>(4 Tests)</td></tr>
</tbody>
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Controlling Breaks</a></th>
<td>(0 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
Rules for Breaking</a></th>
<td>(2 Tests)</td></tr>
</tbody>
<tbody id="s5">
<tr><th><a href="chapter-5.htm">Chapter 5 -
Box Model for Breaking</a></th>
<td>(9 Tests)</td></tr>
</tbody>
<tbody id="s6">
<tr><th><a href="chapter-6.htm">Chapter 6 -
Conformance</a></th>
<td>(0 Tests)</td></tr>
</tbody>
</table>
</body>
</html>