layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002.xht


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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

<!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 Multi-column Layout Test: '-moz-column-fill: auto' and '-moz-column-span: all' (complex)</title>
  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" />
  <link rel="match" href="multicol-fill-auto-block-children-002-ref.xht" />

  <meta name="flags" content="" />
  <meta name="assert" content="This test checks that if '-moz-column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a '-moz-column-span: all' element will occupy more space in a multi-column element than a '-moz-column-span: none' element, therefore reducing available space for content in column boxes." />
  <style type="text/css"><![CDATA[
  html {background-color: white;}

  body
  {
  background-color: blue;
  height: 200px;
  margin: 8px;
  width: 680px;

  -moz-column-count: 3;
  -moz-column-fill: auto;
  -moz-column-gap: 10px;

  /*
  So, each column box should be
  [680px minus (2 mult 10px)] divided by 3 == 220px wide
  */
  }

  h1
  {
  color: white;
  -moz-column-span: all;
  font-size: 2em;
  line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
  margin: 21px 0em;
  /*
   21px : margin-top of h1 element which must not collapse with body's margin-top
   80px : content height: 2 line boxes required to render the "Test passes if ..." sentence
   21px : margin-bottom of h1 element
 ====================================
  122px : margin box height of h1 element
  */
  }

  h2
  {
  color: blue;
  font-size: 1.5em;
  line-height: 1;
  margin: 0 0 2.25em;
  /*
    0px : margin-top of h2 element
   24px : content height: 1 line box required to render all the nbsp; and PASS! word
   54px : margin-bottom of h2 element
 ====================================
   78px : margin box height of h2 element
  */
  }
  ]]></style>
 </head>

 <body>

  <h1>Test passes if "PASS!" is<br />on the right &#8600;</h1>

  <h2>&nbsp;</h2>

  <h2>&nbsp;</h2>

  <h2>&nbsp;</h2>

  <h2>PASS!</h2>

  <!--

  Expected result:

  8px                                           688px
  v                                              v
  ************************************************
  *                                              *
  *  <h1>Test passes if the word "PASS!" is<br />*  1st line box
  *  on the right &#8600;</h1>                   *  2nd line box
  *                                              *
  ************************************************
  *                                              *
  * <h2>nbsp;<h2>  <h2>nbsp;<h2>  <h2>nbsp;<h2>  *  <h2>PASS!</h2>
  *                                              *
  ************************************************
                ^              ^
               228px          458px
  -->

 </body>
</html>