columnfill-auto-max-height-001.html (1799B)
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: 2; 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 width: 300px; 40 } 41 </style> 42 43 <p>Test passes if there is a filled green square and <strong>no red</strong>. 44 45 <div>Abcd efgh ijkl mno.</div>