third_party/blink/web_tests/scrollbars/custom-scrollbar-thumb-inactive-pseudo.html - chromium/src - Git at Google

 <!DOCTYPE HTML>
 <style>
 ::-webkit-scrollbar {
     width: 12px;
     height: 12px;
 }
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     -webkit-border-radius: 10px;
     border-radius: 10px;
 }
 ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 10px;
     border-radius: 10px;
     background: rgba(255,0,0,0.8);
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
 }
 ::-webkit-scrollbar-thumb:window-inactive {
     background: rgba(255,150,250,0.8);
 }
 html {
     overflow: scroll;
 }
 body {
     width: 1000px;
     height: 1000px;
 }
 div {
     width: 100px;
     height: 100px;
     overflow: scroll;
 }
 </style>
 <body>
 <iframe src="resources/scrollable-iframe-customscrollbar.html"></iframe>
 <div><p style="width:200px;height:200px"></p></div>
 <div><p style="width:200px;height:200px"></p></div>
 </body>
 <script>
 window.onload = function() {
 if (window.testRunner)
     testRunner.setWindowFocus(false);
 }
 </script>
	<!DOCTYPE HTML>
	<style>
	::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	}
	::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-border-radius: 10px;
	border-radius: 10px;
	}
	::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: rgba(255,0,0,0.8);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
	}
	::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,150,250,0.8);
	}
	html {
	overflow: scroll;
	}
	body {
	width: 1000px;
	height: 1000px;
	}
	div {
	width: 100px;
	height: 100px;
	overflow: scroll;
	}
	</style>
	<body>
	<iframe src="resources/scrollable-iframe-customscrollbar.html"></iframe>
	<div><p style="width:200px;height:200px"></p></div>
	<div><p style="width:200px;height:200px"></p></div>
	</body>
	<script>
	window.onload = function() {
	if (window.testRunner)
	testRunner.setWindowFocus(false);
	}
	</script>