| 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: 200px; } | |
| 7 .region { -webkit-flow-from: flow; } | |
| 8 #region1 { width: 200px; height: auto; background-color: orange; } | |
| 9 #region2 { width: 200px; position: absolute; height: 100%; left: 250
px; top: 0px; background-color: green; } | |
| 10 #region3 { width: 200px; height: auto; position: absolute; left: 500
px; top: 200px; 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, orange region and blue region ha
ve auto height, green region's height depends on orange region's height.</p> | |
| 18 <p>The test passes if all regions have the same height.</p> | |
| 19 <div id="content"> | |
| 20 <p style="-webkit-region-break-after: always; color: orange;"> | |
| 21 Content in region1. | |
| 22 Content in region1. | |
| 23 Content in region1. | |
| 24 Content in region1. | |
| 25 Content in region1 | |
| 26 </p> | |
| 27 <p style="color:green;"> | |
| 28 Content in region2. | |
| 29 Content in region2. | |
| 30 Content in region2. | |
| 31 Content in region2. | |
| 32 Content in region2. | |
| 33 </p> | |
| 34 </div> | |
| 35 <div id="regionsContainer"> | |
| 36 <!-- Orange region, first region in chain, has auto height --> | |
| 37 <div id="region1" class="region"></div> | |
| 38 <!-- Green region, second region in chain, its height depends on ora
nge region's height --> | |
| 39 <div id="region2" class="region"></div> | |
| 40 </div> | |
| 41 <!-- Blue region, third region in chain, has auto height --> | |
| 42 <div id="region3" class="region" data-expected-height=100></div> | |
| 43 <script type="text/javascript"> | |
| 44 document.body.offsetTop; | |
| 45 // Max height change determines layout for blue region. | |
| 46 // The value is big enough to accomodate the second p. | |
| 47 document.getElementById("region3").style.maxHeight = "200px"; | |
| 48 </script> | |
| 49 </body> | |
| 50 </html> | |
| 51 | |
| OLD | NEW |