wpt/css/css-multicol/multicol-height-002-print.xht at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://umn0mtkzgkj46tygt32g.julianrbryant.com/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://umn0mtkzgkj46tygt32g.julianrbryant.com/1999/xhtml">
 <head>
  <title>CSS Test: Percentage Computed Height on Multicol Child (Definite Multicol Height)</title>
  <link rel="author" title="Elika J. Etemad" href="https://umn6effpw2gvaenh3jatp4m31zg12ar.julianrbryant.com/contact" />
  <link rel="help" href="https://umn0mtkzgkj46tygt32g.julianrbryant.com/TR/css3-multicol/#the-multi-column-model" />
  <link rel="help" href="https://umn0mtkzgkj46tygt32g.julianrbryant.com/TR/CSS21/visudet.html#the-height-property"/>
  <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>