mirror of
https://github.com/servo/servo.git
synced 2025-06-26 10:04:33 +01:00
70 lines
1.4 KiB
HTML
70 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.test-row {
|
|
display: flex;
|
|
margin-bottom: 5px;
|
|
}
|
|
.test-row > div {
|
|
flex: none;
|
|
}
|
|
|
|
.container {
|
|
margin-right: 5px;
|
|
border: 5px solid lightgreen;
|
|
width: 100px;
|
|
}
|
|
|
|
.flexbox {
|
|
display: block;
|
|
height: 100px;
|
|
width: 100px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.flexbox > div {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(at right 60%, red, yellow, green);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Scrollbars should work in all the flexboxes.</p>
|
|
</body>
|
|
<script>
|
|
var results = [
|
|
'left top', 'left top', 'right top', 'left bottom',
|
|
'right top', 'right top', 'right bottom', 'left top',
|
|
'left top', 'left top', 'left bottom', 'right top'];
|
|
|
|
var testContents = '';
|
|
for (var i = 0; i < results.length; ++i) {
|
|
if (!(i % 4))
|
|
testContents += "<div class='test-row'>";
|
|
|
|
var containerClass = 'container ' + results[i];
|
|
testContents +=
|
|
"<div class='" + containerClass + "'>" +
|
|
"<div class='flexbox'>" +
|
|
"<div></div>" +
|
|
"</div>" +
|
|
"</div>";
|
|
if (i % 4 == 3)
|
|
testContents += "</div>";
|
|
}
|
|
|
|
document.body.innerHTML += testContents;
|
|
|
|
Array.prototype.forEach.call(document.querySelectorAll(".right"), function(element) {
|
|
element.firstChild.scrollLeft = 1000;
|
|
});
|
|
|
|
Array.prototype.forEach.call(document.querySelectorAll(".bottom"), function(element) {
|
|
element.firstChild.scrollTop = 1000;
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|