multicol-nested-column-rule-001.xht (3117B)
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 <!-- 5 This test's original filename was multicol-inherit-004.xht 6 and it has been modified and is now 7 multicol-nested-column-rule-001.xht 8 --> 9 <title>CSS Multi-column Layout Test: nested multi-columns and column-rule position</title> 10 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" /> 11 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 --> 12 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" /> 13 <link rel="match" href="multicol-nested-column-rule-001-ref.xht" /> 14 <meta name="flags" content="ahem" /> 15 <meta name="assert" content="This test checks how the height of column boxes conditions the height of column rule." /> 16 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 17 <style type="text/css"><![CDATA[ 18 body > div 19 { 20 column-rule: blue solid 1em; 21 font: 1.25em/1 Ahem; 22 width: 26em; 23 } 24 25 /* 26 27 N == 3; 28 29 W == max(0, (available-width - ((N - 1) * column-gap)) / N); 30 W == max(0, (26em - ((3 - 1) * 1em)) / 3); 31 W == max(0, (26em - (2 * 1em)) / 3); 32 W == max(0, (26em - 2em) / 3); 33 W == max(0, 24em / 3); 34 W == max(0, 8em); 35 W == 8em; 36 37 So, the first column-rule should be at: 38 39 1.0em : margin-left of outer div 40 8.0em : width of 1st column box 41 0.0em : (1.0em / 2) - (1.0em / 2) : left edge of 1st column-rule 42 ========= 43 9.0em 44 45 The 2nd column-rule should be at: 46 47 1.0em : margin-left of outer div 48 8.0em : width of 1st column box 49 1.0em : first column-gap 50 8.0em : width of 2nd column box 51 0.0em : (1.0em / 2) - (1.0em / 2) : left edge of 2nd column-rule 52 ========= 53 18.0em 54 55 The height of column rule depends on number of line boxes in 56 each outer column box which depends on number of line boxes 57 in each inner column box. So: 58 59 8em : width of each outer column box 60 - 61 2em : horizontal margin of each div inside 62 ======= 63 6em : width of each inner multi-column elements 64 65 N == 3; 66 67 W == max(0, (available-width - ((N - 1) * -column-gap)) / N); 68 W == max(0, (6em - ((3 - 1) * 1em)) / 3); 69 W == max(0, (6em - (2 * 1em)) / 3); 70 W == max(0, (6em - 2em) / 3); 71 W == max(0, 4em / 3); 72 W == max(0, 1.33333em); 73 W == 1.33333em; 74 75 So, each duo of 'a', 'm' and 'x' should fill one and only 1 line 76 box. There are 8 duos; therefore, the first 2 inner 77 column boxes should use 3 line boxes and the 3rd inner 78 column box should be using 2 line boxes. 79 80 So, the height of the 2 blue column rules should be 60px. 81 82 */ 83 84 div 85 { 86 background-color: white; 87 color: white; 88 font-size: 1em; 89 margin: 0em 1em; 90 orphans: 1; 91 widows: 1; 92 93 column-count: 3; 94 column-gap: 1em; 95 } 96 ]]></style> 97 </head> 98 99 <body> 100 101 <div> 102 <div> 103 aa aa 104 aa aa 105 aa aa 106 aa aa 107 </div> 108 <div> 109 mm mm 110 mm mm 111 mm mm 112 mm mm 113 </div> 114 <div> 115 xx xx 116 xx xx 117 xx xx 118 xx xx 119 </div> 120 </div> 121 122 </body> 123 </html>