| 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 |