OLD | NEW |
| (Empty) |
1 <html style="-webkit-writing-mode: horizontal-bt;"> | |
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 .fixed { | |
27 height: 25px; | |
28 } | |
29 | |
30 .minmax1 { | |
31 min-height: 30px; | |
32 max-height: 35px; | |
33 } | |
34 | |
35 .minmax2 { | |
36 min-height: 15px; | |
37 max-height: 20px; | |
38 } | |
39 </style> | |
40 <script src="../../../resources/check-layout.js"></script> | |
41 </head> | |
42 <body onload="checkLayout('#rparent')"> | |
43 <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> | |
44 <p>There are two paragraphs in the flow, the first having a forced break
. The auto-height regions are interleaved with fixed height regions and have min
/max-height set. The layout algorithm should fill the regions optimally by takin
g into account the min-height, max-height and height properties of the regions. | |
45 <ul> | |
46 <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> | |
47 <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> | |
48 <li> if a region has a fixed height, that value must be used;</l
i> | |
49 <li> if an auto-height region has a forced break before max-heig
ht is reached, the region must end at that point.</li> | |
50 </ul> | |
51 The algorithm should also take into account the horizontal botto
m-up writing mode. | |
52 </p> | |
53 <p>On success, you should see a PASS at the end of the document.</p> | |
54 <article> | |
55 <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> | |
56 <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> | |
57 </article> | |
58 <section id="rparent" data-expected-height=285> | |
59 <div class="minmax1"></div> | |
60 <div class="fixed"></div> | |
61 <div class="minmax2"></div> | |
62 <div class="fixed"></div> | |
63 <div class="minmax1"></div> | |
64 <div class="fixed"></div> | |
65 <div class="minmax2"></div> | |
66 <div class="fixed"></div> | |
67 <div class="minmax1"></div> | |
68 <div class="fixed"></div> | |
69 <div class="minmax2"></div> | |
70 </section> | |
71 </body> | |
72 </html> | |
OLD | NEW |