Google Git
Sign in
webkit / WebKit / 1d2c762592c7d71992189538cb3f38cc38c18ef8 / . / LayoutTests / css3 / flexbox / child-overflow-expected.html
blob: 625472f47f1dfd1612f5be48b1f1c947bb835ea0 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: inline-block;
vertical-align: top;
margin-right: 30px;
width: 100px;
height: 100px;
border: 5px solid pink;
position: relative;
}
.container > div {
overflow: auto;
width: 100px;
height: 100px;
}
.container > div > div {
width: 120px;
height: 120px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
}
p {
margin-bottom: 30px;
}
</style>
</head>
<body>
<p>Scrollbars should work in all the flexboxes. Each row should be aligned
to the same corner.</p>
<div class="container topRight"><div><div></div></div></div>
<div class="container topRight"><div><div></div></div></div>
<div class="container topRight"><div><div></div></div></div>
<div class="container topRight"><div><div></div></div></div>
<br>
<div class="container"><div><div></div></div></div>
<div class="container"><div><div></div></div></div>
<div class="container"><div><div></div></div></div>
<div class="container"><div><div></div></div></div>
<br>
<div class="container"><div><div></div></div></div>
<div class="container"><div><div></div></div></div>
<div class="container"><div><div></div></div></div>
<div class="container"><div><div></div></div></div>
<script>
Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) {
element.firstChild.scrollTop = 1000;
});
Array.prototype.forEach.call(document.querySelectorAll('.topRight'), function(element) {
element.firstChild.scrollLeft = 1000;
});
</script>
</body>
</html>