servo/tests/wpt/css-tests/css-regions-1_dev/xhtml1print/chapter-7.xht

391 lines
No EOL
21 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Regions visual formatting details - CSS Regions Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Regions Module Level 1 CR Test Suite</h1>
<h2>Regions visual formatting details (23 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s7">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7">+</a>
<a href="https://www.w3.org/TR/css3-regions/#regions-visual-formatting-details">7 Regions visual formatting details</a></th></tr>
<!-- 7 tests -->
<tr id="floated-regions-001-7" class="">
<td>
<a href="floated-regions-001.xht">floated-regions-001</a></td>
<td><a href="reference/floated-regions-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: multiple auto-sized floated regions
<ul class="assert">
<li>Test checks that multiple regions that are auto-sized and floated are sized according to the auto-size algorithm but also respect the floats sizing model. They should also be properly floated relative to their corresponding block formatting context.</li>
</ul>
</td>
</tr>
<tr id="floated-regions-004-7" class="">
<td>
<a href="floated-regions-004.xht">floated-regions-004</a></td>
<td><a href="reference/floated-regions-004-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: named flow contains a nested floated region
<ul class="assert">
<li>Test checks that a named flow that contains a nested floated auto-sized region is formatted according to the visual formatting model.</li>
</ul>
</td>
</tr>
<tr id="floated-regions-005-7" class="">
<td>
<a href="floated-regions-005.xht">floated-regions-005</a></td>
<td><a href="reference/floated-regions-005-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: floated and normal flow auto-sized regions
<ul class="assert">
<li>Test checks that layout is correct when mixing floated and normal flow auto-sized regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-004-7" class="">
<td>
<a href="floats-in-named-flow-004.xht">floats-in-named-flow-004</a></td>
<td><a href="reference/floats-in-named-flow-004-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: separate floats flowed in autosized region
<ul class="assert">
<li>Test checks that floats added to a named flow from different containers are stacked relative to the region container (not their initial container) and the region is correctly sized.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-005-7" class="ahem dom http">
<td>
<a href="regions-resizing-005.xht">regions-resizing-005</a></td>
<td><a href="reference/regions-resizing-005-ref.xht">=</a> </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="http" title="Requires HTTP headers">HTTP</abbr></td>
<td>CSS Regions: resizing floated region with percentage size relative to the body
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size relative to the body and is floated, correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-009-7" class="ahem dom http">
<td>
<a href="regions-resizing-009.xht">regions-resizing-009</a></td>
<td><a href="reference/regions-resizing-001-ref.xht">=</a> </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="http" title="Requires HTTP headers">HTTP</abbr></td>
<td>CSS Regions: resizing autosized region when content flowed in it is sized with viewport units
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing an autosized region when the content flowed in it is sized with viewport units correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-012-7" class="ahem dom http">
<td>
<a href="regions-resizing-012.xht">regions-resizing-012</a></td>
<td><a href="reference/regions-resizing-011-ref.xht">=</a> </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="http" title="Requires HTTP headers">HTTP</abbr></td>
<td>CSS Regions: resizing percent sized region and auto-sized region
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing two regions and a single named flow where one region has percentage size and the other is auto-sized correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.1">+</a>
<a href="https://www.w3.org/TR/css3-regions/#processing-model">7.1 Processing model</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2">+</a>
<a href="https://www.w3.org/TR/css3-regions/#regions-flow-content-box">7.2 The Region Flow Content Box (RFCB)</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#region-flow-content-box">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.#rfcb">
<!-- 0 tests -->
</tbody>
<tbody id="s7.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.2.1">+</a>
<a href="https://www.w3.org/TR/css3-regions/#rfcb-width-resolution">7.2.1 RFCB width resolution</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3">+</a>
<a href="https://www.w3.org/TR/css3-regions/#regions-visual-formatting-steps">7.3 Regions visual formatting steps</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.#flow-fragment-height">
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1">+</a>
<a href="https://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">7.3.1 Step 1: RFCB flow fragment height resolution</a></th></tr>
<!-- 16 tests -->
<tr id="autoheight-flexbox-001-7.3.1" class="">
<td>
<a href="autoheight-flexbox-001.xht">autoheight-flexbox-001</a></td>
<td><a href="reference/autoheight-flexbox-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: fixed height flexbox inside auto height region
<ul class="assert">
<li>Test that flowing a flex container inside a region with auto-height will enlarge the region to fit the content.</li>
</ul>
</td>
</tr>
<tr id="autoheight-flexbox-002-7.3.1" class="ahem">
<td>
<a href="autoheight-flexbox-002.xht">autoheight-flexbox-002</a></td>
<td><a href="reference/regions-flexbox-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: flowing auto-height flexbox elements in region
<ul class="assert">
<li>Test that a flex container with auto height is flowed correctly inside a region with auto height. The region should fit the flexbox.</li>
</ul>
</td>
</tr>
<tr id="autoheight-flexbox-003-7.3.1" class="ahem">
<td>
<a href="autoheight-flexbox-003.xht">autoheight-flexbox-003</a></td>
<td><a href="reference/autoheight-flexbox-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto height region inside a fixed sized flexbox
<ul class="assert">
<li>Test that an auto-height region inside a flexbox is stretched to match the flexbox container's cross size.</li>
</ul>
</td>
</tr>
<tr id="autoheight-flexbox-004-7.3.1" class="ahem">
<td>
<a href="autoheight-flexbox-004.xht">autoheight-flexbox-004</a></td>
<td><a href="reference/autoheight-flexbox-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto height region inside an auto height flexbox
<ul class="assert">
<li>Test that an auto height region inside a flex container with auto height is displayed properly. The flexbox should have the same height as the region.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-autoheight-flexbox-001-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-autoheight-flexbox-001.xht">autoheight-regions-in-autoheight-flexbox-001</a></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions in auto-height flex container
<ul class="assert">
<li>Test that auto-height regions placed in a flex container with auto-height and row wrap reverse flow are sized correctly. The content from the second flow should flow through the region on the second row and into the region from the first row, making the left blue rectangle taller than the green rectangle on the right.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-autoheight-flexbox-002-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-autoheight-flexbox-002.xht">autoheight-regions-in-autoheight-flexbox-002</a></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions with vertical writing mode in auto-height flexbox
<ul class="assert">
<li>Test checks that auto-height regions having content with vertical writing mode are sized correctly when placed inside a flex container. The flowed content should be displayed as a horizontal green stripe.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-autoheight-flexbox-003-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-autoheight-flexbox-003.xht">autoheight-regions-in-autoheight-flexbox-003</a></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto-height regions in auto-height flexbox with flex basis
<ul class="assert">
<li>Test checks that the computed height of auto-height regions placed in a flex container takes into the account the flex basis property. The space available inside the flex container should be distributed according to the flex basis property. In this particular case, each of the three regions must have a height equal to one third of the flex container's height.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-autoheight-flexbox-004-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-autoheight-flexbox-004.xht">autoheight-regions-in-autoheight-flexbox-004</a></td>
<td><a href="reference/autoheight-regions-in-autoheight-flexbox-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: nested regions in flexbox
<ul class="assert">
<li>Test checks that nested regions placed in flex containers are laid out properly. The first flow (blue content) is nested inside the second flow (green content). The user should see three horizontal stripes with the following colors: green, blue, green.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-001-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-001.xht">autoheight-regions-in-fixed-sized-flexbox-001</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions inside fixed sized flexbox
<ul class="assert">
<li>Test checks that auto-height regions respect the flex grow property when placed inside a fixed sized flexbox with a single row.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-002-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-002.xht">autoheight-regions-in-fixed-sized-flexbox-002</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions inside fixed sized flexbox with column flow
<ul class="assert">
<li>Test checks that auto-height regions placed inside a fixed sized flexbox with column flow have the correct computed height. There are two regions placed inside the same flex container having the same 'grow' value. The space should be distributed evenly between the two.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-003-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-003.xht">autoheight-regions-in-fixed-sized-flexbox-003</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height regions inside a fixed sized flexbox with column wrap flow
<ul class="assert">
<li>Test checks the layout of auto-height regions placed inside a flexbox with a fixed size and column wrap flow. The flex container should have two columns with three regions each.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-004-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-004.xht">autoheight-regions-in-fixed-sized-flexbox-004</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Auto-height region in fixed sized flexbox using flex basis
<ul class="assert">
<li>Test checks the layout of regions placed inside a fixed sized flexbox using flex basis and column flow. The flex container should force the first region to break by constraining its height.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-005-7.3.1" class="">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-005.xht">autoheight-regions-in-fixed-sized-flexbox-005</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Auto-height regions in fixed sized flexboxes with align-items and justify-content
<ul class="assert">
<li>Test checks auto-height regions' layout when placed inside a flexbox with using align-items and justify-content properties. The flowed content should be fragmented between the three regions and the flex container should distribute the remaining horizontal space evenly around the regions.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-006-7.3.1" class="">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-006.xht">autoheight-regions-in-fixed-sized-flexbox-006</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: auto-height regions inside a flex container with fixed size
<ul class="assert">
<li>Test that the flex container stretches a region flex item with a height smaller than the flex container's inner cross size.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-007-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-007.xht">autoheight-regions-in-fixed-sized-flexbox-007</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto-height regions inside fixed sized flexbox
<ul class="assert">
<li>Test that using the flex-basis property sizes the flex items to a percentage of the flex container's height when said items are auto-height regions. The last region, the outside the flex container should not be visible.</li>
</ul>
</td>
</tr>
<tr id="autoheight-regions-in-fixed-sized-flexbox-008-7.3.1" class="ahem">
<td>
<a href="autoheight-regions-in-fixed-sized-flexbox-008.xht">autoheight-regions-in-fixed-sized-flexbox-008</a></td>
<td><a href="reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: auto-height regions with max height in fixed sized flexbox
<ul class="assert">
<li>Test that the max-height property is applied to regions placed inside a fixed sized flexbox with a column flow. The flex container should not flex the region flex items beyond their max height value.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s7.3.1.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1.1">+</a>
<a href="https://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution-phase-1">7.3.1.1 RFCB flow fragment height resolution, Phase 1</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.1.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.1.2">+</a>
<a href="https://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution-phase-2">7.3.1.2 RFCB flow fragment height resolution, Phase 2</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.2">+</a>
<a href="https://www.w3.org/TR/css3-regions/#regions-boxes-layout">7.3.2 Step 2: region boxes layout</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.3.3">+</a>
<a href="https://www.w3.org/TR/css3-regions/#named-flows-layout">7.3.3 Step 3: named flows layout</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.4">+</a>
<a href="https://www.w3.org/TR/css3-regions/#regions-visual-formatting-implementation-note">7.4 Regions visual formatting: implementation note</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5">+</a>
<a href="https://www.w3.org/TR/css3-regions/#regions-visual-formatting-examples">7.5 Regions visual formatting example</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5.1">+</a>
<a href="https://www.w3.org/TR/css3-regions/#step1-phase1-example">7.5.1 Step 1 - Phase 1: Laying out RFCBs with used height of zero</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5.2">+</a>
<a href="https://www.w3.org/TR/css3-regions/#step1-phase2-example">7.5.2 Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5.3">+</a>
<a href="https://www.w3.org/TR/css3-regions/#step2-example">7.5.3 Step 2: Layout document and regions without named flows</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s7.5.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s7.5.4">+</a>
<a href="https://www.w3.org/TR/css3-regions/#step3-example">7.5.4 Step 3: named flows layout</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>