| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: One named flow multi-column container with text content flowing |
| into region of smaller width/height than the second region</title> |
| <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"/> |
| <link rel="help" href="http://www.w3.org/TR/css3-regions/#multi-column-regions"/> |
| <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> |
| <link rel="match" href="reference/regions-multicol-024-ref.html"/> |
| <meta name="assert" content="This test checks that text content flows through a region |
| with a smaller width + height than the multi-column named flow |
| and than the second region and that it overflows the first region visibly |
| as a multi-column container before flowing into the second region."/> |
| <meta name="flags" content="ahem"/> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style type="text/css"> |
| #named-flow-multicol { |
| font-family: Ahem; |
| font-size: 20px; |
| line-height: 1em; |
| width: 130px; |
| height: 120px; |
| columns: 2; |
| column-gap: 10px; |
| flow-into: multicol; |
| } |
| .green { |
| color: green; |
| } |
| .blue { |
| color: blue; |
| } |
| #region-1, #region-2 { |
| position: absolute; |
| flow-from: multicol; |
| } |
| #region-1 { |
| top: 70px; |
| left: 20px; |
| width: 60px; |
| height: 60px; |
| } |
| #region-2 { |
| top: 70px; |
| left: 190px; |
| width: 130px; |
| height: 120px; |
| } |
| .failure { |
| position: absolute; |
| top: 70px; |
| background-color: red; |
| width: 60px; |
| height: 60px; |
| z-index: -10; |
| } |
| #block-1 { |
| left: 20px; |
| height: 60px; |
| } |
| #block-2 { |
| left: 90px; |
| height: 60px; |
| } |
| #block-3 { |
| left: 190px; |
| height: 120px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle. |
| There should be no red.</p> |
| <div id="named-flow-multicol"> |
| <span class="green">XXX XXX XXX XXX XXX XXX</span> |
| <span class="blue">XXX XXX XXX XXX XXX XXX</span> |
| </div> |
| <div id="region-1"></div> |
| <div id="region-2"></div> |
| <div class="failure" id="block-1"></div> |
| <div class="failure" id="block-2"></div> |
| <div class="failure" id="block-3"></div> |
| </body> |
| </html> |
