1<!doctype html>
2<html>
3 <head>
4 <style>
5 .container { position: relative; width: 100px; height: 100px; }
6 .region { -webkit-flow-from: flow; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: green; }
7 .redBox { position: absolute; background-color: red; }
8
9 #red1 { width: 100px; height: 100px; }
10
11 #red2 { width: 50px; height: 100px; }
12 #region2 { width: 50px; }
13
14 #red3 { width: 100px; height: 50px; }
15 #region3 { height: 50px; }
16
17 #red4 { width: 50px; height: 50px; }
18 #region4 { width: 50px; height: 50px; }
19 </style>
20 </head>
21 <script src="../../resources/check-layout.js"></script>
22 <body onload="checkLayout('.region')">
23 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=102385"> [CSS Regions] Absolutely positioned region does not expand to fill its container</a>.</p>
24 <p>On success, you should not see any red or FAIL below.</p>
25 <div class="container">
26 <div id="red1" class="redBox"></div>
27 <div id="region1" class="region" data-expected-width=100 data-expected-height=100></div>
28 </div>
29
30 <div class="container">
31 <div id="red2" class="redBox"></div>
32 <div id="region2" class="region" data-expected-width=50 data-expected-height=100></div>
33 </div>
34
35 <div class="container">
36 <div id="red3" class="redBox"></div>
37 <div id="region3" class="region" data-expected-width=100 data-expected-height=50></div>
38 </div>
39
40 <div class="container">
41 <div id="red4" class="redBox"></div>
42 <div id="region4" class="region" data-expected-width=50 data-expected-height=50></div>
43 </div>
44 </body>
45</html>