multicol-height-002-print.xht (1556B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Percentage Computed Height on Multicol Child (Definite Multicol Height)</title> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> 6 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" /> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/> 8 <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." /> 9 <link rel="match" href="multicol-height-002-print-ref.xht" /> 10 <style type="text/css"><![CDATA[ 11 html, body { height: 100%; } 12 * { margin: 0; } 13 div { 14 border: double blue 12px; 15 column-count:2; 16 column-gap:0; 17 column-fill: balance; 18 height: 150%; 19 } 20 div > p { 21 border-right: solid orange 12px; 22 width: 0; 23 margin: 0 auto; 24 height: 200%; 25 } 26 blockquote { 27 border: solid thick yellow; 28 } 29 ]]></style> 30 </head> 31 <body> 32 <p>Test passes if even when printed:</p> 33 <ul> 34 <li>Two vertical orange stripes stretch exactly 35 from the inner top edge to the inner bottom edge of the blue box below.</li> 36 <li>There is a yellow stripe immediately below the blue box.</li> 37 </ul> 38 <div> 39 <p></p> 40 </div> 41 <blockquote></blockquote> 42 </body> 43 </html>