LayoutTests/compositing/overflow/content-gains-scrollbars.html - WebKit - Git at Google

 <!DOCTYPE html>
 <style>
 .container {
 width: 100px;
 height:100px;
 position:absolute;
 -webkit-transform:translateZ(0);
 overflow:auto;
 }

 .content {
 -webkit-transform: translateZ(0);
 position:absolute;
 width:10px;
 height:10px;
 }

 .tall {
 height:200px;
 }

 .wide {
 width:200px;
 }

 .resizeWidget {
 resize: both;
 }

 </style>
 <pre id="layerTree"></pre>
 <div class="container">
   <div id="vertical" class="content"></div>
 </div>
 <div class="container">
   <div id="horizontal" class="content"></div>
 </div>
 <div class="container">
   <div id="both" class="content"></div>
 </div>
 <div id="corner" class="container">
   <div class="content"></div>
 </div>
 <script>
 function finishTest() {
     document.getElementById("vertical").classList.add("tall"); // topmost div gets a vertical scrollbar
     document.getElementById("horizontal").classList.add("wide"); // second div gets a horizontal scrollbar
     document.getElementById("both").classList.add("wide"); // third div gets both
     document.getElementById("both").classList.add("tall"); // vertical and horizontal scrollbars
     document.getElementById("corner").classList.add("resizeWidget"); // bottom div gets a resize corner but no scrollbars
     if (window.testRunner) {
         testRunner.display(); // Ensure compositor tree is up to date.
         document.getElementById("layerTree").innerText = window.internals.layerTreeAsText(document);
     }
 }

 if (window.testRunner) {
     testRunner.dumpAsText();
     testRunner.display(); // Force compositor state to be updated before the container needs any overflow controls
     finishTest();
 } else
     window.setTimeout(finishTest, 0);
 </script>
	<!DOCTYPE html>
	<style>
	.container {
	width: 100px;
	height:100px;
	position:absolute;
	-webkit-transform:translateZ(0);
	overflow:auto;
	}

	.content {
	-webkit-transform: translateZ(0);
	position:absolute;
	width:10px;
	height:10px;
	}

	.tall {
	height:200px;
	}

	.wide {
	width:200px;
	}

	.resizeWidget {
	resize: both;
	}

	</style>
	<pre id="layerTree"></pre>
	<div class="container">
	<div id="vertical" class="content"></div>
	</div>
	<div class="container">
	<div id="horizontal" class="content"></div>
	</div>
	<div class="container">
	<div id="both" class="content"></div>
	</div>
	<div id="corner" class="container">
	<div class="content"></div>
	</div>
	<script>
	function finishTest() {
	document.getElementById("vertical").classList.add("tall"); // topmost div gets a vertical scrollbar
	document.getElementById("horizontal").classList.add("wide"); // second div gets a horizontal scrollbar
	document.getElementById("both").classList.add("wide"); // third div gets both
	document.getElementById("both").classList.add("tall"); // vertical and horizontal scrollbars
	document.getElementById("corner").classList.add("resizeWidget"); // bottom div gets a resize corner but no scrollbars
	if (window.testRunner) {
	testRunner.display(); // Ensure compositor tree is up to date.
	document.getElementById("layerTree").innerText = window.internals.layerTreeAsText(document);
	}
	}

	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.display(); // Force compositor state to be updated before the container needs any overflow controls
	finishTest();
	} else
	window.setTimeout(finishTest, 0);
	</script>