76 lines
1.9 KiB
HTML
76 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
width: 2000px;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
height: 450px;
|
|
width: 800px;
|
|
margin: 20px auto;
|
|
background-color: #eee;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
width: 200px;
|
|
height: 100%;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.sticky {
|
|
position: sticky;
|
|
display: inline-block;
|
|
background: silver;
|
|
margin: 4px;
|
|
height: 60px;
|
|
width: 300px;
|
|
}
|
|
|
|
.box {
|
|
display: none;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
<script>
|
|
if (window.testRunner) {
|
|
testRunner.waitUntilDone();
|
|
testRunner.dumpAsText();
|
|
}
|
|
|
|
function doScroll()
|
|
{
|
|
window.setTimeout(function() {
|
|
window.scrollTo(800, 0);
|
|
if (window.testRunner) {
|
|
document.getElementById('results').innerText = window.internals.scrollingStateTreeAsText();
|
|
testRunner.notifyDone();
|
|
}
|
|
}, 10);
|
|
}
|
|
|
|
window.addEventListener('load', doScroll, false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="left"></div>
|
|
<div class="horizontal sticky" style="left: 20px">Left sticky <div class="composited box"></div></div>
|
|
<div class="horizontal sticky" style="right: 20px">Right sticky <div class="composited box"></div></div>
|
|
<div class="horizontal sticky" style="left: 20%">Left % sticky <div class="composited box"></div></div>
|
|
<div class="horizontal sticky" style="right: 20%">Right % sticky <div class="composited box"></div></div>
|
|
|
|
<div class="horizontal sticky" style="left: 20px; right: 20px">Left and Right <div class="composited box"></div></div>
|
|
<div class="horizontal sticky" style="left: 20%; right: 20%">Left and Right %<div class="composited box"></div></div>
|
|
</div>
|
|
<pre id="results"></pre>
|
|
</body>
|
|
</html>
|