multicol-fill-auto-block-children-002.xht (2525B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Multi-column Layout Test: 'column-fill: auto' and 'column-span: all' (complex)</title> 5 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> 6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 --> 7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'" /> 8 <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" /> 9 <link rel="match" href="multicol-fill-auto-block-children-002-ref.xht" /> 10 11 <meta name="assert" content="This test checks that if '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 'column-span: all' element will occupy more space in a multi-column element than a 'column-span: none' element, therefore reducing available space for content in column boxes." /> 12 <style type="text/css"><![CDATA[ 13 html {background-color: white;} 14 15 body 16 { 17 background-color: blue; 18 height: 200px; 19 margin: 8px; 20 width: 60%; 21 22 column-count: 3; 23 column-fill: auto; 24 column-gap: 10px; 25 } 26 27 h1 28 { 29 color: white; 30 column-span: all; 31 font-size: 2em; 32 line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */ 33 margin: 21px 0em; 34 /* 35 21px : margin-top of h1 element which must not collapse with body's margin-top 36 80px : content height: 2 line boxes required to render the "Test passes if ..." sentence 37 21px : margin-bottom of h1 element 38 ==================================== 39 122px : margin box height of h1 element 40 */ 41 } 42 43 h2 44 { 45 color: blue; 46 font-size: 1.5em; 47 line-height: 1; 48 margin: 0 0 2.25em; 49 /* 50 0px : margin-top of h2 element 51 24px : content height: 1 line box required to render all the nbsp; and PASS! word 52 54px : margin-bottom of h2 element 53 ==================================== 54 78px : margin box height of h2 element 55 */ 56 } 57 ]]></style> 58 </head> 59 60 <body> 61 62 <h1>Test passes if "PASS!" is<br />on the right ↘</h1> 63 64 <h2> </h2> 65 66 <h2> </h2> 67 68 <h2> </h2> 69 70 <h2>PASS!</h2> 71 72 </body> 73 </html>