multicol-nested-005.xht (2640B)
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: nested multi-columns and constrained dimensions</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-10 --> 7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> 8 <link rel="match" href="multicol-nested-005-ref.xht" /> 9 <!-- 10 The original filename of this test was 11 multicol-inherit-005.xht 12 This test also serves as a conversion of 13 multicol-nested-001.xht 14 --> 15 <meta name="flags" content="ahem" /> 16 <meta name="assert" content="This test checks how the height of column boxes conditions the height of nested column boxes." /> 17 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 18 <style type="text/css"><![CDATA[ 19 body > div 20 { 21 column-gap: 1em; 22 font: 1.25em/1 Ahem; 23 width: 41em; 24 } 25 26 /* 27 28 N == 3; 29 30 W == max(0, (available-width - ((N - 1) * column-gap)) / N); 31 W == max(0, (41em - ((3 - 1) * 1em)) / 3); 32 W == max(0, (41em - (2 * 1em)) / 3); 33 W == max(0, (41em - 2em) / 3); 34 W == max(0, 39em / 3); 35 W == max(0, 13em); 36 W == 13em; 37 38 The height of column rule depends on number of line boxes in 39 each outer column box which depends on number of line boxes 40 in each inner column box. So: 41 42 13em : width of each outer column box 43 - 44 2em : horizontal margin of each div inside 45 ======= 46 11em : width of each inner multi-column elements 47 48 N == 3; 49 50 W == max(0, (available-width - ((N - 1) * column-gap)) / N); 51 W == max(0, (11em - ((3 - 1) * 1em)) / 3); 52 W == max(0, (11em - (2 * 1em)) / 3); 53 W == max(0, (11em - 2em) / 3); 54 W == max(0, 9em / 3); 55 W == max(0, 3em); 56 W == 3em; 57 58 So, each duo of 'a', 'm' and 'x' should fill one and only 1 line 59 box. There are 8 duos; therefore, the first 2 inner 60 column boxes should use 3 line boxes and the 3rd inner 61 column box should be using 2 line boxes. 62 63 So, the height of the 2 blue column rules should be 60px. 64 65 */ 66 67 div 68 { 69 background-color: yellow; 70 color: black; 71 font-size: 1em; 72 margin: 1em; 73 orphans: 1; 74 widows: 1; 75 76 column-count: 3; 77 } 78 79 div > div:first-child {margin-top: 0;} 80 ]]></style> 81 </head> 82 83 <body> 84 85 <div> 86 <div> 87 aa aa 88 aa aa 89 aa aa 90 aa aa 91 </div> 92 <div> 93 mm mm 94 mm mm 95 mm mm 96 mm mm 97 </div> 98 <div> 99 xx xx 100 xx xx 101 xx xx 102 xx xx 103 </div> 104 </div> 105 106 </body> 107 </html>