1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <!--
5 This test's original filename was multicol-inherit-003.xht
6 and it has been modified and is now
7 multicol-overflowing-001.xht
8 -->
9 <title>CSS Multi-column Layout Test: multicolumn and overflowing constrained dimensions</title>
10 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
11 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-09 -->
12 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements">
13 <link rel="match" href="reference/multicol-overflowing-001-ref.htm">
14 <meta name="flags" content="ahem">
15 <meta name="assert" content="This test checks that the content of a multi-column element with a fixed height can overflow outside its fixed width according to the computed overflow value. In this test, the inline content of a multi-column element exceeds the available fixed height and fixed width for the multi-column element; therefore, it overflows outside of it and creates a 4th, 5th and 6th extra column boxes.">
16 <style type="text/css">
17 body > div
18 {
19 font: 1.25em/1 Ahem;
20 height: 2em;
21 width: 32em;
22
23 column-gap: 1em;
24 column-width: 8em;
25 }
26
27 /*
28
29 N == max(1, floor((available-width + column-gap) / (column-width + column-gap)));
30 N == max(1, floor((32em + 1em) / (8em + 1em)));
31 N == max(1, floor(33em / 9em));
32 N == max(1, floor(3.6));
33 N == max(1, 3);
34 N == 3;
35
36 W == ((available-width + column-gap) / N) - column-gap;
37 W == ((32em + 1em) / 3) - 1em;
38 W == (33em / 3) - 1em;
39 W == (11em) - 1em;
40 W == 10em;
41
42 H == 2em;
43
44 */
45
46 div
47 {
48 background: yellow;
49 color: black;
50 orphans: 1;
51 widows: 1;
52 }
53
54 div > div {margin: 0 1em 1em;}
55
56 div + div {color: blue;}
57
58 div + div + div {color: pink;}
59 </style>
60 </head>
61
62 <body>
63
64 <div>
65 <div>
66 bl ac
67 bl ac
68 bl ac
69 bl ac
70 </div>
71 <div>
72 bl ue
73 bl ue
74 bl ue
75 bl ue
76 </div>
77 <div>
78 Pi nk
79 Pi nk
80 Pi nk
81 Pi nk
82 </div>
83 </div>
84
85 </body>
86 </html>