LayoutTests/compositing/overflow/repaint-after-losing-scrollbars.html - WebKit - Git at Google

 <!DOCTYPE html>
 <!-- there should be four green squares and no visible red -->
 <style>
 .container {
 width: 100px;
 height:100px;
 background-color: green;
 position:absolute;
 -webkit-transform:translateZ(0);
 overflow:auto;
 }

 ::-webkit-scrollbar {
 background-color: red;
 }

 ::-webkit-resizer {
 background-color: red;
 }

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

 .tall {
 height:200px;
 }

 .wide {
 width:200px;
 }

 .resizeWidget {
 resize: both;
 }

 </style>
 <div class="container">
   <div id="vertical" class="content tall"></div>
 </div>
 <div class="container" style="left: 150px">
   <div id="horizontal" class="content wide"></div>
 </div>
 <div class="container" style="left: 300px">
   <div id="both" class="content tall wide"></div>
 </div>
 <div id="corner" class="container resizeWidget" style="left: 450px">
   <div class="content"></div>
 </div>
 <script>
 function finishTest() {
     document.getElementById("vertical").classList.remove("tall"); // topmost div loses a vertical scrollbar
     document.getElementById("horizontal").classList.remove("wide"); // second div loses a horizontal scrollbar
     document.getElementById("both").classList.remove("wide"); // third div loses both
     document.getElementById("both").classList.remove("tall"); // vertical and horizontal scrollbars
     document.getElementById("corner").classList.remove("resizeWidget"); // bottom div loses a resize corner but no scrollbars
 }

 if (window.testRunner) {
     testRunner.dumpAsText(true);
     testRunner.displayAndTrackRepaints(); // Paint once with all overflow controls visible.
     finishTest();
 } else
     window.setTimeout(finishTest, 0);
 </script>
	<!DOCTYPE html>
	<!-- there should be four green squares and no visible red -->
	<style>
	.container {
	width: 100px;
	height:100px;
	background-color: green;
	position:absolute;
	-webkit-transform:translateZ(0);
	overflow:auto;
	}

	::-webkit-scrollbar {
	background-color: red;
	}

	::-webkit-resizer {
	background-color: red;
	}

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

	.tall {
	height:200px;
	}

	.wide {
	width:200px;
	}

	.resizeWidget {
	resize: both;
	}

	</style>
	<div class="container">
	<div id="vertical" class="content tall"></div>
	</div>
	<div class="container" style="left: 150px">
	<div id="horizontal" class="content wide"></div>
	</div>
	<div class="container" style="left: 300px">
	<div id="both" class="content tall wide"></div>
	</div>
	<div id="corner" class="container resizeWidget" style="left: 450px">
	<div class="content"></div>
	</div>
	<script>
	function finishTest() {
	document.getElementById("vertical").classList.remove("tall"); // topmost div loses a vertical scrollbar
	document.getElementById("horizontal").classList.remove("wide"); // second div loses a horizontal scrollbar
	document.getElementById("both").classList.remove("wide"); // third div loses both
	document.getElementById("both").classList.remove("tall"); // vertical and horizontal scrollbars
	document.getElementById("corner").classList.remove("resizeWidget"); // bottom div loses a resize corner but no scrollbars
	}

	if (window.testRunner) {
	testRunner.dumpAsText(true);
	testRunner.displayAndTrackRepaints(); // Paint once with all overflow controls visible.
	finishTest();
	} else
	window.setTimeout(finishTest, 0);
	</script>