OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #content { -webkit-flow-into: flow; font: 16px/1.25 monospace; } | |
6 #regionsContainer { position: absolute; width: 250px; top: 250px; le
ft: 250px; } | |
7 .region { -webkit-flow-from: flow; } | |
8 #region1 { width: 200px; height: 100px; top: 250px; position: absolu
te; background-color: orange; } | |
9 #region2 { width: 200px; height: auto; left: 0px; top: 0px; backgrou
nd-color: green; } | |
10 #region3 { width: 200px; height: 100%; position: absolute; left: 250
px; top: 0px; background-color: blue; } | |
11 p { margin: 0; } | |
12 </style> | |
13 </head> | |
14 <script src="../../../resources/check-layout.js"></script> | |
15 <body onload="checkLayout('#region3')"> | |
16 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=103738">Web
Kit Bug 103738</a> [CSS Regions] min-max height will not trigger a relayout when
set on a region with auto-height</p> | |
17 <p>The test flows content in 3 regions, green region has auto height, bl
ue region's height depends on green region's height.</p> | |
18 <p>The test passes if the height of blue region equals the height of gre
en region.</p> | |
19 <div id="content"> | |
20 <p style="-webkit-region-break-after: always;"> | |
21 <span style="color: orange;">Content in region.</span> | |
22 <span style="color: orange;">Content in region.</span> | |
23 <span style="color: green;">Content in region.</span> | |
24 <span style="color: green;">Content in region.</span> | |
25 <span style="color: green;">Content in region.</span> | |
26 <span style="color: green;">Content in region.</span> | |
27 <span style="color: green;">Content in region.</span> | |
28 </p> | |
29 </div> | |
30 <!-- Orange region, first region in chain --> | |
31 <div id="region1" class="region"></div> | |
32 <div id="regionsContainer" class="container"> | |
33 <!-- Green region, second region in chain, auto height --> | |
34 <div id="region2" class="region"></div> | |
35 <!-- Blue region, third region in chain, its height depends on green
region's height --> | |
36 <div id="region3" class="region" data-expected-height=100></div> | |
37 </div> | |
38 <script type="text/javascript"> | |
39 document.body.offsetTop; | |
40 document.getElementById("region1").style.height = "50px"; | |
41 </script> | |
42 </body> | |
43 </html> | |
44 | |
OLD | NEW |