| <!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: wrap-flow:none</title> |
| <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/> |
| <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/> |
| <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/> |
| <meta name="flags" content=""/> |
| <meta name="assert" content= |
| "Tests that wrap-flow:start is implemented. The inline boxes defined in the container |
| with the exclusion element should wrap around the left margin edge of the exclusion but |
| not to the right. Inline boxes |
| are flowing to the left of the exclusion element only."/> |
| <style> |
| /*<![CDATA[*/ |
| |
| #containing-block { |
| position: relative; |
| width: 400px; |
| background: red; |
| font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */ |
| } |
| |
| #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b { |
| display: inline-block; |
| background: black; |
| } |
| |
| #top-fragment { |
| width: 400px; |
| height: 150px; |
| } |
| |
| #bottom-fragment-a { |
| width: 150px; |
| height:150px; |
| } |
| |
| #bottom-fragment-b { |
| width: 250px; |
| height: 150px; |
| } |
| |
| #left-fragment { |
| width: 150px; |
| height: 100px; |
| } |
| |
| #exclusion { |
| position: absolute; |
| wrap-flow: start; |
| top: 150px; |
| left: 150px; |
| width: 100px; |
| height: 100px; |
| background: #0f0; |
| } |
| |
| #clear-area { |
| position: absolute; |
| background: #080; |
| top: 150px; |
| left: 250px; |
| width: 150px; |
| height: 100px; |
| } |
| |
| |
| /*]]>*/ |
| </style> |
| </head> |
| <body> |
| <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the |
| right of the light green area and to the edge of the black background container. You should not see any red background.</p> |
| <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> |
| </body> |
| </html> |
