| <!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>CSS Test: Percentage Computed Height on Multicol Child (Definite Multicol Height)</title> |
| <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> |
| <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" /> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/> |
| <meta name="flags" content="" /> |
| <meta name="assert" content="Percentage heights with a multi-column element are relative to the computed height of the multicolumn box, and this works even when the multi-column element is paginated." /> |
| <link rel="match" href="multicol-height-002-print-ref.xht" /> |
| <style type="text/css"><![CDATA[ |
| html, body { height: 100%; } |
| * { margin: 0; } |
| div { |
| border: double blue 12px; |
| column-count:2; |
| column-gap:0; |
| column-fill: balance; |
| height: 150%; |
| } |
| div > p { |
| border-right: solid orange 12px; |
| width: 0; |
| margin: 0 auto; |
| height: 200%; |
| } |
| blockquote { |
| border: solid thick yellow; |
| } |
| ]]></style> |
| </head> |
| <body> |
| <p>Test passes if even when printed:</p> |
| <ul> |
| <li>Two vertical orange stripes stretch exactly |
| from the inner top edge to the inner bottom edge of the blue box below.</li> |
| <li>There is a yellow stripe immediately below the blue box.</li> |
| </ul> |
| <div> |
| <p></p> |
| </div> |
| <blockquote></blockquote> |
| </body> |
| </html> |
