columnfill-auto-max-height-002.html (2281B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Multi-column Layout Test: 'column-fill: auto' and height constrained of a multi-column container</title> 6 7 <!-- 8 9 See also 10 11 Bug 1348839: 'column-fill: auto' does not fill as expected, content ends up in one column 12 https://bugzilla.mozilla.org/show_bug.cgi?id=1348839 13 14 --> 15 16 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 17 <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf" title="7.1 column-fill"> 18 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 19 20 <meta content="This test verifies how content is distributed among columns when the height of a multi-column container is constrained and when 'column-fill' is set to 'auto'. In this test, the line box height is exactly 25px. So, content should fill 4 lines of the first column and should only fill up the first column. Since column rules are only drawn between two columns that both have content and since the test expects only 1 column filled with content, therefore the column rule should not be painted, thus the 'no red' test success condition." name="assert"> 21 22 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 23 <style> 24 div 25 { 26 color: green; 27 column-count: 4; 28 column-fill: auto; /* fill columns sequentially */ 29 column-gap: 4em; /* computes to 100px */ 30 column-rule: red solid 4em; 31 font-family: Ahem; 32 /* 33 To download Ahem font: 34 http://www.w3.org/Style/CSS/Test/Fonts/Ahem/ 35 */ 36 font-size: 25px; 37 line-height: 1; 38 max-height: 100px; 39 orphans: 1; 40 /* 41 In this test, the orphans property specifies the 42 minimum number of line boxes that must be left 43 in a column box before a column break, that must 44 be left at the bottom of a column box. 45 */ 46 widows: 1; 47 /* 48 In this test, the widows property specifies the 49 minimum number of line boxes that must be left 50 in a column box after a column break, that must 51 be left at the top of a column box. 52 */ 53 width: 700px; 54 } 55 </style> 56 57 <p>Test passes if there is a filled green square and <strong>no red</strong>. 58 59 <div>Abcd efgh ijkl mno.</div>