OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 .content { | |
5 font-family: Ahem; | |
6 font-size: 10px; | |
7 } | |
8 | |
9 #content1 { | |
10 -webkit-flow-into: flow1; | |
11 } | |
12 | |
13 #content2 { | |
14 -webkit-flow-into: flow2; | |
15 } | |
16 | |
17 #c1, #c2 { | |
18 border: thin solid black; | |
19 position: relative; | |
20 } | |
21 | |
22 .region1 { | |
23 border: thick solid blue; | |
24 -webkit-flow-from: flow1; | |
25 width: 200px; | |
26 } | |
27 | |
28 .region2 { | |
29 border: thick solid red; | |
30 -webkit-flow-from: flow2; | |
31 width: 200px; | |
32 } | |
33 | |
34 #region1 { | |
35 position: fixed; | |
36 bottom: 200px; | |
37 right: 100px; | |
38 max-height: 100px; | |
39 } | |
40 | |
41 #region2 { | |
42 } | |
43 | |
44 #region3 { | |
45 height: 100%; | |
46 top: 0px; | |
47 left: 220px; | |
48 position: absolute; | |
49 } | |
50 | |
51 #region4 { | |
52 max-height: 200px; | |
53 } | |
54 | |
55 #region5 { | |
56 top: 0px; | |
57 left: 220px; | |
58 height: 100%; | |
59 position: absolute; | |
60 } | |
61 | |
62 #region6 { | |
63 } | |
64 | |
65 #region7 { | |
66 -webkit-region-break-before: always; | |
67 max-height: 100px; | |
68 width: 150px; | |
69 } | |
70 </style> | |
71 <script src="../../../resources/check-layout.js"></script> | |
72 </head> | |
73 <body> | |
74 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=111969">[CSS Re
gions] Nested auto-height regions don't layout correctly</a>.</p> | |
75 <div class="content" id="content1">Lorem ipsum dolor sit amet, consectetur a
dipiscing elit. Aenean urna orci, consequat sed lobortis in, convallis et velit.
Ut elementum lacus ac dui vestibulum eu condimentum mi luctus. Fusce pharetra t
urpis id erat congue nec aliquam leo venenatis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti socios
qu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed egestas ul
trices mauris sed tempor. Maecenas vitae libero ut nisl gravida eleifend blandit
non risus. Fusce gravida venenatis dolor eu imperdiet. | |
76 </div> | |
77 <div class="content" id="content2">Ut at tortor ligula. Cras tempor sem sed
tellus convallis tincidunt eget eget dolor. In facilisis ante at turpis semper s
emper. Fusce dui dolor, rhoncus et cursus in, malesuada in justo. Curabitur vulp
utate aliquet tincidunt. Quisque sit amet massa justo, in bibendum leo. Aliquam
lacinia pharetra justo. Suspendisse rhoncus justo nec diam cursus ullamcorper. N
am porttitor porttitor libero, convallis sollicitudin nunc euismod at. Proin tem
pus auctor turpis ut congue. Nullam ornare interdum eros sed suscipit. Ut at tor
tor ligula. Cras tempor sem sed tellus convallis tincidunt eget eget dolor. | |
78 <div class="region1" id="region7"></div> | |
79 In facilisis ante at turpis semper semper. Fusce dui dolor, rhoncus et cursu
s in, malesuada in justo. Curabitur vulputate aliquet tincidunt. Quisque sit ame
t massa justo, in bibendum leo. Aliquam lacinia pharetra justo. Suspendisse rhon
cus justo nec diam cursus ullamcorper. Nam porttitor porttitor libero, convallis
sollicitudin nunc euismod at. Proin tempus auctor turpis ut congue. Nullam orna
re interdum eros sed suscipit. | |
80 </div> | |
81 <div class="region1" id="region1"></div> | |
82 <div id="c1"> | |
83 <div class="region1" id="region2"></div> | |
84 <div class="region2" id="region3"></div> | |
85 </div> | |
86 <div id="c2" data-expected-height=682> | |
87 <div class="region2" id="region4"></div> | |
88 <div class="region2" id="region5"></div> | |
89 <div class="region2" id="region6"></div> | |
90 </div> | |
91 <script type="text/javascript"> | |
92 checkLayout("#c2"); | |
93 | |
94 var newDiv = document.createElement("div"); | |
95 newDiv.className = "content"; | |
96 var newContent = document.createTextNode("When resizing the window the regio
ns should not change."); | |
97 newDiv.appendChild(newContent); | |
98 containerDiv = document.getElementById("c2"); | |
99 containerDiv.appendChild(newDiv); | |
100 containerDiv.setAttribute("data-expected-height", 682); | |
101 | |
102 checkLayout("#c2"); | |
103 </script> | |
104 </body> | |
105 </html> | |
OLD | NEW |