OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 .region { | |
6 width: 200px; | |
7 margin: 10px; | |
8 float: left; | |
9 -webkit-flow-from: flow; | |
10 } | |
11 .regionAuto { | |
12 border: thick solid red; | |
13 } | |
14 .regionNonAuto { | |
15 height: 200px; | |
16 border: thick solid blue; | |
17 } | |
18 .content { | |
19 font-family: Ahem; | |
20 font-size: 10px; | |
21 -webkit-flow-into: flow; | |
22 } | |
23 #break_after { | |
24 -webkit-region-break-after: always; | |
25 margin-bottom: 100px; | |
26 } | |
27 </style> | |
28 </head> | |
29 <body> | |
30 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=112241"> [C
SS Regions] Break after doesn't work correctly with auto-height regions</a>.</p> | |
31 <p>There are three regions: one with auto-height (red), one with a speci
fied height (blue) and the last one with auto-height (red). The first region con
tains a paragraph with a break after. The last auto-height region should fit the
lorem ipsum content fragment.</p> | |
32 <p>On success, you should not see overflow in the last region.</p> | |
33 <div class="content"> | |
34 <p id="break_after">BreakAfter</p> | |
35 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
tempor est eu turpis tincidunt at sollicitudin felis fermentum. Nullam sollicitu
din eros at elit facilisis condimentum. Ut tempor, nunc at volutpat cursus, sapi
en mi gravida velit, ut ullamcorper felis nunc ac risus. Suspendisse vel eros to
rtor, non cursus metus. Nam hendrerit pharetra sapien, sodales mattis arcu variu
s a. Curabitur non arcu id sem hendrerit tincidunt vel a nisi. Phasellus at erat
nec nunc consectetur posuere. Aliquam consequat tempus pulvinar. Pellentesque u
t sapien quis urna vestibulum dignissim.</p> | |
36 </div> | |
37 <div class="region regionAuto"></div> | |
38 <div class="region regionNonAuto"></div> | |
39 <div class="region regionAuto"></div> | |
40 </body> | |
41 </html> | |
OLD | NEW |