LayoutTests/fast/scrolling/ios/overflow-scroll-overlap-2.html - WebKit - Git at Google

 <!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="../../../resources/ui-helper.js"></script>
 <script src="../resources/overflow-scroll-overlap.js"></script>
 <style>
 .case {
     width: 200px;
     height: 200px;
     display: inline-block;
     position: relative;
 }
 .scrollcontent {
     width: 500px;
     height: 500px;
     background: green;
 }

 .overflowscroll {
     overflow: scroll;
     height: 100px;
     width: 100px;
     position: absolute;
     border: 2px solid black;
 }
 .overlapping {
     position:absolute;
     left: 25px;
     top: 25px;
     width: 100px;
     height: 100px;
     background: red;
 }
 .overlapping-empty {
     position:absolute;
     left: 25px;
     top: 25px;
     width: 100px;
     height: 100px;
     background: blue;
 }
 .clip {
     position:absolute;
     width: 100px;
     height: 100px;
     overflow:hidden;
 }
 .large {
     width: 3000px;
     height: 150px;
 }
 #log {
     position:relative;
     white-space: pre;
 }
 </style>
 </head>
 <body onload="runTest()">
 <p>
 Test that scrollable areas with non-trivial overlap are correctly targeted.
 </p>
 <div class="case">
     <div class="overflowscroll target">
         <div class="scrollcontent"></div>
     </div>
     <div class="overlapping" style="visibility:hidden">
     </div>
 </div>

 <div class="case">
     <div class="overflowscroll target">
         <div class="scrollcontent"></div>
     </div>
     <div class="overlapping-empty" style="background-color:transparent">
     </div>
 </div>

 <div class="case">
     <div class="overflowscroll target">
         <div class="scrollcontent"></div>
     </div>
     <div class="overlapping" style="box-shadow: 0px 0px 32px 32px blue; left: 60px; top: 60px">
     </div>
 </div>

 <div class="case">
     <div class="overflowscroll target">
         <div class="scrollcontent"></div>
     </div>
     <div class="overlapping" style="pointer-events:none">
     </div>
 </div>

 <div class="case">
     <div class="overflowscroll target">
         <div class="scrollcontent"></div>
     </div>
     <div class="overlapping" style="top:40px; left:40px; border-radius:50px; line-height:100px">
     </div>
 </div>

 <div id=log></div>

 </body>
 </html>
	<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="../../../resources/ui-helper.js"></script>
	<script src="../resources/overflow-scroll-overlap.js"></script>
	<style>
	.case {
	width: 200px;
	height: 200px;
	display: inline-block;
	position: relative;
	}
	.scrollcontent {
	width: 500px;
	height: 500px;
	background: green;
	}

	.overflowscroll {
	overflow: scroll;
	height: 100px;
	width: 100px;
	position: absolute;
	border: 2px solid black;
	}
	.overlapping {
	position:absolute;
	left: 25px;
	top: 25px;
	width: 100px;
	height: 100px;
	background: red;
	}
	.overlapping-empty {
	position:absolute;
	left: 25px;
	top: 25px;
	width: 100px;
	height: 100px;
	background: blue;
	}
	.clip {
	position:absolute;
	width: 100px;
	height: 100px;
	overflow:hidden;
	}
	.large {
	width: 3000px;
	height: 150px;
	}
	#log {
	position:relative;
	white-space: pre;
	}
	</style>
	</head>
	<body onload="runTest()">
	<p>
	Test that scrollable areas with non-trivial overlap are correctly targeted.
	</p>
	<div class="case">
	<div class="overflowscroll target">
	<div class="scrollcontent"></div>
	</div>
	<div class="overlapping" style="visibility:hidden">
	</div>
	</div>

	<div class="case">
	<div class="overflowscroll target">
	<div class="scrollcontent"></div>
	</div>
	<div class="overlapping-empty" style="background-color:transparent">
	</div>
	</div>

	<div class="case">
	<div class="overflowscroll target">
	<div class="scrollcontent"></div>
	</div>
	<div class="overlapping" style="box-shadow: 0px 0px 32px 32px blue; left: 60px; top: 60px">
	</div>
	</div>

	<div class="case">
	<div class="overflowscroll target">
	<div class="scrollcontent"></div>
	</div>
	<div class="overlapping" style="pointer-events:none">
	</div>
	</div>

	<div class="case">
	<div class="overflowscroll target">
	<div class="scrollcontent"></div>
	</div>
	<div class="overlapping" style="top:40px; left:40px; border-radius:50px; line-height:100px">
	</div>
	</div>

	<div id=log></div>

	</body>
	</html>