chromium/src/third_party/blink/web_tests/paint/invalidation/scroll/outline-change-in-scrollers.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE HTML>
 <script src="../resources/text-based-repaint.js"></script>
 <script>
 function repaintTest() {
 	document.querySelectorAll('.target').forEach(function(target) {
 		target.style.outline = 'solid black 20px';
 	});
 }
 onload = runRepaintAndPixelTest;
 </script>
 <style>
 .scroll {
   position: relative;
   width: 100px;
   height: 100px;
   display: inline-block;
   border: 10px solid blue;
   overflow: scroll;
   padding: 5px;
 }
 .target {
   width: 50px;
   height: 50px;
   outline: solid black 10px;
 }
 .space {
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   height: 150px;
 }
 </style>
 <div class="scroll">
   <div class="target"></div>
   <div class="space"></div>
 </div>
 <div class="scroll" style="writing-mode: vertical-rl">
   <div class="target"></div>
   <div class="space"></div>
 </div>
 <div class="scroll" style="writing-mode: vertical-lr">
   <div class="target"></div>
   <div class="space"></div>
 </div>
 <br>
 <div class="scroll" style="direction: rtl">
   <div class="target"></div>
   <div class="space"></div>
 </div>
 <div class="scroll" style="direction: rtl; writing-mode: vertical-rl">
   <div class="target"></div>
   <div class="space"></div>
 </div>
 <div class="scroll" style="direction: rtl; writing-mode: vertical-lr">
   <div class="target"></div>
   <div class="space"></div>
 </div>
	<!DOCTYPE HTML>
	<script src="../resources/text-based-repaint.js"></script>
	<script>
	function repaintTest() {
	document.querySelectorAll('.target').forEach(function(target) {
	target.style.outline = 'solid black 20px';
	});
	}
	onload = runRepaintAndPixelTest;
	</script>
	<style>
	.scroll {
	position: relative;
	width: 100px;
	height: 100px;
	display: inline-block;
	border: 10px solid blue;
	overflow: scroll;
	padding: 5px;
	}
	.target {
	width: 50px;
	height: 50px;
	outline: solid black 10px;
	}
	.space {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	}
	</style>
	<div class="scroll">
	<div class="target"></div>
	<div class="space"></div>
	</div>
	<div class="scroll" style="writing-mode: vertical-rl">
	<div class="target"></div>
	<div class="space"></div>
	</div>
	<div class="scroll" style="writing-mode: vertical-lr">
	<div class="target"></div>
	<div class="space"></div>
	</div>
	<br>
	<div class="scroll" style="direction: rtl">
	<div class="target"></div>
	<div class="space"></div>
	</div>
	<div class="scroll" style="direction: rtl; writing-mode: vertical-rl">
	<div class="target"></div>
	<div class="space"></div>
	</div>
	<div class="scroll" style="direction: rtl; writing-mode: vertical-lr">
	<div class="target"></div>
	<div class="space"></div>
	</div>