mirror of
https://github.com/servo/servo.git
synced 2025-06-26 01:54:33 +01:00
87 lines
1.9 KiB
HTML
87 lines
1.9 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);
|
|
}
|
|
|
|
.vertical-rl {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
|
|
</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];
|
|
|
|
// Use vertical-rl here because Firefox and WebKit put vertical scrollbars
|
|
// on the left in the vertical-rl test cases, and this is the easiest way to
|
|
// match that.
|
|
let maybe_vertical = "";
|
|
if (i > 3 && i < 8)
|
|
maybe_vertical = " vertical-rl";
|
|
|
|
testContents +=
|
|
"<div class='" + containerClass + "'>" +
|
|
"<div class='flexbox" + maybe_vertical + "'>" +
|
|
"<div></div>" +
|
|
"</div>" +
|
|
"</div>";
|
|
if (i % 4 == 3)
|
|
testContents += "</div>";
|
|
}
|
|
|
|
document.body.innerHTML += testContents;
|
|
|
|
Array.prototype.forEach.call(document.querySelectorAll(".left"), function(element) {
|
|
element.firstChild.scrollLeft = -1000;
|
|
});
|
|
|
|
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>
|