<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <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 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="s10"> <tr><th colspan="4" scope="rowgroup"> <a href="#s10">+</a> <a href="https://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="interact paged"> <td> <a href="flexbox_interactive_break-after-column-item.htm">flexbox_interactive_break-after-column-item</a></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="interact paged"> <td> <a href="flexbox_interactive_break-after-column-lastitem.htm">flexbox_interactive_break-after-column-lastitem</a></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="interact paged"> <td> <a href="flexbox_interactive_break-after-container.htm">flexbox_interactive_break-after-container</a></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="interact paged"> <td> <a href="flexbox_interactive_break-after-item.htm">flexbox_interactive_break-after-item</a></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="interact paged"> <td> <a href="flexbox_interactive_break-after-line.htm">flexbox_interactive_break-after-line</a></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="interact paged"> <td> <a href="flexbox_interactive_break-after-line-order.htm">flexbox_interactive_break-after-line-order</a></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="interact paged"> <td> <a href="flexbox_interactive_break-after-multiline.htm">flexbox_interactive_break-after-multiline</a></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="interact paged"> <td> <a href="flexbox_interactive_break-before-column-firstitem.htm">flexbox_interactive_break-before-column-firstitem</a></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="interact paged"> <td> <a href="flexbox_interactive_break-before-column-item.htm">flexbox_interactive_break-before-column-item</a></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="interact paged"> <td> <a href="flexbox_interactive_break-before-container.htm">flexbox_interactive_break-before-container</a></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="interact paged"> <td> <a href="flexbox_interactive_break-before-item.htm">flexbox_interactive_break-before-item</a></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="interact paged"> <td> <a href="flexbox_interactive_break-before-multiline.htm">flexbox_interactive_break-before-multiline</a></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="interact paged"> <td> <a href="flexbox_interactive_break-natural.htm">flexbox_interactive_break-natural</a></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="interact paged"> <td> <a href="flexbox_interactive_paged-overflow.htm">flexbox_interactive_paged-overflow</a></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="interact paged"> <td> <a href="flexbox_interactive_paged-overflow-2.htm">flexbox_interactive_paged-overflow-2</a></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.htm">row-flexbox-break</a></td> <td><a href="reference/row-flexbox-break-ref.htm">=</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.#ref-for-flex-container-61"> <!-- 0 tests --> </tbody> <tbody id="s10.#ref-for-flex-container-62"> <!-- 0 tests --> </tbody> <tbody id="s10.#ref-for-flex-item-112"> <!-- 0 tests --> </tbody> <tbody id="s10.#ref-for-multi-line-11"> <!-- 0 tests --> </tbody> <tbody id="s10.#ref-for-multi-line-12"> <!-- 0 tests --> </tbody> <tbody id="s10.1"> <tr><th colspan="4" scope="rowgroup"> <a href="#s10.1">+</a> <a href="https://www.w3.org/TR/css-flexbox-1/#pagination-algo">10.1 Sample Flex Fragmentation Algorithm</a></th></tr> <!-- 0 tests --> </tbody> <tbody id="s10.1.#example-bb213bd3"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-cross-size-22"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-multi-line-13"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-multi-line-14"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-multi-line-15"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-propdef-align-content-9"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-propdef-align-self-18"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-propdef-align-self-19"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-propdef-align-self-20"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-single-line-13"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-single-line-14"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-single-line-15"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-valdef-align-items-baseline-2"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-valdef-align-items-flex-start-3"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-valdef-align-items-flex-start-4"> <!-- 0 tests --> </tbody> <tbody id="s10.1.#ref-for-valdef-align-items-flex-start-5"> <!-- 0 tests --> </tbody> </table> </body> </html>