OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 article { | |
5 -webkit-flow-into: main; | |
6 } | |
7 | |
8 article > p, #rparent { | |
9 margin: 0; | |
10 font-family: "Ahem"; | |
11 font-size: 10px; | |
12 } | |
13 | |
14 section > div { | |
15 -webkit-flow-from: main; | |
16 margin: 0px; | |
17 min-height: 0px; | |
18 max-height: 35px; | |
19 } | |
20 | |
21 #rparent { | |
22 border: 5px solid green; | |
23 width: 700px; | |
24 } | |
25 | |
26 .maxh1 { | |
27 max-height: 35px; | |
28 } | |
29 | |
30 .maxh2 { | |
31 max-height: 25px; | |
32 } | |
33 </style> | |
34 <script src="../../../resources/check-layout.js"></script> | |
35 </head> | |
36 <body onload="checkLayout('#rparent')"> | |
37 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=102099"> Co
ntent flows incorrectly in autoheight regions with min/max-height set</a>.</p> | |
38 <p>There are two paragraphs in the flow, without forced breaks. The auto
-height regions are consecutive and have only max-height set, with mixed values
to test various page sizes. The layout algorithm should fill the regions optimal
ly by taking into account the min-height, max-height and height properties of th
e regions: | |
39 <ul> | |
40 <li> if there's enough content to fill an auto-height region up
to max-height, the region must have that height and the content must have an unf
orced break if it doesn't fit exactly;</li> | |
41 <li> if an autoheight region has min-height and there's not enou
gh content / there's a forced break before min-height, the region must still be
min-height tall;</li> | |
42 <li> if a region has a fixed height, that value must be used;</l
i> | |
43 <li> if an auto-height region has a forced break before max-heig
ht is reached, the region must end at that point.</li> | |
44 </ul> | |
45 </p> | |
46 <p>On success, you should see a PASS at the end of the document.</p> | |
47 <article> | |
48 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Done
c sit amet dolor at felis euismod tempus nec eget lacus. Aliquam tortor orci, ac
cumsan id rutrum quis, venenatis id enim. Cras a quam ligula. Aliquam hendrerit
augue ut metus adipiscing sit amet iaculis purus hendrerit. Phasellus at facilis
is lorem. Vestibulum gravida tortor vitae odio accumsan id fringilla ante mattis
. Morbi lorem mi, convallis quis gravida dictum, imperdiet quis erat. Sed quam q
uam, gravida id tincidunt in, tempus id felis. In elementum sem eget enim rutrum
tempus scelerisque risus auctor. Duis sollicitudin urna quis ante adipiscing vo
lutpat.</p> | |
49 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Don
ec sit amet dolor at felis euismod tempus nec eget lacus. Aliquam tortor orci, a
ccumsan id rutrum quis, venenatis id enim. Cras a quam ligula. Aliquam hendrerit
augue ut metus adipiscing sit amet iaculis purus hendrerit. Phasellus at facili
sis lorem. Vestibulum gravida tortor vitae odio accumsan id fringilla ante matti
s. Morbi lorem mi, convallis quis gravida dictum, imperdiet quis erat. Sed quam
quam, gravida id tincidunt in, tempus id felis.</p> | |
50 </article> | |
51 <section id="rparent" data-expected-height=220> | |
52 <div class="maxh1"></div> | |
53 <div class="maxh2"></div> | |
54 <div class="maxh1"></div> | |
55 <div class="maxh2"></div> | |
56 <div class="maxh1"></div> | |
57 <div class="maxh2"></div> | |
58 <div class="maxh1"></div> | |
59 <div class="maxh2"></div> | |
60 <div class="maxh1"></div> | |
61 <div class="maxh2"></div> | |
62 <div class="maxh1"></div> | |
63 </section> | |
64 </body> | |
65 </html> | |
OLD | NEW |