| <!DOCTYPE html> |
| <html style="font: 16px/1.25 monospace; font-family: Ahem"> |
| <head> |
| <script type="text/javascript"> |
| onload = function() |
| { |
| document.getElementById("region").scrollLeft = 10000; |
| } |
| </script> |
| |
| <style> |
| html { |
| -webkit-writing-mode: vertical-lr; |
| } |
| |
| #container { |
| width: 300px; |
| overflow: visible; |
| } |
| |
| #region { |
| width: 400px; |
| height: 300px; |
| border: thick solid blue; |
| padding: 50px; |
| padding-bottom: 40px; |
| overflow: scroll; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div style="font-family: Arial"> |
| <a style="font-size: 14px" href="https://bugs.webkit.org/show_bug.cgi?id=129487">[CSS Regions] The height of a scrollable element flowed inside a scrollable region is not computed correctly</a> |
| <p>This test passes if the <span style="color:blue">region</span> properly scrolls its content to the bottom, the <span style="color:green">green</span> word at the end of the text is visible and there is no more white space after that last line.</p> |
| </div> |
| |
| <div id="region"> |
| <div id="container"> |
| <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem.</div> |
| <div style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span style="color:green">END</span></div> |
| </div> |
| </div> |
| </body> |
| </html> |
