1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head class="reftest-print">
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="flags" content="">
9 <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.">
10 <link rel="match" href="reference/multicol-height-002.htm">
11 <style type="text/css">
12 html, body { height: 100%; }
13 * { margin: 0; }
14 div {
15 border: double blue 12px;
16 column-count:2;
17 column-gap:0;
18 column-fill: balance;
19 height: 150%;
20 }
21 div > p {
22 border-right: solid orange 12px;
23 width: 0;
24 margin: 0 auto;
25 height: 200%;
26 }
27 blockquote {
28 border: solid thick yellow;
29 }
30 </style>
31 </head>
32 <body>
33 <p>Test passes if even when printed:</p>
34 <ul>
35 <li>Two vertical orange stripes stretch exactly
36 from the inner top edge to the inner bottom edge of the blue box below.</li>
37 <li>There is a yellow stripe immediately below the blue box.</li>
38 </ul>
39 <div>
40 <p></p>
41 </div>
42 <blockquote></blockquote>
43 </body>
44 </html>