multicol-nested-margin-002.xht (3224B)
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 multicolumns and vertical margin (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-14 --> 7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" /> 8 <link rel="match" href="multicol-nested-margin-002-ref.xht" /> 9 <meta name="flags" content="ahem" /> 10 <meta name="assert" content="This test checks that when an inner nested multi-column element is preceded by a soft column break (caused by an unforced column-break), then the used margin-top of such inner nested multi-column element is '0'." /> 11 12 <!-- 13 More info: 14 Re: [css3-multicol] vertical margins rendering in nested multi-columns 15 http://lists.w3.org/Archives/Public/www-style/2013Aug/0146.html 16 --> 17 18 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 19 <style type="text/css"><![CDATA[ 20 body {margin: 0;} 21 22 body > div 23 { 24 background-color: yellow; 25 font: 1.25em/1 Ahem; 26 width: 41em; 27 /* 28 This test requires a viewport width of 820px 29 */ 30 } 31 32 div 33 { 34 color: yellow; 35 font: inherit; 36 orphans: 1; 37 widows: 1; 38 39 column-count: 3; 40 column-gap: 1em; 41 } 42 43 div div {margin: 0em 1em;} 44 45 div div:last-child 46 { 47 color: blue; 48 margin: 1em; 49 } 50 51 /* 52 53 N == 3; 54 55 W == max(0, (available-width - ((N - 1) * column-gap)) / N); 56 W == max(0, (41em - ((3 - 1) * 1em)) / 3); 57 W == max(0, (41em - (2 * 1em)) / 3); 58 W == max(0, (41em - 2em) / 3); 59 W == max(0, 39em / 3); 60 W == max(0, 13em); 61 W == 13em; 62 63 The height of column rule depends on number of line boxes in 64 each outer column box which depends on number of line boxes 65 in each inner column box. So: 66 67 13em : width of each outer column box 68 - 69 2em : horizontal margin of each div inside 70 ======= 71 11em : width of each inner multi-column elements 72 73 N == 3; 74 75 W == max(0, (available-width - ((N - 1) * column-gap)) / N); 76 W == max(0, (11em - ((3 - 1) * 1em)) / 3); 77 W == max(0, (11em - (2 * 1em)) / 3); 78 W == max(0, (11em - 2em) / 3); 79 W == max(0, 9em / 3); 80 W == max(0, 3em); 81 W == 3em; 82 83 So, each duo of 'a', 'm' and 'x' should fill one and only 1 84 line box. There are 15 'a' duos and 15 'm' duos; therefore, 85 the 3 inner column boxes of each first 2 inner 86 multi-column elements should use 5 line boxes. 87 88 The 1st column box of last inner multi-column 89 (the blue one with 'x' duos) should have 'x1', 90 'x2' and 'x3' duos filling 3 line boxes. 91 92 The 2nd column box of last inner multi-column should 93 have 'x4', 'x5' and 'x6' duos filling 3 line boxes. 94 95 The 3rd column box of the last inner multi-column should 96 have 'x7' and 'x8' duos filling 2 line boxes. 97 */ 98 99 ]]></style> 100 </head> 101 <body> 102 103 <div> 104 105 <div> a1 a2 a3 a4 a5 a6 a7 a8 a9 a0 a1 a2 a3 a4 a5 </div> 106 107 <div> m1 m2 m3 m4 m5 m6 m7 m8 m9 m0 m1 m2 m3 m4 m5 </div> 108 109 <div> x1 x2 x3 x4 x5 x6 x7 x8 </div> 110 111 </div> 112 113 </body> 114 </html>