multicol-table-cell-height-002

column-count and height of table-cell (basic)

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem
Assertion
This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height. A set height for a table-cell still remains the minimum height required by the content, even when its layout is influenced by, conditioned by a multi-column layout.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Multi-column Layout Test: column-count and height of table-cell (basic)</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-23 -->
 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="reference/multicol-table-cell-height-001-ref.htm">
 9   <meta name="flags" content="ahem">
10   <meta name="assert" content="This test checks that 'column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height. A set height for a table-cell still remains the minimum height required by the content, even when its layout is influenced by, conditioned by a multi-column layout.">
11   <style type="text/css">
12   div
13   {
14   background-color: yellow;
15   color: black;
16   display: table-cell;
17   font: 1.25em/1 Ahem;
18   height: 0em;
19   orphans: 1;
20   widows: 1;
21   width: 15em;
22 
23   column-count: 2;
24   column-gap: 2em;
25 
26   /*
27 
28   N == 2;
29 
30   W == 6.5em;
31 
32   */
33   }
34   </style>
35  </head>
36  <body>
37 
38   <div>
39   111 222 333 444 555 666 777 888 999
40   111 222 333 444 555 666 777 888 999
41   111 222 333 444 555 666 777 888 999
42   111 222 333 444 555 666 777 888 999
43   </div>
44 
45  </body>
46 </html>