| <!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"/> |
| <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 { |
| display: inline-block; |
| top: 150px; |
| left: 150px; |
| width: 100px; |
| height: 100px; |
| background: #0f0; |
| } |
| |
| #clear-area { |
| display: inline-block; |
| background: #080; |
| 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 |
| left 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="clear-area"></div><div id="exclusion"></div><div id="left-fragment"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div> |
| </body> |
| </html> |
