blob: 26bc83e9a1bd2ef4e5330e718687483c0af955a1 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.region {
-webkit-flow-from: flow;
border: 3px solid blue;
float: left;
}
#region1 {
height: 250px;
}
#region2 {
width: 300px;
height: 200px;
margin-left: 50px;
}
.article {
-webkit-flow-into: flow;
background-color: #009999;
}
#video {
width: 320px;
height: 300px;
background-color: salmon;
border: 3px solid black;
display: inline-block;
}
</style>
</head>
<body>
<a href="https://bugs.webkit.org/show_bug.cgi?id=132601">Bug 132601 - [CSS Regions] Block incorrectly sized when containing an unsplittable box</a>
<p>This test passes if the <span style="color:#00BB00">green text</span> is positioned at the very top of the second <span style="color:blue">region</span>.</p>
<div class="region" id="region1"></div>
<div class="region" id="region2"></div>
<div class="article" id="article1">
<video id="video"></video>
</div>
<div class="article" id="article2">
<div id="after" style="color:#00FF00">This div is flowed after the video element.</div>
</div>
</body>
</html>