servo/tests/wpt/css-tests/css-regions-1_dev/xhtml1/chapter-3.xht

5751 lines
No EOL
336 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>Properties - 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>Properties (278 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="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="https://www.w3.org/TR/css3-regions/#properties">3 Properties</a></th></tr>
<!-- 37 tests -->
<tr id="extract-list-items-001-3" class="">
<td>
<a href="extract-list-items-001.xht">extract-list-items-001</a></td>
<td><a href="reference/extract-list-items-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered and unordered list items
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers and numbering.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-002-3" class="">
<td>
<a href="extract-list-items-002.xht">extract-list-items-002</a></td>
<td><a href="reference/extract-list-items-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered and unordered list items from multiple lists
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers and numbering, even when extracting items from multiple lists in the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-003-3" class="">
<td>
<a href="extract-list-items-003.xht">extract-list-items-003</a></td>
<td><a href="reference/extract-list-items-003-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered list items from multiple lists, including nested lists
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their numbering, even when extracting items from multiple and nested lists into the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-004-3" class="">
<td>
<a href="extract-list-items-004.xht">extract-list-items-004</a></td>
<td><a href="reference/extract-list-items-004-ref.xht">=</a> </td>
<td></td>
<td>flow-into on unordered list items, when items contain other unordered lists
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers, even when extracting items from multiple and nested lists into the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-005-3" class="">
<td>
<a href="extract-list-items-005.xht">extract-list-items-005</a></td>
<td><a href="reference/extract-list-items-005-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from multiple lists, when items contain other lists
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers or numbering (type, value), even when extracting items from multiple and nested lists into the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-006-3" class="">
<td>
<a href="extract-list-items-006.xht">extract-list-items-006</a></td>
<td><a href="reference/extract-list-items-006-ref.xht">=</a> </td>
<td></td>
<td>flow-into on all list items from a nested list
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers or numbering (type, value), even when extracting items from multiple and nested lists into the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-007-3" class="">
<td>
<a href="extract-list-items-007.xht">extract-list-items-007</a></td>
<td><a href="reference/extract-list-items-007-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from multiple lists that have the &quot;reversed&quot; or &quot;start&quot; HTML attributes set
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their numbering, even when extracting items from multiple and nested lists into the same named flow. The numbering should also honor the HTML 'reversed' and 'start' attribute.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-008-3" class="">
<td>
<a href="extract-list-items-008.xht">extract-list-items-008</a></td>
<td><a href="reference/extract-list-items-008-ref.xht">=</a> </td>
<td></td>
<td>flow-into only on specific list items from multiple lists
<ul class="assert">
<li>Test checks that extracting only certain list items from a list into a named flow preseves their numbering and markings both in the region and outside the region.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-009-3" class="">
<td>
<a href="extract-list-items-009.xht">extract-list-items-009</a></td>
<td><a href="reference/extract-list-items-009-ref.xht">=</a> </td>
<td></td>
<td>flow-into only on specific list items from multiple lists + list item formatting via :nth-child, :nth-of-type
<ul class="assert">
<li>Test checks that extracting only certain list items from a list into a named flow does not affect styling via pseudo-classes such as :first-child or :nth-child</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-010-3" class="">
<td>
<a href="extract-list-items-010.xht">extract-list-items-010</a></td>
<td><a href="reference/extract-list-items-009-ref.xht">=</a> </td>
<td></td>
<td>applying flow-into and other formatting on specific list items via :nth-child, :nth-of-type pseudo-classes
<ul class="assert">
<li>Test checks that pseudo-classes like :first-child or :nth-of-type can be used both for styling and extracting only certain list items from a list into a named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-011-3" class="">
<td>
<a href="extract-list-items-011.xht">extract-list-items-011</a></td>
<td><a href="reference/extract-list-items-009-ref.xht">=</a> </td>
<td></td>
<td>applying flow-into and other formatting on specific list items via different pseudo-classes
<ul class="assert">
<li>Test checks that pseudo-classes like :first-child or :nth-of-type can be used both for styling and extracting only certain list items from a list into a named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-012-3" class="">
<td>
<a href="extract-list-items-012.xht">extract-list-items-012</a></td>
<td><a href="reference/extract-list-items-012-ref.xht">=</a> </td>
<td></td>
<td>flow-into on individual list items preserves other list styling properties (list-style-*)
<ul class="assert">
<li>Test checks that list styling properties are honored even for list items extracted in named flows and rendered in regions.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-013-3" class="">
<td>
<a href="extract-list-items-013.xht">extract-list-items-013</a></td>
<td><a href="reference/extract-list-items-009-ref.xht">=</a> </td>
<td></td>
<td>flow-into on individual list items preserves other list styling properties (list-style-*) even when CSS styling contradicts default CSS styling for those HTML elements
<ul class="assert">
<li>Test checks that list styling properties are honored even for list items extracted in named flows when the CSS-specified list type is in opposition with the list type from the markup (ol/ul).</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-014-3" class="">
<td>
<a href="extract-list-items-014.xht">extract-list-items-014</a></td>
<td><a href="reference/extract-list-items-014-ref.xht">=</a> </td>
<td></td>
<td>flow-into with different flows on list items from the same list
<ul class="assert">
<li>Test flow-into property can be applied to individual list items. This test checks that list items from the same list extracted in different named flows preserve their numbering.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-015-3" class="">
<td>
<a href="extract-list-items-015.xht">extract-list-items-015</a></td>
<td><a href="reference/extract-list-items-015-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items that have the &quot;value&quot; HTML attribute set
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their correct numbering when some of the items have the value attribute set but others don't.</li>
</ul>
</td>
</tr>
<tr id="extract-numbered-paragraphs-3" class="">
<td>
<a href="extract-numbered-paragraphs.xht">extract-numbered-paragraphs</a></td>
<td><a href="reference/extract-numbered-paragraphs-ref.xht">=</a> </td>
<td></td>
<td>flow-into on p's that use a CSS counter as content in ::before
<ul class="assert">
<li>Test checks that extracting paragraphs with content that use counters behaves as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-numbered-paragraphs-divs-001-3" class="">
<td>
<a href="extract-numbered-paragraphs-divs-001.xht">extract-numbered-paragraphs-divs-001</a></td>
<td><a href="reference/extract-numbered-paragraphs-divs-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into on p's and div's that use a single CSS counter as content in ::before
<ul class="assert">
<li>Test checks that extracting paragraphs and divs with content that use counters behaves as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-numbered-paragraphs-divs-002-3" class="">
<td>
<a href="extract-numbered-paragraphs-divs-002.xht">extract-numbered-paragraphs-divs-002</a></td>
<td><a href="reference/extract-numbered-paragraphs-divs-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on p's and div's that use different CSS counters as content in ::after
<ul class="assert">
<li>Test checks that extracting paragraphs and divs with content that use counters behaves as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-numbered-spans-display-only-some-3" class="">
<td>
<a href="extract-numbered-spans-display-only-some.xht">extract-numbered-spans-display-only-some</a></td>
<td><a href="reference/extract-numbered-spans-display-only-some-ref.xht">=</a> </td>
<td></td>
<td>flow-into on inline elements (span's) that use a CSS counter as content for ::before
<ul class="assert">
<li>Test checks that extracting multiple elements into named flows but flowing only some of them into regions still preserves proper numbering via counters.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-list-direction-and-writing-modes-3" class="">
<td>
<a href="extract-ordered-list-direction-and-writing-modes.xht">extract-ordered-list-direction-and-writing-modes</a></td>
<td><a href="reference/extract-ordered-list-direction-and-writing-modes-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items that use different text directions or writing modes
<ul class="assert">
<li>The flow-into property can be applied to elements that have different text directions and writing modes. This tests that the rendering for lists that use different text directions/writing modes are not affected when they are extracted in a named flow and rendered in a region.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-001-3" class="">
<td>
<a href="extract-ordered-lists-in-regions-001.xht">extract-ordered-lists-in-regions-001</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists - single list in named flow, multiple lists in a named flow, multiple lists with nested lists in a named flow
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Multiple lists extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-002-3" class="">
<td>
<a href="extract-ordered-lists-in-regions-002.xht">extract-ordered-lists-in-regions-002</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists that have the &quot;reversed&quot; HTML attribute set
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Lists extracted in a named flow should still honor the HTML5 'reversed' list attribute.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-003-3" class="">
<td>
<a href="extract-ordered-lists-in-regions-003.xht">extract-ordered-lists-in-regions-003</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists that have the &quot;reversed&quot; and/or &quot;start&quot; HTML attribute set
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Lists extracted in a named flow should still honor the HTML5 'start' and 'reversed' list attributes.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-001-3" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-001.xht">extract-ordered-lists-in-regions-explicit-counters-001</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists that use a single CSS counter and ::before for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Multiple lists using a single counter displayed in generated content and extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-002-3" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-002.xht">extract-ordered-lists-in-regions-explicit-counters-002</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists that use multiple CSS counters and ::before for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. List items numbered using a single counter in nested scopes and extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-003-3" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-003.xht">extract-ordered-lists-in-regions-explicit-counters-003</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-003-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from lists that use a single CSS counter with nested scopes and ::before for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Extracting parts of a list numbered using a single counter in nested scopes should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-004-3" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-004.xht">extract-ordered-lists-in-regions-explicit-counters-004</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-004-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from lists that use multiple CSS counters with nested scopes and ::before for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. List items numbered using multiple counters and extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-005-3" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-005.xht">extract-ordered-lists-in-regions-explicit-counters-005</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-005-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from lists that use multiple CSS counters with nested scopes and ::after for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. List items numbered using multiple counters displayed in the ::after pseudo-element and extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-unordered-lists-in-regions-3" class="">
<td>
<a href="extract-unordered-lists-in-regions.xht">extract-unordered-lists-in-regions</a></td>
<td><a href="reference/extract-unordered-lists-in-regions-ref.xht">=</a> </td>
<td></td>
<td>flow-into on unordered lists - single list in named flow, multiple lists in a named flow, multiple lists with nested lists in a named flow
<ul class="assert">
<li>The flow-into property can be applied to unordered lists. Multiple lists extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="flow-from-001-3" class="">
<td>
<a href="flow-from-001.xht">flow-from-001</a></td>
<td><a href="reference/flow-from-001-ref.xht">=</a> </td>
<td></td>
<td>Region chain ordering
<ul class="assert">
<li>Regions are ordered in a region chain according to their document order.</li>
</ul>
</td>
</tr>
<tr id="flow-from-block-container-001-3" class="">
<td>
<a href="flow-from-block-container-001.xht">flow-from-block-container-001</a></td>
<td><a href="reference/flow-from-block-container-001-ref.xht">=</a> </td>
<td></td>
<td>Regions apply only to block container boxes
<ul class="assert">
<li>If a span has flow-from set, that declaration is ignored.</li>
</ul>
</td>
</tr>
<tr id="flow-into-001-3" class="">
<td>
<a href="flow-into-001.xht">flow-into-001</a></td>
<td><a href="reference/flow-into-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into behavior
<ul class="assert">
<li>Elements placed into a named flow follow document order. Children of flow elements can be placed in a different flow. Nested flow elements in the same flow become siblings. Flow-into is not inherited.</li>
</ul>
</td>
</tr>
<tr id="flow-into-bfc-001-3" class="">
<td>
<a href="flow-into-BFC-001.xht">flow-into-bfc-001</a></td>
<td><a href="reference/flow-into-BFC-001-ref.xht">=</a> </td>
<td></td>
<td>Regions establish a new block formatting context
<ul class="assert">
<li>A region set next to a float will clear the float in a new block formatting context.</li>
</ul>
</td>
</tr>
<tr id="flow-into-invalid-names-001-3" class="">
<td>
<a href="flow-into-invalid-names-001.xht">flow-into-invalid-names-001</a></td>
<td><a href="reference/flow-into-invalid-names-001-ref.xht">=</a> </td>
<td></td>
<td>invalid flow-into idents
<ul class="assert">
<li>If flow-into is set to an invalid ident, no flow is created. The flow content will stay in its green wrapper. Invalid idents with flow-from do not create a region.</li>
</ul>
</td>
</tr>
<tr id="flow-into-region-children-001-3" class="">
<td>
<a href="flow-into-region-children-001.xht">flow-into-region-children-001</a></td>
<td><a href="reference/flow-into-region-children-001-ref.xht">=</a> </td>
<td></td>
<td>Region children are formatted if directed to a flow
<ul class="assert">
<li>The two regions in this test will swap their children.</li>
</ul>
</td>
</tr>
<tr id="region-stacking-context-001-3" class="">
<td>
<a href="region-stacking-context-001.xht">region-stacking-context-001</a></td>
<td><a href="reference/region-stacking-context-001-ref.xht">=</a> </td>
<td></td>
<td>Regions create new stacking context
<ul class="assert">
<li>The z-index set on region content does not affect how they are stacked with siblings of the region.</li>
</ul>
</td>
</tr>
<tr id="variable-width-001-3" class="">
<td>
<a href="variable-width-001.xht">variable-width-001</a></td>
<td><a href="reference/variable-width-001-ref.xht">=</a> </td>
<td></td>
<td>Variable-width Regions
<ul class="assert">
<li>The second region should lay out two of the content boxes.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.1">+</a>
<a href="https://www.w3.org/TR/css3-regions/#the-flow-into-property">3.1 The flow-into property</a></th></tr>
<!-- 270 tests -->
<tr id="animations-001-3.1" class="ahem animated">
<td>
<a href="animations-001.xht">animations-001</a></td>
<td><a href="reference/animations-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>CSS Regions: animating content flowed into a region
<ul class="assert">
<li>Test checks that content that has an animated 3D transform renders and animates when flowed in a region.</li>
</ul>
</td>
</tr>
<tr id="autoheight-flexbox-001-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-003-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-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-fixed-sized-flexbox-001-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-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-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-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-006-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-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-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>
<tr id="canvas3d-001-3.1" class="dom">
<td>
<a href="canvas3d-001.xht">canvas3d-001</a></td>
<td><a href="reference/canvas3d-001-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>CSS Regions: rendering 3D canvas elements inside regions
<ul class="assert">
<li>Test checks that when a 3D (webGL) canvas element is flowed in a region it renders as it would render if it wouldn't be flowed in the region.</li>
</ul>
</td>
</tr>
<tr id="canvas3d-002-3.1" class="dom">
<td>
<a href="canvas3d-002.xht">canvas3d-002</a></td>
<td><a href="reference/canvas3d-002-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>CSS Regions: rendering text flowed in a region on top of 3D content
<ul class="assert">
<li>Test checks that text flowed in a region renders without artifacts when the region overlaps a 3D (webGL) canvas element. This can be problematic in browsers that don't handle layers and/or 3D acceleration correctly.</li>
</ul>
</td>
</tr>
<tr id="column-flexbox-break-3.1" class="ahem">
<td>
<a href="column-flexbox-break.xht">column-flexbox-break</a></td>
<td><a href="reference/column-flexbox-break-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: fragmenting a flex container with column flow
<ul class="assert">
<li>Test checks that a flex container with column flow is fragmented between regions.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-001-3.1" class="ahem">
<td>
<a href="content-node-layers-001.xht">content-node-layers-001</a></td>
<td><a href="reference/content-node-layers-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content with opacity &lt; 1 in region
<ul class="assert">
<li>Test checks that content with opacity &lt; 1 is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-002-3.1" class="ahem">
<td>
<a href="content-node-layers-002.xht">content-node-layers-002</a></td>
<td><a href="reference/content-node-layers-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content with scrollbars in region
<ul class="assert">
<li>Test checks that content with scrollbars is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-003-3.1" class="ahem">
<td>
<a href="content-node-layers-003.xht">content-node-layers-003</a></td>
<td><a href="reference/content-node-layers-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content that's relatively positioned and get fragmented
<ul class="assert">
<li>Test checks that content that's relatively positioned gets properly fragmented between regions.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-004-3.1" class="ahem">
<td>
<a href="content-node-layers-004.xht">content-node-layers-004</a></td>
<td><a href="reference/content-node-layers-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content with opacity &lt; 1 and opacity = 1 in region
<ul class="assert">
<li>Test checks that content nodes with mixed opacity &lt; 1 and opacity = 1 is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-005-3.1" class="ahem">
<td>
<a href="content-node-layers-005.xht">content-node-layers-005</a></td>
<td><a href="reference/content-node-layers-005-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content with position: absolute and clip
<ul class="assert">
<li>Test checks that absolutely positioned content that has the clip property applied is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing or the clipping shapes.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-001-3.1" class="dom interact">
<td>
<a href="contentEditable-001.xht">contenteditable-001</a></td>
<td><a href="reference/contentEditable-001-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on elements that get flowed in a region does not affect their rendering in the regions. Also, such elements should be editable just as they are outside of the region.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-002-3.1" class="dom interact">
<td>
<a href="contentEditable-002.xht">contenteditable-002</a></td>
<td><a href="reference/contentEditable-002-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has a child with contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on elements that get flowed in a region does not affect their rendering in the regions. Also, such elements should be editable just as they are outside of the region, even if they are not the only elements in the named flow.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-003-3.1" class="dom interact">
<td>
<a href="contentEditable-003.xht">contenteditable-003</a></td>
<td><a href="reference/contentEditable-003-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content is child of an element that has contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on the parent of an element that gets flowed in a region does not affect its rendering in the regions. Also, the element should be editable outside and inside the region without differences.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-004-3.1" class="dom interact">
<td>
<a href="contentEditable-004.xht">contenteditable-004</a></td>
<td><a href="reference/contentEditable-004-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: element has contentEditable attribute set and both it and a child of it are flowed in a the same region
<ul class="assert">
<li>Test checks that flowing both and element and one of its children in a region, when said element has the contentEditable attribute set does not affect their rendering in the regions and the ability to edit it.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-005-3.1" class="dom interact">
<td>
<a href="contentEditable-005.xht">contenteditable-005</a></td>
<td><a href="reference/contentEditable-005-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has contentEditable attribute set and is fragmented
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on elements that get flowed in a region does not affect their rendering and the ability to edit them even when they get fragmented in multiple regions.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-006-3.1" class="dom interact">
<td>
<a href="contentEditable-006.xht">contenteditable-006</a></td>
<td><a href="reference/contentEditable-006-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has contentEditable attribute set and is flowed in an auto-height region
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on elements that get flowed in a region does not affect their rendering in the regions. Also, if the region uses height:auto, the size of the region should change as the content flowed in it is edited.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-007-3.1" class="dom interact">
<td>
<a href="contentEditable-007.xht">contenteditable-007</a></td>
<td><a href="reference/contentEditable-007-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has contentEditable attribute set and children of it get flowed in a region dynamically
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on an element does not interfere with its children being dinamically flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-008-3.1" class="dom interact">
<td>
<a href="contentEditable-008.xht">contenteditable-008</a></td>
<td><a href="reference/contentEditable-008-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: region element has contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on a region (an element that has flow-from set) does not prevent the element to becoming a region, nor does attempting to interactively edit it produces unexpected results.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-009-3.1" class="dom interact">
<td>
<a href="contentEditable-009.xht">contenteditable-009</a></td>
<td><a href="reference/contentEditable-008-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: region element has child with contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on a child of a region (an element that has flow-from set) does not prevent the parent element to becoming a region, nor does attempting to interactively edit it produces unexpected results.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-010-3.1" class="dom interact">
<td>
<a href="contentEditable-010.xht">contenteditable-010</a></td>
<td><a href="reference/contentEditable-010-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: auto-size region with contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on an auto-sized region (an element that has flow-from set) does not prevent it to becoming a region, nor does attempting to interactively edit it produces unexpected results.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-011-3.1" class="dom interact">
<td>
<a href="contentEditable-011.xht">contenteditable-011</a></td>
<td><a href="reference/contentEditable-011-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: both named flow content and region element have contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on both named flow content (an element that has flow-into set) and the region (an element that has flow-from set) does not prevent the region to properly flowing the content, while the content stays editable and no unexpected interactions happen.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-012-3.1" class="ahem dom interact">
<td>
<a href="contentEditable-012.xht">contenteditable-012</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: regions are children of an element with the contentEditable attribute set
<ul class="assert">
<li>Test checks that children of an element that has the contentEditable attribute can be used for flowing content into and interactively duplicating the regions (via user-initiated copy/paste) properly flows the content in the newly created regions. Properly executing this test requires an user agent that supports copy/paste operations.</li>
</ul>
</td>
</tr>
<tr id="css-cursor-001-3.1" class="ahem interact">
<td>
<a href="css-cursor-001.xht">css-cursor-001</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: CSS cursor on content node
<ul class="assert">
<li>CSS cursors are properly displayed for content flowed into regions.</li>
</ul>
</td>
</tr>
<tr id="css-cursor-002-3.1" class="ahem interact">
<td>
<a href="css-cursor-002.xht">css-cursor-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: CSS cursor on region
<ul class="assert">
<li>CSS cursors are properly displayed even when an element is turned into a region</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-001-3.1" class="interact">
<td>
<a href="css-hover-on-content-001.xht">css-hover-on-content-001</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on content nodes
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to content nodes</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-002-3.1" class="ahem interact">
<td>
<a href="css-hover-on-content-002.xht">css-hover-on-content-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on content node parent when the parent is in the named flow and rendered as a sibling of its child
<ul class="assert">
<li>CSS properties set through rules that use the :hover pseudo-class on an element are properly propagated to children that are flowed into regions even when they're visually rendered as siblings</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-003-3.1" class="interact">
<td>
<a href="css-hover-on-content-003.xht">css-hover-on-content-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on content node parent when the parent is not in the named flow
<ul class="assert">
<li>CSS properties set through rules that use the :hover pseudo-class on an element are properly propagated to children that are flowed into regions</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-004-3.1" class="interact">
<td>
<a href="css-hover-on-content-004.xht">css-hover-on-content-004</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on content node when the content node has position:fixed
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to content nodes that have position:fixed.</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-005-3.1" class="interact">
<td>
<a href="css-hover-on-content-005.xht">css-hover-on-content-005</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS :hover on content node when the content node has position:relative
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to content nodes that are relatively positioned</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-region-001-3.1" class="interact">
<td>
<a href="css-hover-on-region-001.xht">css-hover-on-region-001</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on region that has borders
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region border</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-region-002-3.1" class="interact">
<td>
<a href="css-hover-on-region-002.xht">css-hover-on-region-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on regions that have padding
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region padding</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-region-003-3.1" class="interact">
<td>
<a href="css-hover-on-region-003.xht">css-hover-on-region-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on region when content nodes are relatively positioned
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region and the content flowed in it is relatively positioned. Also, the :hover rules for the content do not apply when moving the mouse over the box placeholder.</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-region-004-3.1" class="interact">
<td>
<a href="css-hover-on-region-004.xht">css-hover-on-region-004</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on regions that have rounded corners
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to regions that have rounded borders.</li>
</ul>
</td>
</tr>
<tr id="elementfrompoint-001-3.1" class="dom interact script">
<td>
<a href="elementFromPoint-001.xht">elementfrompoint-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: document.elementFromPoint() on for elements that get split between regions
<ul class="assert">
<li>document.elementFromPoint() should return the correct element when provided with coordinates of points inside content fragments</li>
</ul>
</td>
</tr>
<tr id="elementfrompoint-002-3.1" class="dom interact script">
<td>
<a href="elementFromPoint-002.xht">elementfrompoint-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: document.elementFromPoint() for elements flowed into regions
<ul class="assert">
<li>document.elementFromPoint() should return the correct element when provided with coordinates of points corresponding to elements flowed into regions</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-001-3.1" class="">
<td>
<a href="extract-list-items-001.xht">extract-list-items-001</a></td>
<td><a href="reference/extract-list-items-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered and unordered list items
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers and numbering.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-002-3.1" class="">
<td>
<a href="extract-list-items-002.xht">extract-list-items-002</a></td>
<td><a href="reference/extract-list-items-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered and unordered list items from multiple lists
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers and numbering, even when extracting items from multiple lists in the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-003-3.1" class="">
<td>
<a href="extract-list-items-003.xht">extract-list-items-003</a></td>
<td><a href="reference/extract-list-items-003-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered list items from multiple lists, including nested lists
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their numbering, even when extracting items from multiple and nested lists into the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-004-3.1" class="">
<td>
<a href="extract-list-items-004.xht">extract-list-items-004</a></td>
<td><a href="reference/extract-list-items-004-ref.xht">=</a> </td>
<td></td>
<td>flow-into on unordered list items, when items contain other unordered lists
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers, even when extracting items from multiple and nested lists into the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-005-3.1" class="">
<td>
<a href="extract-list-items-005.xht">extract-list-items-005</a></td>
<td><a href="reference/extract-list-items-005-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from multiple lists, when items contain other lists
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers or numbering (type, value), even when extracting items from multiple and nested lists into the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-006-3.1" class="">
<td>
<a href="extract-list-items-006.xht">extract-list-items-006</a></td>
<td><a href="reference/extract-list-items-006-ref.xht">=</a> </td>
<td></td>
<td>flow-into on all list items from a nested list
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their list markers or numbering (type, value), even when extracting items from multiple and nested lists into the same named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-007-3.1" class="">
<td>
<a href="extract-list-items-007.xht">extract-list-items-007</a></td>
<td><a href="reference/extract-list-items-007-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from multiple lists that have the &quot;reversed&quot; or &quot;start&quot; HTML attributes set
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their numbering, even when extracting items from multiple and nested lists into the same named flow. The numbering should also honor the HTML 'reversed' and 'start' attribute.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-008-3.1" class="">
<td>
<a href="extract-list-items-008.xht">extract-list-items-008</a></td>
<td><a href="reference/extract-list-items-008-ref.xht">=</a> </td>
<td></td>
<td>flow-into only on specific list items from multiple lists
<ul class="assert">
<li>Test checks that extracting only certain list items from a list into a named flow preseves their numbering and markings both in the region and outside the region.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-009-3.1" class="">
<td>
<a href="extract-list-items-009.xht">extract-list-items-009</a></td>
<td><a href="reference/extract-list-items-009-ref.xht">=</a> </td>
<td></td>
<td>flow-into only on specific list items from multiple lists + list item formatting via :nth-child, :nth-of-type
<ul class="assert">
<li>Test checks that extracting only certain list items from a list into a named flow does not affect styling via pseudo-classes such as :first-child or :nth-child</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-010-3.1" class="">
<td>
<a href="extract-list-items-010.xht">extract-list-items-010</a></td>
<td><a href="reference/extract-list-items-009-ref.xht">=</a> </td>
<td></td>
<td>applying flow-into and other formatting on specific list items via :nth-child, :nth-of-type pseudo-classes
<ul class="assert">
<li>Test checks that pseudo-classes like :first-child or :nth-of-type can be used both for styling and extracting only certain list items from a list into a named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-011-3.1" class="">
<td>
<a href="extract-list-items-011.xht">extract-list-items-011</a></td>
<td><a href="reference/extract-list-items-009-ref.xht">=</a> </td>
<td></td>
<td>applying flow-into and other formatting on specific list items via different pseudo-classes
<ul class="assert">
<li>Test checks that pseudo-classes like :first-child or :nth-of-type can be used both for styling and extracting only certain list items from a list into a named flow.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-012-3.1" class="">
<td>
<a href="extract-list-items-012.xht">extract-list-items-012</a></td>
<td><a href="reference/extract-list-items-012-ref.xht">=</a> </td>
<td></td>
<td>flow-into on individual list items preserves other list styling properties (list-style-*)
<ul class="assert">
<li>Test checks that list styling properties are honored even for list items extracted in named flows and rendered in regions.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-013-3.1" class="">
<td>
<a href="extract-list-items-013.xht">extract-list-items-013</a></td>
<td><a href="reference/extract-list-items-009-ref.xht">=</a> </td>
<td></td>
<td>flow-into on individual list items preserves other list styling properties (list-style-*) even when CSS styling contradicts default CSS styling for those HTML elements
<ul class="assert">
<li>Test checks that list styling properties are honored even for list items extracted in named flows when the CSS-specified list type is in opposition with the list type from the markup (ol/ul).</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-014-3.1" class="">
<td>
<a href="extract-list-items-014.xht">extract-list-items-014</a></td>
<td><a href="reference/extract-list-items-014-ref.xht">=</a> </td>
<td></td>
<td>flow-into with different flows on list items from the same list
<ul class="assert">
<li>Test flow-into property can be applied to individual list items. This test checks that list items from the same list extracted in different named flows preserve their numbering.</li>
</ul>
</td>
</tr>
<tr id="extract-list-items-015-3.1" class="">
<td>
<a href="extract-list-items-015.xht">extract-list-items-015</a></td>
<td><a href="reference/extract-list-items-015-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items that have the &quot;value&quot; HTML attribute set
<ul class="assert">
<li>The flow-into property can be applied to individual list items. List items extracted in named flows and flowed into regions must preserve their correct numbering when some of the items have the value attribute set but others don't.</li>
</ul>
</td>
</tr>
<tr id="extract-numbered-paragraphs-3.1" class="">
<td>
<a href="extract-numbered-paragraphs.xht">extract-numbered-paragraphs</a></td>
<td><a href="reference/extract-numbered-paragraphs-ref.xht">=</a> </td>
<td></td>
<td>flow-into on p's that use a CSS counter as content in ::before
<ul class="assert">
<li>Test checks that extracting paragraphs with content that use counters behaves as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-numbered-paragraphs-divs-001-3.1" class="">
<td>
<a href="extract-numbered-paragraphs-divs-001.xht">extract-numbered-paragraphs-divs-001</a></td>
<td><a href="reference/extract-numbered-paragraphs-divs-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into on p's and div's that use a single CSS counter as content in ::before
<ul class="assert">
<li>Test checks that extracting paragraphs and divs with content that use counters behaves as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-numbered-paragraphs-divs-002-3.1" class="">
<td>
<a href="extract-numbered-paragraphs-divs-002.xht">extract-numbered-paragraphs-divs-002</a></td>
<td><a href="reference/extract-numbered-paragraphs-divs-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on p's and div's that use different CSS counters as content in ::after
<ul class="assert">
<li>Test checks that extracting paragraphs and divs with content that use counters behaves as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-numbered-spans-display-only-some-3.1" class="">
<td>
<a href="extract-numbered-spans-display-only-some.xht">extract-numbered-spans-display-only-some</a></td>
<td><a href="reference/extract-numbered-spans-display-only-some-ref.xht">=</a> </td>
<td></td>
<td>flow-into on inline elements (span's) that use a CSS counter as content for ::before
<ul class="assert">
<li>Test checks that extracting multiple elements into named flows but flowing only some of them into regions still preserves proper numbering via counters.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-list-direction-and-writing-modes-3.1" class="">
<td>
<a href="extract-ordered-list-direction-and-writing-modes.xht">extract-ordered-list-direction-and-writing-modes</a></td>
<td><a href="reference/extract-ordered-list-direction-and-writing-modes-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items that use different text directions or writing modes
<ul class="assert">
<li>The flow-into property can be applied to elements that have different text directions and writing modes. This tests that the rendering for lists that use different text directions/writing modes are not affected when they are extracted in a named flow and rendered in a region.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-001-3.1" class="">
<td>
<a href="extract-ordered-lists-in-regions-001.xht">extract-ordered-lists-in-regions-001</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists - single list in named flow, multiple lists in a named flow, multiple lists with nested lists in a named flow
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Multiple lists extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-002-3.1" class="">
<td>
<a href="extract-ordered-lists-in-regions-002.xht">extract-ordered-lists-in-regions-002</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists that have the &quot;reversed&quot; HTML attribute set
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Lists extracted in a named flow should still honor the HTML5 'reversed' list attribute.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-003-3.1" class="">
<td>
<a href="extract-ordered-lists-in-regions-003.xht">extract-ordered-lists-in-regions-003</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists that have the &quot;reversed&quot; and/or &quot;start&quot; HTML attribute set
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Lists extracted in a named flow should still honor the HTML5 'start' and 'reversed' list attributes.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-001-3.1" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-001.xht">extract-ordered-lists-in-regions-explicit-counters-001</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists that use a single CSS counter and ::before for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Multiple lists using a single counter displayed in generated content and extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-002-3.1" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-002.xht">extract-ordered-lists-in-regions-explicit-counters-002</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-002-ref.xht">=</a> </td>
<td></td>
<td>flow-into on ordered lists that use multiple CSS counters and ::before for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. List items numbered using a single counter in nested scopes and extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-003-3.1" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-003.xht">extract-ordered-lists-in-regions-explicit-counters-003</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-003-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from lists that use a single CSS counter with nested scopes and ::before for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. Extracting parts of a list numbered using a single counter in nested scopes should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-004-3.1" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-004.xht">extract-ordered-lists-in-regions-explicit-counters-004</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-004-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from lists that use multiple CSS counters with nested scopes and ::before for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. List items numbered using multiple counters and extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-ordered-lists-in-regions-explicit-counters-005-3.1" class="">
<td>
<a href="extract-ordered-lists-in-regions-explicit-counters-005.xht">extract-ordered-lists-in-regions-explicit-counters-005</a></td>
<td><a href="reference/extract-ordered-lists-in-regions-explicit-counters-005-ref.xht">=</a> </td>
<td></td>
<td>flow-into on list items from lists that use multiple CSS counters with nested scopes and ::after for list numbering
<ul class="assert">
<li>The flow-into property can be applied to ordered lists. List items numbered using multiple counters displayed in the ::after pseudo-element and extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="extract-unordered-lists-in-regions-3.1" class="">
<td>
<a href="extract-unordered-lists-in-regions.xht">extract-unordered-lists-in-regions</a></td>
<td><a href="reference/extract-unordered-lists-in-regions-ref.xht">=</a> </td>
<td></td>
<td>flow-into on unordered lists - single list in named flow, multiple lists in a named flow, multiple lists with nested lists in a named flow
<ul class="assert">
<li>The flow-into property can be applied to unordered lists. Multiple lists extracted in a named flow should render in regions just as without regions.</li>
</ul>
</td>
</tr>
<tr id="floated-regions-001-3.1" 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-002-3.1" class="">
<td>
<a href="floated-regions-002.xht">floated-regions-002</a></td>
<td><a href="reference/floated-regions-002-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: floated region with multiple floated siblings
<ul class="assert">
<li>Test checks that a floated region behaves as a regular float when it has multiple floated siblings, before and after it.</li>
</ul>
</td>
</tr>
<tr id="floated-regions-003-3.1" class="">
<td>
<a href="floated-regions-003.xht">floated-regions-003</a></td>
<td><a href="reference/floated-regions-003-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: single auto-sized floated region
<ul class="assert">
<li>Test checks that a single auto-sized region is properly sized, according both to the regions processing model and the specifics of floats sizing.</li>
</ul>
</td>
</tr>
<tr id="floated-regions-004-3.1" 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-3.1" 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-clear-breaks-001-3.1" class="ahem">
<td>
<a href="floats-clear-breaks-001.xht">floats-clear-breaks-001</a></td>
<td><a href="reference/floats-clear-breaks-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: cleared floats in named flow contents
<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-clear-breaks-002-3.1" class="ahem">
<td>
<a href="floats-clear-breaks-002.xht">floats-clear-breaks-002</a></td>
<td><a href="reference/floats-clear-breaks-002-ref.xht">=</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-001-3.1" class="">
<td>
<a href="floats-in-named-flow-001.xht">floats-in-named-flow-001</a></td>
<td><a href="reference/floats-in-named-flow-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: float in a named flow
<ul class="assert">
<li>Test checks that a float in named flow contents is floated relative to the region container and not its initial container.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-002-3.1" class="">
<td>
<a href="floats-in-named-flow-002.xht">floats-in-named-flow-002</a></td>
<td><a href="reference/floats-in-named-flow-002-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: named flow contains multiple floats
<ul class="assert">
<li>Test checks that when a named flow contains multiple floats they are floated relative to the region container and not their initial container.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-003-3.1" class="">
<td>
<a href="floats-in-named-flow-003.xht">floats-in-named-flow-003</a></td>
<td><a href="reference/floats-in-named-flow-003-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: separate floats as named flow contents
<ul class="assert">
<li>Test checks that floats from different containers, individually flowed in a region are floated relative to the region container and not their initial container.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-004-3.1" 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="floats-in-named-flow-005-3.1" class="">
<td>
<a href="floats-in-named-flow-005.xht">floats-in-named-flow-005</a></td>
<td><a href="reference/floats-in-named-flow-005-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: separate floats with percent size in sized region
<ul class="assert">
<li>Test checks that floats inside a named flow are sized relative to the region container, regardless of their initial block formatting context.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-006-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-006.xht">floats-in-named-flow-006</a></td>
<td><a href="reference/floats-in-named-flow-006-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: floats in a named flow with multiple regions
<ul class="assert">
<li>Test checks that floats in named flow contents are positioned relative to their containing regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-007-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-007.xht">floats-in-named-flow-007</a></td>
<td><a href="reference/floats-in-named-flow-006-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: named flow has floats and multiple block formatting contexts and is flowed in multiple regions
<ul class="assert">
<li>Test checks that floats in named flows are positioned relative to their regions and not their initial container, even when multiple regions are involved and the named flow contents come from different block formatting contexts.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-008-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-008.xht">floats-in-named-flow-008</a></td>
<td><a href="reference/floats-in-named-flow-006-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: floats in a named flow with forced breaks and multiple regions
<ul class="assert">
<li>Test checks that floats in named flow contents are floated relative to the region container they are laid out in (and not their initial container), even when multiple regions are involved and content has forced region breaks.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-009-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-009.xht">floats-in-named-flow-009</a></td>
<td><a href="reference/floats-in-named-flow-009-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: floats in a named flow fragmented through multiple regions
<ul class="assert">
<li>Test checks that floats in named flow contents are correctly fragmented and the fragments are floated relative to the region container they are laid out in and not their initial container.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-010-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-010.xht">floats-in-named-flow-010</a></td>
<td><a href="reference/floats-in-named-flow-006-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: floats in named flow content are sized relatively to the region
<ul class="assert">
<li>Test checks that floats in named flow contents are sized relatively to the region they are laid out in.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-011-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-011.xht">floats-in-named-flow-011</a></td>
<td><a href="reference/floats-in-named-flow-011-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: forced region break on float inside a named flow
<ul class="assert">
<li>Test checks that forced region breaks on floats do not influence normal flow content flowed in the region together with the float.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-012-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-012.xht">floats-in-named-flow-012</a></td>
<td><a href="reference/floats-in-named-flow-012-ref.xht">=</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-013-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-013.xht">floats-in-named-flow-013</a></td>
<td><a href="reference/floats-in-named-flow-013-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: regions wholly contain floates flowed in them
<ul class="assert">
<li>Test checks that regions create new block formatting contexts that wholly contain the floats flowed in them.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-014-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-014.xht">floats-in-named-flow-014</a></td>
<td><a href="reference/floats-in-named-flow-013-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: float overflowing a fixed-sized region
<ul class="assert">
<li>Test checks that floats flowed in a fixed size region and overflowing it do no interact with line boxes outside of the region. This is another side effect of the fact that regions create block formatting contexts.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-015-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-015.xht">floats-in-named-flow-015</a></td>
<td><a href="reference/floats-in-named-flow-013-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: painting order for floats overflowing a region
<ul class="assert">
<li>Test checks that the painting order for floats flowed in a region is the same as if the floats were direct children of the region.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-016-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-016.xht">floats-in-named-flow-016</a></td>
<td><a href="reference/floats-in-named-flow-016-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: float overflowing its container does not interact with other line boxes when flowed in region
<ul class="assert">
<li>Test checks that a float that overflows its container does not interact with other line boxes when flowed in a region. In other words, floats flowed in regions are not taken into account when laying out sibling boxes that are not part of the same named flow.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-017-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-017.xht">floats-in-named-flow-017</a></td>
<td><a href="reference/floats-in-named-flow-017-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: float and non-float content with forced region break fragmented across two regions
<ul class="assert">
<li>Test checks that forcing a region break on the containing box of a float will fragment the float across the regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-018-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-018.xht">floats-in-named-flow-018</a></td>
<td><a href="reference/floats-in-named-flow-018-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: floats and cleared boxes are properly fragmented through regions
<ul class="assert">
<li>Test checks that cleared content is properly fragmented in regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-019-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-019.xht">floats-in-named-flow-019</a></td>
<td><a href="reference/floats-in-named-flow-018-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: cleared floats are properly fragmented through regions
<ul class="assert">
<li>Test checks that cleared floats are properly fragmented through regions when the regions have an explicitly set height.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-020-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-020.xht">floats-in-named-flow-020</a></td>
<td><a href="reference/floats-in-named-flow-020-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: cleared pseudo-elements (clearfix) in named flow contents
<ul class="assert">
<li>Test checks that floats and cleared pseudoelements (clearfix) render in regions just as they render without regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-021-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-021.xht">floats-in-named-flow-021</a></td>
<td><a href="reference/floats-in-named-flow-021-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: cleared non-float content after a forced region break
<ul class="assert">
<li>Test checks that cleared non-float content after a float that also has a forced region break does not lead to an empty region.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-022-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-022.xht">floats-in-named-flow-022</a></td>
<td><a href="reference/floats-in-named-flow-021-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: float and non-float content floated in different named flows
<ul class="assert">
<li>Test checks that floated content flowed in a named flow does not change the rendering for non-float content flowed in a different named flow.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-023-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-023.xht">floats-in-named-flow-023</a></td>
<td><a href="reference/floats-in-named-flow-023-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: inline floats and non-float contents inside a named flow
<ul class="assert">
<li>Test checks that inline floats and non-floated elements flowed into regions render the same as they would without regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-024-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-024.xht">floats-in-named-flow-024</a></td>
<td><a href="reference/floats-in-named-flow-024-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: float with relative sizing fragmented in differently sized regions
<ul class="assert">
<li>Test checks that the fragments of floats with relative sizing (width specified using percents) that are fragmented in regions with varying sizes will be sized relative to each separate region.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-025-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-025.xht">floats-in-named-flow-025</a></td>
<td><a href="reference/floats-in-named-flow-025-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: painting order for floats and relatively positioned content
<ul class="assert">
<li>Test checks that floats and relatively positioned content are painted in the same order when flowed into region as when they are not flowed into regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-026-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-026.xht">floats-in-named-flow-026</a></td>
<td><a href="reference/floats-in-named-flow-026-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: painting order for fragmented floats that are stacking contexts
<ul class="assert">
<li>Test checks that floats inside a named flow that also create a stacking context respect the correct painting order even when fragmented across multiple regions that are overlapping.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-027-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-027.xht">floats-in-named-flow-027</a></td>
<td><a href="reference/floats-in-named-flow-027-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: floats outside of the region
<ul class="assert">
<li>Test checks that floats outside of the region do not interact with the line boxes of the content flowed in regions. This is the effect of the fact that regions are block formatting contexts.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-028-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-028.xht">floats-in-named-flow-028</a></td>
<td><a href="reference/floats-in-named-flow-023-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: floats and non-floats content flowed in a shrink-to fit autosized region
<ul class="assert">
<li>Test checks that an autosized region that has display: inline-block is properly sized when the content flowed in it has both floats and non-floats elements.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-029-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-029.xht">floats-in-named-flow-029</a></td>
<td><a href="reference/floats-in-named-flow-029-ref.xht">=</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-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-030.xht">floats-in-named-flow-030</a></td>
<td><a href="reference/floats-in-named-flow-030-ref.xht">=</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>
<tr id="floats-in-named-flow-031-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-031.xht">floats-in-named-flow-031</a></td>
<td><a href="reference/floats-in-named-flow-031-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: margins around float and non-float content
<ul class="assert">
<li>Test checks that margins do not collapse for content flowed inside a region, both for float and non-float contents.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-032-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-032.xht">floats-in-named-flow-032</a></td>
<td><a href="reference/floats-in-named-flow-032-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: padding around float and non-float content
<ul class="assert">
<li>Test checks that paddings for floats and non-floats are properly computed when they are flowed in shrink-to-fit regions.</li>
</ul>
</td>
</tr>
<tr id="floats-in-named-flow-033-3.1" class="ahem">
<td>
<a href="floats-in-named-flow-033.xht">floats-in-named-flow-033</a></td>
<td><a href="reference/floats-in-named-flow-033-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: borders around float and non-float content
<ul class="assert">
<li>Test checks that borders for floats and non-floats are properly computed and painted when the elements are flowed in shrink-to-fit regions.</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-001-3.1" class="interact">
<td>
<a href="flow-change-on-hover-001.xht">flow-change-on-hover-001</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Changing an element's named flow when hovering over its parent
<ul class="assert">
<li>Changing the named flow an element is extracted in using a rule that contains the :hover pseudoclass should be possible</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-002-3.1" class="interact">
<td>
<a href="flow-change-on-hover-002.xht">flow-change-on-hover-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Changing an element's named flow when hovering over a sibling
<ul class="assert">
<li>Changing the named flow an element is extracted in using a rule that contains the :hover pseudoclass should be possible</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-003-3.1" class="ahem interact">
<td>
<a href="flow-change-on-hover-003.xht">flow-change-on-hover-003</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove child element from named flow on CSS hover when parent and child are rendered as siblings in region
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-004-3.1" class="ahem interact">
<td>
<a href="flow-change-on-hover-004.xht">flow-change-on-hover-004</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove child element from named flow on CSS hover
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-005-3.1" class="ahem interact">
<td>
<a href="flow-change-on-hover-005.xht">flow-change-on-hover-005</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove element from named flow on CSS hover
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-006-3.1" class="ahem interact">
<td>
<a href="flow-change-on-hover-006.xht">flow-change-on-hover-006</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove element sibling from named flow on CSS hover
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="flow-content-001-3.1" class="">
<td>
<a href="flow-content-001.xht">flow-content-001</a></td>
<td><a href="reference/flow-content-001-ref.xht">=</a> </td>
<td></td>
<td>Redirect content to a region
<ul class="assert">
<li>Content placed into a named flow with the flow-into property should display in the element whose flow-from property specifies that named flow.</li>
</ul>
</td>
</tr>
<tr id="flow-content-002-3.1" class="">
<td>
<a href="flow-content-002.xht">flow-content-002</a></td>
<td><a href="reference/flow-content-002-ref.xht">=</a> </td>
<td></td>
<td>Redirect content through two regions
<ul class="assert">
<li>If multiple elements have their flow-from property set to a named flow, the named flow content will be consumed by the chain of elements.</li>
</ul>
</td>
</tr>
<tr id="flow-into-001-3.1" class="">
<td>
<a href="flow-into-001.xht">flow-into-001</a></td>
<td><a href="reference/flow-into-001-ref.xht">=</a> </td>
<td></td>
<td>flow-into behavior
<ul class="assert">
<li>Elements placed into a named flow follow document order. Children of flow elements can be placed in a different flow. Nested flow elements in the same flow become siblings. Flow-into is not inherited.</li>
</ul>
</td>
</tr>
<tr id="flow-into-invalid-names-001-3.1" class="">
<td>
<a href="flow-into-invalid-names-001.xht">flow-into-invalid-names-001</a></td>
<td><a href="reference/flow-into-invalid-names-001-ref.xht">=</a> </td>
<td></td>
<td>invalid flow-into idents
<ul class="assert">
<li>If flow-into is set to an invalid ident, no flow is created. The flow content will stay in its green wrapper. Invalid idents with flow-from do not create a region.</li>
</ul>
</td>
</tr>
<tr id="flow-into-parsing-001-3.1" class="dom script">
<td>
<a href="flow-into-parsing-001.xht">flow-into-parsing-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Parse flow-into property
<ul class="assert">
<li>Value specified for the flow-into property should be parsed correctly.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-001-3.1" class="dom interact">
<td>
<a href="fullscreen-region-content-001.xht">fullscreen-region-content-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on video element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a video element that's part of a named flow properly displays the video in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-002-3.1" class="dom interact">
<td>
<a href="fullscreen-region-content-002.xht">fullscreen-region-content-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on image element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on an image element that's part of a named flow properly displays the image in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-003-3.1" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-003.xht">fullscreen-region-content-003</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on inline element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on an inline element that's part of a named flow properly displays it in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-004-3.1" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-004.xht">fullscreen-region-content-004</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on block element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a block element that's part of a named flow properly displays it in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-005-3.1" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-005.xht">fullscreen-region-content-005</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on a fragmented block element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a block element that's part of a named flow and is fragmented displays both fragments it in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-006-3.1" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-006.xht">fullscreen-region-content-006</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on an element whose descendants are in a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on an element whose descendants are part of a named flow will not show the descendants flowed in the region.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-007-3.1" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-007.xht">fullscreen-region-content-007</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on a fixed-size region
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a fixed-size region displays the region and the content flowed in it without resizing the region or reflowing the content.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-008-3.1" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-008.xht">fullscreen-region-content-008</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on an auto-sized region
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on an auto-sized region displays the region and the content flowed in it without resizing the window or reflowing the content.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-009-3.1" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-009.xht">fullscreen-region-content-009</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>using the :full-screen pseudo class to make a full-screen region auto-size
<ul class="assert">
<li>This test checks that using the :full-screen pseudo class to make a region auto-sized works after calling the requestFullscreen() method on a fixed size region.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-010-3.1" class="ahem interact">
<td>
<a href="fullscreen-region-content-010.xht">fullscreen-region-content-010</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on a region that's part of a multiple regions region chain
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a region that is part of a multiple-regions region chain does not change the order in which content is flowed through the region chain.</li>
</ul>
</td>
</tr>
<tr id="iframe-001-3.1" class="ahem">
<td>
<a href="iframe-001.xht">iframe-001</a></td>
<td><a href="reference/iframe-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: flowing an iframe that loads content with 3D transform
<ul class="assert">
<li>Test checks that flowing an iframe that loads content with 3D transforms in a region renders without artifacts.</li>
</ul>
</td>
</tr>
<tr id="javascript-stacking-context-001-3.1" class="ahem script">
<td>
<a href="javascript-stacking-context-001.xht">javascript-stacking-context-001</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>document.elementFromPoint() for overlapping, positioned regions with non-auto z-index
<ul class="assert">
<li>Test checks that document.elementFromPoint() returns the correct region when multiple regions are absolutely positioned, overlap and have non-auto z-index.</li>
</ul>
</td>
</tr>
<tr id="javascript-stacking-context-002-3.1" class="ahem">
<td>
<a href="javascript-stacking-context-002.xht">javascript-stacking-context-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>JavaScript event handlers on overlapping, positioned regions with non-auto z-index
<ul class="assert">
<li>Test checks that JavaScript event handlers set on regions trigger when multiple regions are absolutely positioned, overlap and have non-auto z-index.</li>
</ul>
</td>
</tr>
<tr id="mouse-events-001-3.1" class="dom interact">
<td>
<a href="mouse-events-001.xht">mouse-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: mouse events don't trigger for region children
<ul class="assert">
<li>Children of regions (elements with flow-from) are removed from the document flow and JavaScript event handlers set on them should not fire</li>
</ul>
</td>
</tr>
<tr id="mouse-events-002-3.1" class="dom interact">
<td>
<a href="mouse-events-002.xht">mouse-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: mouse events on contents node made up by unknown tags
<ul class="assert">
<li>Mouse event handlers set on content nodes, even if they're unknown elements should fire</li>
</ul>
</td>
</tr>
<tr id="mouse-events-003-3.1" class="dom interact">
<td>
<a href="mouse-events-003.xht">mouse-events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: mouse over DOM location of content flowed in a region
<ul class="assert">
<li>Mouse events should not fire over the would-be location of the content nodes (where they would have been rendered were they not flowed in a region)</li>
</ul>
</td>
</tr>
<tr id="mouse-events-004-3.1" class="dom interact">
<td>
<a href="mouse-events-004.xht">mouse-events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Removing content nodes on mouse events
<ul class="assert">
<li>Altering the contents of the named flow via DOM manipulation in response to user gestures (mouse move, mouse click) should works as without regions.</li>
</ul>
</td>
</tr>
<tr id="mouse-events-005-3.1" class="interact">
<td>
<a href="mouse-events-005.xht">mouse-events-005</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Adding and removing regions on mouse events
<ul class="assert">
<li>Altering the region chain via DOM manipulation in response to user gestures should not change the rendering of the content inside regions</li>
</ul>
</td>
</tr>
<tr id="overflow-and-elementfrompoint-001-3.1" class="dom interact">
<td>
<a href="overflow-and-elementFromPoint-001.xht">overflow-and-elementfrompoint-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: document.elementFromPoint() for elements in a region's hidden overflow
<ul class="assert">
<li>For regions that have hidden overflow calling document.elementFromPoint() on the location of the element should not return the element</li>
</ul>
</td>
</tr>
<tr id="overflow-and-elementfrompoint-002-3.1" class="dom interact">
<td>
<a href="overflow-and-elementFromPoint-002.xht">overflow-and-elementfrompoint-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: document.elementFromPoint() for elements in a region's scroll overflow
<ul class="assert">
<li>For regions that have scroll overflow, scrolling an element flowed in them into view and then calling document.elementFromPoint() on the visible location of the element should return the element</li>
</ul>
</td>
</tr>
<tr id="overflow-and-elementfrompoint-003-3.1" class="dom interact">
<td>
<a href="overflow-and-elementFromPoint-003.xht">overflow-and-elementfrompoint-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: document.elementFromPoint() for elements in a region's visible overflow
<ul class="assert">
<li>For regions that have visible overflow calling document.elementFromPoint() on the visible location of the element should return the element</li>
</ul>
</td>
</tr>
<tr id="overflow-and-events-001-3.1" class="dom interact">
<td>
<a href="overflow-and-events-001.xht">overflow-and-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: JavaScript event handlers for elements in a region's hidden overflow
<ul class="assert">
<li>For regions that have hidden overflow, JavaScript events on elements that are in the hidden overflow should not trigger</li>
</ul>
</td>
</tr>
<tr id="overflow-and-events-002-3.1" class="dom interact">
<td>
<a href="overflow-and-events-002.xht">overflow-and-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: JavaScript event handlers for elements in a region's scroll overflow
<ul class="assert">
<li>For regions that have scroll overflow, JavaScript events on elements that are in the scrollable overflow should trigger once the element is scrolled into view and the corresponding user gesture is made</li>
</ul>
</td>
</tr>
<tr id="overflow-and-events-003-3.1" class="interact">
<td>
<a href="overflow-and-events-003.xht">overflow-and-events-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Mouse events in visible overflow of a region
<ul class="assert">
<li>Mouse events set up on elements displayed in a region's visible overflow should trigger</li>
</ul>
</td>
</tr>
<tr id="overflow-and-selection-001-3.1" class="interact">
<td>
<a href="overflow-and-selection-001.xht">overflow-and-selection-001</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Selection for elements in a region's hidden overflow
<ul class="assert">
<li>For regions that have hidden overflow, the contents in the hidden overflow should not be scrollable or selectable</li>
</ul>
</td>
</tr>
<tr id="overflow-and-selection-002-3.1" class="interact">
<td>
<a href="overflow-and-selection-002.xht">overflow-and-selection-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Selection for elements in a region's scroll overflow
<ul class="assert">
<li>For regions that have scroll overflow, their content should be scrollable into view and selectable as without regions</li>
</ul>
</td>
</tr>
<tr id="overflow-and-selection-003-3.1" class="interact">
<td>
<a href="overflow-and-selection-003.xht">overflow-and-selection-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Selection for elements in a region's visible overflow
<ul class="assert">
<li>For regions that have visible overflow, their content should be selectable as without regions</li>
</ul>
</td>
</tr>
<tr id="position-relative-001-3.1" class="ahem">
<td>
<a href="position-relative-001.xht">position-relative-001</a></td>
<td><a href="reference/position-relative-001-ref.xht">=</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="region-chain-change-on-hover-001-3.1" class="ahem interact">
<td>
<a href="region-chain-change-on-hover-001.xht">region-chain-change-on-hover-001</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove element from named flow when hovering the region
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="region-chain-change-on-hover-002-3.1" class="ahem interact">
<td>
<a href="region-chain-change-on-hover-002.xht">region-chain-change-on-hover-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove region from region chain on CSS :hover
<ul class="assert">
<li>Changing the flow-from property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="region-chain-change-on-hover-003-3.1" class="ahem interact">
<td>
<a href="region-chain-change-on-hover-003.xht">region-chain-change-on-hover-003</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove region from region chain on CSS hover
<ul class="assert">
<li>Changing the flow-from property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="region-fragment-001-3.1" class="">
<td>
<a href="region-fragment-001.xht">region-fragment-001</a></td>
<td><a href="reference/region-fragment-001-ref.xht">=</a> </td>
<td></td>
<td>Region overflow
<ul class="assert">
<li>With the default overflow:visible setting, region-overflow:auto will continue composing lines through the bottom edge of the last region, and region-overflow:break will compose overflow lines after the bottom edge of the last region.</li>
</ul>
</td>
</tr>
<tr id="region-fragment-002-3.1" class="">
<td>
<a href="region-fragment-002.xht">region-fragment-002</a></td>
<td><a href="reference/region-fragment-002-ref.xht">=</a> </td>
<td></td>
<td>Region overflow: last region
<ul class="assert">
<li>The region-overflow setting only affects the last region in the chain.</li>
</ul>
</td>
</tr>
<tr id="region-styling-001-3.1" class="">
<td>
<a href="region-styling-001.xht">region-styling-001</a></td>
<td><a href="reference/region-styling-001-ref.xht">=</a> </td>
<td></td>
<td>Region Styling
<ul class="assert">
<li>Styling set in an @region rule overrides named flow element styling.</li>
</ul>
</td>
</tr>
<tr id="regions-dialog-001-3.1" class="dom">
<td>
<a href="regions-dialog-001.xht">regions-dialog-001</a></td>
<td><a href="reference/regions-dialog-001-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flowing content in dialog
<ul class="assert">
<li>Test checks that content is correctly flowed into dialog elements.</li>
</ul>
</td>
</tr>
<tr id="regions-dialog-002-3.1" class="dom">
<td>
<a href="regions-dialog-002.xht">regions-dialog-002</a></td>
<td><a href="reference/regions-dialog-002-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flowing dialog elements in region
<ul class="assert">
<li>Test checks that dialog elements are correctly flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="regions-flexbox-001-3.1" class="">
<td>
<a href="regions-flexbox-001.xht">regions-flexbox-001</a></td>
<td><a href="reference/regions-flexbox-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: flowing flexbox elements in region
<ul class="assert">
<li>Test that flex containers are flowed inside a namedflow.</li>
</ul>
</td>
</tr>
<tr id="regions-flexbox-002-3.1" class="ahem">
<td>
<a href="regions-flexbox-002.xht">regions-flexbox-002</a></td>
<td><a href="reference/regions-flexbox-001-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 flex containers with auto height are flowed inside a namedflow.</li>
</ul>
</td>
</tr>
<tr id="regions-flexbox-003-3.1" class="ahem">
<td>
<a href="regions-flexbox-003.xht">regions-flexbox-003</a></td>
<td><a href="reference/regions-flexbox-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: fixed sized region inside a fixed sized flexbox
<ul class="assert">
<li>Test that content is flowed in a region placed inside a flexbox.</li>
</ul>
</td>
</tr>
<tr id="regions-flexbox-004-3.1" class="ahem">
<td>
<a href="regions-flexbox-004.xht">regions-flexbox-004</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: fixed sized region inside an auto height flexbox
<ul class="assert">
<li>Test that content is flowed in a region placed inside a flexbox with auto-height.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-001-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-001.xht">regions-keyboard-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown events inside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-002-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-002.xht">regions-keyboard-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown events outside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-003-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-003.xht">regions-keyboard-events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeypress events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeypress events inside and outside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-004-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-004.xht">regions-keyboard-events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when a specific key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-005-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-005.xht">regions-keyboard-events-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events outside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events outside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-006-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-006.xht">regions-keyboard-events-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events using Delete key inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when the Delete key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-007-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-007.xht">regions-keyboard-events-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside multiple regions using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside multiple named flows should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-008-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-008.xht">regions-keyboard-events-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region and outside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-009-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-009.xht">regions-keyboard-events-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region using Tab key on page where normal document flow is reordered
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow on a page where the normal document flow is reordered should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-010-3.1" class="dom interact script">
<td>
<a href="regions-keyboard-events-010.xht">regions-keyboard-events-010</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-layers-001-3.1" class="ahem">
<td>
<a href="regions-layers-001.xht">regions-layers-001</a></td>
<td><a href="reference/regions-layers-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content in regions that have a non-auto z-index
<ul class="assert">
<li>Test checks that making the region create a stacking context by setting a non-auto z-index does not affect rendering of the content flowed in the region.</li>
</ul>
</td>
</tr>
<tr id="regions-layers-002-3.1" class="ahem">
<td>
<a href="regions-layers-002.xht">regions-layers-002</a></td>
<td><a href="reference/regions-layers-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content in regions that have opacity &lt; 1 with the content also having opacity &lt; 1
<ul class="assert">
<li>Test checks that region's opacity is properly composited with content opacity.</li>
</ul>
</td>
</tr>
<tr id="regions-layers-003-3.1" class="ahem">
<td>
<a href="regions-layers-003.xht">regions-layers-003</a></td>
<td><a href="reference/regions-layers-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content in regions that are absolutely positioned and have visual overflow
<ul class="assert">
<li>Test checks that region's visual overflow is displayed when region is absolutely positioned and has visual overflow.</li>
</ul>
</td>
</tr>
<tr id="regions-modal-dialog-001-3.1" class="dom">
<td>
<a href="regions-modal-dialog-001.xht">regions-modal-dialog-001</a></td>
<td><a href="reference/regions-modal-dialog-001-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flowing content in a modal dialog
<ul class="assert">
<li>Test checks that content is correctly flowed into modal dialog elements.</li>
</ul>
</td>
</tr>
<tr id="regions-modal-dialog-002-3.1" class="dom">
<td>
<a href="regions-modal-dialog-002.xht">regions-modal-dialog-002</a></td>
<td><a href="reference/regions-modal-dialog-002-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flowing modal dialog elements in region
<ul class="assert">
<li>Test checks that modal dialog elements are correctly flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-001-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-001.xht">regions-mouse-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onclick events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse onclick events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-002-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-002.xht">regions-mouse-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousedown events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousedown events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-003-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-003.xht">regions-mouse-events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousedown events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousedown events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-004-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-004.xht">regions-mouse-events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseup events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseup events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-005-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-005.xht">regions-mouse-events-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseup events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseup events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-006-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-006.xht">regions-mouse-events-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: ondblclick events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse ondblclick events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-007-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-007.xht">regions-mouse-events-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousemove events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousemove events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-008-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-008.xht">regions-mouse-events-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseover and onmouseout events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseover and onmouseout events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-009-3.1" class="dom interact script">
<td>
<a href="regions-mouse-events-009.xht">regions-mouse-events-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseover and onmouseout events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseover and onmouseout events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-003-3.1" class="ahem">
<td>
<a href="regions-multicol-003.xht">regions-multicol-003</a></td>
<td><a href="reference/regions-multicol-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow multi-column container, text content overflowing one region
<ul class="assert">
<li>This test checks that text content flows through a region maintaining the named flow multi-column container and that it overflows visibly into a third column.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-004-3.1" class="ahem">
<td>
<a href="regions-multicol-004.xht">regions-multicol-004</a></td>
<td><a href="reference/regions-multicol-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow, text content flowing into one multi-column region
<ul class="assert">
<li>This test checks that text content in a named flow is laid out using columns when flowed in a multi-column region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-006-3.1" class="ahem">
<td>
<a href="regions-multicol-006.xht">regions-multicol-006</a></td>
<td><a href="reference/regions-multicol-006-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow, text content - fragmented between multicol region and non-multicol region
<ul class="assert">
<li>This test checks that the named flow text content flows through the multi-column region in the region chain then through the second non-multicol region in the chain.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-008-3.1" class="">
<td>
<a href="regions-multicol-008.xht">regions-multicol-008</a></td>
<td><a href="reference/regions-multicol-008-ref.xht">=</a> </td>
<td></td>
<td>One named flow, non-text fragmentable content flowing into multi-column region then into non-multicol region
<ul class="assert">
<li>This test checks that non-text named flow contentmulti-column is fragmented first through the columns in a region multi-column container, then through a second non-multi-column region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-009-3.1" class="">
<td>
<a href="regions-multicol-009.xht">regions-multicol-009</a></td>
<td><a href="reference/regions-multicol-009-ref.xht">=</a> </td>
<td></td>
<td>One named flow, text content flowing into a simple region then into a multi-column region
<ul class="assert">
<li>This test checks that text named flow content is fragmented first through a simple region, then through a multi-column region</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-011-3.1" class="">
<td>
<a href="regions-multicol-011.xht">regions-multicol-011</a></td>
<td><a href="reference/regions-multicol-009-ref.xht">=</a> </td>
<td></td>
<td>One named flow, non-text fragmentable content flowing into non-mulicol region then into a multi-column region
<ul class="assert">
<li>This test checks that non-text fragmentable named flow content is fragmented through a simple region, then through a multi-column region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-012-3.1" class="">
<td>
<a href="regions-multicol-012.xht">regions-multicol-012</a></td>
<td><a href="reference/regions-multicol-012-ref.xht">=</a> </td>
<td></td>
<td>One named flow multi-column container, monolithic content flowing into one region
<ul class="assert">
<li>This test checks that monolithic content in a named flow multi-column container flows through the region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-013-3.1" class="ahem">
<td>
<a href="regions-multicol-013.xht">regions-multicol-013</a></td>
<td><a href="reference/regions-multicol-013-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow, text content flowing into multiple regions fragmented across multiple columns and overflowing the last region
<ul class="assert">
<li>This test checks that the named flow text content flows through the regions in the multi-column container and that it overflows visibly into a fourth column.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-015-3.1" class="ahem">
<td>
<a href="regions-multicol-015.xht">regions-multicol-015</a></td>
<td><a href="reference/regions-multicol-013-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow muticolumn container, text content flowing into multiple regions with content overflowing last region
<ul class="assert">
<li>This test checks that text content flows through multiple regions from the named flow multi-column container and that it overflows the last region in the region chain visibly.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-016-3.1" class="">
<td>
<a href="regions-multicol-016.xht">regions-multicol-016</a></td>
<td><a href="reference/regions-multicol-016-ref.xht">=</a> </td>
<td></td>
<td>One named flow multi-column container, monolithic content flowing into multiple regions
<ul class="assert">
<li>This test checks that monolithic content flows through multiple regions from the named flow multi-column container and that it overflows the last region in the region chain visibly into a fifth column.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-017-3.1" class="ahem">
<td>
<a href="regions-multicol-017.xht">regions-multicol-017</a></td>
<td><a href="reference/regions-multicol-017-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Multiple named flows, text content flowing into multiple regions in a multi-column container
<ul class="assert">
<li>This test checks multiple named flows with text content flow into multiple regions in the multi-column container.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-019-3.1" class="ahem">
<td>
<a href="regions-multicol-019.xht">regions-multicol-019</a></td>
<td><a href="reference/regions-multicol-019-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Multiple named flows multi-column containers, text content flowing into multiple visually overlapping regions
<ul class="assert">
<li>This test checks multiple named flow multi-column containers with text content flow into multiple overlapping regions.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-021-3.1" class="">
<td>
<a href="regions-multicol-021.xht">regions-multicol-021</a></td>
<td><a href="reference/regions-multicol-019-ref.xht">=</a> </td>
<td></td>
<td>Multiple named flows multi-column containers with unspecified width, non-text content flowing into multiple overlapping regions
<ul class="assert">
<li>This test checks multiple named flow multi-column containers with unspecified width and non-text content flow into multiple overlapping regions.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-001-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-001.xht">regions-resizing-001</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 region that has percentage size
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that is sized to a percentage of the body correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-002-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-002.xht">regions-resizing-002</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 region that has position:fixed and top/right/bottom/left set
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has position fixed and is sized using top/right/bottom/left correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-003-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-003.xht">regions-resizing-003</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 region that is sized using viewport units
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region sized using viewport units correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-004-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-004.xht">regions-resizing-004</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 auto-sized region
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing an auto-sized region correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-005-3.1" 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-006-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-006.xht">regions-resizing-006</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 region with percentage size inside a container that also has percentage size
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size relative to a percentage-sized parent correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-007-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-007.xht">regions-resizing-007</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 region with percentage size inside a container that has size set in viewport units
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size relative to a parent sized using viewport units correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-008-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-008.xht">regions-resizing-008</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 region with percentage size when content flowed in it also has percentage size
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size when the content flowed in it also has a percentage size set correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-009-3.1" 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-010-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-010.xht">regions-resizing-010</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 percent sized region when content flowed in it is floated
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing an percentage sized region when the content flowed in it is floated, correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-011-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-011.xht">regions-resizing-011</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 fixed sized region and percent-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 a fixed size size and the other has a percentage size correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-012-3.1" 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>
<tr id="regions-resizing-013-3.1" class="ahem dom http">
<td>
<a href="regions-resizing-013.xht">regions-resizing-013</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 region based on media query
<ul class="assert">
<li>Test checks that changing the size of a region via media queries correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-001-3.1" class="dom interact script">
<td>
<a href="regions-selection-001.xht">regions-selection-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends at the bottom of the region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse the movement.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-002-3.1" class="dom interact script">
<td>
<a href="regions-selection-002.xht">regions-selection-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends at the top of the region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-003-3.1" class="dom interact script">
<td>
<a href="regions-selection-003.xht">regions-selection-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends in the middle of region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-004-3.1" class="dom interact script">
<td>
<a href="regions-selection-004.xht">regions-selection-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends in the middle of region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-005-3.1" class="dom interact script">
<td>
<a href="regions-selection-005.xht">regions-selection-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection begins in the middle of the region and ends in the middle of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-006-3.1" class="dom interact script">
<td>
<a href="regions-selection-006.xht">regions-selection-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends in the middle of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-007-3.1" class="dom interact script">
<td>
<a href="regions-selection-007.xht">regions-selection-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends outside the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-008-3.1" class="dom interact script">
<td>
<a href="regions-selection-008.xht">regions-selection-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends outside the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-009-3.1" class="dom interact script">
<td>
<a href="regions-selection-009.xht">regions-selection-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends outside the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-010-3.1" class="dom interact script">
<td>
<a href="regions-selection-010.xht">regions-selection-010</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends outside the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-011-3.1" class="dom interact script">
<td>
<a href="regions-selection-011.xht">regions-selection-011</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends at the bottom of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-012-3.1" class="dom interact script">
<td>
<a href="regions-selection-012.xht">regions-selection-012</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends at the top the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-013-3.1" class="dom interact script">
<td>
<a href="regions-selection-013.xht">regions-selection-013</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends in the middle of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-014-3.1" class="dom interact script">
<td>
<a href="regions-selection-014.xht">regions-selection-014</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends in the middle of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-015-3.1" class="dom interact script">
<td>
<a href="regions-selection-015.xht">regions-selection-015</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins and ends outside of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-016-3.1" class="dom interact script">
<td>
<a href="regions-selection-016.xht">regions-selection-016</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins and ends outside of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-017-3.1" class="dom interact script">
<td>
<a href="regions-selection-017.xht">regions-selection-017</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing one other element - div
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-018-3.1" class="dom interact script">
<td>
<a href="regions-selection-018.xht">regions-selection-018</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing one other element - img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-019-3.1" class="dom interact script">
<td>
<a href="regions-selection-019.xht">regions-selection-019</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is upward, begins and ends inside a region containing one other element - div
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-020-3.1" class="dom interact script">
<td>
<a href="regions-selection-020.xht">regions-selection-020</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is upward, begins and ends inside a region containing one other element - img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-021-3.1" class="dom interact script">
<td>
<a href="regions-selection-021.xht">regions-selection-021</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing two other elements - div + img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-022-3.1" class="dom interact script">
<td>
<a href="regions-selection-022.xht">regions-selection-022</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection is upward, begins and ends inside a region containing two other elements - div + img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-023-3.1" class="dom interact script">
<td>
<a href="regions-selection-023.xht">regions-selection-023</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins inside a region and ends outside of it - both the region and the content after it have child elements
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-024-3.1" class="dom interact script">
<td>
<a href="regions-selection-024.xht">regions-selection-024</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection is upward, begins inside and ends outside a region - both the region and the before after it have child elements
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mousemovement, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-025-3.1" class="dom interact script">
<td>
<a href="regions-selection-025.xht">regions-selection-025</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>DOM order is different than the linear selection
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection should capture content in DOM order as it would without a named flow.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-001-3.1" class="ahem">
<td>
<a href="regions-stacking-context-001.xht">regions-stacking-context-001</a></td>
<td><a href="reference/regions-stacking-context-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions as part of the root stacking context
<ul class="assert">
<li>Test checks that regions respect stacking rules when part of the root stacking context.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-002-3.1" class="ahem">
<td>
<a href="regions-stacking-context-002.xht">regions-stacking-context-002</a></td>
<td><a href="reference/regions-stacking-context-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions as part of a non-root stacking context
<ul class="assert">
<li>Test checks that regions respect stacking rules when part of a non-root stacking context.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-003-3.1" class="ahem">
<td>
<a href="regions-stacking-context-003.xht">regions-stacking-context-003</a></td>
<td><a href="reference/regions-stacking-context-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions as part of the same stacking context as the node
<ul class="assert">
<li>Test checks that regions respect stacking and painting rules when both the region and the content nodes are part of the same, non-root stacking context.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-004-3.1" class="ahem">
<td>
<a href="regions-stacking-context-004.xht">regions-stacking-context-004</a></td>
<td><a href="reference/regions-stacking-context-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions create stacking contexts
<ul class="assert">
<li>Test checks that regions create stacking contexts for content flowed into them.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-005-3.1" class="ahem">
<td>
<a href="regions-stacking-context-005.xht">regions-stacking-context-005</a></td>
<td><a href="reference/regions-stacking-context-005-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions changing stacking order when as part of a stacking context
<ul class="assert">
<li>Test checks that regions stacking rules take precedence over content stacking rules.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-001-3.1" class="">
<td>
<a href="regions-transforms-001.xht">regions-transforms-001</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow (non-text) content
<ul class="assert">
<li>This test checks that the transform is applied to the named flow non-text content.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-002-3.1" class="">
<td>
<a href="regions-transforms-002.xht">regions-transforms-002</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow content element that has a child
<ul class="assert">
<li>This test checks that the child is transformed along with the parent when the transform is applied to a named flow content node</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-003-3.1" class="">
<td>
<a href="regions-transforms-003.xht">regions-transforms-003</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Named flow content that has a transformed parent outside of the named flow
<ul class="assert">
<li>This tests checks that when a transform is applied to a parent outside of the named flow but has child in the named flow, the child is not transformed along with the parent.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-004-3.1" class="">
<td>
<a href="regions-transforms-004.xht">regions-transforms-004</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed region using a 3D transform
<ul class="assert">
<li>This test checks that a 3D transform can be applied to a region</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-005-3.1" class="ahem">
<td>
<a href="regions-transforms-005.xht">regions-transforms-005</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: perspective set on the named flow content's parent does not apply when content flows into region
<ul class="assert">
<li>Test checks that content that has a 3D transform does not respect the perspective set on its parent when flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-006-3.1" class="ahem">
<td>
<a href="regions-transforms-006.xht">regions-transforms-006</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: 3D transform on region with named flow (text) content that overflows
<ul class="assert">
<li>Test checks that content flowed in a region and overflowing it is still rendered if the region has a 3D transform applied.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-007-3.1" class="ahem">
<td>
<a href="regions-transforms-007.xht">regions-transforms-007</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Transforms on both the named flow content and the region
<ul class="assert">
<li>Test checks that if both the content flowed in a region and the region have a transform applied, they are properly composed. More specifically, in this test the content should appear as rotated 180 degrees.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-008-3.1" class="ahem">
<td>
<a href="regions-transforms-008.xht">regions-transforms-008</a></td>
<td><a href="reference/regions-transforms-008-ref.xht">=</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-3.1" class="ahem">
<td>
<a href="regions-transforms-009.xht">regions-transforms-009</a></td>
<td><a href="reference/regions-transforms-008-ref.xht">=</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-010-3.1" class="">
<td>
<a href="regions-transforms-010.xht">regions-transforms-010</a></td>
<td><a href="reference/regions-transforms-010-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed region with position: relative
<ul class="assert">
<li>This test checks that the transform can be applied on relative positioned region.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-011-3.1" class="">
<td>
<a href="regions-transforms-011.xht">regions-transforms-011</a></td>
<td><a href="reference/regions-transforms-010-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed region where parent and child are separate named flow content nodes
<ul class="assert">
<li>This test checks that the region is transformed when a parent and its child are separate named flow content nodes flowing into it.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-012-3.1" class="">
<td>
<a href="regions-transforms-012.xht">regions-transforms-012</a></td>
<td><a href="reference/regions-transforms-010-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow content flowing into transformed region
<ul class="assert">
<li>This test checks that named flow text content is transformed when it flows into a region that is also transformed.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-013-3.1" class="">
<td>
<a href="regions-transforms-013.xht">regions-transforms-013</a></td>
<td><a href="reference/regions-transforms-013-alt-ref.xht">=</a> <a href="reference/regions-transforms-013-ref.xht">=</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-014-3.1" class="">
<td>
<a href="regions-transforms-014.xht">regions-transforms-014</a></td>
<td><a href="reference/regions-transforms-014-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transform region with position:absolute and transform-origin
<ul class="assert">
<li>This test checks that the transform and transform-origin are applied to a region with absolute positioning.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-015-3.1" class="">
<td>
<a href="regions-transforms-015.xht">regions-transforms-015</a></td>
<td><a href="reference/regions-transforms-014-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow (non-text) content with transform-origin and position: absolute
<ul class="assert">
<li>This test checks that the transform and transform-origin are applied to named flow content that flows into a region with absolute positioning.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-016-3.1" class="">
<td>
<a href="regions-transforms-016.xht">regions-transforms-016</a></td>
<td><a href="reference/regions-transforms-016-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: 3D transform on named flow content with perspective()
<ul class="assert">
<li>This test checks that a 3D transform is applied with perspective to named flow content.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-017-3.1" class="">
<td>
<a href="regions-transforms-017.xht">regions-transforms-017</a></td>
<td><a href="reference/regions-transforms-017-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Multiple transformed named flow content nodes that overflow a region
<ul class="assert">
<li>This test checks that multiple named flow content nodes are transformed into a region and that the overflow remains visible.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-018-3.1" class="ahem">
<td>
<a href="regions-transforms-018.xht">regions-transforms-018</a></td>
<td><a href="reference/regions-transforms-018-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: 3D transform on named flow (text) content that overflows a region
<ul class="assert">
<li>Test checks that content that is transformed does not clip when flowed in a region.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-019-3.1" class="ahem">
<td>
<a href="regions-transforms-019.xht">regions-transforms-019</a></td>
<td><a href="reference/regions-transforms-019-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: 3D transform on named flow (text) content with perspective property set on region
<ul class="assert">
<li>Test checks that the 3D transform is applied named content flow, that the perspective set on the region is applied, and that the content is not clipped when the perspective is shifted</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-020-3.1" class="">
<td>
<a href="regions-transforms-020.xht">regions-transforms-020</a></td>
<td><a href="reference/regions-transforms-020-ref.xht">=</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-3.1" class="">
<td>
<a href="regions-transforms-021.xht">regions-transforms-021</a></td>
<td><a href="reference/regions-transforms-020-ref.xht">=</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-3.1" class="ahem">
<td>
<a href="regions-transforms-022.xht">regions-transforms-022</a></td>
<td><a href="reference/regions-transforms-020-ref.xht">=</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>
<tr id="row-flexbox-break-3.1" 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>
<tr id="variable-width-001-3.1" class="">
<td>
<a href="variable-width-001.xht">variable-width-001</a></td>
<td><a href="reference/variable-width-001-ref.xht">=</a> </td>
<td></td>
<td>Variable-width Regions
<ul class="assert">
<li>The second region should lay out two of the content boxes.</li>
</ul>
</td>
</tr>
<tr id="video-001-3.1" class="">
<td>
<a href="video-001.xht">video-001</a></td>
<td></td>
<td></td>
<td>CSS Regions: flowing a video in a region
<ul class="assert">
<li>Test checks videos flowed in regions render smoothly and without artifacts.</li>
</ul>
</td>
</tr>
<tr id="visibility-regions-in-flexbox-3.1" class="ahem">
<td>
<a href="visibility-regions-in-flexbox.xht">visibility-regions-in-flexbox</a></td>
<td><a href="reference/visibility-regions-in-flexbox-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: collapsed region flex items
<ul class="assert">
<li>Test checks that the flexbox collapsed property works on flex items that are regions. The collapsed region item should not contribute to the flex container's width.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1.#content">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#element">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#propdef-flow-into">
<!-- 0 tests -->
</tbody>
<tbody id="s3.1.#specified-flow">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.2">+</a>
<a href="https://www.w3.org/TR/css3-regions/#flow-from">3.2 The flow-from property</a></th></tr>
<!-- 204 tests -->
<tr id="animations-001-3.2" class="ahem animated">
<td>
<a href="animations-001.xht">animations-001</a></td>
<td><a href="reference/animations-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="animated" title="Animated test">Animated</abbr></td>
<td>CSS Regions: animating content flowed into a region
<ul class="assert">
<li>Test checks that content that has an animated 3D transform renders and animates when flowed in a region.</li>
</ul>
</td>
</tr>
<tr id="autoheight-flexbox-001-3.2" 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-003-3.2" 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-3.2" 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-004-3.2" 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-3.2" 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-3.2" 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-3.2" 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-3.2" 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-006-3.2" 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-3.2" 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-3.2" 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>
<tr id="canvas3d-001-3.2" class="dom">
<td>
<a href="canvas3d-001.xht">canvas3d-001</a></td>
<td><a href="reference/canvas3d-001-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>CSS Regions: rendering 3D canvas elements inside regions
<ul class="assert">
<li>Test checks that when a 3D (webGL) canvas element is flowed in a region it renders as it would render if it wouldn't be flowed in the region.</li>
</ul>
</td>
</tr>
<tr id="canvas3d-002-3.2" class="dom">
<td>
<a href="canvas3d-002.xht">canvas3d-002</a></td>
<td><a href="reference/canvas3d-002-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>CSS Regions: rendering text flowed in a region on top of 3D content
<ul class="assert">
<li>Test checks that text flowed in a region renders without artifacts when the region overlaps a 3D (webGL) canvas element. This can be problematic in browsers that don't handle layers and/or 3D acceleration correctly.</li>
</ul>
</td>
</tr>
<tr id="column-flexbox-break-3.2" class="ahem">
<td>
<a href="column-flexbox-break.xht">column-flexbox-break</a></td>
<td><a href="reference/column-flexbox-break-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: fragmenting a flex container with column flow
<ul class="assert">
<li>Test checks that a flex container with column flow is fragmented between regions.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-001-3.2" class="ahem">
<td>
<a href="content-node-layers-001.xht">content-node-layers-001</a></td>
<td><a href="reference/content-node-layers-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content with opacity &lt; 1 in region
<ul class="assert">
<li>Test checks that content with opacity &lt; 1 is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-002-3.2" class="ahem">
<td>
<a href="content-node-layers-002.xht">content-node-layers-002</a></td>
<td><a href="reference/content-node-layers-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content with scrollbars in region
<ul class="assert">
<li>Test checks that content with scrollbars is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-003-3.2" class="ahem">
<td>
<a href="content-node-layers-003.xht">content-node-layers-003</a></td>
<td><a href="reference/content-node-layers-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content that's relatively positioned and get fragmented
<ul class="assert">
<li>Test checks that content that's relatively positioned gets properly fragmented between regions.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-004-3.2" class="ahem">
<td>
<a href="content-node-layers-004.xht">content-node-layers-004</a></td>
<td><a href="reference/content-node-layers-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content with opacity &lt; 1 and opacity = 1 in region
<ul class="assert">
<li>Test checks that content nodes with mixed opacity &lt; 1 and opacity = 1 is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing.</li>
</ul>
</td>
</tr>
<tr id="content-node-layers-005-3.2" class="ahem">
<td>
<a href="content-node-layers-005.xht">content-node-layers-005</a></td>
<td><a href="reference/content-node-layers-005-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content with position: absolute and clip
<ul class="assert">
<li>Test checks that absolutely positioned content that has the clip property applied is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing or the clipping shapes.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-001-3.2" class="dom interact">
<td>
<a href="contentEditable-001.xht">contenteditable-001</a></td>
<td><a href="reference/contentEditable-001-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on elements that get flowed in a region does not affect their rendering in the regions. Also, such elements should be editable just as they are outside of the region.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-002-3.2" class="dom interact">
<td>
<a href="contentEditable-002.xht">contenteditable-002</a></td>
<td><a href="reference/contentEditable-002-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has a child with contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on elements that get flowed in a region does not affect their rendering in the regions. Also, such elements should be editable just as they are outside of the region, even if they are not the only elements in the named flow.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-003-3.2" class="dom interact">
<td>
<a href="contentEditable-003.xht">contenteditable-003</a></td>
<td><a href="reference/contentEditable-003-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content is child of an element that has contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on the parent of an element that gets flowed in a region does not affect its rendering in the regions. Also, the element should be editable outside and inside the region without differences.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-004-3.2" class="dom interact">
<td>
<a href="contentEditable-004.xht">contenteditable-004</a></td>
<td><a href="reference/contentEditable-004-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: element has contentEditable attribute set and both it and a child of it are flowed in a the same region
<ul class="assert">
<li>Test checks that flowing both and element and one of its children in a region, when said element has the contentEditable attribute set does not affect their rendering in the regions and the ability to edit it.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-005-3.2" class="dom interact">
<td>
<a href="contentEditable-005.xht">contenteditable-005</a></td>
<td><a href="reference/contentEditable-005-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has contentEditable attribute set and is fragmented
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on elements that get flowed in a region does not affect their rendering and the ability to edit them even when they get fragmented in multiple regions.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-006-3.2" class="dom interact">
<td>
<a href="contentEditable-006.xht">contenteditable-006</a></td>
<td><a href="reference/contentEditable-006-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has contentEditable attribute set and is flowed in an auto-height region
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on elements that get flowed in a region does not affect their rendering in the regions. Also, if the region uses height:auto, the size of the region should change as the content flowed in it is edited.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-007-3.2" class="dom interact">
<td>
<a href="contentEditable-007.xht">contenteditable-007</a></td>
<td><a href="reference/contentEditable-007-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: named flow content has contentEditable attribute set and children of it get flowed in a region dynamically
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on an element does not interfere with its children being dinamically flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-008-3.2" class="dom interact">
<td>
<a href="contentEditable-008.xht">contenteditable-008</a></td>
<td><a href="reference/contentEditable-008-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: region element has contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on a region (an element that has flow-from set) does not prevent the element to becoming a region, nor does attempting to interactively edit it produces unexpected results.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-009-3.2" class="dom interact">
<td>
<a href="contentEditable-009.xht">contenteditable-009</a></td>
<td><a href="reference/contentEditable-008-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: region element has child with contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on a child of a region (an element that has flow-from set) does not prevent the parent element to becoming a region, nor does attempting to interactively edit it produces unexpected results.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-010-3.2" class="dom interact">
<td>
<a href="contentEditable-010.xht">contenteditable-010</a></td>
<td><a href="reference/contentEditable-010-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: auto-size region with contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on an auto-sized region (an element that has flow-from set) does not prevent it to becoming a region, nor does attempting to interactively edit it produces unexpected results.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-011-3.2" class="dom interact">
<td>
<a href="contentEditable-011.xht">contenteditable-011</a></td>
<td><a href="reference/contentEditable-011-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: both named flow content and region element have contentEditable attribute set
<ul class="assert">
<li>Test checks that setting the contentEditable attribute on both named flow content (an element that has flow-into set) and the region (an element that has flow-from set) does not prevent the region to properly flowing the content, while the content stays editable and no unexpected interactions happen.</li>
</ul>
</td>
</tr>
<tr id="contenteditable-012-3.2" class="ahem dom interact">
<td>
<a href="contentEditable-012.xht">contenteditable-012</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: regions are children of an element with the contentEditable attribute set
<ul class="assert">
<li>Test checks that children of an element that has the contentEditable attribute can be used for flowing content into and interactively duplicating the regions (via user-initiated copy/paste) properly flows the content in the newly created regions. Properly executing this test requires an user agent that supports copy/paste operations.</li>
</ul>
</td>
</tr>
<tr id="css-cursor-001-3.2" class="ahem interact">
<td>
<a href="css-cursor-001.xht">css-cursor-001</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: CSS cursor on content node
<ul class="assert">
<li>CSS cursors are properly displayed for content flowed into regions.</li>
</ul>
</td>
</tr>
<tr id="css-cursor-002-3.2" class="ahem interact">
<td>
<a href="css-cursor-002.xht">css-cursor-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: CSS cursor on region
<ul class="assert">
<li>CSS cursors are properly displayed even when an element is turned into a region</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-001-3.2" class="interact">
<td>
<a href="css-hover-on-content-001.xht">css-hover-on-content-001</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on content nodes
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to content nodes</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-002-3.2" class="ahem interact">
<td>
<a href="css-hover-on-content-002.xht">css-hover-on-content-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on content node parent when the parent is in the named flow and rendered as a sibling of its child
<ul class="assert">
<li>CSS properties set through rules that use the :hover pseudo-class on an element are properly propagated to children that are flowed into regions even when they're visually rendered as siblings</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-003-3.2" class="interact">
<td>
<a href="css-hover-on-content-003.xht">css-hover-on-content-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on content node parent when the parent is not in the named flow
<ul class="assert">
<li>CSS properties set through rules that use the :hover pseudo-class on an element are properly propagated to children that are flowed into regions</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-004-3.2" class="interact">
<td>
<a href="css-hover-on-content-004.xht">css-hover-on-content-004</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on content node when the content node has position:fixed
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to content nodes that have position:fixed.</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-content-005-3.2" class="interact">
<td>
<a href="css-hover-on-content-005.xht">css-hover-on-content-005</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS :hover on content node when the content node has position:relative
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to content nodes that are relatively positioned</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-region-001-3.2" class="interact">
<td>
<a href="css-hover-on-region-001.xht">css-hover-on-region-001</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on region that has borders
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region border</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-region-002-3.2" class="interact">
<td>
<a href="css-hover-on-region-002.xht">css-hover-on-region-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on regions that have padding
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region padding</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-region-003-3.2" class="interact">
<td>
<a href="css-hover-on-region-003.xht">css-hover-on-region-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on region when content nodes are relatively positioned
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to regions when moving the mouse over the region and the content flowed in it is relatively positioned. Also, the :hover rules for the content do not apply when moving the mouse over the box placeholder.</li>
</ul>
</td>
</tr>
<tr id="css-hover-on-region-004-3.2" class="interact">
<td>
<a href="css-hover-on-region-004.xht">css-hover-on-region-004</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: :hover on regions that have rounded corners
<ul class="assert">
<li>CSS rules using the :hover pseudo class are applied to regions that have rounded borders.</li>
</ul>
</td>
</tr>
<tr id="elementfrompoint-001-3.2" class="dom interact script">
<td>
<a href="elementFromPoint-001.xht">elementfrompoint-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: document.elementFromPoint() on for elements that get split between regions
<ul class="assert">
<li>document.elementFromPoint() should return the correct element when provided with coordinates of points inside content fragments</li>
</ul>
</td>
</tr>
<tr id="elementfrompoint-002-3.2" class="dom interact script">
<td>
<a href="elementFromPoint-002.xht">elementfrompoint-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: document.elementFromPoint() for elements flowed into regions
<ul class="assert">
<li>document.elementFromPoint() should return the correct element when provided with coordinates of points corresponding to elements flowed into regions</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-001-3.2" class="interact">
<td>
<a href="flow-change-on-hover-001.xht">flow-change-on-hover-001</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Changing an element's named flow when hovering over its parent
<ul class="assert">
<li>Changing the named flow an element is extracted in using a rule that contains the :hover pseudoclass should be possible</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-002-3.2" class="interact">
<td>
<a href="flow-change-on-hover-002.xht">flow-change-on-hover-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Changing an element's named flow when hovering over a sibling
<ul class="assert">
<li>Changing the named flow an element is extracted in using a rule that contains the :hover pseudoclass should be possible</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-003-3.2" class="ahem interact">
<td>
<a href="flow-change-on-hover-003.xht">flow-change-on-hover-003</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove child element from named flow on CSS hover when parent and child are rendered as siblings in region
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-004-3.2" class="ahem interact">
<td>
<a href="flow-change-on-hover-004.xht">flow-change-on-hover-004</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove child element from named flow on CSS hover
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-005-3.2" class="ahem interact">
<td>
<a href="flow-change-on-hover-005.xht">flow-change-on-hover-005</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove element from named flow on CSS hover
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="flow-change-on-hover-006-3.2" class="ahem interact">
<td>
<a href="flow-change-on-hover-006.xht">flow-change-on-hover-006</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove element sibling from named flow on CSS hover
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="flow-content-001-3.2" class="">
<td>
<a href="flow-content-001.xht">flow-content-001</a></td>
<td><a href="reference/flow-content-001-ref.xht">=</a> </td>
<td></td>
<td>Redirect content to a region
<ul class="assert">
<li>Content placed into a named flow with the flow-into property should display in the element whose flow-from property specifies that named flow.</li>
</ul>
</td>
</tr>
<tr id="flow-content-002-3.2" class="">
<td>
<a href="flow-content-002.xht">flow-content-002</a></td>
<td><a href="reference/flow-content-002-ref.xht">=</a> </td>
<td></td>
<td>Redirect content through two regions
<ul class="assert">
<li>If multiple elements have their flow-from property set to a named flow, the named flow content will be consumed by the chain of elements.</li>
</ul>
</td>
</tr>
<tr id="flow-from-001-3.2" class="">
<td>
<a href="flow-from-001.xht">flow-from-001</a></td>
<td><a href="reference/flow-from-001-ref.xht">=</a> </td>
<td></td>
<td>Region chain ordering
<ul class="assert">
<li>Regions are ordered in a region chain according to their document order.</li>
</ul>
</td>
</tr>
<tr id="flow-from-block-container-001-3.2" class="">
<td>
<a href="flow-from-block-container-001.xht">flow-from-block-container-001</a></td>
<td><a href="reference/flow-from-block-container-001-ref.xht">=</a> </td>
<td></td>
<td>Regions apply only to block container boxes
<ul class="assert">
<li>If a span has flow-from set, that declaration is ignored.</li>
</ul>
</td>
</tr>
<tr id="flow-into-bfc-001-3.2" class="">
<td>
<a href="flow-into-BFC-001.xht">flow-into-bfc-001</a></td>
<td><a href="reference/flow-into-BFC-001-ref.xht">=</a> </td>
<td></td>
<td>Regions establish a new block formatting context
<ul class="assert">
<li>A region set next to a float will clear the float in a new block formatting context.</li>
</ul>
</td>
</tr>
<tr id="flow-into-parsing-001-3.2" class="dom script">
<td>
<a href="flow-into-parsing-001.xht">flow-into-parsing-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Parse flow-into property
<ul class="assert">
<li>Value specified for the flow-into property should be parsed correctly.</li>
</ul>
</td>
</tr>
<tr id="flow-into-region-children-001-3.2" class="">
<td>
<a href="flow-into-region-children-001.xht">flow-into-region-children-001</a></td>
<td><a href="reference/flow-into-region-children-001-ref.xht">=</a> </td>
<td></td>
<td>Region children are formatted if directed to a flow
<ul class="assert">
<li>The two regions in this test will swap their children.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-001-3.2" class="dom interact">
<td>
<a href="fullscreen-region-content-001.xht">fullscreen-region-content-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on video element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a video element that's part of a named flow properly displays the video in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-002-3.2" class="dom interact">
<td>
<a href="fullscreen-region-content-002.xht">fullscreen-region-content-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on image element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on an image element that's part of a named flow properly displays the image in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-003-3.2" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-003.xht">fullscreen-region-content-003</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on inline element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on an inline element that's part of a named flow properly displays it in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-004-3.2" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-004.xht">fullscreen-region-content-004</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on block element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a block element that's part of a named flow properly displays it in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-005-3.2" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-005.xht">fullscreen-region-content-005</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on a fragmented block element inside a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a block element that's part of a named flow and is fragmented displays both fragments it in full screen</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-006-3.2" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-006.xht">fullscreen-region-content-006</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on an element whose descendants are in a named flow
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on an element whose descendants are part of a named flow will not show the descendants flowed in the region.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-007-3.2" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-007.xht">fullscreen-region-content-007</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on a fixed-size region
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a fixed-size region displays the region and the content flowed in it without resizing the region or reflowing the content.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-008-3.2" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-008.xht">fullscreen-region-content-008</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on an auto-sized region
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on an auto-sized region displays the region and the content flowed in it without resizing the window or reflowing the content.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-009-3.2" class="ahem dom interact">
<td>
<a href="fullscreen-region-content-009.xht">fullscreen-region-content-009</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>using the :full-screen pseudo class to make a full-screen region auto-size
<ul class="assert">
<li>This test checks that using the :full-screen pseudo class to make a region auto-sized works after calling the requestFullscreen() method on a fixed size region.</li>
</ul>
</td>
</tr>
<tr id="fullscreen-region-content-010-3.2" class="ahem interact">
<td>
<a href="fullscreen-region-content-010.xht">fullscreen-region-content-010</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>calling requestFullscreen() on a region that's part of a multiple regions region chain
<ul class="assert">
<li>This test checks that calling the requestFullscreen() method on a region that is part of a multiple-regions region chain does not change the order in which content is flowed through the region chain.</li>
</ul>
</td>
</tr>
<tr id="iframe-001-3.2" class="ahem">
<td>
<a href="iframe-001.xht">iframe-001</a></td>
<td><a href="reference/iframe-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: flowing an iframe that loads content with 3D transform
<ul class="assert">
<li>Test checks that flowing an iframe that loads content with 3D transforms in a region renders without artifacts.</li>
</ul>
</td>
</tr>
<tr id="javascript-stacking-context-001-3.2" class="ahem script">
<td>
<a href="javascript-stacking-context-001.xht">javascript-stacking-context-001</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>document.elementFromPoint() for overlapping, positioned regions with non-auto z-index
<ul class="assert">
<li>Test checks that document.elementFromPoint() returns the correct region when multiple regions are absolutely positioned, overlap and have non-auto z-index.</li>
</ul>
</td>
</tr>
<tr id="javascript-stacking-context-002-3.2" class="ahem">
<td>
<a href="javascript-stacking-context-002.xht">javascript-stacking-context-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>JavaScript event handlers on overlapping, positioned regions with non-auto z-index
<ul class="assert">
<li>Test checks that JavaScript event handlers set on regions trigger when multiple regions are absolutely positioned, overlap and have non-auto z-index.</li>
</ul>
</td>
</tr>
<tr id="mouse-events-001-3.2" class="dom interact">
<td>
<a href="mouse-events-001.xht">mouse-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: mouse events don't trigger for region children
<ul class="assert">
<li>Children of regions (elements with flow-from) are removed from the document flow and JavaScript event handlers set on them should not fire</li>
</ul>
</td>
</tr>
<tr id="mouse-events-002-3.2" class="dom interact">
<td>
<a href="mouse-events-002.xht">mouse-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: mouse events on contents node made up by unknown tags
<ul class="assert">
<li>Mouse event handlers set on content nodes, even if they're unknown elements should fire</li>
</ul>
</td>
</tr>
<tr id="mouse-events-003-3.2" class="dom interact">
<td>
<a href="mouse-events-003.xht">mouse-events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: mouse over DOM location of content flowed in a region
<ul class="assert">
<li>Mouse events should not fire over the would-be location of the content nodes (where they would have been rendered were they not flowed in a region)</li>
</ul>
</td>
</tr>
<tr id="mouse-events-004-3.2" class="dom interact">
<td>
<a href="mouse-events-004.xht">mouse-events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Removing content nodes on mouse events
<ul class="assert">
<li>Altering the contents of the named flow via DOM manipulation in response to user gestures (mouse move, mouse click) should works as without regions.</li>
</ul>
</td>
</tr>
<tr id="mouse-events-005-3.2" class="interact">
<td>
<a href="mouse-events-005.xht">mouse-events-005</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Adding and removing regions on mouse events
<ul class="assert">
<li>Altering the region chain via DOM manipulation in response to user gestures should not change the rendering of the content inside regions</li>
</ul>
</td>
</tr>
<tr id="overflow-and-elementfrompoint-001-3.2" class="dom interact">
<td>
<a href="overflow-and-elementFromPoint-001.xht">overflow-and-elementfrompoint-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: document.elementFromPoint() for elements in a region's hidden overflow
<ul class="assert">
<li>For regions that have hidden overflow calling document.elementFromPoint() on the location of the element should not return the element</li>
</ul>
</td>
</tr>
<tr id="overflow-and-elementfrompoint-002-3.2" class="dom interact">
<td>
<a href="overflow-and-elementFromPoint-002.xht">overflow-and-elementfrompoint-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: document.elementFromPoint() for elements in a region's scroll overflow
<ul class="assert">
<li>For regions that have scroll overflow, scrolling an element flowed in them into view and then calling document.elementFromPoint() on the visible location of the element should return the element</li>
</ul>
</td>
</tr>
<tr id="overflow-and-elementfrompoint-003-3.2" class="dom interact">
<td>
<a href="overflow-and-elementFromPoint-003.xht">overflow-and-elementfrompoint-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: document.elementFromPoint() for elements in a region's visible overflow
<ul class="assert">
<li>For regions that have visible overflow calling document.elementFromPoint() on the visible location of the element should return the element</li>
</ul>
</td>
</tr>
<tr id="overflow-and-events-001-3.2" class="dom interact">
<td>
<a href="overflow-and-events-001.xht">overflow-and-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: JavaScript event handlers for elements in a region's hidden overflow
<ul class="assert">
<li>For regions that have hidden overflow, JavaScript events on elements that are in the hidden overflow should not trigger</li>
</ul>
</td>
</tr>
<tr id="overflow-and-events-002-3.2" class="dom interact">
<td>
<a href="overflow-and-events-002.xht">overflow-and-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: JavaScript event handlers for elements in a region's scroll overflow
<ul class="assert">
<li>For regions that have scroll overflow, JavaScript events on elements that are in the scrollable overflow should trigger once the element is scrolled into view and the corresponding user gesture is made</li>
</ul>
</td>
</tr>
<tr id="overflow-and-events-003-3.2" class="interact">
<td>
<a href="overflow-and-events-003.xht">overflow-and-events-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Mouse events in visible overflow of a region
<ul class="assert">
<li>Mouse events set up on elements displayed in a region's visible overflow should trigger</li>
</ul>
</td>
</tr>
<tr id="overflow-and-selection-001-3.2" class="interact">
<td>
<a href="overflow-and-selection-001.xht">overflow-and-selection-001</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Selection for elements in a region's hidden overflow
<ul class="assert">
<li>For regions that have hidden overflow, the contents in the hidden overflow should not be scrollable or selectable</li>
</ul>
</td>
</tr>
<tr id="overflow-and-selection-002-3.2" class="interact">
<td>
<a href="overflow-and-selection-002.xht">overflow-and-selection-002</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Selection for elements in a region's scroll overflow
<ul class="assert">
<li>For regions that have scroll overflow, their content should be scrollable into view and selectable as without regions</li>
</ul>
</td>
</tr>
<tr id="overflow-and-selection-003-3.2" class="interact">
<td>
<a href="overflow-and-selection-003.xht">overflow-and-selection-003</a></td>
<td></td>
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Selection for elements in a region's visible overflow
<ul class="assert">
<li>For regions that have visible overflow, their content should be selectable as without regions</li>
</ul>
</td>
</tr>
<tr id="position-relative-001-3.2" class="ahem">
<td>
<a href="position-relative-001.xht">position-relative-001</a></td>
<td><a href="reference/position-relative-001-ref.xht">=</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="region-chain-change-on-hover-001-3.2" class="ahem interact">
<td>
<a href="region-chain-change-on-hover-001.xht">region-chain-change-on-hover-001</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove element from named flow when hovering the region
<ul class="assert">
<li>Changing the flow-into property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="region-chain-change-on-hover-002-3.2" class="ahem interact">
<td>
<a href="region-chain-change-on-hover-002.xht">region-chain-change-on-hover-002</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove region from region chain on CSS :hover
<ul class="assert">
<li>Changing the flow-from property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="region-chain-change-on-hover-003-3.2" class="ahem interact">
<td>
<a href="region-chain-change-on-hover-003.xht">region-chain-change-on-hover-003</a></td>
<td></td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
<td>CSS Regions: Remove region from region chain on CSS hover
<ul class="assert">
<li>Changing the flow-from property should be possible in rules that use the :hover pseudoclass</li>
</ul>
</td>
</tr>
<tr id="region-fragment-001-3.2" class="">
<td>
<a href="region-fragment-001.xht">region-fragment-001</a></td>
<td><a href="reference/region-fragment-001-ref.xht">=</a> </td>
<td></td>
<td>Region overflow
<ul class="assert">
<li>With the default overflow:visible setting, region-overflow:auto will continue composing lines through the bottom edge of the last region, and region-overflow:break will compose overflow lines after the bottom edge of the last region.</li>
</ul>
</td>
</tr>
<tr id="region-fragment-002-3.2" class="">
<td>
<a href="region-fragment-002.xht">region-fragment-002</a></td>
<td><a href="reference/region-fragment-002-ref.xht">=</a> </td>
<td></td>
<td>Region overflow: last region
<ul class="assert">
<li>The region-overflow setting only affects the last region in the chain.</li>
</ul>
</td>
</tr>
<tr id="region-stacking-context-001-3.2" class="">
<td>
<a href="region-stacking-context-001.xht">region-stacking-context-001</a></td>
<td><a href="reference/region-stacking-context-001-ref.xht">=</a> </td>
<td></td>
<td>Regions create new stacking context
<ul class="assert">
<li>The z-index set on region content does not affect how they are stacked with siblings of the region.</li>
</ul>
</td>
</tr>
<tr id="region-styling-001-3.2" class="">
<td>
<a href="region-styling-001.xht">region-styling-001</a></td>
<td><a href="reference/region-styling-001-ref.xht">=</a> </td>
<td></td>
<td>Region Styling
<ul class="assert">
<li>Styling set in an @region rule overrides named flow element styling.</li>
</ul>
</td>
</tr>
<tr id="regions-dialog-001-3.2" class="dom">
<td>
<a href="regions-dialog-001.xht">regions-dialog-001</a></td>
<td><a href="reference/regions-dialog-001-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flowing content in dialog
<ul class="assert">
<li>Test checks that content is correctly flowed into dialog elements.</li>
</ul>
</td>
</tr>
<tr id="regions-dialog-002-3.2" class="dom">
<td>
<a href="regions-dialog-002.xht">regions-dialog-002</a></td>
<td><a href="reference/regions-dialog-002-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flowing dialog elements in region
<ul class="assert">
<li>Test checks that dialog elements are correctly flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="regions-flexbox-001-3.2" class="">
<td>
<a href="regions-flexbox-001.xht">regions-flexbox-001</a></td>
<td><a href="reference/regions-flexbox-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: flowing flexbox elements in region
<ul class="assert">
<li>Test that flex containers are flowed inside a namedflow.</li>
</ul>
</td>
</tr>
<tr id="regions-flexbox-002-3.2" class="ahem">
<td>
<a href="regions-flexbox-002.xht">regions-flexbox-002</a></td>
<td><a href="reference/regions-flexbox-001-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 flex containers with auto height are flowed inside a namedflow.</li>
</ul>
</td>
</tr>
<tr id="regions-flexbox-003-3.2" class="ahem">
<td>
<a href="regions-flexbox-003.xht">regions-flexbox-003</a></td>
<td><a href="reference/regions-flexbox-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: fixed sized region inside a fixed sized flexbox
<ul class="assert">
<li>Test that content is flowed in a region placed inside a flexbox.</li>
</ul>
</td>
</tr>
<tr id="regions-flexbox-004-3.2" class="ahem">
<td>
<a href="regions-flexbox-004.xht">regions-flexbox-004</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: fixed sized region inside an auto height flexbox
<ul class="assert">
<li>Test that content is flowed in a region placed inside a flexbox with auto-height.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-001-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-001.xht">regions-keyboard-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown events inside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-002-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-002.xht">regions-keyboard-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown events outside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-003-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-003.xht">regions-keyboard-events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeypress events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeypress events inside and outside a named flow should be raised when any key is pressed.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-004-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-004.xht">regions-keyboard-events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when a specific key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-005-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-005.xht">regions-keyboard-events-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events outside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events outside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-006-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-006.xht">regions-keyboard-events-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events using Delete key inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when the Delete key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-007-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-007.xht">regions-keyboard-events-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside multiple regions using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside multiple named flows should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-008-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-008.xht">regions-keyboard-events-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region and outside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-009-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-009.xht">regions-keyboard-events-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region using Tab key on page where normal document flow is reordered
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside and outside a named flow on a page where the normal document flow is reordered should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-keyboard-events-010-3.2" class="dom interact script">
<td>
<a href="regions-keyboard-events-010.xht">regions-keyboard-events-010</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onkeydown and onkeyup events inside region using Tab key in forms
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onkeydown and onkeyup events inside a named flow should be raised when the Tab key is pressed and released.</li>
</ul>
</td>
</tr>
<tr id="regions-layers-001-3.2" class="ahem">
<td>
<a href="regions-layers-001.xht">regions-layers-001</a></td>
<td><a href="reference/regions-layers-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content in regions that have a non-auto z-index
<ul class="assert">
<li>Test checks that making the region create a stacking context by setting a non-auto z-index does not affect rendering of the content flowed in the region.</li>
</ul>
</td>
</tr>
<tr id="regions-layers-002-3.2" class="ahem">
<td>
<a href="regions-layers-002.xht">regions-layers-002</a></td>
<td><a href="reference/regions-layers-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content in regions that have opacity &lt; 1 with the content also having opacity &lt; 1
<ul class="assert">
<li>Test checks that region's opacity is properly composited with content opacity.</li>
</ul>
</td>
</tr>
<tr id="regions-layers-003-3.2" class="ahem">
<td>
<a href="regions-layers-003.xht">regions-layers-003</a></td>
<td><a href="reference/regions-layers-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>flowing content in regions that are absolutely positioned and have visual overflow
<ul class="assert">
<li>Test checks that region's visual overflow is displayed when region is absolutely positioned and has visual overflow.</li>
</ul>
</td>
</tr>
<tr id="regions-modal-dialog-001-3.2" class="dom">
<td>
<a href="regions-modal-dialog-001.xht">regions-modal-dialog-001</a></td>
<td><a href="reference/regions-modal-dialog-001-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flowing content in a modal dialog
<ul class="assert">
<li>Test checks that content is correctly flowed into modal dialog elements.</li>
</ul>
</td>
</tr>
<tr id="regions-modal-dialog-002-3.2" class="dom">
<td>
<a href="regions-modal-dialog-002.xht">regions-modal-dialog-002</a></td>
<td><a href="reference/regions-modal-dialog-002-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
<td>flowing modal dialog elements in region
<ul class="assert">
<li>Test checks that modal dialog elements are correctly flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-001-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-001.xht">regions-mouse-events-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onclick events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse onclick events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-002-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-002.xht">regions-mouse-events-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousedown events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousedown events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-003-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-003.xht">regions-mouse-events-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousedown events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousedown events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-004-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-004.xht">regions-mouse-events-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseup events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseup events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-005-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-005.xht">regions-mouse-events-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseup events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseup events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-006-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-006.xht">regions-mouse-events-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: ondblclick events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse ondblclick events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-007-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-007.xht">regions-mouse-events-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmousemove events inside region and outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmousemove events inside and outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-008-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-008.xht">regions-mouse-events-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseover and onmouseout events inside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseover and onmouseout events inside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-mouse-events-009-3.2" class="dom interact script">
<td>
<a href="regions-mouse-events-009.xht">regions-mouse-events-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: onmouseover and onmouseout events outside region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, onmouseover and onmouseout events outside a named flow should function correctly.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-003-3.2" class="ahem">
<td>
<a href="regions-multicol-003.xht">regions-multicol-003</a></td>
<td><a href="reference/regions-multicol-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow multi-column container, text content overflowing one region
<ul class="assert">
<li>This test checks that text content flows through a region maintaining the named flow multi-column container and that it overflows visibly into a third column.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-004-3.2" class="ahem">
<td>
<a href="regions-multicol-004.xht">regions-multicol-004</a></td>
<td><a href="reference/regions-multicol-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow, text content flowing into one multi-column region
<ul class="assert">
<li>This test checks that text content in a named flow is laid out using columns when flowed in a multi-column region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-006-3.2" class="ahem">
<td>
<a href="regions-multicol-006.xht">regions-multicol-006</a></td>
<td><a href="reference/regions-multicol-006-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow, text content - fragmented between multicol region and non-multicol region
<ul class="assert">
<li>This test checks that the named flow text content flows through the multi-column region in the region chain then through the second non-multicol region in the chain.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-008-3.2" class="">
<td>
<a href="regions-multicol-008.xht">regions-multicol-008</a></td>
<td><a href="reference/regions-multicol-008-ref.xht">=</a> </td>
<td></td>
<td>One named flow, non-text fragmentable content flowing into multi-column region then into non-multicol region
<ul class="assert">
<li>This test checks that non-text named flow contentmulti-column is fragmented first through the columns in a region multi-column container, then through a second non-multi-column region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-009-3.2" class="">
<td>
<a href="regions-multicol-009.xht">regions-multicol-009</a></td>
<td><a href="reference/regions-multicol-009-ref.xht">=</a> </td>
<td></td>
<td>One named flow, text content flowing into a simple region then into a multi-column region
<ul class="assert">
<li>This test checks that text named flow content is fragmented first through a simple region, then through a multi-column region</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-011-3.2" class="">
<td>
<a href="regions-multicol-011.xht">regions-multicol-011</a></td>
<td><a href="reference/regions-multicol-009-ref.xht">=</a> </td>
<td></td>
<td>One named flow, non-text fragmentable content flowing into non-mulicol region then into a multi-column region
<ul class="assert">
<li>This test checks that non-text fragmentable named flow content is fragmented through a simple region, then through a multi-column region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-012-3.2" class="">
<td>
<a href="regions-multicol-012.xht">regions-multicol-012</a></td>
<td><a href="reference/regions-multicol-012-ref.xht">=</a> </td>
<td></td>
<td>One named flow multi-column container, monolithic content flowing into one region
<ul class="assert">
<li>This test checks that monolithic content in a named flow multi-column container flows through the region.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-013-3.2" class="ahem">
<td>
<a href="regions-multicol-013.xht">regions-multicol-013</a></td>
<td><a href="reference/regions-multicol-013-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow, text content flowing into multiple regions fragmented across multiple columns and overflowing the last region
<ul class="assert">
<li>This test checks that the named flow text content flows through the regions in the multi-column container and that it overflows visibly into a fourth column.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-015-3.2" class="ahem">
<td>
<a href="regions-multicol-015.xht">regions-multicol-015</a></td>
<td><a href="reference/regions-multicol-013-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>One named flow muticolumn container, text content flowing into multiple regions with content overflowing last region
<ul class="assert">
<li>This test checks that text content flows through multiple regions from the named flow multi-column container and that it overflows the last region in the region chain visibly.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-016-3.2" class="">
<td>
<a href="regions-multicol-016.xht">regions-multicol-016</a></td>
<td><a href="reference/regions-multicol-016-ref.xht">=</a> </td>
<td></td>
<td>One named flow multi-column container, monolithic content flowing into multiple regions
<ul class="assert">
<li>This test checks that monolithic content flows through multiple regions from the named flow multi-column container and that it overflows the last region in the region chain visibly into a fifth column.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-017-3.2" class="ahem">
<td>
<a href="regions-multicol-017.xht">regions-multicol-017</a></td>
<td><a href="reference/regions-multicol-017-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Multiple named flows, text content flowing into multiple regions in a multi-column container
<ul class="assert">
<li>This test checks multiple named flows with text content flow into multiple regions in the multi-column container.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-019-3.2" class="ahem">
<td>
<a href="regions-multicol-019.xht">regions-multicol-019</a></td>
<td><a href="reference/regions-multicol-019-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>Multiple named flows multi-column containers, text content flowing into multiple visually overlapping regions
<ul class="assert">
<li>This test checks multiple named flow multi-column containers with text content flow into multiple overlapping regions.</li>
</ul>
</td>
</tr>
<tr id="regions-multicol-021-3.2" class="">
<td>
<a href="regions-multicol-021.xht">regions-multicol-021</a></td>
<td><a href="reference/regions-multicol-019-ref.xht">=</a> </td>
<td></td>
<td>Multiple named flows multi-column containers with unspecified width, non-text content flowing into multiple overlapping regions
<ul class="assert">
<li>This test checks multiple named flow multi-column containers with unspecified width and non-text content flow into multiple overlapping regions.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-001-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-001.xht">regions-resizing-001</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 region that has percentage size
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that is sized to a percentage of the body correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-002-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-002.xht">regions-resizing-002</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 region that has position:fixed and top/right/bottom/left set
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has position fixed and is sized using top/right/bottom/left correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-003-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-003.xht">regions-resizing-003</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 region that is sized using viewport units
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region sized using viewport units correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-004-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-004.xht">regions-resizing-004</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 auto-sized region
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing an auto-sized region correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-005-3.2" 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-006-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-006.xht">regions-resizing-006</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 region with percentage size inside a container that also has percentage size
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size relative to a percentage-sized parent correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-007-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-007.xht">regions-resizing-007</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 region with percentage size inside a container that has size set in viewport units
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size relative to a parent sized using viewport units correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-008-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-008.xht">regions-resizing-008</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 region with percentage size when content flowed in it also has percentage size
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing a region that has a percentage size when the content flowed in it also has a percentage size set correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-009-3.2" 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-010-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-010.xht">regions-resizing-010</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 percent sized region when content flowed in it is floated
<ul class="assert">
<li>Test checks that resizing the viewport of a page containing an percentage sized region when the content flowed in it is floated, correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-011-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-011.xht">regions-resizing-011</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 fixed sized region and percent-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 a fixed size size and the other has a percentage size correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-resizing-012-3.2" 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>
<tr id="regions-resizing-013-3.2" class="ahem dom http">
<td>
<a href="regions-resizing-013.xht">regions-resizing-013</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 region based on media query
<ul class="assert">
<li>Test checks that changing the size of a region via media queries correctly relayouts the region's contents.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-001-3.2" class="dom interact script">
<td>
<a href="regions-selection-001.xht">regions-selection-001</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends at the bottom of the region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse the movement.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-002-3.2" class="dom interact script">
<td>
<a href="regions-selection-002.xht">regions-selection-002</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends at the top of the region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-003-3.2" class="dom interact script">
<td>
<a href="regions-selection-003.xht">regions-selection-003</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends in the middle of region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-004-3.2" class="dom interact script">
<td>
<a href="regions-selection-004.xht">regions-selection-004</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends in the middle of region
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-005-3.2" class="dom interact script">
<td>
<a href="regions-selection-005.xht">regions-selection-005</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection begins in the middle of the region and ends in the middle of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-006-3.2" class="dom interact script">
<td>
<a href="regions-selection-006.xht">regions-selection-006</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends in the middle of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-007-3.2" class="dom interact script">
<td>
<a href="regions-selection-007.xht">regions-selection-007</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the top of the region and ends outside the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-008-3.2" class="dom interact script">
<td>
<a href="regions-selection-008.xht">regions-selection-008</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins at the bottom of the region and ends outside the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-009-3.2" class="dom interact script">
<td>
<a href="regions-selection-009.xht">regions-selection-009</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends outside the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-010-3.2" class="dom interact script">
<td>
<a href="regions-selection-010.xht">regions-selection-010</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins in the middle of the region and ends outside the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-011-3.2" class="dom interact script">
<td>
<a href="regions-selection-011.xht">regions-selection-011</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends at the bottom of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-012-3.2" class="dom interact script">
<td>
<a href="regions-selection-012.xht">regions-selection-012</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends at the top the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-013-3.2" class="dom interact script">
<td>
<a href="regions-selection-013.xht">regions-selection-013</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends in the middle of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-014-3.2" class="dom interact script">
<td>
<a href="regions-selection-014.xht">regions-selection-014</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins outside of the region and ends in the middle of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-015-3.2" class="dom interact script">
<td>
<a href="regions-selection-015.xht">regions-selection-015</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins and ends outside of the region moving downward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-016-3.2" class="dom interact script">
<td>
<a href="regions-selection-016.xht">regions-selection-016</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection begins and ends outside of the region moving upward
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-017-3.2" class="dom interact script">
<td>
<a href="regions-selection-017.xht">regions-selection-017</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing one other element - div
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-018-3.2" class="dom interact script">
<td>
<a href="regions-selection-018.xht">regions-selection-018</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing one other element - img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-019-3.2" class="dom interact script">
<td>
<a href="regions-selection-019.xht">regions-selection-019</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is upward, begins and ends inside a region containing one other element - div
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-020-3.2" class="dom interact script">
<td>
<a href="regions-selection-020.xht">regions-selection-020</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is upward, begins and ends inside a region containing one other element - img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-021-3.2" class="dom interact script">
<td>
<a href="regions-selection-021.xht">regions-selection-021</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins and ends inside a region containing two other elements - div + img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-022-3.2" class="dom interact script">
<td>
<a href="regions-selection-022.xht">regions-selection-022</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection is upward, begins and ends inside a region containing two other elements - div + img
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection within a region should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-023-3.2" class="dom interact script">
<td>
<a href="regions-selection-023.xht">regions-selection-023</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>Selection is downward, begins inside a region and ends outside of it - both the region and the content after it have child elements
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mouse, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-024-3.2" class="dom interact script">
<td>
<a href="regions-selection-024.xht">regions-selection-024</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>CSS Regions: Selection is upward, begins inside and ends outside a region - both the region and the before after it have child elements
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection inside and outside of a named flow should contain all of the content dragged over by the mousemovement, including nested elements.</li>
</ul>
</td>
</tr>
<tr id="regions-selection-025-3.2" class="dom interact script">
<td>
<a href="regions-selection-025.xht">regions-selection-025</a></td>
<td></td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>DOM order is different than the linear selection
<ul class="assert">
<li>CSS regions module does not alter the normal processing of events in the document tree. Therefore, mouse selection should capture content in DOM order as it would without a named flow.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-001-3.2" class="ahem">
<td>
<a href="regions-stacking-context-001.xht">regions-stacking-context-001</a></td>
<td><a href="reference/regions-stacking-context-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions as part of the root stacking context
<ul class="assert">
<li>Test checks that regions respect stacking rules when part of the root stacking context.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-002-3.2" class="ahem">
<td>
<a href="regions-stacking-context-002.xht">regions-stacking-context-002</a></td>
<td><a href="reference/regions-stacking-context-002-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions as part of a non-root stacking context
<ul class="assert">
<li>Test checks that regions respect stacking rules when part of a non-root stacking context.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-003-3.2" class="ahem">
<td>
<a href="regions-stacking-context-003.xht">regions-stacking-context-003</a></td>
<td><a href="reference/regions-stacking-context-003-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions as part of the same stacking context as the node
<ul class="assert">
<li>Test checks that regions respect stacking and painting rules when both the region and the content nodes are part of the same, non-root stacking context.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-004-3.2" class="ahem">
<td>
<a href="regions-stacking-context-004.xht">regions-stacking-context-004</a></td>
<td><a href="reference/regions-stacking-context-004-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions create stacking contexts
<ul class="assert">
<li>Test checks that regions create stacking contexts for content flowed into them.</li>
</ul>
</td>
</tr>
<tr id="regions-stacking-context-005-3.2" class="ahem">
<td>
<a href="regions-stacking-context-005.xht">regions-stacking-context-005</a></td>
<td><a href="reference/regions-stacking-context-005-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>regions changing stacking order when as part of a stacking context
<ul class="assert">
<li>Test checks that regions stacking rules take precedence over content stacking rules.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-001-3.2" class="">
<td>
<a href="regions-transforms-001.xht">regions-transforms-001</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow (non-text) content
<ul class="assert">
<li>This test checks that the transform is applied to the named flow non-text content.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-002-3.2" class="">
<td>
<a href="regions-transforms-002.xht">regions-transforms-002</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow content element that has a child
<ul class="assert">
<li>This test checks that the child is transformed along with the parent when the transform is applied to a named flow content node</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-003-3.2" class="">
<td>
<a href="regions-transforms-003.xht">regions-transforms-003</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Named flow content that has a transformed parent outside of the named flow
<ul class="assert">
<li>This tests checks that when a transform is applied to a parent outside of the named flow but has child in the named flow, the child is not transformed along with the parent.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-004-3.2" class="">
<td>
<a href="regions-transforms-004.xht">regions-transforms-004</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed region using a 3D transform
<ul class="assert">
<li>This test checks that a 3D transform can be applied to a region</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-005-3.2" class="ahem">
<td>
<a href="regions-transforms-005.xht">regions-transforms-005</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: perspective set on the named flow content's parent does not apply when content flows into region
<ul class="assert">
<li>Test checks that content that has a 3D transform does not respect the perspective set on its parent when flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-006-3.2" class="ahem">
<td>
<a href="regions-transforms-006.xht">regions-transforms-006</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: 3D transform on region with named flow (text) content that overflows
<ul class="assert">
<li>Test checks that content flowed in a region and overflowing it is still rendered if the region has a 3D transform applied.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-007-3.2" class="ahem">
<td>
<a href="regions-transforms-007.xht">regions-transforms-007</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: Transforms on both the named flow content and the region
<ul class="assert">
<li>Test checks that if both the content flowed in a region and the region have a transform applied, they are properly composed. More specifically, in this test the content should appear as rotated 180 degrees.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-008-3.2" class="ahem">
<td>
<a href="regions-transforms-008.xht">regions-transforms-008</a></td>
<td><a href="reference/regions-transforms-008-ref.xht">=</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-3.2" class="ahem">
<td>
<a href="regions-transforms-009.xht">regions-transforms-009</a></td>
<td><a href="reference/regions-transforms-008-ref.xht">=</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-010-3.2" class="">
<td>
<a href="regions-transforms-010.xht">regions-transforms-010</a></td>
<td><a href="reference/regions-transforms-010-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed region with position: relative
<ul class="assert">
<li>This test checks that the transform can be applied on relative positioned region.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-011-3.2" class="">
<td>
<a href="regions-transforms-011.xht">regions-transforms-011</a></td>
<td><a href="reference/regions-transforms-010-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed region where parent and child are separate named flow content nodes
<ul class="assert">
<li>This test checks that the region is transformed when a parent and its child are separate named flow content nodes flowing into it.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-012-3.2" class="">
<td>
<a href="regions-transforms-012.xht">regions-transforms-012</a></td>
<td><a href="reference/regions-transforms-010-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow content flowing into transformed region
<ul class="assert">
<li>This test checks that named flow text content is transformed when it flows into a region that is also transformed.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-013-3.2" class="">
<td>
<a href="regions-transforms-013.xht">regions-transforms-013</a></td>
<td><a href="reference/regions-transforms-013-alt-ref.xht">=</a> <a href="reference/regions-transforms-013-ref.xht">=</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-014-3.2" class="">
<td>
<a href="regions-transforms-014.xht">regions-transforms-014</a></td>
<td><a href="reference/regions-transforms-014-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transform region with position:absolute and transform-origin
<ul class="assert">
<li>This test checks that the transform and transform-origin are applied to a region with absolute positioning.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-015-3.2" class="">
<td>
<a href="regions-transforms-015.xht">regions-transforms-015</a></td>
<td><a href="reference/regions-transforms-014-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Transformed named flow (non-text) content with transform-origin and position: absolute
<ul class="assert">
<li>This test checks that the transform and transform-origin are applied to named flow content that flows into a region with absolute positioning.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-016-3.2" class="">
<td>
<a href="regions-transforms-016.xht">regions-transforms-016</a></td>
<td><a href="reference/regions-transforms-016-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: 3D transform on named flow content with perspective()
<ul class="assert">
<li>This test checks that a 3D transform is applied with perspective to named flow content.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-017-3.2" class="">
<td>
<a href="regions-transforms-017.xht">regions-transforms-017</a></td>
<td><a href="reference/regions-transforms-017-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions: Multiple transformed named flow content nodes that overflow a region
<ul class="assert">
<li>This test checks that multiple named flow content nodes are transformed into a region and that the overflow remains visible.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-018-3.2" class="ahem">
<td>
<a href="regions-transforms-018.xht">regions-transforms-018</a></td>
<td><a href="reference/regions-transforms-018-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: 3D transform on named flow (text) content that overflows a region
<ul class="assert">
<li>Test checks that content that is transformed does not clip when flowed in a region.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-019-3.2" class="ahem">
<td>
<a href="regions-transforms-019.xht">regions-transforms-019</a></td>
<td><a href="reference/regions-transforms-019-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: 3D transform on named flow (text) content with perspective property set on region
<ul class="assert">
<li>Test checks that the 3D transform is applied named content flow, that the perspective set on the region is applied, and that the content is not clipped when the perspective is shifted</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-020-3.2" class="">
<td>
<a href="regions-transforms-020.xht">regions-transforms-020</a></td>
<td><a href="reference/regions-transforms-020-ref.xht">=</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-3.2" class="">
<td>
<a href="regions-transforms-021.xht">regions-transforms-021</a></td>
<td><a href="reference/regions-transforms-020-ref.xht">=</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-3.2" class="ahem">
<td>
<a href="regions-transforms-022.xht">regions-transforms-022</a></td>
<td><a href="reference/regions-transforms-020-ref.xht">=</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>
<tr id="row-flexbox-break-3.2" 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>
<tr id="video-001-3.2" class="">
<td>
<a href="video-001.xht">video-001</a></td>
<td></td>
<td></td>
<td>CSS Regions: flowing a video in a region
<ul class="assert">
<li>Test checks videos flowed in regions render smoothly and without artifacts.</li>
</ul>
</td>
</tr>
<tr id="visibility-regions-in-flexbox-3.2" class="ahem">
<td>
<a href="visibility-regions-in-flexbox.xht">visibility-regions-in-flexbox</a></td>
<td><a href="reference/visibility-regions-in-flexbox-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: collapsed region flex items
<ul class="assert">
<li>Test checks that the flexbox collapsed property works on flex items that are regions. The collapsed region item should not contribute to the flex container's width.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.2.#propdef-flow-from">
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.2.1">+</a>
<a href="https://www.w3.org/TR/css3-regions/#circular-dependencies">3.2.1 Cycle Detection</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.2.2">+</a>
<a href="https://www.w3.org/TR/css3-regions/#fragmenting-regions">3.2.2 Nested fragmentation contexts</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.2.2.#nested-region-context">
<!-- 0 tests -->
</tbody>
<tbody id="s3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.3">+</a>
<a href="https://www.w3.org/TR/css3-regions/#region-flow-break">3.3 Region flow break properties: break-before, break-after, break-inside</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s3.3.#propdef-break-after">
<!-- 1 tests -->
<tr id="autoheight-regions-in-autoheight-flexbox-003-3.3.#propdef-break-after" 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>
</tbody>
<tbody id="s3.3.#propdef-break-before">
<!-- 0 tests -->
</tbody>
<tbody id="s3.3.#propdef-break-inside">
<!-- 0 tests -->
</tbody>
<tbody id="s3.4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.4">+</a>
<a href="https://www.w3.org/TR/css3-regions/#the-region-fragment-property">3.4 The region-fragment property</a></th></tr>
<!-- 1 tests -->
<tr id="region-fragment-break-1-3.4" class="">
<td>
<a href="region-fragment-break-1.xht">region-fragment-break-1</a></td>
<td><a href="reference/region-fragment-break-1-ref.xht">=</a> </td>
<td></td>
<td>CSS Regions region-fragment-break-1
<ul class="assert">
<li>If the content fits within the CSS Region, then setting region-fragment: break; has no effect.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.4.#last-region">
<!-- 0 tests -->
</tbody>
<tbody id="s3.4.#propdef-region-fragment">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>