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 </style> | |
26 <script src="../../../resources/check-layout.js"></script> | |
27 </head> | |
28 <body onload="checkLayout('#rparent')"> | |
29 <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> | |
30 <p>There are two paragraphs in the flow, with a forced break after the f
irst paragraph. The auto-height regions are consecutive and have only max-height
. The layout algorithm should fill the regions optimally by taking into account
the min-height, max-height and height properties of the regions: | |
31 <ul> | |
32 <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> | |
33 <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> | |
34 <li> if a region has a fixed height, that value must be used;</l
i> | |
35 <li> if an auto-height region has a forced break before max-heig
ht is reached, the region must end at that point.</li> | |
36 </ul> | |
37 </p> | |
38 <p>On success, you should see a PASS at the end of the document.</p> | |
39 <article> | |
40 <p style="-webkit-region-break-after: always;">Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Donec sit amet dolor at felis euismod te
mpus nec eget lacus. Aliquam tortor orci, accumsan id rutrum quis, venenatis id
enim. Cras a quam ligula. Aliquam hendrerit augue ut metus adipiscing sit amet i
aculis purus hendrerit. Phasellus at facilisis lorem. Vestibulum gravida tortor
vitae odio accumsan id fringilla ante mattis. Morbi lorem mi, convallis quis gra
vida dictum, imperdiet quis erat. Sed quam quam, gravida id tincidunt in, tempus
id felis. In elementum sem eget enim rutrum tempus scelerisque risus auctor. Du
is sollicitudin urna quis ante adipiscing volutpat.</p> | |
41 <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> | |
42 </article> | |
43 <section id="rparent" data-expected-height=215> | |
44 <div></div> | |
45 <div></div> | |
46 <div></div> | |
47 <div></div> | |
48 <div></div> | |
49 <div></div> | |
50 <div></div> | |
51 <div></div> | |
52 <div></div> | |
53 <div></div> | |
54 <div></div> | |
55 </section> | |
56 </body> | |
57 </html> | |
OLD | NEW |