multicol-height-block-child-001.xht (3049B)
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: multi-column element with child block (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-08 --> 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="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0091.html" title="[css3-multicol] Nested multicolumn elements rendering" /> 9 <link rel="match" href="multicol-height-block-child-001-ref.xht" /> 10 <meta name="flags" content="ahem" /> 11 <meta name="assert" content="This test checks that a nested multi-column element's inline content could be clipped horizontally." /> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style type="text/css"><![CDATA[ 14 div 15 { 16 background-color: blue; 17 font: 20px/1 Ahem; 18 height: 8em; 19 width: 14em; 20 21 column-count: 2; 22 column-gap: 2em; 23 24 /* 25 26 N == 2; 27 28 W == 6em; 29 30 H == 8em; 31 32 */ 33 } 34 35 div#outer 36 { 37 color: black; 38 column-fill: auto; 39 } 40 41 div#inner 42 { 43 color: orange; 44 column-fill: balance; 45 } 46 ]]></style> 47 </head> 48 <body> 49 50 <div id="outer"> 51 bla bla bla bla bla 52 53 <div id="inner">orn orn orn zzz zzz zzz</div> 54 55 </div> 56 57 <!-- 58 Both column boxes of div#inner start in the 1st column box of 59 div#outer multi-column element. All the 6 lines of div#inner will 60 be rendered inside the 1st column box of div#outer. The first three 61 lines in the first inner column, and the last three in the second 62 inner column, which will overflow the first outer column, and 63 actually appear as if they were part of the second outer column. No 64 clipping should occur, unless explicitly requested. 65 66 All the 6 lines of #inner fit in a column row that resides in the 67 first outer column. #inner has a fixed height, and is taller than 68 what can fit in the first outer column, so it needs to continue in 69 the second outer column, with no inner column content left to 70 fragment. #inner is a 14em wide block that is put into a 6em wide 71 outer column, so it will overflow the outer column all the way to 72 22em, relatively to the left edge of the outer multicol container. 73 74 Expected results: 75 76 0em 7em 14em 22em 77 v v v v 78 0 ********************************************* 79 * bla | | * 80 * bla | | * 81 * bla | | * 82 * bla | | * 83 5 * bla | | * 84 6 * orn | zzz |**************** 85 7 * orn | zzz | 86 8 * orn | zzz | 87 ***************************** 88 89 --> 90 91 </body> 92 </html>