multicol-count-computed-005.xht (3293B)
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: column-rule and overflow inside (complex test)</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-03 --> 7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns" /> 8 <link rel="match" href="multicol-count-computed-003-ref.xht" /> 9 <meta name="flags" content="ahem" /> 10 <meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should not be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should not be partially clipped and should overlap partially with the 1st column-rule." /> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style type="text/css"><![CDATA[ 13 div 14 { 15 background: yellow; 16 border: gray solid 1em; 17 color: black; 18 font: 1.25em/1 Ahem; 19 orphans: 1; 20 widows: 1; 21 width: 13em; 22 23 column-gap: 5em; 24 column-rule-color: blue; 25 column-rule-style: solid; 26 column-rule-width: 1.5em; 27 column-width: 1em; 28 } 29 30 /* 31 (15) if (column-width != auto) and (column-count = auto) then 32 (16) N := max(1, floor((available-width + column-gap) / (column-width + column-gap))); 33 (17) W := ((available-width + column-gap) / N) - column-gap; 34 (18) exit; 35 36 N := max(1, floor((available-width + column-gap) / (column-width + column-gap))); 37 N == max(1, floor((13em + 5em) / (1em + 5em))); 38 N == max(1, floor(18em / 6em)); 39 N == max(1, floor(3)); 40 N == 3; 41 42 So, the used column-count in this test is 3. 43 44 W := ((available-width + column-gap) / N) - column-gap; 45 W == ((13em + 5em) / 3) - 5em; 46 W == ((18em) / 3) - 5em; 47 W == (6em) - 5em; 48 W == 1em; 49 50 So, the used column-width in this test is 1em. 51 */ 52 53 #pink {color: pink;} 54 #orange {color: orange;} 55 #purple {color: purple;} 56 #gray {color: gray;} 57 58 /* 59 Since 60 " 61 content that extends outside column boxes visibly overflows and is not clipped to the column box 62 " 63 http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements 64 this causes the right-half (0.5em) of the 'K' glyph to 65 overlap with the right-half (0.75em) of the 1st blue column-rule. 66 Same thing should happen to the 'N' glyph of 'ORAN'. 67 68 Because no inline content should be rendered into the 69 3rd column box, this causes the 2nd column rule not 70 been rendered because 71 " 72 Column rules are only drawn between two columns that 73 both have content. 74 " 75 http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules 76 */ 77 ]]></style> 78 </head> 79 80 <body> 81 82 <div> 83 <span id="pink">PINK</span> 84 <span id="orange">ORAN</span> 85 <span id="purple">PURP</span> 86 <span id="gray">GRAY</span> 87 </div> 88 89 </body> 90 </html>