<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
    <style>
		.scroller {
			position: relative;
			overflow-y: scroll;
			width: 300px;
			height: 300px;
			border: 1px solid black;
		}
		
		.box {
			position: relative;
			margin: 20px;
		    width: 100px;
		    height: 100px;
		    background-color: green;
		}

		.inside {
			left: 20px;
		}
		
		.negative {
			z-index: -1;
		}

		.outside {
			position: relative;
			margin: 20px;
		    width: 100px;
		    height: 100px;
		    background-color: silver;
		}

		.trigger {
			position: absolute;
            top: 10px;
			left: 10px;
			width: 50px;
			height: 200px;
			background-color: silver;
		    transform: translateZ(0);
		}
    </style>
	<script>
		if (window.testRunner)
			testRunner.dumpAsText();

		window.addEventListener('load', () => {
			if (window.testRunner)
				document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
		}, false);
	</script>
</head>
<body>
	<div class="scroller">
		<div class="trigger"></div>
        <div class="inside box"></div>
        <div class="inside negative box"></div>
        <div class="inside box"></div>
        <div class="inside box"></div>
	</div>
	<div class="outside"></div>
<pre id="layers">Layer tree goes here</pre>
</body>
</html>