csswg-drafts/css-regions/examples/formatting-model-example.xht at 23b323e6309d81977d179b105db2a0a1665658f1 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Test: height:auto on region box</title>
    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com" />
    <link rel="help" href="http://dev.w3.org/csswg/css3-regions/#rfcb-height-computation" />
    <link rel="match" href="regions-auto-size-1-ref.xht" />
    <meta name="flags" content="" />
    <meta name="assert" content=
    "The height of a region with height:auto is computed from the fragment content" />
    <style>
    /*<![CDATA[*/
#article {
    -webkit-flow-into: article;
    color: black;
    margin: 0px;
    padding: 0px;
}

#article p {
    margin: 0;
}

#main-flow {
    color: #a0a0a0;
    margin-right: 1em;
}

#rA, #rB, #rC {
    -webkit-flow-from: article;
    height: auto;
    border-radius: 0.5em;
    margin: 1em 1em 0em 1em;
    padding: 1em;
    border: 3px solid #46A4E9;
}

#rA {
    width: 90.5%;
    height: auto;
}

#rB {
    float: left;
    width: 15em;
    height: 150px;
    max-height: 150px;
}

#rC {
    width: 12em;
    height: 610px;
    float: right;
}

#main-flow {
    padding: 0em 1em 0em 1em;
}

/*]]>*/
</style>
</head>
<body>
    <div id="article">
        <p style="-webkit-region-break-after:always;">I am not a plane Figure, but a Solid. You call me a Circle; but in reality I
        am not a Circle,</p><p>but an infinite number of Circles, of size varying from a
        Point to a Circle of thirteen inches in diameter, one placed on the top of
        the other. When I cut through your plane as I am now doing, I make in your
        plane a section which you, very rightly, call a Circle. For even a Sphere -
        which is my proper name in my own country - if he manifest himself at all to
        an inhabitant of Flatland - must needs manifest himself as a Circle.</p>

        <p>Square and triangular houses are not allowed, and for this reason. The
        angles of a Square (and still more those of an equilateral Triangle,) being
        much more pointed than those of a Pentagon, and the lines of inanimate
        objects (such as houses) being dimmer than the lines of Men and Women, it
        follows that there is no little danger lest the points of a square or
        triangular house residence might do serious injury to an inconsiderate or
        perhaps absent-minded traveller suddenly therefore, running against them:
        and as early as the eleventh century of our era, triangular houses were
        universally forbidden by Law, the only exceptions being fortifications,
        powder- magazines, barracks, and other state buildings, which it is not
        desirable that the general public should approach without circumspection.</p>
    </div>
    <div id="rA"></div>

    <div id="rB"></div>
    <div id="rC"></div>

    <div id="main-flow">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus orci mi, feugiat quis feugiat imperdiet, scelerisque et sem. Vivamus nec nisi sit amet risus elementum rutrum sed ac mi. Curabitur sapien nulla, dictum eu consectetur et, pulvinar ut ipsum. Nullam non purus non nibh aliquet tincidunt a nec est. Ut vitae libero eu dolor ullamcorper pharetra. Curabitur consequat, felis a fringilla varius, lectus turpis auctor enim, id lacinia tellus lacus at sem. Etiam bibendum nibh vitae purus vestibulum molestie. Phasellus tristique purus eget nisi euismod et feugiat est imperdiet. Phasellus laoreet turpis malesuada nisi sollicitudin scelerisque.</p>

        <p>Morbi imperdiet, massa ac molestie lacinia, tortor sapien ornare quam, quis luctus nisl est et purus. Cras vel odio felis, ut rhoncus urna. Maecenas ut quam eu est vehicula feugiat. Praesent eget leo augue, vel tincidunt mauris. Maecenas accumsan, velit dictum sagittis imperdiet, elit velit gravida ligula, in pulvinar velit libero ac nibh. Mauris eget rhoncus magna. Donec ultricies massa tortor, nec euismod nibh. Sed a nibh mauris, venenatis gravida nisl. Cras neque metus, vulputate et cursus non, ultricies sit amet metus. Praesent vestibulum lacinia gravida. Nunc eget nulla quis tellus consectetur aliquam in quis purus. Sed nec turpis vel leo vehicula vulputate ac at diam. Aenean at turpis non enim viverra faucibus a in massa. Donec et dui a leo scelerisque luctus. Cras in justo a mauris hendrerit faucibus.</p>
    </div>


</body>
</html>