blob: 267c2fffac68892d383e72856aa3f28ae267744f [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<title>position:fixed element inside overflow node inside iframe</title>
<style>
iframe {
position: absolute;
border: none;
left: 40px;
top: 50px;
width: 300px;
height: 100px;
}
</style>
<script src="../../../resources/basic-gestures.js"></script>
<script type="text/javascript">
if (window.testRunner)
testRunner.waitUntilDone();
async function runTest() {
var frameBox = document.querySelector("iframe").getBoundingClientRect();
var x = frameBox.left + frameBox.width / 4;
var ystart = frameBox.top + frameBox.height - 2;
var yend = frameBox.top + 2;
if (window.testRunner && testRunner.runUIScript) {
await touchAndDragFromPointToPoint(x, ystart, x, yend);
await liftUpAtPoint(x, ystart, x, yend);
setTimeout(() => { testRunner.notifyDone(); }, 4000);
}
}
</script>
</head>
<body>
<p>The red position:fixed rectangle should not flicker nor disappear when scrolling that iframe.</p>
<iframe srcdoc="
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
overflow-y: auto;
height: 100px;
-webkit-overflow-scrolling: touch;
}
#fixed {
position: fixed;
top: 10px;
right: 0px;
height: 40px;
width: 50%;
background: red;
}
#content {
width: 100%;
height: 1000px;
background: blue;
}
</style>
</head>
<body>
<div id='fixed'></div>
<div id='content'></div>
</body>
</html>" onload="runTest()"></iframe>
</body>
</html>