| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>CSS Test: flow-into behavior</title> |
| <link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com"/> |
| <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties"/> |
| <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property"/> |
| <link rel="match" href="flow-into-001-ref.xht"/> |
| <meta name="flags" content=""/> |
| <meta name="assert" content="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."/> |
| <style type="text/css"> |
| body{ |
| font-size: 16px; |
| line-height: 18px; |
| } |
| .source{ |
| color: green; |
| } |
| .region{ |
| width: 100%; |
| height: 20px; |
| } |
| .disjointFlow{ |
| flow-into: disjoint-flow; |
| } |
| .disjointRegion{ |
| flow-from: disjoint-flow; |
| } |
| .emptyFlow{ |
| flow-into: empty-flow; |
| } |
| .emptyRegion{ |
| flow-from: empty-flow; |
| } |
| .parentFlow{ |
| flow-into: parent-flow; |
| } |
| .parentRegion{ |
| flow-from: parent-flow; |
| } |
| .childFlow{ |
| flow-into: child-flow; |
| } |
| .childRegion{ |
| flow-from: child-flow; |
| } |
| .nestedFlow{ |
| flow-into: nested-flow; |
| } |
| .nestedRegion{ |
| flow-from: nested-flow; |
| } |
| .noInheritFlow{ |
| flow-into: noInherit-flow; |
| } |
| .noInheritRegion{ |
| flow-from: noInherit-flow; |
| } |
| .autoFlow{ |
| flow-into: auto; |
| } |
| .error{ |
| color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <span class="source disjointFlow"> |
| 1 2 |
| </span> |
| <div class="source parentFlow"> |
| 4 |
| <div class="source childFlow">7 8 9</div> |
| 5 6 |
| </div> |
| <span class="source disjointFlow"> |
| 3 |
| </span> |
| <span class="source noInheritFlow"> |
| 13 |
| <span> |
| 14 |
| </span> |
| 15 |
| </span> |
| <span class="source nestedFlow"> |
| 10 |
| <span class="source nestedFlow"> |
| 12 |
| </span> |
| 11 |
| </span> |
| </div> |
| <div> |
| No text should appear above this line. Below should be lines with three green numbers each counting up to 18. |
| </div> |
| <div class="region emptyRegion"> |
| <div class="error">FAIL - empty flow should replace this content.</div> |
| </div> |
| <div class="region disjointRegion"> |
| <div class="error">FAIL - disjoint flow should replace this content.</div> |
| </div> |
| <div class="region parentRegion"> |
| <div class="error">FAIL - parent flow should replace this content.</div> |
| </div> |
| <div class="region childRegion"> |
| <div class="error">FAIL - child flow should replace this content.</div> |
| </div> |
| <div class="region nestedRegion"> |
| <div class="error">FAIL - nested flow should replace this content.</div> |
| </div> |
| <div class="region noInheritRegion"> |
| <div class="error">FAIL - noInherit flow should replace this content.</div> |
| </div> |
| <div class="source flowIntoAuto"> |
| <div>16 17 18</div> |
| </div> |
| </body> |
| </html> |
