<html>
<head>
    <style>
        #content1 {
            -webkit-flow-into: flow1;
        }

        #content2 {
            -webkit-flow-into: flow2;
        }

        .region1 {
            border: thick solid blue;
            -webkit-flow-from: flow1;
        }

        .region2 {
            border: thick solid red;
            -webkit-flow-from: flow2;
            max-height: 50px;
        }

        #region1 {
            width: 400px;
        }

        #region2 {
            width: 300px;
        }

        .region_container {
            border: thin solid black;
            overflow: auto;
            padding: 10px;
        }
    </style>
    <script src="../../../resources/js-test-pre.js"></script>
    <script src="../../scrolling/resources/scrollable-area.js"></script>
</head>
<body onload="runTest(1)">
    <p>Test that nested regions correctly propagate overflow</p>
    <p>On success, there should be a vertical scrollbar on the regions container.</p>
    <div class="content" id="content1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean urna orci, consequat sed lobortis in, convallis et velit. Ut elementum lacus ac dui vestibulum eu condimentum mi luctus. Fusce pharetra turpis id erat congue nec aliquam leo venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<div class="region2" id="region2"></div>
    </div>
    <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 semper. Fusce dui dolor, rhoncus et cursus in, malesuada in justo. Curabitur vulputate aliquet tincidunt. Quisque sit amet massa justo, in bibendum leo. Aliquam lacinia pharetra justo. Suspendisse rhoncus justo nec diam cursus ullamcorper. Nam porttitor porttitor libero, convallis sollicitudin nunc euismod at. Proin tempus auctor turpis ut congue. Nullam ornare interdum eros sed suscipit.
    </div>
    <div class="region_container">
        <div class="region1" id="region1"></div>
    </div>
    <div id="console"></div>
</body>
</html>