<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fragmenting Flex Layout - CSS Flexible Box Layout Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
<h2>Fragmenting Flex Layout (16 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s10">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#pagination">10 Fragmenting Flex Layout</a></th></tr>
<!-- 16 tests -->
<tr id="flexbox_interactive_break-after-column-item-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-after-column-item.xht">flexbox_interactive_break-after-column-item</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-after, column, item
</td>
</tr>
<tr id="flexbox_interactive_break-after-column-lastitem-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-after-column-lastitem.xht">flexbox_interactive_break-after-column-lastitem</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-after, column, item
</td>
</tr>
<tr id="flexbox_interactive_break-after-container-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-after-container.xht">flexbox_interactive_break-after-container</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-after, singleline, container
</td>
</tr>
<tr id="flexbox_interactive_break-after-item-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-after-item.xht">flexbox_interactive_break-after-item</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-after, singleline, item
</td>
</tr>
<tr id="flexbox_interactive_break-after-line-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-after-line.xht">flexbox_interactive_break-after-line</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-after, line
</td>
</tr>
<tr id="flexbox_interactive_break-after-line-order-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-after-line-order.xht">flexbox_interactive_break-after-line-order</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | order, break-after, multiline
</td>
</tr>
<tr id="flexbox_interactive_break-after-multiline-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-after-multiline.xht">flexbox_interactive_break-after-multiline</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-after, multiline
</td>
</tr>
<tr id="flexbox_interactive_break-before-column-firstitem-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-before-column-firstitem.xht">flexbox_interactive_break-before-column-firstitem</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-before, column, item
</td>
</tr>
<tr id="flexbox_interactive_break-before-column-item-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-before-column-item.xht">flexbox_interactive_break-before-column-item</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-before, column, item
</td>
</tr>
<tr id="flexbox_interactive_break-before-container-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-before-container.xht">flexbox_interactive_break-before-container</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-before, singleline, container
</td>
</tr>
<tr id="flexbox_interactive_break-before-item-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-before-item.xht">flexbox_interactive_break-before-item</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-before, singleline, item
</td>
</tr>
<tr id="flexbox_interactive_break-before-multiline-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-before-multiline.xht">flexbox_interactive_break-before-multiline</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | break-before, multiline
</td>
</tr>
<tr id="flexbox_interactive_break-natural-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_break-natural.xht">flexbox_interactive_break-natural</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | natural breaks
</td>
</tr>
<tr id="flexbox_interactive_paged-overflow-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_paged-overflow.xht">flexbox_interactive_paged-overflow</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | @page and paged overflow
</td>
</tr>
<tr id="flexbox_interactive_paged-overflow-2-10" class="primary interact paged">
<td><strong>
<a href="flexbox_interactive_paged-overflow-2.xht">flexbox_interactive_paged-overflow-2</a></strong></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="paged" title="Only valid for paged media">Paged</abbr></td>
<td>flexbox | paged overflow
</td>
</tr>
<tr id="row-flexbox-break-10" class="ahem">
<td>
<a href="row-flexbox-break.xht">row-flexbox-break</a></td>
<td><a href="reference/row-flexbox-break-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: row flex container fragmentation
<ul class="assert">
<li>Test checks that a flex container with row flow is split between regions.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s10.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10.1">+</a>
<a href="http://www.w3.org/TR/css-flexbox-1/#pagination-algo">10.1 Sample Flex Fragmentation Algorithm</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#acknowledgments">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css21">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-align">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-break">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-sizing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3-writing-modes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3ui">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-css3val">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-html40">
<!-- 0 tests -->
</tbody>
<tbody id="s.#biblio-rfc2119">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-atomic-painting">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-flex-basis-zero">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-flex-continuity">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-flex-line-bug">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-flex-line-floor">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-intrinsic-ratio">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-intrinsic-sizes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-main-depend-cross">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-min-width">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-percent-margins">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-static-pos">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-stretch-auto">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-stretch-definite">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-2012-unresolvable-basis">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-abspos-ordering">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-clamp-single-line">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-clarify">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-clarify-stretched">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-css21-staticpos">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-definite-flexing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-flex-animation">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-flex-basis-auto">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-max-intrinsic">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-min-auto-intrinsic-percentages">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-min-auto-main-size-basis">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-min-auto-not">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-min-auto-ratio">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-resolve-flex">
<!-- 0 tests -->
</tbody>
<tbody id="s.#change-201403-substantive">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes-2012">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes-2014-clarify">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes-2014-substantive">
<!-- 0 tests -->
</tbody>
<tbody id="s.#changes-201403">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-abspos-items">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-clamping">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-display-blockification">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-first-line-letter">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-flex-container-sizing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-float-display">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-line-breaking">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-overflow-flex-containers">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-painting-order">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-stretch-computed-auto">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-table-anon-boxes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#clarify-2012-white-space">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance-classes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conventions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#experimental">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#issues-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#overview-example">
<!-- 0 tests -->
</tbody>
<tbody id="s.#partial">
<!-- 0 tests -->
</tbody>
<tbody id="s.#property-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#quiet-pubrules-1">
<!-- 0 tests -->
</tbody>
<tbody id="s.#quiet-pubrules-2">
<!-- 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.#testing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#title">
<!-- 0 tests -->
</tbody>
<tbody id="s.#w3c_process_revision">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>