blob: 626fe9eed9e2e91b3904d7f8eff2aecb4bb3ddc9 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Scrollbar overflow test</title>
<style>
body { width: 333px; }
#grid {
overflow-y: scroll;
flex: 1;
display: flex;
}
#grid::-webkit-scrollbar {
height: 10px;
width: 10px;
}
#grid::-webkit-scrollbar-thumb {
background-color: red;
border-width: 4px;
}
#rows {
flex: 1;
height: 100%;
position: relative;
}
.row {
background: blue;
height: 50px;
}
#cols {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.col {
flex: 1;
}
</style>
</head>
<body>
<div id="grid">
<div id="rows">
<div class="row"></div>
<div id="cols">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<p>
Tests that subpixel accumulation works for flexbox and that
scrollbars do not show unnecessarily. No red should show up above.
</p>
</body>
<html>