multicol-inherit-002.xht (2049B)
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-count' and inherit</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/#cc" title="3.2 'column-count'" /> 8 <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" /> 9 <link rel="match" href="multicol-inherit-002-ref.xht" /> 10 <meta name="flags" content="ahem" /> 11 <meta name="assert" content="This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." /> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style type="text/css"><![CDATA[ 14 body > div 15 { 16 background-color: blue; 17 column-count: 3; 18 column-gap: 1em; 19 font: 1.25em/1 Ahem; 20 width: 32em; 21 22 /* 23 N == 3; 24 25 32em 26 - 2em : 2 column gaps 27 ========== 28 30em : available width of the 3 inner multi-column elements 29 30 So, W == 10em; 31 32 30em 33 - 6em : 3 mult by 2em: horizontal margin of 3 inner multi-column elements 34 - 6em : 3 mult by 2em: horizontal column-gaps of all 3 inner multi-column elements 35 ========== 36 18em : 6em for each of the 3 column boxes without their own horizontal margins 37 So, each column boxes of inner multi-column elements is 2em wide. 38 */ 39 } 40 41 div 42 { 43 color: black; 44 margin: 1em; 45 orphans: 1; 46 widows: 1; 47 } 48 49 div > div 50 { 51 background-color: yellow; 52 column-count: inherit; 53 column-gap: 1em; 54 } 55 56 div > div:first-child {margin-top: 0;} 57 ]]></style> 58 </head> 59 <body> 60 61 <div> 62 <div> 63 aa aa 64 aa aa 65 aa aa 66 aa aa 67 </div> 68 <div> 69 mm mm 70 mm mm 71 mm mm 72 mm mm 73 </div> 74 <div> 75 xx xx 76 xx xx 77 xx xx 78 xx xx 79 </div> 80 </div> 81 82 </body> 83 </html>