outline-change-in-scrollers.html | Explore in Territory

<!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>

chromium/third_party/blink/web_tests/paint/invalidation/scroll/outline-change-in-scrollers.html